说明:
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)
? })
}
相关效果: