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
  });
  

• 框选绘制查询，cesium 没有提供绘制工具，只能写一个绘制矩形框选功能，获取返回来的范围坐标去空间范围查询，绘制矩形的代码这里不贴出来，具体参照源码 demo：

  //框选查询 ("#rect_btn").click(function(){ clearMap() if (!drawTool) return; drawTool.startDraw({ type: "rectangle", style: { heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //material:Cesium.Color.WHITE material:Cesium.Color.fromRgba(0x67ADDFFF) }, success: function (evt) { //console.log('evt',evt); var leftup = evt.leftup; var rightdown = evt.rightdown; //世界坐标转地理坐标（弧度） var leftupcartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(leftup); var rightdowncartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(rightdown); //console.log('leftupcartographic',leftupcartographic); //地理坐标（弧度）转经纬度坐标 var leftuppoint = [leftupcartographic.longitude / Math.PI * 180, leftupcartographic.latitude / Math.PI * 180]; console.log('leftuppoint',leftuppoint); var rightdownpoint = [rightdowncartographic.longitude / Math.PI * 180, rightdowncartographic.latitude / Math.PI * 180]; console.log('rightdown',rightdown); var extent = [leftuppoint[0].toFixed(6),leftuppoint[1].toFixed(6),rightdownpoint[0].toFixed(6),rightdownpoint[1].toFixed(6)]; var polygon = null; if(extent && extent.length>0){ //构造polygon polygon = ''; polygon += extent[0] + ',' + extent[1] + ' ' ; polygon += extent[2] + ',' + extent[1] + ' ' ; polygon += extent[2] + ',' + extent[3] + ' ' ; polygon += extent[0] + ',' + extent[3] + ' ' ; polygon += extent[0] + ',' + extent[1] + ' ' ; } console.log('polygon',polygon); if(polygon){ queryByPolygon(polygon,'bs_spot_t',callbackLastQueryWFSService); } } }); }); //清空 ("#clear_btn").click(function(){ clearMap(); });

• 属性查询函数：

  /*空间查询图层 *@method queryByPolygon *@param polygon 空间范围 *@param typeName 图层名称 *@return null */ function queryByPolygon(polygon, typeName, callback){ var filter = ''; filter += ''; filter += ''; filter += 'geom'; filter += 'gml:Polygon'; filter += 'gml:outerBoundaryIs'; filter += 'gml:LinearRing'; filter += 'gml:coordinates' + polygon + '</gml:coordinates>'; filter += '</gml:LinearRing>'; filter += '</gml:outerBoundaryIs>'; filter += '</gml:Polygon>'; filter += ''; filter += ''; filter += 'map_num'; filter += '201911_440114'; filter += ''; 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); } }) }

  function getParamString(obj, existingUrl, uppercase){ var params = []; for (var i in obj) { params.push(encodeURIComponent(uppercase ? i.toUpperCase() : i) + '=' + encodeURIComponent(obj[i])); } return ((!existingUrl || existingUrl.indexOf('?') === -1) ? '?' : '&') + params.join('&');
  }

• 空间查询结果回调函数，获取 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==>