mirror of https://gitee.com/antv-l7/antv-l7
feat: 2.4 beat versio
This commit is contained in:
2912401452
parent
b7d2b5b153
commit
479b803404
|
|
@ -15,7 +15,7 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管
|
|||
### 引入 Map
|
||||
|
||||
```javascript
|
||||
import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德2.0
|
||||
import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德2.0
|
||||
import { GaodeMapV1 } from '@antv/l7-maps'; // 默认引入高德1.x 版本
|
||||
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
|
@ -78,8 +78,8 @@ const scene = new Scene({
|
|||
```javascript
|
||||
const map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
});
|
||||
const scene = new Scene({
|
||||
|
|
@ -101,10 +101,10 @@ const scene = new Scene({
|
|||
```javascript
|
||||
mapboxgl.accessToken = 'xxxx - token';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
});
|
||||
|
||||
const scene = new Scene({
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@ L7 Logo 的显示位置 默认左下角
|
|||
增加图层对象
|
||||
|
||||
参数 :
|
||||
|
||||
- `layer` {ILayer} 图层对象
|
||||
|
||||
```javascript
|
||||
|
|
@ -184,10 +185,13 @@ scene.addLayer(layer);
|
|||
获取对应的图层对象
|
||||
|
||||
参数 :
|
||||
|
||||
- `id` {string}
|
||||
|
||||
```javascript
|
||||
scene.getLayer('layerID');
|
||||
```
|
||||
|
||||
### getLayers() 获取所有的地图图层
|
||||
|
||||
获取所有的地图图层
|
||||
|
|
@ -208,8 +212,7 @@ scene.getLayers();
|
|||
scene.getLayerByName(name); // return Layer 图层对象
|
||||
```
|
||||
|
||||
|
||||
### removeLayer 移除 layer 图层
|
||||
### removeLayer 移除 layer 图层
|
||||
|
||||
移除 layer 图层
|
||||
|
||||
|
|
@ -261,17 +264,16 @@ scene.removeControl(ctl);
|
|||
|
||||
- `name` { string }
|
||||
|
||||
|
||||
```javascript
|
||||
const zoomControl = new Zoom({ // zoom 控件
|
||||
const zoomControl = new Zoom({
|
||||
// zoom 控件
|
||||
name: 'z1', // 用户传入的控件名称（也可以不传入，该控件默认名称为 zoom）
|
||||
position: 'topright'
|
||||
position: 'topright',
|
||||
});
|
||||
|
||||
scene.getControlByName('z1');
|
||||
```
|
||||
|
||||
|
||||
## 标记方法
|
||||
|
||||
### addMarker(maker) 添加标记
|
||||
|
|
@ -284,22 +286,24 @@ scene.getControlByName('z1');
|
|||
|
||||
```javascript
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
element: el,
|
||||
}).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
|
||||
scene.addMarker(marker);
|
||||
```
|
||||
|
||||
### addMarkerLayer(layer) 添加 Marker 统一管理图层
|
||||
|
||||
当用户需要添加许多个 Marker 实例时，为了方便管理可以使用 markerLayer 对象统一管理
|
||||
|
||||
参数 :
|
||||
|
||||
- `layer` { IMarkerLayer } 标记图层对象
|
||||
- `layer` { IMarkerLayer } 标记图层对象
|
||||
|
||||
```javascript
|
||||
const markerLayer = new MarkerLayer();
|
||||
scene.addMarkerLayer(markerLayer);
|
||||
```
|
||||
|
||||
[示例地址](/zh/examples/point/marker#markerlayer)
|
||||
|
||||
### removeMarkerLayer(layer) 移除标签图层
|
||||
|
|
@ -334,7 +338,6 @@ scene.getZoom();
|
|||
|
||||
return {float} 当前缩放等级
|
||||
|
||||
|
||||
### getCenter() 获取地图中心
|
||||
|
||||
获取地图中心点
|
||||
|
|
@ -518,7 +521,6 @@ scene.fitBounds([
|
|||
]);
|
||||
```
|
||||
|
||||
|
||||
### exportMap 导出地图图片
|
||||
|
||||
导出地图，目前仅支持导出可视化层，不支持底图导出
|
||||
|
|
@ -536,6 +538,7 @@ scene 销毁方法，离开页面，或者不需要使用地图可以调用
|
|||
```javascript
|
||||
scene.destroy();
|
||||
```
|
||||
|
||||
## iconfont 映射支持
|
||||
|
||||
### addIconFont(name, fontUnicode) 增加对数据中 unicode 的映射支持
|
||||
|
|
@ -548,37 +551,40 @@ scene.destroy();
|
|||
- `fontUnicode` {string}
|
||||
|
||||
```javascript
|
||||
scene.addIconFont("icon1", "")
|
||||
scene.addIconFont("icon2", "")
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
const pointIconFontLayer = new PointLayer({})
|
||||
.source(
|
||||
[{
|
||||
j: 140,
|
||||
w: 34,
|
||||
m: 'icon1',
|
||||
},{
|
||||
j: 140,
|
||||
w: 36,
|
||||
m: 'icon2',
|
||||
}],
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
},
|
||||
},
|
||||
)
|
||||
.shape('m', 'text')
|
||||
.size(12)
|
||||
.color('w', ['#f00', '#f00', '#0f0'])
|
||||
.style({
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(pointIconFontLayer);
|
||||
scene.addIconFont('icon1', '');
|
||||
scene.addIconFont('icon2', '');
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
const pointIconFontLayer = new PointLayer({})
|
||||
.source(
|
||||
[
|
||||
{
|
||||
j: 140,
|
||||
w: 34,
|
||||
m: 'icon1',
|
||||
},
|
||||
{
|
||||
j: 140,
|
||||
w: 36,
|
||||
m: 'icon2',
|
||||
},
|
||||
],
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
},
|
||||
},
|
||||
)
|
||||
.shape('m', 'text')
|
||||
.size(12)
|
||||
.color('w', ['#f00', '#f00', '#0f0'])
|
||||
.style({
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(pointIconFontLayer);
|
||||
```
|
||||
|
||||
### addIconFonts(options) 同时传入多组 name - unicode 的键值对
|
||||
|
|
@ -586,14 +592,16 @@ scene.destroy();
|
|||
同时传入多组 name - unicode 的键值对
|
||||
|
||||
参数 :
|
||||
|
||||
- `options` { Array<[name, unicode]> }
|
||||
|
||||
```javascript
|
||||
scene.addIconFonts([
|
||||
['icon1', ''],
|
||||
['icon2', ''],
|
||||
]);
|
||||
scene.addIconFonts([
|
||||
['icon1', ''],
|
||||
['icon2', ''],
|
||||
]);
|
||||
```
|
||||
|
||||
## 全局资源
|
||||
|
||||
### addImage(id, img) 全局中添加的图片资源
|
||||
|
|
@ -601,11 +609,17 @@ scene.destroy();
|
|||
在 L7 的图层对象可以使用在 scene 全局中添加的图片资源
|
||||
|
||||
参数 :
|
||||
|
||||
- `id` {string}
|
||||
- `img` {HTMLImageElement | File | string}
|
||||
|
||||
```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)
|
||||
|
||||
### hasImage(id) 判断全局图片资源
|
||||
|
|
@ -613,9 +627,11 @@ scene.addImage('02', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-41
|
|||
判断是否已经在全局添加过相应的图片资源
|
||||
|
||||
参数 :
|
||||
|
||||
- `id` {string}
|
||||
|
||||
```javascript
|
||||
scene.hasImage('imageID')
|
||||
scene.hasImage('imageID');
|
||||
```
|
||||
|
||||
### removeImage(id) 全局删除图片资源
|
||||
|
|
@ -623,9 +639,11 @@ scene.hasImage('imageID')
|
|||
从全局删除对应的图片资源
|
||||
|
||||
参数 :
|
||||
|
||||
- `id` {string}
|
||||
|
||||
```javascript
|
||||
scene.removeImage('imageID')
|
||||
scene.removeImage('imageID');
|
||||
```
|
||||
|
||||
### addFontFace(fontFamily, fontPath) 添加字体文件
|
||||
|
|
@ -633,11 +651,14 @@ scene.removeImage('imageID')
|
|||
添加字体文件
|
||||
|
||||
参数 :
|
||||
|
||||
- `fontFamily` {string} 用户为自己定义的字体名称
|
||||
- `fontPath` {string} 导入的文件地址
|
||||
|
||||
```javascript
|
||||
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);
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const scene = new Scene({
|
|||
scene.on('loaded', () => {
|
||||
scene.addImage(
|
||||
'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(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
|
||||
|
|
@ -33,8 +33,8 @@ scene.on('loaded', () => {
|
|||
})
|
||||
.style({
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 100, // 设置贴图纹理的间距
|
||||
})
|
||||
iconStep: 100 // 设置贴图纹理的间距
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ import {
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [116.3956, 39.9392],
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
style: 'amap://styles/light',
|
||||
viewMode: '2D',
|
||||
viewMode: '2D'
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
|
|
|
|||
|
|
@ -4,18 +4,18 @@ import { GaodeMap } from '@antv/l7-maps';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [120.115, 30.221],
|
||||
center: [ 120.115, 30.221 ],
|
||||
pitch: 40,
|
||||
zoom: 16,
|
||||
viewMode: '3D',
|
||||
viewMode: '3D'
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
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((data) => {
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
|
||||
scene.addImage(
|
||||
'road',
|
||||
|
|
@ -31,76 +31,76 @@ scene.on('loaded', () => {
|
|||
.animate({
|
||||
interval: 1, // 间隔
|
||||
duration: 1, // 持续时间，延时
|
||||
trailLength: 2, // 流线长度
|
||||
trailLength: 2 // 流线长度
|
||||
})
|
||||
.style({
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 200, // 设置贴图纹理的间距
|
||||
iconStep: 200 // 设置贴图纹理的间距
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
|
||||
scene.addImage(
|
||||
'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(
|
||||
'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(
|
||||
'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(
|
||||
'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(
|
||||
'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(
|
||||
'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()
|
||||
.source([{
|
||||
lng: 120.11025885601617,
|
||||
lat: 30.22006389085372,
|
||||
icon: 'start'
|
||||
},{
|
||||
}, {
|
||||
lng: 120.11123578376913,
|
||||
lat: 30.220443561196277,
|
||||
icon: 'visitor'
|
||||
},{
|
||||
}, {
|
||||
lng: 120.11408457779198,
|
||||
lat: 30.22019805564678,
|
||||
icon: 'museum'
|
||||
},{
|
||||
}, {
|
||||
lng: 120.11683172384723,
|
||||
lat: 30.21875509667716,
|
||||
icon: 'supermarket'
|
||||
},{
|
||||
}, {
|
||||
lng: 120.11945546294194,
|
||||
lat: 30.218724022876376,
|
||||
icon: 'tower'
|
||||
},{
|
||||
}, {
|
||||
lng: 120.1184189041221,
|
||||
lat: 30.21783201718256,
|
||||
icon: 'end'
|
||||
}
|
||||
], {
|
||||
], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('icon', ['start', 'visitor', 'museum', 'supermarket', 'tower', 'end'])
|
||||
.shape('icon', [ 'start', 'visitor', 'museum', 'supermarket', 'tower', 'end' ])
|
||||
.size(35)
|
||||
.style({
|
||||
offsets: [0, 20]
|
||||
})
|
||||
offsets: [ 0, 20 ]
|
||||
});
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,23 +5,23 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [112, 23.69],
|
||||
zoom: 2.5,
|
||||
center: [ 112, 23.69 ],
|
||||
zoom: 2.5
|
||||
})
|
||||
});
|
||||
|
||||
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((data) => {
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'Longitude',
|
||||
y: 'Latitude',
|
||||
},
|
||||
y: 'Latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.active(true)
|
||||
|
|
@ -30,15 +30,15 @@ fetch(
|
|||
.color('#ffa842')
|
||||
.style({
|
||||
opacity: 1,
|
||||
offsets: [40, 40],
|
||||
offsets: [ 40, 40 ]
|
||||
});
|
||||
const pointLayer2 = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'Longitude',
|
||||
y: 'Latitude',
|
||||
},
|
||||
y: 'Latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.active(true)
|
||||
|
|
@ -46,7 +46,7 @@ fetch(
|
|||
.size(50)
|
||||
.color('#f00')
|
||||
.style({
|
||||
opacity: 1,
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [120.19382669582967, 30.258134],
|
||||
center: [ 120.19382669582967, 30.258134 ],
|
||||
zoom: 10
|
||||
})
|
||||
});
|
||||
|
|
@ -23,11 +23,11 @@ function pointOnCircle(angle) {
|
|||
type: 'Point',
|
||||
coordinates: [
|
||||
120.19382669582967 + Math.cos(angle) * radius,
|
||||
30.258134 + Math.sin(angle) * radius,
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
30.258134 + Math.sin(angle) * radius
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
const layer = new PointLayer({})
|
||||
|
|
@ -39,7 +39,7 @@ const layer = new PointLayer({})
|
|||
.style({
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
opacity: 1,
|
||||
opacity: 1
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
layer.setData(pointOnCircle(1000));
|
||||
|
|
@ -49,4 +49,4 @@ function animateMarker(timestamp) {
|
|||
scene.render();
|
||||
requestAnimationFrame(animateMarker);
|
||||
}
|
||||
animateMarker(0);
|
||||
animateMarker(0);
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@ const scene = new Scene({
|
|||
zoom: 3
|
||||
})
|
||||
});
|
||||
let fontFamily = 'iconfont';
|
||||
let fontPath = '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496';
|
||||
const fontFamily = 'iconfont';
|
||||
const fontPath = '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496';
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
scene.addIconFont("icon1", "")
|
||||
scene.addIconFont('icon1', '');
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
|
|
@ -46,32 +46,32 @@ scene.on('loaded', () => {
|
|||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
},
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('icon', 'text')
|
||||
.size(12)
|
||||
.color('w', ['#f00', '#f00', '#0f0'])
|
||||
.color('w', [ '#f00', '#f00', '#0f0' ])
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
// textAllowOverlap: true,
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ -10, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
fontFamily,
|
||||
iconfont: true
|
||||
// textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
})
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,21 +4,21 @@ import { GaodeMap } from '@antv/l7-maps';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [120.5, 30.2],
|
||||
center: [ 120.5, 30.2 ],
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
zoom: 8.5,
|
||||
zooms: [8, 10],
|
||||
zooms: [ 8, 10 ],
|
||||
viewMode: '2D'
|
||||
}),
|
||||
})
|
||||
});
|
||||
let originData = [
|
||||
const originData = [
|
||||
{
|
||||
lng: 120,
|
||||
lat: 30,
|
||||
iconType: 'sun',
|
||||
iconColor: "#FFA500",
|
||||
backgoundColor: "#00BFFF",
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: '#00BFFF',
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
},
|
||||
|
|
@ -26,8 +26,8 @@ let originData = [
|
|||
lng: 120.2,
|
||||
lat: 30.5,
|
||||
iconType: 'sun',
|
||||
iconColor: "#FFA500",
|
||||
backgoundColor: "#00BFFF",
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: '#00BFFF',
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
},
|
||||
|
|
@ -35,8 +35,8 @@ let originData = [
|
|||
lng: 121.5,
|
||||
lat: 31.4,
|
||||
iconType: 'cloud',
|
||||
iconColor: "#F0F8FF",
|
||||
backgoundColor: "#1E90FF",
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
|
|
@ -44,8 +44,8 @@ let originData = [
|
|||
lng: 120,
|
||||
lat: 31,
|
||||
iconType: 'cloud',
|
||||
iconColor: "#F0F8FF",
|
||||
backgoundColor: "#1E90FF",
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
|
|
@ -53,8 +53,8 @@ let originData = [
|
|||
lng: 120.6,
|
||||
lat: 30.8,
|
||||
iconType: 'cloud',
|
||||
iconColor: "#F0F8FF",
|
||||
backgoundColor: "#1E90FF",
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
|
|
@ -62,8 +62,8 @@ let originData = [
|
|||
lng: 120.5,
|
||||
lat: 31.3,
|
||||
iconType: 'cloud',
|
||||
iconColor: "#F0F8FF",
|
||||
backgoundColor: "#1E90FF",
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
},
|
||||
|
|
@ -71,8 +71,8 @@ let originData = [
|
|||
lng: 121.3,
|
||||
lat: 30.2,
|
||||
iconType: 'smallRain',
|
||||
iconColor: "#6EA0FF",
|
||||
backgoundColor: "#4678AA",
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: '#4678AA',
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
|
|
@ -80,8 +80,8 @@ let originData = [
|
|||
lng: 121,
|
||||
lat: 30.5,
|
||||
iconType: 'smallRain',
|
||||
iconColor: "#6EA0FF",
|
||||
backgoundColor: "#4678AA",
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: '#4678AA',
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
|
|
@ -89,8 +89,8 @@ let originData = [
|
|||
lng: 120.6,
|
||||
lat: 30,
|
||||
iconType: 'middleRain',
|
||||
iconColor: "#6495ED",
|
||||
backgoundColor: "#326EA0",
|
||||
iconColor: '#6495ED',
|
||||
backgoundColor: '#326EA0',
|
||||
temperature: '24℃',
|
||||
weather: '中雨'
|
||||
},
|
||||
|
|
@ -98,8 +98,8 @@ let originData = [
|
|||
lng: 120.2,
|
||||
lat: 29.7,
|
||||
iconType: 'smallRain',
|
||||
iconColor: "#6EA0FF",
|
||||
backgoundColor: "#4678AA",
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: '#4678AA',
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
},
|
||||
|
|
@ -107,8 +107,8 @@ let originData = [
|
|||
lng: 121.7,
|
||||
lat: 29.8,
|
||||
iconType: 'middleRain',
|
||||
iconColor: "#6495ED",
|
||||
backgoundColor: "#326EA0",
|
||||
iconColor: '#6495ED',
|
||||
backgoundColor: '#326EA0',
|
||||
temperature: '24℃',
|
||||
weather: '中雨'
|
||||
},
|
||||
|
|
@ -116,110 +116,110 @@ let originData = [
|
|||
lng: 121.5,
|
||||
lat: 30,
|
||||
iconType: 'hugeRain',
|
||||
iconColor: "#4678D2",
|
||||
backgoundColor: "#285A8C",
|
||||
iconColor: '#4678D2',
|
||||
backgoundColor: '#285A8C',
|
||||
temperature: '20℃',
|
||||
weather: '大雨'
|
||||
},
|
||||
}
|
||||
];
|
||||
let fontFamily = 'iconfont';
|
||||
let fontPath = '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
|
||||
const fontFamily = 'iconfont';
|
||||
const fontPath = '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
scene.addIconFonts([
|
||||
['smallRain', ''],
|
||||
['middleRain', ''],
|
||||
['hugeRain', ''],
|
||||
['sun', ''],
|
||||
['cloud', ''],
|
||||
[ 'smallRain', '' ],
|
||||
[ 'middleRain', '' ],
|
||||
[ 'hugeRain', '' ],
|
||||
[ 'sun', '' ],
|
||||
[ 'cloud', '' ]
|
||||
]);
|
||||
|
||||
scene.on('loaded', () => {
|
||||
|
||||
const layer = new PointLayer()
|
||||
.source(originData, {
|
||||
|
||||
const layer = new PointLayer()
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.color('backgoundColor')
|
||||
.size(40);
|
||||
scene.addLayer(layer);
|
||||
|
||||
|
||||
const pointIconFontLayer = new PointLayer({})
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('iconType', 'text')
|
||||
.size(30)
|
||||
.color('iconColor')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 38, 10 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(pointIconFontLayer);
|
||||
|
||||
const textLayer = new PointLayer({})
|
||||
.source(originData,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('circle')
|
||||
.color('backgoundColor')
|
||||
.size(40)
|
||||
scene.addLayer(layer);
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('temperature', 'text')
|
||||
.size(10)
|
||||
.color('#ffffff')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 5, -55 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily: 'Times New Roman',
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(textLayer);
|
||||
|
||||
|
||||
const pointIconFontLayer = new PointLayer({})
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
}
|
||||
},
|
||||
)
|
||||
.shape('iconType', 'text')
|
||||
.size(30)
|
||||
.color('iconColor')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [38, 10], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(pointIconFontLayer);
|
||||
|
||||
const textLayer = new PointLayer({})
|
||||
.source(originData,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
},
|
||||
)
|
||||
.shape('temperature', 'text')
|
||||
.size(10)
|
||||
.color('#ffffff')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [5, -55], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily: "Times New Roman",
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(textLayer);
|
||||
|
||||
const textLayer2 = new PointLayer({})
|
||||
.source(originData,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
},
|
||||
)
|
||||
.shape('weather', 'text')
|
||||
.size(14)
|
||||
.color('#ffffff')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [5, -15], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily: "Times New Roman",
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(textLayer2);
|
||||
const textLayer2 = new PointLayer({})
|
||||
.source(originData,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
}
|
||||
)
|
||||
.shape('weather', 'text')
|
||||
.size(14)
|
||||
.color('#ffffff')
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 5, -15 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily: 'Times New Roman',
|
||||
textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(textLayer2);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@ const scene = new Scene({
|
|||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
pitch: 40,
|
||||
center: [118.8, 32.056],
|
||||
center: [ 118.8, 32.056 ],
|
||||
zoom: 12.5
|
||||
})
|
||||
});
|
||||
let fontFamily = 'iconfont';
|
||||
let fontPath =
|
||||
const fontFamily = 'iconfont';
|
||||
const fontPath =
|
||||
'//at.alicdn.com/t/font_2534097_x6rsov3i1g.woff2?t=1622107341225';
|
||||
scene.addIconFont("icon", "")
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
scene.addIconFont('icon', '');
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
|
||||
let colors = [
|
||||
'#87CEFA',
|
||||
'#00BFFF',
|
||||
const colors = [
|
||||
'#87CEFA',
|
||||
'#00BFFF',
|
||||
|
||||
'#7FFFAA',
|
||||
'#00FF7F',
|
||||
|
|
@ -30,28 +30,28 @@ let colors = [
|
|||
'#FF7F50',
|
||||
'#FF6347',
|
||||
'#FF0000'
|
||||
]
|
||||
];
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
|
||||
const filllayer = new PolygonLayer({
|
||||
name: 'fill',
|
||||
zIndex: 3,
|
||||
})
|
||||
.source(data)
|
||||
.shape('fill')
|
||||
.color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)'])
|
||||
.style({
|
||||
opacity: 0.8
|
||||
const filllayer = new PolygonLayer({
|
||||
name: 'fill',
|
||||
zIndex: 3
|
||||
})
|
||||
.source(data)
|
||||
.shape('fill')
|
||||
.color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ])
|
||||
.style({
|
||||
opacity: 0.8
|
||||
});
|
||||
scene.addLayer(filllayer);
|
||||
|
||||
const linelayer = new LineLayer({
|
||||
zIndex: 5,
|
||||
name: 'line2',
|
||||
name: 'line2'
|
||||
})
|
||||
.source(data)
|
||||
.shape('line')
|
||||
|
|
@ -60,24 +60,24 @@ scene.on('loaded', () => {
|
|||
.style({
|
||||
opacity: 0.3
|
||||
});
|
||||
scene.addLayer(linelayer);
|
||||
|
||||
const pointLayer = new PointLayer({
|
||||
zIndex: 10
|
||||
})
|
||||
scene.addLayer(linelayer);
|
||||
|
||||
const pointLayer = new PointLayer({
|
||||
zIndex: 10
|
||||
})
|
||||
.source(data)
|
||||
.shape('icon', 'text')
|
||||
.size(30)
|
||||
.color('count', t => {
|
||||
let c = Number(t.replace('℃', ''))
|
||||
return colors[Math.floor(((c - 18)/16)*10)]
|
||||
const c = Number(t.replace('℃', ''));
|
||||
return colors[Math.floor(((c - 18) / 16) * 10)];
|
||||
})
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [30, 5],
|
||||
padding: [2, 2],
|
||||
textOffset: [ 30, 5 ],
|
||||
padding: [ 2, 2 ],
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
iconfont: true
|
||||
// textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
|
|
@ -85,19 +85,19 @@ scene.on('loaded', () => {
|
|||
const tempertureLayer = new PointLayer({
|
||||
zIndex: 10
|
||||
})
|
||||
.source(data)
|
||||
.shape('count', 'text')
|
||||
.size(12)
|
||||
.color('count', t => {
|
||||
let c = Number(t.replace('℃', ''))
|
||||
return colors[Math.floor(((c - 18)/16)*10)]
|
||||
})
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [35, 30],
|
||||
padding: [1, 1],
|
||||
});
|
||||
scene.addLayer(tempertureLayer);
|
||||
.source(data)
|
||||
.shape('count', 'text')
|
||||
.size(12)
|
||||
.color('count', t => {
|
||||
const c = Number(t.replace('℃', ''));
|
||||
return colors[Math.floor(((c - 18) / 16) * 10)];
|
||||
})
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 35, 30 ],
|
||||
padding: [ 1, 1 ]
|
||||
});
|
||||
scene.addLayer(tempertureLayer);
|
||||
|
||||
})
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ export default class Amap2demo_iconfont extends React.Component {
|
|||
let fontPath =
|
||||
'//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
|
||||
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
|
|
@ -24,7 +23,7 @@ export default class Amap2demo_iconfont extends React.Component {
|
|||
style: 'normal',
|
||||
zoom: 9,
|
||||
zooms: [8, 10],
|
||||
viewMode: '2D'
|
||||
viewMode: '2D',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
|
|
@ -44,109 +43,109 @@ export default class Amap2demo_iconfont extends React.Component {
|
|||
lng: 120,
|
||||
lat: 30,
|
||||
iconType: 'sun',
|
||||
iconColor: "#FFA500",
|
||||
backgoundColor: "#00BFFF",
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: '#00BFFF',
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
weather: '晴朗',
|
||||
},
|
||||
{
|
||||
lng: 120.2,
|
||||
lat: 30.5,
|
||||
iconType: 'sun',
|
||||
iconColor: "#FFA500",
|
||||
backgoundColor: "#00BFFF",
|
||||
iconColor: '#FFA500',
|
||||
backgoundColor: '#00BFFF',
|
||||
temperature: '28℃',
|
||||
weather: '晴朗'
|
||||
weather: '晴朗',
|
||||
},
|
||||
{
|
||||
lng: 121.5,
|
||||
lat: 31.4,
|
||||
iconType: 'cloud',
|
||||
iconColor: "#F0F8FF",
|
||||
backgoundColor: "#1E90FF",
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
weather: '多云',
|
||||
},
|
||||
{
|
||||
lng: 120,
|
||||
lat: 31,
|
||||
iconType: 'cloud',
|
||||
iconColor: "#F0F8FF",
|
||||
backgoundColor: "#1E90FF",
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
weather: '多云',
|
||||
},
|
||||
{
|
||||
lng: 120.6,
|
||||
lat: 30.8,
|
||||
iconType: 'cloud',
|
||||
iconColor: "#F0F8FF",
|
||||
backgoundColor: "#1E90FF",
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
weather: '多云',
|
||||
},
|
||||
{
|
||||
lng: 120.5,
|
||||
lat: 31.3,
|
||||
iconType: 'cloud',
|
||||
iconColor: "#F0F8FF",
|
||||
backgoundColor: "#1E90FF",
|
||||
iconColor: '#F0F8FF',
|
||||
backgoundColor: '#1E90FF',
|
||||
temperature: '22℃',
|
||||
weather: '多云'
|
||||
weather: '多云',
|
||||
},
|
||||
{
|
||||
lng: 121.3,
|
||||
lat: 30.2,
|
||||
iconType: 'smallRain',
|
||||
iconColor: "#6EA0FF",
|
||||
backgoundColor: "#4678AA",
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: '#4678AA',
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
weather: '小雨',
|
||||
},
|
||||
{
|
||||
lng: 121,
|
||||
lat: 30.5,
|
||||
iconType: 'smallRain',
|
||||
iconColor: "#6EA0FF",
|
||||
backgoundColor: "#4678AA",
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: '#4678AA',
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
weather: '小雨',
|
||||
},
|
||||
{
|
||||
lng: 120.6,
|
||||
lat: 30,
|
||||
iconType: 'middleRain',
|
||||
iconColor: "#6495ED",
|
||||
backgoundColor: "#326EA0",
|
||||
iconColor: '#6495ED',
|
||||
backgoundColor: '#326EA0',
|
||||
temperature: '24℃',
|
||||
weather: '中雨'
|
||||
weather: '中雨',
|
||||
},
|
||||
{
|
||||
lng: 120.2,
|
||||
lat: 29.7,
|
||||
iconType: 'smallRain',
|
||||
iconColor: "#6EA0FF",
|
||||
backgoundColor: "#4678AA",
|
||||
iconColor: '#6EA0FF',
|
||||
backgoundColor: '#4678AA',
|
||||
temperature: '22℃',
|
||||
weather: '小雨'
|
||||
weather: '小雨',
|
||||
},
|
||||
{
|
||||
lng: 121.7,
|
||||
lat: 29.8,
|
||||
iconType: 'middleRain',
|
||||
iconColor: "#6495ED",
|
||||
backgoundColor: "#326EA0",
|
||||
iconColor: '#6495ED',
|
||||
backgoundColor: '#326EA0',
|
||||
temperature: '24℃',
|
||||
weather: '中雨'
|
||||
weather: '中雨',
|
||||
},
|
||||
{
|
||||
lng: 121.5,
|
||||
lat: 30,
|
||||
iconType: 'hugeRain',
|
||||
iconColor: "#4678D2",
|
||||
backgoundColor: "#285A8C",
|
||||
iconColor: '#4678D2',
|
||||
backgoundColor: '#285A8C',
|
||||
temperature: '20℃',
|
||||
weather: '大雨'
|
||||
weather: '大雨',
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -160,19 +159,17 @@ export default class Amap2demo_iconfont extends React.Component {
|
|||
})
|
||||
.shape('circle')
|
||||
.color('backgoundColor')
|
||||
.size(40)
|
||||
.size(40);
|
||||
scene.addLayer(layer);
|
||||
|
||||
|
||||
const pointIconFontLayer = new PointLayer({})
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
}
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
)
|
||||
})
|
||||
.shape('iconType', 'text')
|
||||
.size(30)
|
||||
.color('iconColor')
|
||||
|
|
@ -186,15 +183,13 @@ export default class Amap2demo_iconfont extends React.Component {
|
|||
scene.addLayer(pointIconFontLayer);
|
||||
|
||||
const textLayer = new PointLayer({})
|
||||
.source(originData,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
)
|
||||
})
|
||||
.shape('temperature', 'text')
|
||||
.size(10)
|
||||
.color('#ffffff')
|
||||
|
|
@ -206,21 +201,19 @@ export default class Amap2demo_iconfont extends React.Component {
|
|||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily: "Times New Roman",
|
||||
fontFamily: 'Times New Roman',
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(textLayer);
|
||||
|
||||
const textLayer2 = new PointLayer({})
|
||||
.source(originData,
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
.source(originData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
)
|
||||
})
|
||||
.shape('weather', 'text')
|
||||
.size(14)
|
||||
.color('#ffffff')
|
||||
|
|
@ -232,11 +225,10 @@ export default class Amap2demo_iconfont extends React.Component {
|
|||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily: "Times New Roman",
|
||||
fontFamily: 'Times New Roman',
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(textLayer2);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,20 +17,20 @@ export default class Amap2demo_mesh extends React.Component {
|
|||
style: 'dark',
|
||||
pitch: 40,
|
||||
center: [118.8, 32.056],
|
||||
zoom: 12.5
|
||||
zoom: 12.5,
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
this.scene = scene;
|
||||
let fontFamily = 'iconfont';
|
||||
let fontPath =
|
||||
'//at.alicdn.com/t/font_2534097_x6rsov3i1g.woff2?t=1622107341225';
|
||||
scene.addIconFont("icon", "")
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
scene.addIconFont('icon', '');
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
|
||||
let colors = [
|
||||
'#87CEFA',
|
||||
'#00BFFF',
|
||||
'#87CEFA',
|
||||
'#00BFFF',
|
||||
|
||||
'#7FFFAA',
|
||||
'#00FF7F',
|
||||
|
|
@ -41,15 +41,15 @@ export default class Amap2demo_mesh extends React.Component {
|
|||
|
||||
'#FF7F50',
|
||||
'#FF6347',
|
||||
'#FF0000'
|
||||
]
|
||||
'#FF0000',
|
||||
];
|
||||
|
||||
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((data) => {
|
||||
|
||||
const filllayer = new PolygonLayer({
|
||||
name: 'fill',
|
||||
zIndex: 3,
|
||||
|
|
@ -58,8 +58,8 @@ export default class Amap2demo_mesh extends React.Component {
|
|||
.shape('fill')
|
||||
.color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)'])
|
||||
// .color('count', [
|
||||
// '#87CEFA',
|
||||
// '#00BFFF',
|
||||
// '#87CEFA',
|
||||
// '#00BFFF',
|
||||
|
||||
// '#7FFFAA',
|
||||
// '#00FF7F',
|
||||
|
|
@ -73,52 +73,52 @@ export default class Amap2demo_mesh extends React.Component {
|
|||
// '#FF0000'
|
||||
// ])
|
||||
.style({
|
||||
opacity: 0.8
|
||||
})
|
||||
scene.addLayer(filllayer);
|
||||
opacity: 0.8,
|
||||
});
|
||||
scene.addLayer(filllayer);
|
||||
|
||||
const linelayer = new LineLayer({
|
||||
zIndex: 5,
|
||||
name: 'line2',
|
||||
})
|
||||
.source(data)
|
||||
.shape('line')
|
||||
.size(1)
|
||||
.color('#fff')
|
||||
.style({
|
||||
opacity: 0.3
|
||||
});
|
||||
scene.addLayer(linelayer);
|
||||
|
||||
const pointLayer = new PointLayer({
|
||||
zIndex: 10
|
||||
})
|
||||
.source(data)
|
||||
.shape('icon', 'text')
|
||||
.size(30)
|
||||
.color('count', t => {
|
||||
let c = Number(t.replace('℃', ''))
|
||||
return colors[Math.floor(((c - 18)/16)*10)]
|
||||
})
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [30, 5],
|
||||
padding: [2, 2],
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
// textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
const linelayer = new LineLayer({
|
||||
zIndex: 5,
|
||||
name: 'line2',
|
||||
})
|
||||
.source(data)
|
||||
.shape('line')
|
||||
.size(1)
|
||||
.color('#fff')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
});
|
||||
scene.addLayer(linelayer);
|
||||
|
||||
const tempertureLayer = new PointLayer({
|
||||
zIndex: 10
|
||||
const pointLayer = new PointLayer({
|
||||
zIndex: 10,
|
||||
})
|
||||
.source(data)
|
||||
.shape('icon', 'text')
|
||||
.size(30)
|
||||
.color('count', (t) => {
|
||||
let c = Number(t.replace('℃', ''));
|
||||
return colors[Math.floor(((c - 18) / 16) * 10)];
|
||||
})
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [30, 5],
|
||||
padding: [2, 2],
|
||||
fontFamily,
|
||||
iconfont: true,
|
||||
// textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
const tempertureLayer = new PointLayer({
|
||||
zIndex: 10,
|
||||
})
|
||||
.source(data)
|
||||
.shape('count', 'text')
|
||||
.size(12)
|
||||
// .color('count', [
|
||||
// '#87CEFA',
|
||||
// '#00BFFF',
|
||||
// '#87CEFA',
|
||||
// '#00BFFF',
|
||||
|
||||
// '#7FFFAA',
|
||||
// '#00FF7F',
|
||||
|
|
@ -131,18 +131,17 @@ export default class Amap2demo_mesh extends React.Component {
|
|||
// '#FF6347',
|
||||
// '#FF0000'
|
||||
// ])
|
||||
.color('count', t => {
|
||||
let c = Number(t.replace('℃', ''))
|
||||
return colors[Math.floor(((c - 18)/16)*10)]
|
||||
.color('count', (t) => {
|
||||
let c = Number(t.replace('℃', ''));
|
||||
return colors[Math.floor(((c - 18) / 16) * 10)];
|
||||
})
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [35, 30],
|
||||
textOffset: [35, 30],
|
||||
padding: [1, 1],
|
||||
});
|
||||
scene.addLayer(tempertureLayer);
|
||||
|
||||
})
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,21 +18,20 @@ export default class Amap2demo_road extends React.Component {
|
|||
center: [120.1145, 30.221],
|
||||
pitch: 50,
|
||||
zoom: 16.8,
|
||||
viewMode: '3D'
|
||||
viewMode: '3D',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/91d27a97-869a-459b-a617-498dcc9c3e7f.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
|
||||
scene.addImage(
|
||||
'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()
|
||||
|
|
@ -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',
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source([{
|
||||
lng: 120.11025885601617,
|
||||
lat: 30.22006389085372,
|
||||
icon: 'start'
|
||||
},{
|
||||
lng: 120.11123578376913,
|
||||
lat: 30.220443561196277,
|
||||
icon: 'visitor'
|
||||
},{
|
||||
lng: 120.11408457779198,
|
||||
lat: 30.22019805564678,
|
||||
icon: 'museum'
|
||||
},{
|
||||
lng: 120.11683172384723,
|
||||
lat: 30.21875509667716,
|
||||
icon: 'supermarket'
|
||||
},{
|
||||
lng: 120.11945546294194,
|
||||
lat: 30.218724022876376,
|
||||
icon: 'tower'
|
||||
},{
|
||||
lng: 120.1184189041221,
|
||||
lat: 30.21783201718256,
|
||||
icon: 'end'
|
||||
}
|
||||
], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
.source(
|
||||
[
|
||||
{
|
||||
lng: 120.11025885601617,
|
||||
lat: 30.22006389085372,
|
||||
icon: 'start',
|
||||
},
|
||||
{
|
||||
lng: 120.11123578376913,
|
||||
lat: 30.220443561196277,
|
||||
icon: 'visitor',
|
||||
},
|
||||
{
|
||||
lng: 120.11408457779198,
|
||||
lat: 30.22019805564678,
|
||||
icon: 'museum',
|
||||
},
|
||||
{
|
||||
lng: 120.11683172384723,
|
||||
lat: 30.21875509667716,
|
||||
icon: 'supermarket',
|
||||
},
|
||||
{
|
||||
lng: 120.11945546294194,
|
||||
lat: 30.218724022876376,
|
||||
icon: 'tower',
|
||||
},
|
||||
{
|
||||
lng: 120.1184189041221,
|
||||
lat: 30.21783201718256,
|
||||
icon: 'end',
|
||||
},
|
||||
],
|
||||
{
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
},
|
||||
})
|
||||
.shape('icon', ['start', 'visitor', 'museum', 'supermarket', 'tower', 'end'])
|
||||
)
|
||||
.shape('icon', [
|
||||
'start',
|
||||
'visitor',
|
||||
'museum',
|
||||
'supermarket',
|
||||
'tower',
|
||||
'end',
|
||||
])
|
||||
.size(35)
|
||||
.style({
|
||||
offsets: [0, 20]
|
||||
})
|
||||
offsets: [0, 20],
|
||||
});
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default class Amap2demo_text extends React.Component {
|
|||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
scene.addIconFont("icon1", "")
|
||||
scene.addIconFont('icon1', '');
|
||||
// scene.addIconFont("icon2", "")
|
||||
|
||||
// scene.addIconFonts([
|
||||
|
|
@ -56,7 +56,6 @@ export default class Amap2demo_text extends React.Component {
|
|||
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
scene.on('loaded', () => {
|
||||
|
||||
fetch(
|
||||
'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,
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
})
|
||||
});
|
||||
|
||||
// https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json
|
||||
// const pointIconFontLayer = new PointLayer({})
|
||||
|
|
|
|||
Loading…
Reference in New Issue