cesium 结合 geoserver 实现地图属性查询

内容概览

1.cesium 结合 geoserver 实现地图属性查询
2.源代码 demo 下载

效果图如下：

实现思路：首先利用 geoserver 发布的图斑 WFS 服务，通过 url 的 rest 请求，构造属性查询形式，获取 geojson 数据源；然后调用cesium api 的 Cesium.GeoJsonDataSource.load 加载 geojson 数据源渲染展示；最后监听地图点击事件，获取矢量数据的属性，显示在右上角的信息窗口。

• 地图初始化创建：

  var viewer = new Cesium.Viewer('map', {
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      fullscreenButton: false,
      vrButton: false,
      baseLayerPicker: false,
      infoBox: false,
      selectionIndicator: false,
      animation: false,
      timeline: false,
      shouldAnimate: true,
      navigationHelpButton: false,
      navigationInstructionsInitiallyVisible: false,
      imageryProvider: image_Source
  });
  

• 界面的查询按钮点击：

  ("#research_btn").click(function(){ var keyword = ("#textName").val(); //queryByProperty('201911_440114_0093','map_num','bs_spot_t',callbackLastQueryWFSService); queryByProperty(keyword,'map_num','bs_spot_t',callbackLastQueryWFSService); });

• 属性查询函数：

  var geoserverUrl = 'http://localhost:8080/geoserver/ZKYGIS';
  

  /*属性查询图层 *@method queryByProperty *@param propertyValue 属性值 *@param propertyName 属性名称 *@param typeName 图层名称 @return null / function queryByProperty(propertyValue, propertyName, typeName, callback){ var filter = ''; filter += ''; filter += '' + propertyName + ''; filter += ''+propertyValue+''; filter += ''; filter += ''; var urlString = geoserverUrl + '/ows'; var param = { service: 'WFS', version: '1.0.0', request: 'GetFeature', typeName: typeName, outputFormat: 'application/json', filter: filter }; var geojsonUrl = urlString + getParamString(param, urlString); $.ajax({ url: geojsonUrl, async: true, type:'GET', dataType: 'json', success(result) { callback(result); }, error(err) { console.log(err); } }) }

• 属性查询结果回调函数，获取 geojson 数据源，地图绘制渲染：

  /*

  • 图层属性查询回调函数 / function callbackLastQueryWFSService(data){ console.log('data',data); if(data && data.features.length>0){ loadGeojsonLayer(data); } } /
  • 绘制图形函数 / function loadGeojsonLayer(geojson){ var promise = Cesium.GeoJsonDataSource.load(geojson,geoJsonStyle); promise.then(function(dataSource) { viewer.dataSources.add(dataSource); viewer.zoomTo(dataSource); }).otherwise(function(error){ //Display any errrors encountered while loading. window.alert(error); }); } /
  • 清空绘制图形函数 */ function clearGeojsonLayer(){ viewer.dataSources.removeAll(); }

• 地图点击事件监听，获取矢量数据展示在气泡窗口：

  var highlightFace = null;
  viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
       var pickedFeature = viewer.scene.pick(movement.position);
       console.log('pickedFeature',pickedFeature);
       if(pickedFeature){
           //判断之前是否有高亮面存在
           if (highlightFace) {
               highlightFace.material = highlightFace.material0;
           }
           pickedFeature.id.polygon.material0 = pickedFeature.id.polygon.material;
           pickedFeature.id.polygon.material = Cesium.Color.DEEPSKYBLUE.withAlpha(0.8);
           highlightFace = pickedFeature.id.polygon;
           console.log('properties',pickedFeature.id.properties);
          //气泡窗口显示
          var content =
              "<div>"+
              "<span>图斑编号:</span><span>"+pickedFeature.id.properties.map_num+"</span></br>"+
              "<span>图斑描述::</span><span>"+pickedFeature.id.properties.description+"</span></br>"+
              "</div>";
          $("#infowindow").show();
          $("#infowindow").empty();
          $("#infowindow").append(content);
       }
       else{
          if (highlightFace) {
               highlightFace.material = highlightFace.material0;
          }
          $("#infowindow").hide();
       }
   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  

link==>