最近工作中使用cesium加载行政区划,范围大了,点多了,用entity就很卡,改成了primitive好多了。。。
框架使用vue2
单纯添加行政区划边界
只添加线要素,不添加面要素
无任何交互操作
primitive性能比entity好
主要代码
const polylinePrimitive = new Cesium.PolylineCollection()
axios({ method: 'get', url }).then(res => {
for (let i = 0; i < res.data.features.length; i++) {
for (let j = 0; j < res.data.features[i].geometry.coordinates.length; j++) {
const polylineArr = res.data.features[i].geometry.coordinates[j].toString().split(',')
// 这里是个随机获取颜色的方法,随便写个就行了,不贴过来了
const { r, g, b } = this.getRandomColor()
const cartesian = Cesium.Cartesian3.fromDegreesArray(polygonArr)
polylinePrimitive.add({
positions: cartesian,
width: 1.0,
loop: true,
material: new Cesium.Material.fromType('Color', {
color: new Cesium.Color(r / 255, g / 255, b / 255)
})
})
}
}
})
const primitives = viewer.scene.primitives
primitives.add(polylinePrimitive)
res.data.features的大概内容如下
效果如下
其实上面代码主要是bingAI写的。。。。