海量3dtiles 发布 cesium_【GIS前端01】CesiumEarthSdk简单功能实现建筑物点击（附代码和3dtiles文件）...

Cesium-EarthSdk

Cesium-EarthSdk是一款基于Cesium的开源免费三维地球二次开发包，可以搭 配CesiumLab，快速发布三维切片服务，搭建和开发三维场景。 在GIS领域，同类产品主要是SuperMap iClient3D for WebGL(基于Cesium)和ArcGIS API for JavaScript。

Cesium-EarthSdk优劣势(纯主观)

优  势

1、大大降低了Cesium的开发难度，在缺乏图形学的基础知识下，可以通过option配置的方式，快速实现酷炫的三维场景效果，大场景渲染效果好。

2、该团队开发的CesiumLab目前还可以免费做三维切片，这点就很良心。

劣  势

相比游戏引擎，成品的交互体验和小场景渲染效果有局限性。这是这一类框架的弱势。如果项目追求较为丝滑的交互体验，精细的渲染效果，建议直接去找unity或ue4，不要在threejs上和Cesium相关的框架上浪费时间，少走弯路。

简单功能实现-建筑物点击弹出事件

方法一 ，调用原生接口实现思路

1、设置鼠标左键监听事件，获取点击的建筑物对象(Cesium3DTileFeature)的属性信息

2、构建pin弹出框json对象

3、将pin对象加入场景

setBuildingClickHandler(bool) {      this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);      //设置鼠标左键监听事件      this._handler.setInputAction((click) => {        if(bool) {          //场景场景还原最初          this._earth.sceneTree.root.children.length = this.initChildrenLength          //可以通过czm对象调用Cesium相关接口          //获取点击对象          var pickedFeature = this._earth.czm.viewer.scene.pick(click.position);          if (typeof pickedFeature !== 'undefined' && this.getObjClassName(pickedFeature) === 'Cesium3DTileFeature') {            //获取点击位置            var clickPosition = this._earth.pickPosition(click.position)            //获取点击属性            var name = pickedFeature.getProperty('NAME')            var height = pickedFeature.getProperty('HEIGHT')            //构建pin弹出框            var json = {              "czmObject": {                "xbsjType": "Pin",                "xbsjGuid": "c2ab17db-36b2-4982-add6-cece932b9b68",                "name": "building",                "evalString": "const width = 200;\nconst height = 100;\nfunction createLabelCanvas(p) {\n  if (p._labelDiv) {\n    p._earth.czm.viewer.container.removeChild(p._labelDiv);\n    p._labelDiv = undefined;\n  }\n  const labelDiv = document.createElement('div');\n  labelDiv.style = 'width:'+width+'px;height: '+height+'px;position: absolute; pointer-events: none;'\n\n  p._earth.czm.viewer.container.appendChild(labelDiv);\n  p._labelDiv = labelDiv;\n\n  var dis = XE.MVVM.watch(() => {\n    labelDiv.style.display = p.enabled ? 'block' : 'none';\n  });\n\n  p.disposers.push(() => {\n    if (p._labelDiv) {\n      p._earth.czm.viewer.container.removeChild(p._labelDiv);\n      p._labelDiv = undefined;\n    }\n    dis();\n  });\n\n  const labelCanvas = document.createElement('canvas');\n  labelCanvas.style = 'width: 100%;height: 100%;';\n\n  labelCanvas.width = width;\n  labelCanvas.height = height;\n  labelDiv.appendChild(labelCanvas);\n  return labelCanvas;\n}\n\nfunction createDrawFunc(p) {\n  const labelCanvas = createLabelCanvas(p);\n  const ctx = labelCanvas.getContext('2d');\n\n  function draw(w) {\n    ctx.clearRect(0, 0, width, height);\n\n    ctx.save();\n    ctx.lineWidth = 2;\n    ctx.strokeStyle = 'rgb(31, 255,255)';\n    ctx.beginPath();\n    ctx.moveTo(width, height);\n    ctx.lineTo(width-height, 22);\n    ctx.lineTo(0, 22);\n    ctx.stroke();\n    ctx.restore();\n    ctx.font = \"16px console\"; \n    ctx.fillStyle = 'rgb(255, 255, 0)';\n    ctx.fillText('" +                    name + " " + height + "米', 0, 20);\n    ctx.restore();\n  }\n\n  p._dDraw = draw;\n}\n\ncreateDrawFunc(p);\n\nlet d = 0;\nlet c = 0;\np._dDraw(c);\nconst preUpdateListener = p._earth.czm.scene.preUpdate.addEventListener(() => {\n  if (d !== c) {\n    c += (d - c) * 0.1;\n    if (Math.abs(c - d) < 0.1) {\n      c = d;\n    }\n    p._dDraw(c);\n  }\n});\np.disposers.push(() => preUpdateListener && preUpdateListener());\n\nconst container = p._earth.czm.viewer.container;\nconst unwatch = XE.MVVM.watch(() => [...p.winPos], winPos => {\n  if (p._labelDiv) {\n    p._labelDiv.style.left = (winPos[0] -  p._labelDiv.clientWidth) + 'px';\n    p._labelDiv.style.bottom = winPos[3]+'px';\n  } \n});\np.disposers.push(() => {\n  unwatch && unwatch();\n});",                "position": clickPosition,                "isDivImage": true,                "origin": [                  1.390625,                  -0.7                ],                "pinBuilder": {},                "far": 1073741824              }            }            //将构建的pin弹出框加入场景            this._earth.sceneTree.root.children.push(json);          }        }      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);    },

方法二，调用earth-sdk的czmObject.onclick事件，其余思路如方法一

this._earth.sceneTree.$refs.tileset.czmObject.onclick = (e) => {               //e为点击对象}

代码和切片

代码:  

https://gitee.com/magic1412/earthsdk-vue-test

建筑3dtiles切片：

链接：https://pan.baidu.com/s/1o9LgHVsrynK7YtJPSPU46w

提取码：0t8u