mars3D插件mars3d-mapv使用

一、实现目标

使用mars3d实现对区域内点密集度的统计，即官网实例的聚合点。

二、核心代码

const createMapvLayer=()=> {
  // 构造数据
  const positions = []
  const geojson = []
  let randomCount = 1000
  while (randomCount--) {
    // 取区域内的随机点
    const point = [random(113 * 1000, 119 * 1000) / 1000, random(28 * 1000, 35 * 1000) / 1000]

    positions.push(Cesium.Cartesian3.fromDegrees(point[0], point[1]))

    geojson.push({
      geometry: {
        type: "Point",
        coordinates: point
      },
      // 具体点的icon设置
      iconOptions: {
        url: "img/marker/lace-blue.png", // 非聚合时点的icon,可设置为空
        width: 25,
        height: 36
      }
    })
  }
  map.camera.flyTo({
    destination: Cesium.Rectangle.fromCartesianArray(positions)
  })

  const options = {
    draw: "cluster",
    depthTest: false,
    fillStyle: "rgba(255, 50, 0, 1.0)",
    unit: "px", // 单位
    minSize: 8, // 聚合点最小半径
    maxSize: 31, // 聚合点最大半径
    globalAlpha: 0.8, // 透明度
    clusterRadius: 150, // 聚合像素半径
    maxClusterZoom: 18, // 最大聚合的级别
    maxZoom: 19, // 最大显示级别
    minPoints: 5, // 最少聚合点数，点数多于此值才会被聚合
    extent: 400, // 聚合的细腻程度，越高聚合后点越密集
    label: {
      // 聚合文本样式
      show: true, // 是否显示
      fillStyle: "white"
      // shadowColor: 'yellow',
      // font: '20px Arial',
      // shadowBlur: 10,
    },
    gradient: { 0: "blue", 0.5: "yellow", 1.0: "rgb(255,0,0)" }, // 聚合图标渐变色
    // pointerEvents: true,

    data: geojson // 数据
  }

  // 创建MapV图层
  const mapVLayer = new mars3d.layer.MapVLayer(options)
  map.addLayer(mapVLayer)
}

三、遇到的问题

1、直接使用mars3d.layer.MapVLayer(）出现报错mars3d.layer.MapVLayer is not a constructor

解决： 需要安装mars3d-mapv插件

yarn add mars3d-mapv

2、安装mars3d-mapv后报错

解决：需要在main.ts进行全局导入

import 'mars3d-mapv'

3、安装、导入mars3d-mapv后，运行终端报错

 Could not resolve "mapv"
 You can mark the path "mapv" as external to exclude it from the bundle, which will remove this   error. You can also surround this "require" call with a try/catch block to handle this failure at   run-time instead of bundle-time.

解决：需要再安装mapv，然后进行全局导入后可以正常运行和加载

yarn add mapv

// main.ts
import 'mars3d-mapv'
import 'mapv'