cesium primitive添加行政区划边界

532 阅读1分钟

最近工作中使用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的大概内容如下

image.png

效果如下

image.png

其实上面代码主要是bingAI写的。。。。