Cesium-EarthSdk简单功能实现（四）——3D POI兴趣点

Cesium-EarthSdk简单功能实现（四）——3D POI兴趣点

效果

代码： https://gitee.com/magic1412/earthsdk-vue-test

1、将poi点数据处理成如下图json

id为唯一id，xy分别为经纬度，val为poi标签

[   
{"id":"df10eda4-f339-4ebb-967a-f7d665b125a9","x":121.4833408,"y":31.23464991,"h":58.72487865,"val":"01"},
{"id":"ba15bc56-0c0c-4a19-919c-6dd7643810ad","x":121.4774402,"y":31.23472907,"h":28.28965503,"val":"02"},
{"id":"914611ec-6298-450c-9325-abe347f5728b","x":121.4838078,"y":31.22964605,"h":25.93688953,"val":"03"},  
{"id":"e1ce2735-97f4-4d0b-8b6d-7aa7f2513351","x":121.4784744,"y":31.22767071,"h":0,"val":"04"}
]

2、构造实体object，并添加至sceneTree中

addCameraPts(){//实体对象var cameraRefs = {ref: "camera",title: "icon",enabled:false,children: []}//读取json,并对每个点构造点对象,并添加至children数组中var pts = require('@/assets/json/pts.json')pts.forEach(i =>{cameraRefs.children.push({czmObject: {xbsjType: "Pin",xbsjGuid: "df10eda4-f339-4ebb-967a-f7d665b125a9",name: "图标点",position: [i.x*Math.PI/180,i.y*Math.PI/180,i.h],imageUrl: "./assets/myicon/camera.png",pinBuilder: {extText: i.val,fillColor: [0.8941176470588236,1,0,1],outlineColor: [1,0.9019607843137255,0.13725490196078433,0]},far: 1073741824}})})//添加至sceneTree中this._earth.sceneTree.root.children.push(cameraRefs);
}

3、添加点击事件

    //对children中的每个czmObject添加点击事件this._earth.sceneTree.$refs.camera.children.map(item => {item.czmObject.onclick = () => {alert(item.czmObject.pinBuilder.extText)}})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！