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

发布时间:2024年01月15日

说明:

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)

? })

}

相关效果:

文章来源:https://blog.csdn.net/m0_69803146/article/details/135548943
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。