18c40200c3e46ce6c213589648144998
cesium结合geoserver利用WFS服务实现图层新增(附源码下载)

前言

cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材。

内容概览

1.cesium结合geoserver利用WFS服务实现图层新增功能
2.源代码demo下载

效果图如下:

本篇主要是cesium通过调用geoserver发布的地图服务WFS来达到图层新增记录的目的。与GeoServer的WFS进行基于Rest交互关键就在于请求参数,值得注意的是这些请求最好采用POST方法发送。查询可以采用json,但增加,删除,修改都只能采用XML形式Transaction

  • geoserver默认WFS服务是没有编辑操作权限的,所以需要在geoserver设置权限,允许编辑操作才行,截图如下:



  • 部分核心代码:
    ```
    //绘制geojson图层样式
    var geoJsonStyle = {
    stroke: Cesium.Color.YELLOW,
    strokeWidth: 3,
    fill: Cesium.Color.YELLOW.withAlpha(0.1)
    };
    var geoserverUrl = 'http://localhost:8080/geoserver/WebGIS';
    var image_Source = new Cesium.UrlTemplateImageryProvider({
    //url: 'http://mt0.google.cn/vt/lyrs=t,r&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
    //url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
    //tilingScheme : new Cesium.GeographicTilingScheme(),
    credit: ''
    });
    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
    });

    //加载geoserver wms服务
    var wms = new Cesium.WebMapServiceImageryProvider({
    url: geoserverUrl+'/wms',
    layers: 'WebGIS:testLayer',
    parameters: {
    service : 'WMS',
    format: 'image/png',
    transparent: true,
    }
    });
    viewer.imageryLayers.addImageryProvider(wms);

    viewer._cesiumWidget._creditContainer.style.display = "none";
    viewer.scene.globe.enableLighting = false;
    //viewer.scene.globe.depthTestAgainstTerrain = true;
    viewer.scene.globe.showGroundAtmosphere = false;

    viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(113.90271877, 22.95186415,30000.0)
    });

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    var ellipsoid = viewer.scene.globe.ellipsoid;
    handler.setInputAction(function (movement) {
    //通过指定的椭球或者地图对应的坐标系,将鼠标的二维坐标转换为对应椭球体三维坐标
    cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);
    if (cartesian) {
    //将笛卡尔坐标转换为地理坐标
    var cartographic = ellipsoid.cartesianToCartographic(cartesian);
    //将弧度转为度的十进制度表示
    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
    var point = longitudeString + ',' + latitudeString;
    queryByPoint(point,'testLayer',callbackLastQueryWFSService);
    }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    var drawTool = new DrawTool({
    viewer: viewer,
    hasEdit: false
    });

    //绘制矩形
    $("#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) {

top Created with Sketch.