cesuim 点击获取图层信息并高亮（点查询）

明明明鸣

已于 2023-03-13 14:50:58 修改

阅读量1.3k

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2023-03-01 17:09:23 首次发布

本文链接：https://blog.csdn.net/weixin_45578673/article/details/129285318

版权

cesuim 点击获取图层信息并高亮（点查询）

		var that = this
        var _viewer = window.viewer
        let handler1 = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
        handler1.setInputAction(async function(event) {
           	let cartesian
         	if(viewer.scene.pickPosition(event.position)){
            	cartesian = viewer.scene.pickPosition(event.position);
          	}else{
            	cartesian = viewer.camera.pickEllipsoid(event.position)
          	}
            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
            let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
            var xmlPositon = lng + ' ' + lat + ' '
            //
            var pointA = turf.point([lng, lat]); 
            var pointB = turf.destination(pointA, 50, 45, { units: 'meters' }); //kilometers
            var bbx = turf.bbox(turf.featureCollection([pointA, pointB]));  //经纬度转四至
            //拼接查询地址，根据四至查询
            let url  ='http://××××××××××/geoserver/××××××/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=ces%3Aces&LAYERS=ces%3Aces&exceptions=application%2Fvnd.ogc.se_inimage&INFO_FORMAT=application%2Fjson&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A4490&STYLES=&WIDTH=101&HEIGHT=101&BBOX=' + bbx[0] + '%2C' + bbx[1] + '%2C' + bbx[2] + '%2C' + bbx[3]
            fetch(url).then(res => {
              return res.json();
            }).then(res => {
              let features = res.features;
				//高亮
              window.viewer.entities.add({
		        id: "polygon" + id,
		        name: 'glTc',
		        polyline: {
		          positions: Cesium.Cartesian3.fromDegreesArrayHeights(this.getDegreesArrayHeights(features[0], 0)),
		          width: 15,
		          material: new Cesium.PolylineGlowMaterialProperty({
		            glowPower: 0.1,
		            color: Cesium.Color.fromCssColorString('#FF4500'),
		          }),
		          clampToGround: true, //是否贴着地表
		        },
		        polygon: {
		          hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(this.getDegreesArrayHeights(feature, 0))),
		          material: Cesium.Color.AQUA.withAlpha(0.5),
		          // perPositionHeight: true, 
		          classificationType: Cesium.ClassificationType.CESIUM_3D_TILE, 
		        }
		      })
           })
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

//获取坐标串
 getDegreesArrayHeights(feature, height) {  
    let newHeight =  height
    let degreesArrayHeights = [];
    let coordinates;
    if (feature.geometry.type == "MultiPolygon") {
      coordinates = feature.geometry.coordinates[0][0];
    } else if (feature.geometry.type == "Polygon") {
      coordinates = feature.geometry.coordinates[0];
    }
    //坐标串转为需要的格式[x,y,z,x,y,z....]
    for (let i = 0; i < coordinates.length; i++) {
      const element = coordinates[i];
      degreesArrayHeights.push(element[0]);
      degreesArrayHeights.push(element[1]);
      degreesArrayHeights.push(newHeight);
    }
    return degreesArrayHeights;
  },