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

最新推荐文章于 2024-09-14 10:45:00 发布
最新推荐文章于 2024-09-14 10:45:00 发布
阅读量1.2k 收藏 16
点赞数 18
文章标签： openlayer webgis制图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42496466/article/details/137581798
版权

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

软件实现效果：

最后分享下地图下载器下载地址

通过百度网盘分享的文件：V-2.0jbr…
链接:https://pan.baidu.com/s/1AiFKTTknkEHkJ7t4nQ2P1g 
提取码:8664
复制这段内容打开「百度网盘APP 即可获取」

如果对您有所帮助，请点赞打赏支持！

技术合作交流qq：2401315930

合抱阴阳
关注
openlayers5图片时间轴播放.zip
06-19
openlayers5图片时间轴播放.zip
基于OpenLayer完成GIS一张图的开发
m0_56933148的博客
10-05 1592
GIS一张图的开发学习
WebGIS开发系列教程（6）：Openlayers之项目实战
最新发布
2301_78220461的博客
09-14 800
本项目介绍的水利信息在线分析服务系统，采用广西壮族自治区的水利信息相关数据，结合GIS的使用，通过地图标注、图表与动态推演等方式，直观模拟展现广西壮族自治区当前的水情雨情状况，以及台风情况。jQuery就是一个由JavaScript编写的轻量库，简单的说就是封装了一些JavaScript的操作，所以使用jQuery比使用原生的JavaScript可以达到用更少的代码做更多的事的效果。例如：$("#div01") 就是 document.getElementById("div01");
openlayers实现在线编辑
weixin_30641999的博客
05-27 488
概述： 在前面有篇博文讲述了基于Arcgis for js和wkt实现在线数据的采集和编辑功能，在本文讲述如何在openlayers实现类似的功能。上一篇博文的地址为： http://blog.csdn.net/gisshixisheng/article/details/44310765 思路： 前后台的数据交互以wkt的形式，加载已完成对象用wkt，对象更新完成之后将...
7. OpenLayers 实现矢量元素编辑功能（结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-25 1417
在本教程中，我们将向您展示如何在Vue和OpenLayers中实现矢量要素的编辑功能。我们将在一个已有的Vue和OpenLayers项目中添加编辑交互。交互实例，并设置要素来源，现在只需将鼠标放置在要编辑元素的边缘即可拖拽鼠标实现编辑元素。在上述代码中，我们创建了一个新的。方法中，我们将创建一个新的。
openlayers6 踩坑系列（三）绘制和编辑（矩形，圆，多边形，点，线）
qq_39404437的博客
11-23 9771
openlayers6 下的点、线、圆形、矩形、多边形的绘制与编辑
基于openlayer开发webgis.docx
04-29
基于OpenLayers开发WebGIS OpenLayers是一款功能强大且广泛使用的开源WebGIS组件库，用于构建交互式的地图应用程序。本文档旨在为基础开发者提供一个基于OpenLayers的地图开发指南，涵盖快速搭建、单标记和行政区...
openlayer3加载谷歌地图例.rar
05-27
OpenLayer 3作为WebGIS的一个重要组件，使得开发者可以轻松地构建功能丰富的地图应用，同时兼容各种地图服务，包括谷歌地图。 通过以上步骤，你已经掌握了如何使用OpenLayer 3加载谷歌地图的地形、影像和交通图。这...
openlayer 官网 v6.1 例子代码与api参考文档
06-02
你需要配置服务器端的服务，确保它们能提供正确的地图数据和元数据，然后在OpenLayers中通过设置相应的URL来连接这些服务。 总的来说，这个压缩包提供的OpenLayers v6.1例子代码和API文档可以帮助开发者快速入门和...
openlayer4最新源码包
09-29
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行...
GIS系列介绍ArcGIS,WebGIS,Leaflet,openlayer,GeoServer,MapServer
01-10
GIS系列介绍ArcGIS,WebGIS,Leaflet,openlayer,GeoServer,MapServer
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2201
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
OpenLayers对要素进行新增绘制、选择、修改等交互操作
sig321的专栏
07-08 979
也可以从Select获取Features（Collection集合）放置到Modify的features属性上。备注：draw.setActivity(false)即可禁用要素绘的制功能。实现绘制完一个多边形之后禁用多边形绘制，并且开启选择器功能。
openlayers 绘图功能，编辑多边形，select，snap组件的使用（六）
无心使然云中漫步
06-13 740
本篇介绍一下vue3-openlayers的select，snap的使用。
openlayers学习（六）绘图
mylove10086
10-21 928
要完成的任务是绘制点、线、面、圆、正多边形，指定半径的圆 官方示例：https://openlayers.org/en/latest/examples/draw-features.html 1、初始化地图 var rootLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&a
开源WebGIS开发3——初识openlayers
yl14774636230的博客
09-28 390
一、什么是openlayers？ OpenLayers是一个JavaScript 类库包，主要是用于开发Web GIS客户端。这就是说，要先在网页中引用OpenLayers的JavaScript文件以及相应的css样式表和资源，根据其提供的功能接口，直接调用。所以关键是了解其提供的接口，这是使用一个类库的关键！如果想要优化相应的功能或者定制化，就要深入地了解其实现细节了，这需要有熟练的JavaScript功底。 OpenLayers支持Google Map...
GIS系列（二）OpenLayers入门和详细解读
lz5211314121的博客
04-28 2254
OpenLayers是一款开源的前端地图框架。它几乎能够解决绝大部分前端地图开发过程中的需求。这篇文章我为大家详细解读一下OpenLayers。 首先，来看一张图，接下来我介绍的文字大家再阅读的时候可以对照着这幅图来理解。 1.一副地图的核心当然是地图本身，任何框架和设计都是如此。OpenLayers（以下简称ol）也不例外。map类是整个框架的核心类，其余的类和接口都是围绕着map类来设计的。 如上图所示map包含了常用的6大方面，首先是view，视图。这个类相当于人的眼睛，它定义了...
Openlayers和geoserver对图层进行编辑
鑫鑫23的博客
05-09 5292
1，Openlayers展示地图文件 Openlayers可以展示在线地图文件，创建一个新的Map，并设置地图展示的图层和中心点。实现代码如下： var map = new Map({ layers: [ new TileLayer({ source: new OSM() }), vectorLayer ], target: 'map', view: new View({ center: [-...
openlayers6 第一篇绘制点线面
m0_65607651的博客
05-05 1308
openlayers6 绘制点线面 并实现编辑效果
J2EE技术在WebGIS构建中的应用与实现
为了实现服务器端的高效处理，文章提到了Enterprise JavaBeans (EJB)技术。EJB是一种用于构建分布式企业级应用的组件模型，它可以处理大量数据和复杂的业务逻辑。在WebGIS中，EJB可能被用来进行远程调用，以处理和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

合抱阴阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值