openlayer实现webgis端绘制制图及编辑

在WebGIS端制图是指通过Web浏览器界面实现地理信息数据的可视化、编辑、分析以及地图产品的制作。这一过程通常涉及以下几个关键环节：

**1. 前端技术栈：

•HTML/CSS/JavaScript：作为Web开发的基础，用于构建用户界面布局、样式设计以及交互逻辑。

•Web地图库：

•Leaflet、OpenLayers、Mapbox GL JS等开源库，提供地图容器、图层管理、交互控件等功能，便于快速构建Web地图应用。

•GIS服务接口：

•Web Map Service (WMS)：用于请求地图影像瓦片。

•Web Feature Service (WFS)：用于获取矢量地理数据。

•Web Coverage Service (WCS)：用于获取栅格数据。

•GeoJSON、TopoJSON、KML等数据格式，直接嵌入或通过API加载。

•地图样式与主题：

•Mapbox Studio、QGIS Cloud等在线工具，或使用JSON-based样式语言（如Mapbox Style Specification、OpenLayers Style Format）自定义地图样式。

**2. 数据准备与集成：

•数据源接入：

连接本地或远程GIS服务器、云存储（如AWS S3、Azure Blob Storage）、开放数据平台（如OpenStreetMap、ArcGIS Online）等，获取所需GIS数据。

•数据处理：

•对接地理编码服务（如Google Maps Geocoding API、Mapbox Geocoding API）进行地址解析或逆地理编码。

•使用客户端库（如Turf.js、Mapbox GL Geostats）进行空间分析、统计计算。

•缓存与优化：

•利用客户端缓存（如IndexedDB、localStorage）存储常用数据或结果，提高加载速度。

•使用矢量瓦片、切片金字塔技术优化大规模数据展示。

**3. 地图交互设计：

•基础交互：缩放、平移、旋转地图，开启/关闭图层，调整图层透明度等。

•高级交互：

•查询与标注：实现点击查询、范围选择、热点分析等功能，显示相关信息或动态标注。

•编辑与绘图：支持用户在地图上添加、修改、删除地理要素，如使用Leaflet.draw、OpenLayers Editing等插件。

•路由规划：集成路线规划服务（如OSRM、GraphHopper），提供驾车、步行、骑行路径规划。

•空间分析：在浏览器端进行简单分析操作，如缓冲区分析、叠加分析等。

**4. 地图定制与输出：

•地图样式定制：通过调整颜色、图标、文字样式等元素，创建符合项目主题的地图样式。

•地图打印与导出：

•实现Web页面打印预览，支持自定义打印范围、比例尺、布局等。

•提供地图截图、PDF导出功能，或集成地图打包服务（如Mapfish Print、GeoServer Print）。

•地图分享与嵌入：

•提供短链接、嵌入代码，方便用户将地图分享至社交媒体或嵌入到其他网站。

**5. 跨平台兼容与响应式设计：

•移动端适配：确保地图应用在不同尺寸的移动设备上具有良好用户体验，如使用触屏手势、自适应布局。

•多浏览器支持：测试在主流浏览器（Chrome、Firefox、Safari、Edge）上的兼容性。

**6. 性能监控与优化：

•性能指标跟踪：监控地图加载时间、内存占用、网络请求等指标，识别性能瓶颈。

•优化措施：

•压缩与合并静态资源，减少HTTP请求。

•使用Web Workers进行大数据处理，避免阻塞主线程。

•采用矢量瓦片、LOD（Level of Detail）策略，按需加载数据。通过上述技术手段和流程，WebGIS端制图实现了从数据获取、处理到地图展现、交互的全流程操作，让用户能够在Web浏览器环境中便捷地进行地图制作与分析，满足各种GIS应用场景的需求。

关键代码实现

组件化代码：

import Draw from 'ol/interaction/Draw'
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

import {unByKey} from 'ol/Observable.js';
import Overlay from 'ol/Overlay';
import {getArea, getLength} from 'ol/sphere.js';
import View from 'ol/View';
import {LineString, Polygon} from 'ol/geom.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
import {generateUUID, getLayerByCode} from "@/components/iClientOpenLayers/MapCommon";

var DrawMap= /** @class */ (function () {
    function DrawMap(map, drawMapType,drawType,freeHand) {
        /**
         * Currently drawn feature.
         * @type {module:ol/Feature~Feature}
         */
        this.sketch=null;

        this.freeHand=freeHand;


        /**
         * The help tooltip element.
         * @type {Element}
         */
        this.helpTooltipElement=null;


        /**
         * Overlay to show the help messages.
         * @type {module:ol/Overlay}
         */
        this.helpTooltip=null;


        /**
         * The drawMap tooltip element.
         * @type {Element}
         */
        this.drawMapTooltipElement=null;


        /**
         * Overlay to show the drawMapment.
         * @type {module:ol/Overlay}
         */
        this.drawMapTooltip=null;


        /**
         * Message to show when the user is drawing a polygon.
         * @type {string}
         */
        this.continuePolygonMsg = '继续点击绘制多边形';


        /**
         * Message to show when the user is drawing a line.
         * @type {string}
         */
        this.continueLineMsg = '继续点击绘制线';
        this.map=map;
        this.drawMapType=drawMapType;
        this.draw=null;
        this.listener=null;
        this.source=null;
        // var layer ;
        // 获取存放feature的vectorlayer层。map初始化的时候可以添加好了
        for(let layerTmp of map.getLayers().getArray()){
            if(layerTmp.get("name")=="DrawMap"){
                this.source= layerTmp.getSource();
            }
        }
        if(this.source==undefined||this.source==null){
            this.source=getLayerByCode(this.map,"CRegion").getSource()
            // this.source = new VectorSource();

            // var vector = new VectorLayer({
            //     source: this.source,
            //     style: new Style({
            //         fill: new Fill({
            //             color: 'rgba(255, 255, 255, 0.2)',
            //         }),
            //         stroke: new Stroke({
            //             color: '#ffcc33',
            //             width: 2,
            //         }),
            //         image: new CircleStyle({
            //             radius: 7,
            //             fill: new Fill({
            //                 color: '#ffcc33',
            //             }),
            //         }),
            //     }),
            // });
            // vector.set("name","DrawMap");
            // vector.set("code","DrawMap");
            // this.map.addLayer(vector);
        }
        if(drawType=="DrawMap"){
            this.createDrawMapTooltip();
            this.createHelpTooltip();
            let that=this;
            this.pointerMoveHandler = function (evt) {
                if (evt.dragging) {
                    return;
                }
                /** @type {string} */
                var helpMsg = '请点击开始绘制';

                if (that.sketch) {
                    var geom = (that.sketch.getGeometry());
                    if (geom instanceof Polygon) {
                        helpMsg = that.continuePolygonMsg;
                    } else if (geom instanceof LineString) {
                        helpMsg = that.continueLineMsg;
                    }
                }

                that.helpTooltipElement.innerHTML = helpMsg;
                that.helpTooltip.setPosition(evt.coordinate);

                that.helpTooltipElement.classList.remove('hidden');
            };
            /**
             * Handle pointer move.
             * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event.
             */
            map.on('pointermove', this.pointerMoveHandler);

            map.getViewport().addEventListener('mouseout',() =>{
                this.helpTooltipElement.classList.add('hidden');
            });
            // 量测调用
            this.addInteraction();
        }else if(drawType=="Draw"){
            // 量测调用
            this.addInteractionEx();
        }

    };
    DrawMap.prototype. formatLength = function (line) {
        var length = getLength(line,{projection:'EPSG:4326'});
        var output;
        if (length > 100) {
            output = (Math.round(length / 1000 * 100) / 100) +
                ' ' + 'km';
        } else {
            output = (Math.round(length * 100) / 100) +
                ' ' + 'm';
        }
        return output;
    };
    DrawMap.prototype. formatArea = function (polygon) {
        var area = getArea(polygon,{projection:'EPSG:4326'});
        var output;
        if (area > 10000) {
            output = (Math.round(area / 1000000 * 100) / 100) +
                ' ' + 'km<sup>2</sup>';
        } else {
            output = (Math.round(area * 100) / 100) +
                ' ' + 'm<sup>2</sup>';
        }
        return output;
    };
    DrawMap.prototype.addInteraction=function() {
        var type = (this.drawMapType == 'area' ? 'Polygon' : 'LineString');
        this.draw = new Draw({
            ol_uid:'draw',
            source: this.source,
            type: type,
            snapTolerance:20,
            freehand: this.freeHand,
            style: new Style({
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new Stroke({
                    color: 'rgba(0, 0, 0, 0.5)',
                    lineDash: [10, 10],
                    width: 2
                }),
                image: new CircleStyle({
                    radius: 5,
                    stroke: new Stroke({
                        color: 'rgba(0, 0, 0, 0.7)'
                    }),
                    fill: new Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    })
                })
            })
        });
        this.map.addInteraction(this.draw);


        this.draw.on('drawstart',
            (evt)=> {
                // set sketch
                this.sketch = evt.feature;

                /** @type {module:ol/coordinate~Coordinate|undefined} */
                var tooltipCoord = evt.coordinate;

                this.listener = this.sketch.getGeometry().on('change', (evt)=> {
                    var geom = evt.target;
                    var output;
                    if (geom instanceof Polygon) {
                        output = this.formatArea(geom);
                        tooltipCoord = geom.getInteriorPoint().getCoordinates();
                    } else if (geom instanceof LineString) {
                        output = this.formatLength(geom);
                        tooltipCoord = geom.getLastCoordinate();
                    }
                    this.drawMapTooltipElement.innerHTML = output;
                    this.drawMapTooltip.setPosition(tooltipCoord);
                });
            }, this);

        this.draw.on('drawend',
            (e)=> {
                this.drawMapTooltipElement.className = 'ol-tooltip ol-tooltip-static';
                this.drawMapTooltip.setOffset([0, -7]);
                let cFeature = e.feature;
                cFeature.values_["ID"]=generateUUID()
                // unset sketch
                this.clearDraw();
            }, this);
    };

    DrawMap.prototype.addInteractionEx=function(){
        var type = (this.drawMapType == 'area' ? 'Polygon' : 'LineString');
        if(this.drawMapType=="Point"){
            type=this.drawMapType;
        }
        this.draw = new Draw({
            source: this.source,
            type: type,
            freehand: this.freeHand,
            snapTolerance:20,
        });
        this.draw.on('drawend',
            (e)=> {
                const geometry = e.feature.getGeometry()
                const corrdinates = geometry.getCoordinates()
                let cFeature = e.feature;
                cFeature.values_["ID"]=generateUUID()
                // unset sketch
                this.clearDraw();
            }, this);
        this.map.addInteraction(this.draw);
    };

    DrawMap.prototype.createDrawMapTooltip=function() {
        if (this.drawMapTooltipElement) {
            this.drawMapTooltipElement.parentNode.removeChild(this.drawMapTooltipElement);
        }
        this.drawMapTooltipElement = document.createElement('div');
        this.drawMapTooltipElement.className = 'ol-tooltip ol-tooltip-drawMap';
        this.drawMapTooltip = new Overlay({
            element: this.drawMapTooltipElement,
            offset: [0, -15],
            positioning: 'bottom-center'
        });
        this.drawMapTooltip.set("name","DrawMap");
        debugger
        this.drawMapTooltip.getElement().style.display = ''
        this.map.addOverlay(this.drawMapTooltip);
    };
    DrawMap.prototype.createHelpTooltip=function () {
        if (this.helpTooltipElement) {
            this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
        }
        this.helpTooltipElement = document.createElement('div');
        this.helpTooltipElement.className = 'ol-tooltip hidden';
        this.helpTooltip = new Overlay({
            element: this.helpTooltipElement,
            offset: [15, 0],
            positioning: 'center-left'
        });
        this.map.addOverlay(this.helpTooltip);
    };

    DrawMap.prototype.clearDraw=function () {
        debugger
        this.sketch = null;
        // unset tooltip so that a new one can be created
        this.drawMapTooltipElement = null;
        // this.createDrawMapTooltip();
        if(this.listener!=undefined&&this.listener!=null){
            unByKey(this.listener);
        }
        try{
            this.map.un('pointermove', this.pointerMoveHandler);
        }
        catch (e){

        }
        if(this.draw!=undefined&&this.draw!=null){
            for(let i = 0; i < this.map.interactions.array_.length; i++){
                if(this.draw.ol_uid == this.map.interactions.array_[i].ol_uid){
                    this.map.removeInteraction(this.map.interactions.array_[i]);break
                }
            }
        }
        if(this.helpTooltipElement!=undefined&&this.helpTooltipElement!=null){
            this.helpTooltipElement.classList.add('hidden');
        }
        if(this.helpTooltip!=undefined&&this.helpTooltip!=null){
            this.map.removeOverlay(this.helpTooltip);
        }

    };
    return DrawMap;
}());

export {DrawMap};

调用代码：

//绘制制图切换
drawMapSwitch(pIndex){
  if(this.curDraw!=null){
    this.curDraw.clearDraw();
    this.curDraw=null;
  }
  if(pIndex==0){
    this.curDraw=new DrawMap(this.sMap, "LineString","Draw",false);
  }else if(pIndex==1){
    this.curDraw=new DrawMap(this.sMap, "area","Draw",false);
  }else if(pIndex==2){
    this.curDraw=new DrawMap(this.sMap, "Point","Draw",false);
  }else if(pIndex==3){
    this.curDraw=new DrawMap(this.sMap, "LineString","Draw",true);
  }else if(pIndex==4){
    this.curDraw=new DrawMap(this.sMap, "area","Draw",true);
  }else if(pIndex==5){
    for(let layerTmp of this.sMap.getLayers().getArray()){
      if(layerTmp.get("code")=="CRegion"){
        layerTmp.getSource().clear();
        break;
      }
    }
    for(let i=0;i<this.sMap.getOverlays().getArray().length;i++){
      if(this.sMap.getOverlays().getArray()[i].get("code")=="CRegion"){
        this.sMap.removeOverlay(this.sMap.getOverlays().getArray()[i]);
        i--;
      }
    }
  }else if(pIndex==6){
    let geojson=getGeojsonByLayerCode(this.sMap,"CRegion")
    alert(geojson)
  }

}

前端代码设计

<div class="operate map_huizhi">
  <i class="icon huizhi"></i>
  <ul class="map-sub-nav">
    <li v-for="(item,index) in drawMapData" @click="drawMapSwitch(index)">{{item}}</li>
  </ul>
</div>

.huizhi{
  width: 38px;
  height: 38px;
  background: url('./img/huizhi.png') no-repeat center center;
  background-image: -webkit-image-set(url('./img/huizhi.png') 1x, url("./img/huizhi@2x.png") 2x);
  background-image: image-set(url('./img/huizhi.png') 1x, url("./img/huizhi@2x.png") 2x);
  background-repeat: no-repeat;
  background-position: center center;
}

软件实现效果：