OpenLayers

已于 2023-09-15 14:27:02 修改
阅读量144 收藏
点赞数
文章标签： 前端 javascript 开发语言
于 2023-09-15 13:59:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46034807/article/details/132900663
版权

yarn add ol

import MouseWheelZoom from "ol/interaction/MouseWheelZoom";
import { MousePosition } from 'ol/control'
import { createStringXY } from 'ol/coordinate'
import { Map, View } from "ol";//地图,视图
import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
import TileLayer from "ol/layer/Tile"; //可以理解为图层
import { fromLonLat } from "ol/proj";//将坐标从经度/纬度转换为不同的投影。

绘制功能

      //绘制对象
                source: that.drawSource, //绘制层数据源,勾绘的要素属于的数据集
                type: "Polygon",    //绘制的类型，这里绘制一个多边形，也可以是POINT（点）、LINE_STRING（线）、CIRCLE（圆）
                //设置一些样式
                style: new Style({
                fill: new Fill({
                    color: "rgba(0,0,255,0.2)",
                }),
                stroke: new Stroke({
                    color: "#0000ff",
                    width: 2,
                }),
                image: new Circle({
                    radius: 7,
                    fill: new Fill({
                    color: "#0000ff",
                    }),
                }),
                }),
            });
            this.map.addInteraction(draw);  //添加交互

 // 测距  (下面有测距和侧面积的集成)

   var map = null
  var helpTooltipElement = null
  var feature = null;
  var helpTooltip = null;
  var draw = null;
  var measureTooltipElement = null;
  var measureTooltip = null;
  var listener = null;
  var mapMouseMove = null;
  import VectorSource from "ol/source/Vector";
  import { Vector as VectorLayer } from "ol/layer";
  import { Circle,Style,Stroke,Fill } from "ol/style";
  import Overlay from 'ol/Overlay';
  import { Draw,DoubleClickZoom } from "ol/interaction";
  import { getArea, getLength } from 'ol/sphere';
  import { unByKey } from 'ol/Observable';
      distance() {
        let source = new VectorSource()
        const layer = new VectorLayer({
          source: source,
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
              color: '#ffcc33',
              width: 4,
            }),
            image: new Circle({
              radius: 7,
              fill: new Fill({
                color: '#ffcc33',
              }),
            }),
          }),
        });

        mapMouseMove = this.$map.on('pointermove', (ev) => {
          let helpMsg = '点击开始测量'
          if (feature) {
            helpMsg = '双击结束测量'
          }
          helpTooltipElement.innerHTML = helpMsg;
          helpTooltip.setPosition(ev.coordinate);
          helpTooltipElement.classList.remove('hidden')

        })

        this.$map.getViewport().addEventListener('mouseout', function () {
          helpTooltipElement.classList.add('hidden');
        });

        draw = new Draw({
          source,
          type: 'LineString',
          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: 4,
            }),
            image: new Circle({
              radius: 5,
              stroke: new Stroke({
                color: 'rgba(0, 0, 0, 0.7)',
              }),
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.2)',
              }),
            }),
          }),
        });

        // 开始坚挺绘制
        draw.on('drawstart', (evt) => {
          feature = evt.feature;

          let tooltipCoord = evt.coordinate;

          listener = feature.getGeometry().on('change', function (evt) {
            const geom = evt.target;
            let output = formatLength(geom);
            tooltipCoord = geom.getLastCoordinate();
            measureTooltipElement.innerHTML = output;
            measureTooltip.setPosition(tooltipCoord);
          });
        });

        // 双击绘制完成
        draw.on('drawend', () => {
          measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
          measureTooltip.setOffset([0, -7]);
          feature = null;
          measureTooltipElement = null;
          this.createMeasureTooltip();
          unByKey(listener);
          this.cancal()
        });

        // 格式化长度
        const formatLength = function (line) {
          const length = getLength(line);
          let output;
          if (length > 100) {
            output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
          } else {
            output = Math.round(length * 100) / 100 + ' ' + 'm';
          }
          return output;
        };

        this.createHelpTooltip()
        this.createMeasureTooltip()
        this.$map.addLayer(layer)
        this.drawLayers.push(layer)
        this.$map.addInteraction(draw);
      },

      // 取消绘制
      cancal() {
        // for(let i = 0 ; i< this.drawLayers.length; i++) {
        //   this.$map.removeLayer(this.drawLayers[i])
        // }
        // for (let i = 0; i < this.drawElements.length; i++) {
        //   this.$map.removeOverlay(this.drawElements[i])
        // }
        // this.drawLayers = []
        // this.drawElements = []
        helpTooltipElement.innerHTML=''
        this.$map.removeInteraction(draw)
        unByKey(mapMouseMove);
      },

      createMeasureTooltip() {
        if (measureTooltipElement) {
          measureTooltipElement.parentNode.removeChild(measureTooltipElement);
        }
        measureTooltipElement = document.createElement('div');
        measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
        measureTooltip = new Overlay({
          element: measureTooltipElement,
          offset: [0, -15],
          positioning: 'bottom-center',
          stopEvent: false,
          insertFirst: false,
        });
        this.drawElements.push(measureTooltip)
        this.$map.addOverlay(measureTooltip);
      },

      createHelpTooltip() {
        if (helpTooltipElement) {
          helpTooltipElement.parentNode.removeChild(helpTooltipElement);
        }
        helpTooltipElement = document.createElement('div');
        helpTooltipElement.className = 'ol-tooltip hidden';
        helpTooltip = new Overlay({
          element: helpTooltipElement,
          offset: [15, 0],
          positioning: 'center-left',
        });
        this.$map.addOverlay(helpTooltip);
      },
 var view = this.$map.getView();
  // 设置地图等级
  view.setZoom(Number(this.number) +1);
  this.$map.render();
  // 设置地图中心，将地图移动到中心点
  view.setCenter([,]);
  this.$map.render();

 //获取鼠标在地图上的坐标点

<div id='mousePosition'></div>
this.mousePositionControl = new MousePosition({
        coordinateFormat: function (e) { // 这里格式化成 X: **  Y: **
          let stringifyFunc = createStringXY(4)
          let str = stringifyFunc(e)
          return str.split(',')[0] + '&nbsp;&nbsp;' + str.split(',')[1]
        },
        projection: 'EPSG:4326', // 和地图坐标系保持一致
        className: 'custom-mouse-position', // css类名
        target: document.getElementById('mousePosition') // 显示位置鼠标坐标位置DOM
      })
      // 添加控制控件到地图上即可
      this.$map.addControl(this.mousePositionControl)

js文件

Measure.measure(this.$map, 'area'); //测面积
Measure.measure(this.$map, ''); //测距离
import Draw from 'ol/interaction/Draw'
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Point from "ol/geom/Point";


import {
  unByKey
} from 'ol/Observable.js';
import Overlay from 'ol/Overlay';
import {Feature } from "ol";
// import {
//   getArea,
//   getLength
// } from 'ol/sphere.js';
import {getLength} from 'ol/sphere';
import {getArea} from 'ol/sphere';

import LineString from 'ol/geom/LineString';
import Polygon from 'ol/geom/Polygon';

import {
  Circle as CircleStyle,
  Fill,
  Stroke,
  Style
} from 'ol/style.js';
export default{

  measure(map, measureType) {
     
    var source = new VectorSource();
 
    var vector = new VectorLayer({
      id:'lineAndArea',
      source: source,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new Stroke({
          color: 'red',
          width: 2
        }),
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33'
          })
        })
      }),
      zIndex:16
    });
    map.addLayer(vector)
    /**
     * Currently drawn feature.
     * @type {module:ol/Feature~Feature}
     */
    var sketch;


    /**
     * The help tooltip element.
     * @type {Element}
     */
    var helpTooltipElement;


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


    /**
     * The measure tooltip element.
     * @type {Element}
     */
    var measureTooltipElement;


    /**
     * Overlay to show the measurement.
     * @type {module:ol/Overlay}
     */
    var measureTooltip;


    /**
     * Message to show when the user is drawing a polygon.
     * @type {string}
     */
    var continuePolygonMsg = '';


    /**
     * Message to show when the user is drawing a line.
     * @type {string}
     */
    var continueLineMsg = '';

    createMeasureTooltip();
    createHelpTooltip();

    /**
     * Handle pointer move.
     * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event.
     */
    var pointerMoveHandler = function (evt) {
      if (evt.dragging) {
        return;
      }
      /** @type {string} */
      var helpMsg = '请点击开始绘制';

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

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

      helpTooltipElement.classList.remove('hidden');
    };

    map.on('pointermove', pointerMoveHandler);

    map.getViewport().addEventListener('mouseout', function () {
      helpTooltipElement.classList.add('hidden');
    });

    var draw;

    var formatLength = function (line) {
        //获取投影坐标系
        var sourceProj = map.getView().getProjection();
        //ol/sphere里有getLength()和getArea()用来测量距离和区域面积，默认的投影坐标系是EPSG:3857, 其中有个options的参数，可以设置投影坐标系
        var length = getLength(line, {projection: sourceProj});
        //var length = getLength(line);
        var output;
        if (length > 100) {
          output = (Math.round(length / 1000 * 100) / 100) +
            ' ' + 'km';
        } else {
          output = (Math.round(length * 100) / 100) +
            ' ' + 'm';
        }
        return output;
      };

  var formatArea = function (polygon) {
    //获取投影坐标系
    var sourceProj = map.getView().getProjection();
    var area = getArea(polygon, {projection: sourceProj})
    //var area = getArea(polygon);
    //console.info(area)
    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;
  };
    var source;
    // var layer ;
    // 获取存放feature的vectorlayer层。map初始化的时候可以添加好了
    for(let layerTmp of map.getLayers().getArray()){
      if(layerTmp.get("name")=="feature"){
        // layer = layerTmp;
        // layerTmp.setSource(null)
        source= layerTmp.getSource();
      }
    }

    function addInteraction() {
      var type = (measureType == 'area' ? 'Polygon' : 'LineString');
      draw = new Draw({
        source: source,
        type: type,
        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)'
            })
          })
        })
      });
      map.addInteraction(draw);

      var listener;
      draw.on('drawstart',
        function (evt) {
          // set sketch
          sketch = evt.feature;

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

          listener = sketch.getGeometry().on('change', function (evt) {
            var geom = evt.target;
            var output;
            if (geom instanceof Polygon) {
              output = formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            measureTooltipElement.innerHTML = output;
            measureTooltip.setPosition(tooltipCoord);
          });
  
          //地图双击事件
          map.on('dblclick', function (evt) {
              var point = new Point(evt.coordinate);
              source.addFeature(new Feature(point));
              idea = false;

              // alert(idea)
          });



        }, this);


      draw.on('drawend',
        function () {
          measureTooltipElement.className = 'tooltip tooltip-static';
          measureTooltip.setOffset([0, -7]);
          // unset sketch
          sketch = null;
          // unset tooltip so that a new one can be created
          measureTooltipElement = null;
          createMeasureTooltip();
          unByKey(listener);
          map.un('pointermove', pointerMoveHandler);
          map.removeInteraction(draw);
          helpTooltipElement.classList.add('hidden');
        }, this);
    }

    function createHelpTooltip() {
      if (helpTooltipElement) {
        helpTooltipElement.parentNode.removeChild(helpTooltipElement);
      }
      helpTooltipElement = document.createElement('div');
      helpTooltipElement.className = 'tooltip hidden';
      helpTooltip = new Overlay({
        element: helpTooltipElement,
        offset: [15, 0],
        positioning: 'center-left'
      });
      map.addOverlay(helpTooltip);
    }

    function createMeasureTooltip() {
      if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement);
      }
      measureTooltipElement = document.createElement('div');
      measureTooltipElement.className = 'tooltip tooltip-measure';
      measureTooltip = new Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center'
      });
      map.addOverlay(measureTooltip);
    }
    // 量测调用
    addInteraction();
    $(document).keyup(function (event) {
      if (event.keyCode == 27)
          draw.abortDrawing();
      else if (event.keyCode == 90 && event.ctrlKey) {
          console.log(draw);
          if (typeSelect.value== 'Circle')
              draw.abortDrawing();
          else
              draw.removeLastPoint()

      }
  })
//绘制结束 
  }
}

基于vue添加鼠标坐标控件
weixin_44614518的博客
12-07 459
引入包 import MousePosition from 'ol/control/MousePosition'; import {createStringXY} from 'ol/coordinate'; 可以给个容器（可选） <!--显示鼠标光标二维坐标的控件 --> <div class="controlContainer"> <span class="mousePosition" ref="mousePosition"></span> <
OpenLayers3参考API
弗里曼的小伙伴
06-30 1万+
OpenLayers3参考API sf2gis@163.com 2015年6月17日   1 框架 1.1 地图：ol.Map。 目标：配置地图窗口的全部属性。 方法：配置map。 图层：layers（图层：ol.layer.Layer。） 视图：view（显示窗口：ol.View。） html组件：target。 控件：controls（控件：ol.control。）。ol
openlayers
03-31
openlayers 画线方法，资料共享，资料共享，资料共享，资料共享
使用OpenLayers3创建地图后获取地图的地理坐标coordinate
litong149的博客
08-05 5161
1.引用ol库  &lt;script src="lib/ol-debug.js"&gt;&lt;/script&gt; 引用ol样式库 &lt;link href="lib/ol/ol.css" rel="stylesheet" /&gt; ***引用上面两个库，href属性根据具体两个库文件位置进行设置 2.使用HTML标签，创建容器 &lt;div id="mapC
四十四、openlayers官网示例Geographic Coordinates解析——在地图上添加弹窗，点击显示图形信息
aaa_div的博客
06-08 324
初始化图层的时候，添加一个矢量的点数据到地图上，在new Feature时添加一些自定义属性。创建overlay实例 ，offset是偏移量，根据写的元素大小调节。点击地图的时候，获取图形的信息并给 this.message赋值。使用Overlay在地图上添加弹窗，点击控制显隐。写一个元素，用来展示信息。
openlayers地图坐标coordinate转换为屏幕像素坐标pixel
xxloveivy的博客
03-27 8660
openlayers地图坐标coordinate转换为屏幕像素坐标pixel 网上查资料试了很多人的方法，需要各种转换但没成功，后来发现openlayers的map对象自带该方法，记录下来，希望帮助到大家！ 方法说明： 获取坐标的像素坐标。这将获取地图视图投影中的坐标并返回相应的像素。 map.getPixelFromCoordinate(coordinate) 参数coordinate: 地图当...
openlayers 坐标转换
pangfeng134300的专栏
08-21 970
var pos = OpenLayers.Layer.SphericalMercator.forwardMercator(position.lng(), position.lat()); this.map.panTo(new OpenLayers.LonLat(pos.lon, pos.lat));
openLayers完整代码示例数据
06-05
OpenLayers 是一个开源JavaScript库，专门用于在网页上创建交互式的地图应用。它支持多种地图服务，包括WMS、WMTS、TMS等，并且兼容各种浏览器，包括桌面端和移动设备。这个压缩包文件包含了一系列JSON数据，很可能...
openlayers河流动态轨迹.zip
最新发布
06-19
OpenLayers 是一个开源JavaScript库，专门用于在网页上创建交互式的地图应用。它支持多种地图数据源，包括WMS、WMTS、TMS等服务，以及GeoJSON、KML、GML等地理数据格式。"openlayers河流动态轨迹.zip"这个文件很可能...
vue3版openlayers基础脚手架
08-24
在本项目中，“vue3版openlayers基础脚手架”是一个使用Vue3框架构建的Web应用程序，它专门用于展示和操作二维地图。OpenLayers是一个强大的开源JavaScript库，它允许开发者在网页上创建交互式地图，支持多种数据源...
openlayers加载瓦片地图并手动标记坐标点
04-29
OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括瓦片地图，使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...
Openlayers 坐标系全面解析
A____t的博客
05-07 8859
目录 EPSG:4326 & EPSG:3857 EPSG:4326 与 EPSG:3857 的坐标转换 EPSG: 4490 Openlayers 自定义坐标系（EPSG:4490 和 EPSG:4525) EPSG:4326 & EPSG:3857 Openlayers 中常用的坐标系为 EPSG:4326 和 EPSG:3857，分别对应 WGS84 坐标系统中的地理坐标（经纬度）和投影坐标（X，Y）。EPSG:4326 通过经纬度记录坐标，方便存储，可读性高。Openl.
Openlayers坐标
￡Duan’yi!
11-13 540
var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate)); ol.coordinate.toStringHDMS(coordinate);显示为度分秒格式 ol.proj.toLonLat(coordinate);将坐标转为经纬度格式 ol.proj.fromLonLat(coordinate, projectio...
Openlayers 投影与坐标转换
weixin_38670190的博客
12-25 6194
Openlayers 投影与坐标转换 在初始化map实例时，如果不在view中用projection参数指定投影坐标系，则将会使用默认的空间参考EPSG:3857(Web 墨卡托投影)。后续叠加的图层，都会将数据进行投影转换，确保map在同一个空间参考内。 EPSG(European Petroleum Survey Group，欧洲石油调查组织)负责维护并发布坐标参照系统的数据集参数，以及坐标转换描述。它将已有的椭球体，投影坐标系等及其不同组合都对应着不同的ID号，这个号在EPSG中被称为EPSG co
openlayer3 简介
y1273015478的博客
01-10 1867
openlayer3 结构理解
openlayers常用方法封装
0月影星云0的博客
12-21 1345
import 'ol/ol.css'; import { isPlainObject } from '@/utils/assist'; import { Map, View, Tile, Feature, Overlay } from 'ol'; import { XYZ, Vector as VectorSource, ImageStatic, ImageCanvas as ImageCanvasSource, Cluster } from 'ol/source'; import { Tile as Ti
openlayers3添加地图控件
weixin_33929309的博客
07-16 311
//添加属性控件 map.addControl(new ol.control.Attribution()); //添加鼠标定位控件 map.addControl(new ol.control.MousePosition({ undefinedHTML: 'outside', projection: 'EPSG:4326', ...
ol3 加载天地图服务
supernever专栏
10-13 4945
//添加坐标     var mousePositionControl = new ol.control.MousePosition({         coordinateFormat: ol.coordinate.createStringXY(2),         projection: 'EPSG:4326',         className: 'custom-mouse-po
OpenLayers 3 之 地图控件（control）详解
热门推荐
研究与专注
05-14 2万+
每一个地图应用都应该有一些工具方便用户控制地图的行为，比如缩放，全屏，坐标控件等等，在 OpenLayers 中怎么添加这些工具呢？下面我给大家介绍一下 OpenLayers 中包含的控件种类，并介绍其使用方法。对控件的定制化，和对 OpenLayers 增加控件和优化控件等超出了本文范围。
Openlayers
10-26
OpenLayers是一个高性能、功能丰富的库，用于在web上创建交互式地图。它可以显示地图瓷砖，矢量数据和标记加载从任何来源在任何网页。OpenLayers的开发是为了进一步使用各种地理信息。它是完全免费的，开源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值