p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 2.4 beat versio

This commit is contained in:
2912401452 2021-05-27 19:55:06 +08:00
parent b7d2b5b153
commit 479b803404
14 changed files with 483 additions and 457 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
docs/api/scene.zh.md
View File

@ -173,6 +173,7 @@ L7 Logo 的显示位置 默认左下角
增加图层对象 增加图层对象
参数 : 参数 :
- `layer` {ILayer} 图层对象 - `layer` {ILayer} 图层对象
```javascript ```javascript
@ -184,10 +185,13 @@ scene.addLayer(layer);
获取对应的图层对象 获取对应的图层对象
参数 : 参数 :
- `id` {string} - `id` {string}
```javascript ```javascript
scene.getLayer('layerID'); scene.getLayer('layerID');
``` ```
### getLayers() 获取所有的地图图层 ### getLayers() 获取所有的地图图层
获取所有的地图图层 获取所有的地图图层
@ -208,7 +212,6 @@ scene.getLayers();
scene.getLayerByName(name); // return Layer 图层对象 scene.getLayerByName(name); // return Layer 图层对象
``` ```
### removeLayer 移除 layer 图层 ### removeLayer 移除 layer 图层
移除 layer 图层 移除 layer 图层
@ -261,17 +264,16 @@ scene.removeControl(ctl);
- `name` { string } - `name` { string }
```javascript ```javascript
const zoomControl = new Zoom({ // zoom 控件 const zoomControl = new Zoom({
// zoom 控件
name: 'z1', // 用户传入的控件名称（也可以不传入，该控件默认名称为 zoom） name: 'z1', // 用户传入的控件名称（也可以不传入，该控件默认名称为 zoom）
position: 'topright' position: 'topright',
}); });
scene.getControlByName('z1'); scene.getControlByName('z1');
``` ```
## 标记方法 ## 标记方法
### addMarker(maker) 添加标记 ### addMarker(maker) 添加标记
@ -284,12 +286,13 @@ scene.getControlByName('z1');
```javascript ```javascript
const marker = new Marker({ const marker = new Marker({
element: el element: el,
}).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }); }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
scene.addMarker(marker); scene.addMarker(marker);
``` ```
### addMarkerLayer(layer) 添加 Marker 统一管理图层 ### addMarkerLayer(layer) 添加 Marker 统一管理图层
当用户需要添加许多个 Marker 实例时，为了方便管理可以使用 markerLayer 对象统一管理 当用户需要添加许多个 Marker 实例时，为了方便管理可以使用 markerLayer 对象统一管理
参数 : 参数 :
@ -300,6 +303,7 @@ scene.addMarker(marker);
const markerLayer = new MarkerLayer(); const markerLayer = new MarkerLayer();
scene.addMarkerLayer(markerLayer); scene.addMarkerLayer(markerLayer);
``` ```
[示例地址](/zh/examples/point/marker#markerlayer) [示例地址](/zh/examples/point/marker#markerlayer)
### removeMarkerLayer(layer) 移除标签图层 ### removeMarkerLayer(layer) 移除标签图层
@ -334,7 +338,6 @@ scene.getZoom();
return {float}   当前缩放等级 return {float}   当前缩放等级
### getCenter() 获取地图中心 ### getCenter() 获取地图中心
获取地图中心点 获取地图中心点
@ -518,7 +521,6 @@ scene.fitBounds([
]); ]);
``` ```
### exportMap 导出地图图片 ### exportMap 导出地图图片
导出地图，目前仅支持导出可视化层，不支持底图导出 导出地图，目前仅支持导出可视化层，不支持底图导出
@ -536,6 +538,7 @@ scene 销毁方法，离开页面，或者不需要使用地图可以调用
```javascript ```javascript
scene.destroy(); scene.destroy();
``` ```
## iconfont 映射支持 ## iconfont 映射支持
### addIconFont(name, fontUnicode) 增加对数据中 unicode 的映射支持 ### addIconFont(name, fontUnicode) 增加对数据中 unicode 的映射支持
@ -548,20 +551,23 @@ scene.destroy();
- `fontUnicode` {string} - `fontUnicode` {string}
```javascript ```javascript
scene.addIconFont("icon1", "") scene.addIconFont('icon1', '');
scene.addIconFont("icon2", "") scene.addIconFont('icon2', '');
scene.addFontFace(fontFamily, fontPath); scene.addFontFace(fontFamily, fontPath);
const pointIconFontLayer = new PointLayer({}) const pointIconFontLayer = new PointLayer({})
.source( .source(
[{ [
{
j: 140, j: 140,
w: 34, w: 34,
m: 'icon1', m: 'icon1',
},{ },
{
j: 140, j: 140,
w: 36, w: 36,
m: 'icon2', m: 'icon2',
}], },
],
{ {
parser: { parser: {
type: 'json', type: 'json',
@ -578,7 +584,7 @@ scene.destroy();
iconfont: true, iconfont: true,
textAllowOverlap: true, textAllowOverlap: true,
}); });
scene.addLayer(pointIconFontLayer); scene.addLayer(pointIconFontLayer);
``` ```
### addIconFonts(options) 同时传入多组 name - unicode 的键值对 ### addIconFonts(options) 同时传入多组 name - unicode 的键值对
@ -586,14 +592,16 @@ scene.destroy();
同时传入多组 name - unicode 的键值对 同时传入多组 name - unicode 的键值对
参数 : 参数 :
- `options` { Array<[name, unicode]> } - `options` { Array<[name, unicode]> }
```javascript ```javascript
scene.addIconFonts([ scene.addIconFonts([
['icon1', '&#xe64b;'], ['icon1', '&#xe64b;'],
['icon2', '&#xe64c;'], ['icon2', '&#xe64c;'],
]); ]);
``` ```
## 全局资源 ## 全局资源
### addImage(id, img) 全局中添加的图片资源 ### addImage(id, img) 全局中添加的图片资源
@ -601,11 +609,17 @@ scene.destroy();
在 L7 的图层对象可以使用在 scene 全局中添加的图片资源 在 L7 的图层对象可以使用在 scene 全局中添加的图片资源
参数 : 参数 :
- `id` {string} - `id` {string}
- `img` {HTMLImageElement | File | string} - `img` {HTMLImageElement | File | string}
```javascript ```javascript
scene.addImage('02', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg'); scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
``` ```
[示例地址](/zh/examples/gallery/animate#animate_path_texture) [示例地址](/zh/examples/gallery/animate#animate_path_texture)
### hasImage(id) 判断全局图片资源 ### hasImage(id) 判断全局图片资源
@ -613,9 +627,11 @@ scene.addImage('02', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-41
判断是否已经在全局添加过相应的图片资源 判断是否已经在全局添加过相应的图片资源
参数 : 参数 :
- `id` {string} - `id` {string}
```javascript ```javascript
scene.hasImage('imageID') scene.hasImage('imageID');
``` ```
### removeImage(id) 全局删除图片资源 ### removeImage(id) 全局删除图片资源
@ -623,9 +639,11 @@ scene.hasImage('imageID')
从全局删除对应的图片资源 从全局删除对应的图片资源
参数 : 参数 :
- `id` {string} - `id` {string}
```javascript ```javascript
scene.removeImage('imageID') scene.removeImage('imageID');
``` ```
### addFontFace(fontFamily, fontPath) 添加字体文件 ### addFontFace(fontFamily, fontPath) 添加字体文件
@ -633,11 +651,14 @@ scene.removeImage('imageID')
添加字体文件 添加字体文件
参数 : 参数 :
- `fontFamily` {string} 用户为自己定义的字体名称 - `fontFamily` {string} 用户为自己定义的字体名称
- `fontPath` {string} 导入的文件地址 - `fontPath` {string} 导入的文件地址
```javascript ```javascript
let fontFamily = 'iconfont'; let fontFamily = 'iconfont';
let fontPath = '//at.alicdn.com/t/font_2534097_iiet9d3nekn.woff2?t=1620444089776'; let fontPath =
'//at.alicdn.com/t/font_2534097_iiet9d3nekn.woff2?t=1620444089776';
scene.addFontFace(fontFamily, fontPath); scene.addFontFace(fontFamily, fontPath);
``` ```

6
examples/gallery/animate/demo/animate_path_texture.js
View File

@ -13,7 +13,7 @@ const scene = new Scene({
scene.on('loaded', () => { scene.on('loaded', () => {
scene.addImage( scene.addImage(
'02', '02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg'
); );
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json' 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
@ -33,8 +33,8 @@ scene.on('loaded', () => {
}) })
.style({ .style({
lineTexture: true, // 开启线的贴图功能 lineTexture: true, // 开启线的贴图功能
iconStep: 100, // 设置贴图纹理的间距 iconStep: 100 // 设置贴图纹理的间距
}) });
scene.addLayer(layer); scene.addLayer(layer);
}); });
}); });

4
examples/line/path/demo/road_red.js
View File

@ -9,12 +9,12 @@ import {
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
center: [116.3956, 39.9392], center: [ 116.3956, 39.9392 ],
pitch: 0, pitch: 0,
zoom: 10, zoom: 10,
rotation: 0, rotation: 0,
style: 'amap://styles/light', style: 'amap://styles/light',
viewMode: '2D', viewMode: '2D'
}) })
}); });
scene.on('loaded', () => { scene.on('loaded', () => {

46
examples/point/image/demo/road.js
View File

@ -4,18 +4,18 @@ import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
center: [120.115, 30.221], center: [ 120.115, 30.221 ],
pitch: 40, pitch: 40,
zoom: 16, zoom: 16,
viewMode: '3D', viewMode: '3D'
}) })
}); });
scene.on('loaded', () => { scene.on('loaded', () => {
fetch( fetch(
'https://gw.alipayobjects.com/os/bmw-prod/91d27a97-869a-459b-a617-498dcc9c3e7f.json', 'https://gw.alipayobjects.com/os/bmw-prod/91d27a97-869a-459b-a617-498dcc9c3e7f.json'
) )
.then((res) => res.json()) .then(res => res.json())
.then((data) => { .then(data => {
scene.addImage( scene.addImage(
'road', 'road',
@ -31,60 +31,60 @@ scene.on('loaded', () => {
.animate({ .animate({
interval: 1, // 间隔 interval: 1, // 间隔
duration: 1, // 持续时间，延时 duration: 1, // 持续时间，延时
trailLength: 2, // 流线长度 trailLength: 2 // 流线长度
}) })
.style({ .style({
lineTexture: true, // 开启线的贴图功能 lineTexture: true, // 开启线的贴图功能
iconStep: 200, // 设置贴图纹理的间距 iconStep: 200 // 设置贴图纹理的间距
}); });
scene.addLayer(layer); scene.addLayer(layer);
scene.addImage( scene.addImage(
'start', 'start',
'https://gw.alipayobjects.com/zos/bmw-prod/ebb0af57-4a8a-46e0-a296-2d51f9fa8007.svg', 'https://gw.alipayobjects.com/zos/bmw-prod/ebb0af57-4a8a-46e0-a296-2d51f9fa8007.svg'
); );
scene.addImage( scene.addImage(
'visitor', 'visitor',
'https://gw.alipayobjects.com/zos/bmw-prod/64db255d-b636-4929-b072-068e75178b23.svg', 'https://gw.alipayobjects.com/zos/bmw-prod/64db255d-b636-4929-b072-068e75178b23.svg'
); );
scene.addImage( scene.addImage(
'museum', 'museum',
'https://gw.alipayobjects.com/zos/bmw-prod/0630591d-64db-4057-a04d-d65f43aebf0f.svg', 'https://gw.alipayobjects.com/zos/bmw-prod/0630591d-64db-4057-a04d-d65f43aebf0f.svg'
); );
scene.addImage( scene.addImage(
'supermarket', 'supermarket',
'https://gw.alipayobjects.com/zos/bmw-prod/ab42799d-dea6-4d37-bd62-3ee3e06bf6c0.svg', 'https://gw.alipayobjects.com/zos/bmw-prod/ab42799d-dea6-4d37-bd62-3ee3e06bf6c0.svg'
); );
scene.addImage( scene.addImage(
'tower', 'tower',
'https://gw.alipayobjects.com/zos/bmw-prod/6d27cf89-638c-432b-a8c4-cac289ee98a8.svg', 'https://gw.alipayobjects.com/zos/bmw-prod/6d27cf89-638c-432b-a8c4-cac289ee98a8.svg'
); );
scene.addImage( scene.addImage(
'end', 'end',
'https://gw.alipayobjects.com/zos/bmw-prod/59717737-5652-479f-9e6b-e7d2c5441446.svg', 'https://gw.alipayobjects.com/zos/bmw-prod/59717737-5652-479f-9e6b-e7d2c5441446.svg'
); );
const imageLayer = new PointLayer() const imageLayer = new PointLayer()
.source([{ .source([{
lng: 120.11025885601617, lng: 120.11025885601617,
lat: 30.22006389085372, lat: 30.22006389085372,
icon: 'start' icon: 'start'
},{ }, {
lng: 120.11123578376913, lng: 120.11123578376913,
lat: 30.220443561196277, lat: 30.220443561196277,
icon: 'visitor' icon: 'visitor'
},{ }, {
lng: 120.11408457779198, lng: 120.11408457779198,
lat: 30.22019805564678, lat: 30.22019805564678,
icon: 'museum' icon: 'museum'
},{ }, {
lng: 120.11683172384723, lng: 120.11683172384723,
lat: 30.21875509667716, lat: 30.21875509667716,
icon: 'supermarket' icon: 'supermarket'
},{ }, {
lng: 120.11945546294194, lng: 120.11945546294194,
lat: 30.218724022876376, lat: 30.218724022876376,
icon: 'tower' icon: 'tower'
},{ }, {
lng: 120.1184189041221, lng: 120.1184189041221,
lat: 30.21783201718256, lat: 30.21783201718256,
icon: 'end' icon: 'end'
@ -93,14 +93,14 @@ scene.on('loaded', () => {
parser: { parser: {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat', y: 'lat'
}, }
}) })
.shape('icon', ['start', 'visitor', 'museum', 'supermarket', 'tower', 'end']) .shape('icon', [ 'start', 'visitor', 'museum', 'supermarket', 'tower', 'end' ])
.size(35) .size(35)
.style({ .style({
offsets: [0, 20] offsets: [ 0, 20 ]
}) });
scene.addLayer(imageLayer); scene.addLayer(imageLayer);
}); });
}); });

22
examples/point/scatter/demo/animatePoint.js
View File

@ -5,23 +5,23 @@ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
center: [112, 23.69], center: [ 112, 23.69 ],
zoom: 2.5, zoom: 2.5
}) })
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv', 'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv'
) )
.then((res) => res.text()) .then(res => res.text())
.then((data) => { .then(data => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'Longitude', x: 'Longitude',
y: 'Latitude', y: 'Latitude'
}, }
}) })
.shape('circle') .shape('circle')
.active(true) .active(true)
@ -30,15 +30,15 @@ fetch(
.color('#ffa842') .color('#ffa842')
.style({ .style({
opacity: 1, opacity: 1,
offsets: [40, 40], offsets: [ 40, 40 ]
}); });
const pointLayer2 = new PointLayer({}) const pointLayer2 = new PointLayer({})
.source(data, { .source(data, {
parser: { parser: {
type: 'csv', type: 'csv',
x: 'Longitude', x: 'Longitude',
y: 'Latitude', y: 'Latitude'
}, }
}) })
.shape('circle') .shape('circle')
.active(true) .active(true)
@ -46,7 +46,7 @@ fetch(
.size(50) .size(50)
.color('#f00') .color('#f00')
.style({ .style({
opacity: 1, opacity: 1
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);

14
examples/point/scatter/demo/dynamicScatter.js
View File

@ -5,7 +5,7 @@ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
style: 'light', style: 'light',
center: [120.19382669582967, 30.258134], center: [ 120.19382669582967, 30.258134 ],
zoom: 10 zoom: 10
}) })
}); });
@ -23,11 +23,11 @@ function pointOnCircle(angle) {
type: 'Point', type: 'Point',
coordinates: [ coordinates: [
120.19382669582967 + Math.cos(angle) * radius, 120.19382669582967 + Math.cos(angle) * radius,
30.258134 + Math.sin(angle) * radius, 30.258134 + Math.sin(angle) * radius
], ]
}, }
}, }
], ]
}; };
} }
const layer = new PointLayer({}) const layer = new PointLayer({})
@ -39,7 +39,7 @@ const layer = new PointLayer({})
.style({ .style({
stroke: '#fff', stroke: '#fff',
strokeWidth: 2, strokeWidth: 2,
opacity: 1, opacity: 1
}); });
scene.addLayer(layer); scene.addLayer(layer);
layer.setData(pointOnCircle(1000)); layer.setData(pointOnCircle(1000));

26
examples/point/text/demo/iconfont.js
View File

@ -10,10 +10,10 @@ const scene = new Scene({
zoom: 3 zoom: 3
}) })
}); });
let fontFamily = 'iconfont'; const fontFamily = 'iconfont';
let fontPath = '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496'; const fontPath = '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496';
scene.addFontFace(fontFamily, fontPath); scene.addFontFace(fontFamily, fontPath);
scene.addIconFont("icon1", "&#xe98c;") scene.addIconFont('icon1', '&#xe98c;');
scene.on('loaded', () => { scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
@ -47,31 +47,31 @@ scene.on('loaded', () => {
}); });
fetch( fetch(
'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json', 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json'
) )
.then((res) => res.json()) .then(res => res.json())
.then((data) => { .then(data => {
const pointLayer = new PointLayer({}) const pointLayer = new PointLayer({})
.source(data.list, { .source(data.list, {
parser: { parser: {
type: 'json', type: 'json',
x: 'j', x: 'j',
y: 'w', y: 'w'
}, }
}) })
.shape('icon', 'text') .shape('icon', 'text')
.size(12) .size(12)
.color('w', ['#f00', '#f00', '#0f0']) .color('w', [ '#f00', '#f00', '#0f0' ])
.style({ .style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [ -10, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距 spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色 stroke: '#ffffff', // 描边颜色
fontFamily, fontFamily,
iconfont: true, iconfont: true
// textAllowOverlap: true, // textAllowOverlap: true,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
}) });
}); });

112
examples/point/text/demo/iconfonts.js
View File

@ -4,21 +4,21 @@ import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
center: [120.5, 30.2], center: [ 120.5, 30.2 ],
pitch: 0, pitch: 0,
style: 'light', style: 'light',
zoom: 8.5, zoom: 8.5,
zooms: [8, 10], zooms: [ 8, 10 ],
viewMode: '2D' viewMode: '2D'
}), })
}); });
let originData = [ const originData = [
{ {
lng: 120, lng: 120,
lat: 30, lat: 30,
iconType: 'sun', iconType: 'sun',
iconColor: "#FFA500", iconColor: '#FFA500',
backgoundColor: "#00BFFF", backgoundColor: '#00BFFF',
temperature: '28℃', temperature: '28℃',
weather: '晴朗' weather: '晴朗'
}, },
@ -26,8 +26,8 @@ let originData = [
lng: 120.2, lng: 120.2,
lat: 30.5, lat: 30.5,
iconType: 'sun', iconType: 'sun',
iconColor: "#FFA500", iconColor: '#FFA500',
backgoundColor: "#00BFFF", backgoundColor: '#00BFFF',
temperature: '28℃', temperature: '28℃',
weather: '晴朗' weather: '晴朗'
}, },
@ -35,8 +35,8 @@ let originData = [
lng: 121.5, lng: 121.5,
lat: 31.4, lat: 31.4,
iconType: 'cloud', iconType: 'cloud',
iconColor: "#F0F8FF", iconColor: '#F0F8FF',
backgoundColor: "#1E90FF", backgoundColor: '#1E90FF',
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云'
}, },
@ -44,8 +44,8 @@ let originData = [
lng: 120, lng: 120,
lat: 31, lat: 31,
iconType: 'cloud', iconType: 'cloud',
iconColor: "#F0F8FF", iconColor: '#F0F8FF',
backgoundColor: "#1E90FF", backgoundColor: '#1E90FF',
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云'
}, },
@ -53,8 +53,8 @@ let originData = [
lng: 120.6, lng: 120.6,
lat: 30.8, lat: 30.8,
iconType: 'cloud', iconType: 'cloud',
iconColor: "#F0F8FF", iconColor: '#F0F8FF',
backgoundColor: "#1E90FF", backgoundColor: '#1E90FF',
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云'
}, },
@ -62,8 +62,8 @@ let originData = [
lng: 120.5, lng: 120.5,
lat: 31.3, lat: 31.3,
iconType: 'cloud', iconType: 'cloud',
iconColor: "#F0F8FF", iconColor: '#F0F8FF',
backgoundColor: "#1E90FF", backgoundColor: '#1E90FF',
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云'
}, },
@ -71,8 +71,8 @@ let originData = [
lng: 121.3, lng: 121.3,
lat: 30.2, lat: 30.2,
iconType: 'smallRain', iconType: 'smallRain',
iconColor: "#6EA0FF", iconColor: '#6EA0FF',
backgoundColor: "#4678AA", backgoundColor: '#4678AA',
temperature: '22℃', temperature: '22℃',
weather: '小雨' weather: '小雨'
}, },
@ -80,8 +80,8 @@ let originData = [
lng: 121, lng: 121,
lat: 30.5, lat: 30.5,
iconType: 'smallRain', iconType: 'smallRain',
iconColor: "#6EA0FF", iconColor: '#6EA0FF',
backgoundColor: "#4678AA", backgoundColor: '#4678AA',
temperature: '22℃', temperature: '22℃',
weather: '小雨' weather: '小雨'
}, },
@ -89,8 +89,8 @@ let originData = [
lng: 120.6, lng: 120.6,
lat: 30, lat: 30,
iconType: 'middleRain', iconType: 'middleRain',
iconColor: "#6495ED", iconColor: '#6495ED',
backgoundColor: "#326EA0", backgoundColor: '#326EA0',
temperature: '24℃', temperature: '24℃',
weather: '中雨' weather: '中雨'
}, },
@ -98,8 +98,8 @@ let originData = [
lng: 120.2, lng: 120.2,
lat: 29.7, lat: 29.7,
iconType: 'smallRain', iconType: 'smallRain',
iconColor: "#6EA0FF", iconColor: '#6EA0FF',
backgoundColor: "#4678AA", backgoundColor: '#4678AA',
temperature: '22℃', temperature: '22℃',
weather: '小雨' weather: '小雨'
}, },
@ -107,8 +107,8 @@ let originData = [
lng: 121.7, lng: 121.7,
lat: 29.8, lat: 29.8,
iconType: 'middleRain', iconType: 'middleRain',
iconColor: "#6495ED", iconColor: '#6495ED',
backgoundColor: "#326EA0", backgoundColor: '#326EA0',
temperature: '24℃', temperature: '24℃',
weather: '中雨' weather: '中雨'
}, },
@ -116,21 +116,21 @@ let originData = [
lng: 121.5, lng: 121.5,
lat: 30, lat: 30,
iconType: 'hugeRain', iconType: 'hugeRain',
iconColor: "#4678D2", iconColor: '#4678D2',
backgoundColor: "#285A8C", backgoundColor: '#285A8C',
temperature: '20℃', temperature: '20℃',
weather: '大雨' weather: '大雨'
}, }
]; ];
let fontFamily = 'iconfont'; const fontFamily = 'iconfont';
let fontPath = '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076'; const fontPath = '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
scene.addFontFace(fontFamily, fontPath); scene.addFontFace(fontFamily, fontPath);
scene.addIconFonts([ scene.addIconFonts([
['smallRain', '&#xe6f7;'], [ 'smallRain', '&#xe6f7;' ],
['middleRain', '&#xe61c;'], [ 'middleRain', '&#xe61c;' ],
['hugeRain', '&#xe6a6;'], [ 'hugeRain', '&#xe6a6;' ],
['sun', '&#xe6da;'], [ 'sun', '&#xe6da;' ],
['cloud', '&#xe8da;'], [ 'cloud', '&#xe8da;' ]
]); ]);
scene.on('loaded', () => { scene.on('loaded', () => {
@ -140,12 +140,12 @@ scene.on('loaded', () => {
parser: { parser: {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat', y: 'lat'
}, }
}) })
.shape('circle') .shape('circle')
.color('backgoundColor') .color('backgoundColor')
.size(40) .size(40);
scene.addLayer(layer); scene.addLayer(layer);
@ -154,19 +154,19 @@ scene.on('loaded', () => {
parser: { parser: {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat', y: 'lat'
}
} }
},
) )
.shape('iconType', 'text') .shape('iconType', 'text')
.size(30) .size(30)
.color('iconColor') .color('iconColor')
.style({ .style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [38, 10], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [ 38, 10 ], // 文本相对锚点的偏移量 [水平, 垂直]
fontFamily, fontFamily,
iconfont: true, iconfont: true,
textAllowOverlap: true, textAllowOverlap: true
}); });
scene.addLayer(pointIconFontLayer); scene.addLayer(pointIconFontLayer);
@ -176,23 +176,23 @@ scene.on('loaded', () => {
parser: { parser: {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat', y: 'lat'
}, }
}, }
) )
.shape('temperature', 'text') .shape('temperature', 'text')
.size(10) .size(10)
.color('#ffffff') .color('#ffffff')
.style({ .style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [5, -55], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [ 5, -55 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距 spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色 stroke: '#ffffff', // 描边颜色
strokeWidth: 0.3, // 描边宽度 strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0, strokeOpacity: 1.0,
fontFamily: "Times New Roman", fontFamily: 'Times New Roman',
textAllowOverlap: true, textAllowOverlap: true
}); });
scene.addLayer(textLayer); scene.addLayer(textLayer);
@ -203,22 +203,22 @@ scene.on('loaded', () => {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat'
}, }
}, }
) )
.shape('weather', 'text') .shape('weather', 'text')
.size(14) .size(14)
.color('#ffffff') .color('#ffffff')
.style({ .style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [5, -15], // 文本相对锚点的偏移量 [水平, 垂直] textOffset: [ 5, -15 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距 spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色 stroke: '#ffffff', // 描边颜色
strokeWidth: 0.3, // 描边宽度 strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0, strokeOpacity: 1.0,
fontFamily: "Times New Roman", fontFamily: 'Times New Roman',
textAllowOverlap: true, textAllowOverlap: true
}); });
scene.addLayer(textLayer2); scene.addLayer(textLayer2);

46
examples/point/text/demo/temperture.js
View File

@ -6,17 +6,17 @@ const scene = new Scene({
map: new GaodeMap({ map: new GaodeMap({
style: 'dark', style: 'dark',
pitch: 40, pitch: 40,
center: [118.8, 32.056], center: [ 118.8, 32.056 ],
zoom: 12.5 zoom: 12.5
}) })
}); });
let fontFamily = 'iconfont'; const fontFamily = 'iconfont';
let fontPath = const fontPath =
'//at.alicdn.com/t/font_2534097_x6rsov3i1g.woff2?t=1622107341225'; '//at.alicdn.com/t/font_2534097_x6rsov3i1g.woff2?t=1622107341225';
scene.addIconFont("icon", "&#xe69e;") scene.addIconFont('icon', '&#xe69e;');
scene.addFontFace(fontFamily, fontPath); scene.addFontFace(fontFamily, fontPath);
let colors = [ const colors = [
'#87CEFA', '#87CEFA',
'#00BFFF', '#00BFFF',
@ -30,28 +30,28 @@ let colors = [
'#FF7F50', '#FF7F50',
'#FF6347', '#FF6347',
'#FF0000' '#FF0000'
] ];
scene.on('loaded', () => { scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json') fetch('https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json')
.then((res) => res.json()) .then(res => res.json())
.then((data) => { .then(data => {
const filllayer = new PolygonLayer({ const filllayer = new PolygonLayer({
name: 'fill', name: 'fill',
zIndex: 3, zIndex: 3
}) })
.source(data) .source(data)
.shape('fill') .shape('fill')
.color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)']) .color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ])
.style({ .style({
opacity: 0.8 opacity: 0.8
}) });
scene.addLayer(filllayer); scene.addLayer(filllayer);
const linelayer = new LineLayer({ const linelayer = new LineLayer({
zIndex: 5, zIndex: 5,
name: 'line2', name: 'line2'
}) })
.source(data) .source(data)
.shape('line') .shape('line')
@ -69,15 +69,15 @@ scene.on('loaded', () => {
.shape('icon', 'text') .shape('icon', 'text')
.size(30) .size(30)
.color('count', t => { .color('count', t => {
let c = Number(t.replace('℃', '')) const c = Number(t.replace('℃', ''));
return colors[Math.floor(((c - 18)/16)*10)] return colors[Math.floor(((c - 18) / 16) * 10)];
}) })
.style({ .style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [30, 5], textOffset: [ 30, 5 ],
padding: [2, 2], padding: [ 2, 2 ],
fontFamily, fontFamily,
iconfont: true, iconfont: true
// textAllowOverlap: true // textAllowOverlap: true
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
@ -89,15 +89,15 @@ scene.on('loaded', () => {
.shape('count', 'text') .shape('count', 'text')
.size(12) .size(12)
.color('count', t => { .color('count', t => {
let c = Number(t.replace('℃', '')) const c = Number(t.replace('℃', ''));
return colors[Math.floor(((c - 18)/16)*10)] return colors[Math.floor(((c - 18) / 16) * 10)];
}) })
.style({ .style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [35, 30], textOffset: [ 35, 30 ],
padding: [1, 1], padding: [ 1, 1 ]
}); });
scene.addLayer(tempertureLayer); scene.addLayer(tempertureLayer);
}) });
}); });

100
stories/Map/components/amap2demo_iconfont.tsx
View File

@ -15,7 +15,6 @@ export default class Amap2demo_iconfont extends React.Component {
let fontPath = let fontPath =
'//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076'; '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
const scene = new Scene({ const scene = new Scene({
id: 'map', id: 'map',
map: new GaodeMap({ map: new GaodeMap({
@ -24,7 +23,7 @@ export default class Amap2demo_iconfont extends React.Component {
style: 'normal', style: 'normal',
zoom: 9, zoom: 9,
zooms: [8, 10], zooms: [8, 10],
viewMode: '2D' viewMode: '2D',
}), }),
}); });
this.scene = scene; this.scene = scene;
@ -44,109 +43,109 @@ export default class Amap2demo_iconfont extends React.Component {
lng: 120, lng: 120,
lat: 30, lat: 30,
iconType: 'sun', iconType: 'sun',
iconColor: "#FFA500", iconColor: '#FFA500',
backgoundColor: "#00BFFF", backgoundColor: '#00BFFF',
temperature: '28℃', temperature: '28℃',
weather: '晴朗' weather: '晴朗',
}, },
{ {
lng: 120.2, lng: 120.2,
lat: 30.5, lat: 30.5,
iconType: 'sun', iconType: 'sun',
iconColor: "#FFA500", iconColor: '#FFA500',
backgoundColor: "#00BFFF", backgoundColor: '#00BFFF',
temperature: '28℃', temperature: '28℃',
weather: '晴朗' weather: '晴朗',
}, },
{ {
lng: 121.5, lng: 121.5,
lat: 31.4, lat: 31.4,
iconType: 'cloud', iconType: 'cloud',
iconColor: "#F0F8FF", iconColor: '#F0F8FF',
backgoundColor: "#1E90FF", backgoundColor: '#1E90FF',
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云',
}, },
{ {
lng: 120, lng: 120,
lat: 31, lat: 31,
iconType: 'cloud', iconType: 'cloud',
iconColor: "#F0F8FF", iconColor: '#F0F8FF',
backgoundColor: "#1E90FF", backgoundColor: '#1E90FF',
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云',
}, },
{ {
lng: 120.6, lng: 120.6,
lat: 30.8, lat: 30.8,
iconType: 'cloud', iconType: 'cloud',
iconColor: "#F0F8FF", iconColor: '#F0F8FF',
backgoundColor: "#1E90FF", backgoundColor: '#1E90FF',
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云',
}, },
{ {
lng: 120.5, lng: 120.5,
lat: 31.3, lat: 31.3,
iconType: 'cloud', iconType: 'cloud',
iconColor: "#F0F8FF", iconColor: '#F0F8FF',
backgoundColor: "#1E90FF", backgoundColor: '#1E90FF',
temperature: '22℃', temperature: '22℃',
weather: '多云' weather: '多云',
}, },
{ {
lng: 121.3, lng: 121.3,
lat: 30.2, lat: 30.2,
iconType: 'smallRain', iconType: 'smallRain',
iconColor: "#6EA0FF", iconColor: '#6EA0FF',
backgoundColor: "#4678AA", backgoundColor: '#4678AA',
temperature: '22℃', temperature: '22℃',
weather: '小雨' weather: '小雨',
}, },
{ {
lng: 121, lng: 121,
lat: 30.5, lat: 30.5,
iconType: 'smallRain', iconType: 'smallRain',
iconColor: "#6EA0FF", iconColor: '#6EA0FF',
backgoundColor: "#4678AA", backgoundColor: '#4678AA',
temperature: '22℃', temperature: '22℃',
weather: '小雨' weather: '小雨',
}, },
{ {
lng: 120.6, lng: 120.6,
lat: 30, lat: 30,
iconType: 'middleRain', iconType: 'middleRain',
iconColor: "#6495ED", iconColor: '#6495ED',
backgoundColor: "#326EA0", backgoundColor: '#326EA0',
temperature: '24℃', temperature: '24℃',
weather: '中雨' weather: '中雨',
}, },
{ {
lng: 120.2, lng: 120.2,
lat: 29.7, lat: 29.7,
iconType: 'smallRain', iconType: 'smallRain',
iconColor: "#6EA0FF", iconColor: '#6EA0FF',
backgoundColor: "#4678AA", backgoundColor: '#4678AA',
temperature: '22℃', temperature: '22℃',
weather: '小雨' weather: '小雨',
}, },
{ {
lng: 121.7, lng: 121.7,
lat: 29.8, lat: 29.8,
iconType: 'middleRain', iconType: 'middleRain',
iconColor: "#6495ED", iconColor: '#6495ED',
backgoundColor: "#326EA0", backgoundColor: '#326EA0',
temperature: '24℃', temperature: '24℃',
weather: '中雨' weather: '中雨',
}, },
{ {
lng: 121.5, lng: 121.5,
lat: 30, lat: 30,
iconType: 'hugeRain', iconType: 'hugeRain',
iconColor: "#4678D2", iconColor: '#4678D2',
backgoundColor: "#285A8C", backgoundColor: '#285A8C',
temperature: '20℃', temperature: '20℃',
weather: '大雨' weather: '大雨',
}, },
]; ];
@ -160,19 +159,17 @@ export default class Amap2demo_iconfont extends React.Component {
}) })
.shape('circle') .shape('circle')
.color('backgoundColor') .color('backgoundColor')
.size(40) .size(40);
scene.addLayer(layer); scene.addLayer(layer);
const pointIconFontLayer = new PointLayer({}) const pointIconFontLayer = new PointLayer({})
.source(originData, { .source(originData, {
parser: { parser: {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat', y: 'lat',
}
}, },
) })
.shape('iconType', 'text') .shape('iconType', 'text')
.size(30) .size(30)
.color('iconColor') .color('iconColor')
@ -186,15 +183,13 @@ export default class Amap2demo_iconfont extends React.Component {
scene.addLayer(pointIconFontLayer); scene.addLayer(pointIconFontLayer);
const textLayer = new PointLayer({}) const textLayer = new PointLayer({})
.source(originData, .source(originData, {
{
parser: { parser: {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat', y: 'lat',
}, },
}, })
)
.shape('temperature', 'text') .shape('temperature', 'text')
.size(10) .size(10)
.color('#ffffff') .color('#ffffff')
@ -206,21 +201,19 @@ export default class Amap2demo_iconfont extends React.Component {
stroke: '#ffffff', // 描边颜色 stroke: '#ffffff', // 描边颜色
strokeWidth: 0.3, // 描边宽度 strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0, strokeOpacity: 1.0,
fontFamily: "Times New Roman", fontFamily: 'Times New Roman',
textAllowOverlap: true, textAllowOverlap: true,
}); });
scene.addLayer(textLayer); scene.addLayer(textLayer);
const textLayer2 = new PointLayer({}) const textLayer2 = new PointLayer({})
.source(originData, .source(originData, {
{
parser: { parser: {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat' y: 'lat',
}, },
}, })
)
.shape('weather', 'text') .shape('weather', 'text')
.size(14) .size(14)
.color('#ffffff') .color('#ffffff')
@ -232,11 +225,10 @@ export default class Amap2demo_iconfont extends React.Component {
stroke: '#ffffff', // 描边颜色 stroke: '#ffffff', // 描边颜色
strokeWidth: 0.3, // 描边宽度 strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0, strokeOpacity: 1.0,
fontFamily: "Times New Roman", fontFamily: 'Times New Roman',
textAllowOverlap: true, textAllowOverlap: true,
}); });
scene.addLayer(textLayer2); scene.addLayer(textLayer2);
}); });
} }

39
stories/Map/components/amap2demo_mesh.tsx
View File

@ -17,7 +17,7 @@ export default class Amap2demo_mesh extends React.Component {
style: 'dark', style: 'dark',
pitch: 40, pitch: 40,
center: [118.8, 32.056], center: [118.8, 32.056],
zoom: 12.5 zoom: 12.5,
}), }),
}); });
@ -25,7 +25,7 @@ export default class Amap2demo_mesh extends React.Component {
let fontFamily = 'iconfont'; let fontFamily = 'iconfont';
let fontPath = let fontPath =
'//at.alicdn.com/t/font_2534097_x6rsov3i1g.woff2?t=1622107341225'; '//at.alicdn.com/t/font_2534097_x6rsov3i1g.woff2?t=1622107341225';
scene.addIconFont("icon", "&#xe69e;") scene.addIconFont('icon', '&#xe69e;');
scene.addFontFace(fontFamily, fontPath); scene.addFontFace(fontFamily, fontPath);
let colors = [ let colors = [
@ -41,15 +41,15 @@ export default class Amap2demo_mesh extends React.Component {
'#FF7F50', '#FF7F50',
'#FF6347', '#FF6347',
'#FF0000' '#FF0000',
] ];
scene.on('loaded', () => { scene.on('loaded', () => {
fetch(
fetch('https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json') 'https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json',
)
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
const filllayer = new PolygonLayer({ const filllayer = new PolygonLayer({
name: 'fill', name: 'fill',
zIndex: 3, zIndex: 3,
@ -73,8 +73,8 @@ export default class Amap2demo_mesh extends React.Component {
// '#FF0000' // '#FF0000'
// ]) // ])
.style({ .style({
opacity: 0.8 opacity: 0.8,
}) });
scene.addLayer(filllayer); scene.addLayer(filllayer);
const linelayer = new LineLayer({ const linelayer = new LineLayer({
@ -86,19 +86,19 @@ export default class Amap2demo_mesh extends React.Component {
.size(1) .size(1)
.color('#fff') .color('#fff')
.style({ .style({
opacity: 0.3 opacity: 0.3,
}); });
scene.addLayer(linelayer); scene.addLayer(linelayer);
const pointLayer = new PointLayer({ const pointLayer = new PointLayer({
zIndex: 10 zIndex: 10,
}) })
.source(data) .source(data)
.shape('icon', 'text') .shape('icon', 'text')
.size(30) .size(30)
.color('count', t => { .color('count', (t) => {
let c = Number(t.replace('℃', '')) let c = Number(t.replace('℃', ''));
return colors[Math.floor(((c - 18)/16)*10)] return colors[Math.floor(((c - 18) / 16) * 10)];
}) })
.style({ .style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
@ -111,7 +111,7 @@ export default class Amap2demo_mesh extends React.Component {
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
const tempertureLayer = new PointLayer({ const tempertureLayer = new PointLayer({
zIndex: 10 zIndex: 10,
}) })
.source(data) .source(data)
.shape('count', 'text') .shape('count', 'text')
@ -131,9 +131,9 @@ export default class Amap2demo_mesh extends React.Component {
// '#FF6347', // '#FF6347',
// '#FF0000' // '#FF0000'
// ]) // ])
.color('count', t => { .color('count', (t) => {
let c = Number(t.replace('℃', '')) let c = Number(t.replace('℃', ''));
return colors[Math.floor(((c - 18)/16)*10)] return colors[Math.floor(((c - 18) / 16) * 10)];
}) })
.style({ .style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
@ -141,8 +141,7 @@ export default class Amap2demo_mesh extends React.Component {
padding: [1, 1], padding: [1, 1],
}); });
scene.addLayer(tempertureLayer); scene.addLayer(tempertureLayer);
});
})
}); });
} }

57
stories/Map/components/amap2demo_road.tsx
View File

@ -18,7 +18,7 @@ export default class Amap2demo_road extends React.Component {
center: [120.1145, 30.221], center: [120.1145, 30.221],
pitch: 50, pitch: 50,
zoom: 16.8, zoom: 16.8,
viewMode: '3D' viewMode: '3D',
}), }),
}); });
this.scene = scene; this.scene = scene;
@ -29,10 +29,9 @@ export default class Amap2demo_road extends React.Component {
) )
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
scene.addImage( scene.addImage(
'road', 'road',
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*haGlTpW2BQgAAAAAAAAAAAAAARQnAQ' 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*haGlTpW2BQgAAAAAAAAAAAAAARQnAQ',
); );
const layer = new LineLayer() const layer = new LineLayer()
@ -77,43 +76,59 @@ export default class Amap2demo_road extends React.Component {
'https://gw.alipayobjects.com/zos/bmw-prod/59717737-5652-479f-9e6b-e7d2c5441446.svg', 'https://gw.alipayobjects.com/zos/bmw-prod/59717737-5652-479f-9e6b-e7d2c5441446.svg',
); );
const imageLayer = new PointLayer() const imageLayer = new PointLayer()
.source([{ .source(
[
{
lng: 120.11025885601617, lng: 120.11025885601617,
lat: 30.22006389085372, lat: 30.22006389085372,
icon: 'start' icon: 'start',
},{ },
{
lng: 120.11123578376913, lng: 120.11123578376913,
lat: 30.220443561196277, lat: 30.220443561196277,
icon: 'visitor' icon: 'visitor',
},{ },
{
lng: 120.11408457779198, lng: 120.11408457779198,
lat: 30.22019805564678, lat: 30.22019805564678,
icon: 'museum' icon: 'museum',
},{ },
{
lng: 120.11683172384723, lng: 120.11683172384723,
lat: 30.21875509667716, lat: 30.21875509667716,
icon: 'supermarket' icon: 'supermarket',
},{ },
{
lng: 120.11945546294194, lng: 120.11945546294194,
lat: 30.218724022876376, lat: 30.218724022876376,
icon: 'tower' icon: 'tower',
},{ },
{
lng: 120.1184189041221, lng: 120.1184189041221,
lat: 30.21783201718256, lat: 30.21783201718256,
icon: 'end' icon: 'end',
} },
], { ],
{
parser: { parser: {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat', y: 'lat',
}, },
}) },
.shape('icon', ['start', 'visitor', 'museum', 'supermarket', 'tower', 'end']) )
.shape('icon', [
'start',
'visitor',
'museum',
'supermarket',
'tower',
'end',
])
.size(35) .size(35)
.style({ .style({
offsets: [0, 20] offsets: [0, 20],
}) });
scene.addLayer(imageLayer); scene.addLayer(imageLayer);
}); });
}); });

5
stories/Map/components/amap2demo_text.tsx
View File

@ -46,7 +46,7 @@ export default class Amap2demo_text extends React.Component {
}), }),
}); });
this.scene = scene; this.scene = scene;
scene.addIconFont("icon1", "&#xe98c;") scene.addIconFont('icon1', '&#xe98c;');
// scene.addIconFont("icon2", "&#xe64c;") // scene.addIconFont("icon2", "&#xe64c;")
// scene.addIconFonts([ // scene.addIconFonts([
@ -56,7 +56,6 @@ export default class Amap2demo_text extends React.Component {
scene.addFontFace(fontFamily, fontPath); scene.addFontFace(fontFamily, fontPath);
scene.on('loaded', () => { scene.on('loaded', () => {
fetch( fetch(
'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json', 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json',
) )
@ -87,7 +86,7 @@ export default class Amap2demo_text extends React.Component {
// textAllowOverlap: true, // textAllowOverlap: true,
}); });
scene.addLayer(pointLayer); scene.addLayer(pointLayer);
}) });
// https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json // https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json
// const pointIconFontLayer = new PointLayer({}) // const pointIconFontLayer = new PointLayer({})