[cesium]拾取加载arcgis瓦片图层的属性

落日映苍穹つ 2023-02-10 03:59 335阅读 0赞

### 效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70][]

### 代码  ###

this._arcgisImage = new Cesium.ArcGisMapServerImageryProvider({
            url:URL
          });
          let arcgisImageLayer = viewer.imageryLayers.addImageryProvider(
            this._arcgisImage
          );    
            
        pick(){
          //标签
          let bubble = undefined;
          //拾取属性
          this._handler.setInputAction(movement => {
            const ray = viewer.camera.getPickRay(movement.position);
            const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
            if (cartesian) {
              var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
              if (cartographic) {
                var xy = new Cesium.Cartesian2();
                var alti = viewer.camera.positionCartographic.height;
                var level = this.getLevel(alti);
                if (this._arcgisImage.ready) {
                  xy = this._arcgisImage.tilingScheme.positionToTileXY(
                    cartographic,
                    level,
                    xy
                  );
                  var promise = this._arcgisImage.pickFeatures(
                    xy.x,
                    xy.y,
                    level,
                    cartographic.longitude,
                    cartographic.latitude
                  );
                  Cesium.when(promise, function(layerInfo) {
                    //查询结果展示
                    if (layerInfo && layerInfo.length > 0) {
                      if (bubble) viewer.graphicLayer.remove(bubble);
    
                      let bubbleGraphicOpt = new GV.BubbleGraphicOpt();
                      bubbleGraphicOpt.bindObject = new GV.GeoPoint(
                        Cesium.Math.toDegrees(cartographic.longitude),
                        Cesium.Math.toDegrees(cartographic.latitude)
                      );
    
                      bubble = new GV.BubbleGraphic(bubbleGraphicOpt);
    
                      viewer.graphicLayer.add(bubble);
                      //<span class="_closeTip" style="float:right;">x</span>
                      bubble.panelDom.innerHTML =
                        `<div class="wrapper">
                          <div><span>图斑信息</span></div><div class="content"><tr><td>属性名</td><td>属性值</td></tr>` +
                        layerInfo[0].description +
                        `</div></div>`;
                    }
                  });
                }
              }
            }
          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    
    
        }
          
    
        //瓦片层级
        getLevel(height) {
          if (height > 48000000) {
            return 0;
          } else if (height > 24000000) {
            return 1;
          } else if (height > 12000000) {
            return 2;
          } else if (height > 6000000) {
            return 3;
          } else if (height > 3000000) {
            return 4;
          } else if (height > 1500000) {
            return 5;
          } else if (height > 750000) {
            return 6;
          } else if (height > 375000) {
            return 7;
          } else if (height > 187500) {
            return 8;
          } else if (height > 93750) {
            return 9;
          } else if (height > 46875) {
            return 10;
          } else if (height > 23437.5) {
            return 11;
          } else if (height > 11718.75) {
            return 12;
          } else if (height > 5859.38) {
            return 13;
          } else if (height > 2929.69) {
            return 14;
          } else if (height > 1464.84) {
            return 15;
          } else if (height > 732.42) {
            return 16;
          } else if (height > 366.21) {
            return 17;
          } else {
            return 18;
          }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520085905971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw==,size_16,color_FFFFFF,t_70