new mars3d.layer.GeoJsonLayer({实现图标点billboard贴模型聚合效果

说明:

1.【mars3d】的依赖库cesium本身是不支持贴地/贴模型操作的

2.sdk内部异步计算了数据的贴地/高度值之后,更新到图层上实现贴地/贴模型效果的

3.相关的示例链接:

1.功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

4.相关的计算贴地/贴模型的参数:

1.PointUtil - V3.7.0 - Mars3D API文档

关键代码参考:

function addLayer() {

  const tiles3dLayer = new mars3d.layer.TilesetLayer({

    name: "合肥市建筑物",

    url: "//data.mars3d.cn/3dtiles/jzw-hefei/tileset.json",

    maximumScreenSpaceError: 1,

    marsJzwStyle: true, // 打开建筑物特效(内置Shader代码)

    popup: [

      { field: "objectid", name: "编号" },

      { field: "name", name: "名称" },

      { field: "height", name: "楼高", unit: "米" }

    ],

    center: { lat: 31.841018, lng: 117.252932, alt: 1346, heading: 38, pitch: -26 },

    flyTo: true

  })

  map.addLayer(tiles3dLayer)

   geoJsonLayer = new mars3d.layer.GeoJsonLayer({

    name: "体育设施点",

    url: "//data.mars3d.cn/file/geojson/hfty-point.json",

    clustering: {

      enabled: true,

      pixelRange: 20

    },

    symbol: {

      type: "billboardP",

      styleOptions: {

        image: "img/marker/mark-red.png",

        verticalOrigin: Cesium.VerticalOrigin.BOTTOM

      }

    },

    popup: "all",

    flyTo: true

  })

  map.addLayer(geoJsonLayer)

  geoJsonLayer.on("clustering", function (event) {

    // console.log("新增聚合对象", event)

    const billboard = event.cluster.billboard

    billboard.position = mars3d.PointUtil.getSurfacePosition(map.scene, billboard.position)

  })

}

相关效果:

new mars3d.layer.GeoJsonLayer({实现图标点billboard贴模型聚合效果_第1张图片

你可能感兴趣的:(Mars3d,app,vue,前端,javascript,开发语言)