该代码段创建了一个Scene对象，配置了高德地图，并在加载完成后添加了choropleth和point层进行数据可视化。Choropleth用于展示行政区域的色块，PointLayer和PointLayerText则用于显示点聚合和计数标签。
const scene = new Scene({
id: 'map_container',
map: new GaodeMap({
type: 'amap',
center: [ 22.546432, 113.944651 ],
zoom: 10,
pitch: 5,
token: '74f224aca50b64d7d2bcdd780535f885'
})
})
scene.on('loaded', () => {
const dataSource = new Source(this.sourceData, {
parser: {
type: 'json',
x: 'x',
y: 'y'
},
cluster: true
})
// 行政区域
const choropleth = new Choropleth({
source: {
data: [],
joinBy: {
sourceField: 'adcode',
geoField: 'adcode'
},
transforms: []
},
viewLevel: {
level: 'country',
adcode: '100000'
},
autoFit: true,
color: '#ccc',
style: {
opacity: 1,
stroke: '#F2F7F7',
lineWidth: 0.6,
lineOpacity: 0.8
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#f0f0f0',
strokeWidth: 2,
textAllowOverlap: false,
padding: [5, 5],
textOffset: [0, 40]
}
},
zoom: {
position: 'bottomright'
}
})
// 气泡标注
const pointLayer = new PointLayer({
autoFit: true,
zIndex: 1
})
.source(dataSource)
.shape('circle')
.scale('point_count', {
type: 'quantile'
})
.size(20)
.active(true)
.color('#1AA9FF')
.style({
strokeWidth: 1,
stroke: '#fff'
})
// 聚合图标注
const pointLayerText = new PointLayer({
autoFit: true,
zIndex: 2
})
.source(dataSource)
.shape('count', 'text')
.size(15)
.active(false)
.color('red')
.style({
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
strokeWidth: 0 // 描边宽度
})
choropleth.addToScene(scene)
scene.addLayer(pointLayer)
scene.addLayer(pointLayerText)
})
await this.$nextTick()
}
747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
