openlayer|vue+openLayers入门教程

介绍:
OpenLayers官网 OpenLayers插件类型 可以理解为专门处理地图的一个库
其中有两大类 map和view,map是ol中的核心组件,初始化一副地图(map),时,至少需要一个可视化区域(view),一个或多个图层(layer)和一个地图加载的挂载点(target)
1.vue中使用Openlayers 注意:地图容器需要设置宽高,否则看不到初始化的地图效果
地图介绍 一.关于投影
? 1.投影,地球不是正圆的球体,是一个不规则的椭圆体,所以我们要是想让它展开在桌面上,就会发现地图都会和实际有出入,所以人们发明了各种各样的方式来缩小失真的程度.这种方式就是投用,投影目前常用的是2种,分别是:
? “EPSG:4326”,在地图上将经纬度直接当做X/Y对待(最常用)
? "EPSG:3785"又称为球面墨卡托投影。将地图投影到一个地图平面上。为了正确的在商业地图API上叠加地图数据,就必须使用该投影。最基本的是在商业地图API上显示栅格瓦片地图——例如TMS,WMS以及其他类似的瓦片。
? 2.如果我们不指定特别的投影,OpenLayers的默认投影为EPSG:3857
? 3.source: 数据源
? 4.Tile: 瓦片图层类,主要用来加载瓦片图。通过实例化瓦片图层对象,绑定其数据源(source) 加载对应的瓦片地图
? 5.TileArcGISRest: 使用ArcGis为地底图
? 6.View: 地图视图类
安装方式: yarn install ol
2.openlayers简单使用说明 一.初始化地图

import { Map, View } from "ol"; //地图,视图 import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片 import TileLayer from "ol/layer/Tile"; //可以理解为图层 import { fromLonLat } from "ol/proj"; //将坐标从经度/纬度转换为不同的投影。 export default { data() { return { map: null, }; }, methods: { createMap() { this.map = new Map({ target: "map", layers: [ new TileLayer({ source: new OSM({}), }), ], view: new View({ center: [116.394926, 39.9125], projection: "EPSG:3857", zoom: 8, maxZoom: 20, }), }); }, }, mounted() { this.createMap(); }, };

openlayersAPI ol/proj
import {fromLonLat} from 'ol/proj'; 将坐标从经度/纬度转换为不同的投影。 fromLonLat(coordinat,projection) coordinat:坐标为经度和纬度,即以经度为第一个元素,纬度为第二个元素的数组。 projection:目标投影。默认为 Web Mercator,即“EPSG:3857”。import {toLonLat} from 'ol/proj'; 将坐标转换为经度/纬度。 toLonLat(coordinat,projection) coordinat:投影坐标。 projection:坐标的投影。默认为 Web Mercator,即“EPSG:3857”。import {transform} from 'ol/proj'; 将坐标从源投影转换为目标投影。这将返回一个新坐标(并且不会修改原始坐标)。 transform(coordinate, source, destination) coordinate: source:源投影样。 destination:目的地投影式。

3.openlayers一些配置了解 官网:https://openlayers.org/en/latest/apidoc/
this.map.addLayer(maplayer) //在页面新增图层 this.map.map,removeLayer(maplayer) //删除某一图层可结合this.map.getLayers().array_[index]使用 this.map.getLayers() //获取所有图层信息 maplayer.setOpacity(0); //设置透明度

4.vue使用Openlayers绘制点
//创建空的矢量容器(point) let vectorSource = new VectorSource({}); //创建图标层 let vectorLayer = new VectorLayer({ source: vectorSource, }); this.clearTc(); this.map.addLayer(vectorLayer); let poi = []; if (list.length) { list.forEach((item, index) => { item.coord = item.jwd; // fromLonLat像素点转经纬度 poi.push(new Feature(new Point(fromLonLat(item.coord)))); poi[index].set('name', item.name); poi[index].set('value', item.value); poi[index].set('id', item.id); let bdStyle = new Style({ image: new CircleStyle({ fill: new Fill({ color: [128, 0, 128], }), radius: 6, }), }); poi[index].setStyle(bdStyle); }); } //根据业务需求所增加的排序 poi.sort(function (a, b) { return b.get('value') - a.get('value'); }); poi.forEach((item, index) => { vectorSource.addFeature(item); });

5.vue使用Openlayers绘制线段
let newList = []; drawList.forEach((item) => { newList =item.SectionCoord.geometry.coordinates[0].map( (ITEM) => fromLonLat(ITEM); ); let line = new Feature(new LineString(newList)); line.setStyle( new Style({ stroke: new Stroke({ width: 4, color: '#00FF00', }), }) ); let vectorlayer = new VectorLayer({ source: new VectorSource({ features: [line] }), }); this.map.addLayer(vectorlayer); //这里是执行,执行之后点就出来了

6.vue使用Openlayers监听点击事件
let that = this; this.map.on('click', async (e) => { let viewResolution = /** @type {number} */ (that.view.getResolution()); let url = that.map .getLayers() .array_[1].getSource() .getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', { INFO_FORMAT: 'application/json', FEATURE_COUNT: 50, }); if (url) { try { let res = await this.axios.get(url); for (let i = 0; i < res.data.features.length; i++) { if (res.data.features[i].id.includes('jgmile')) { if (res.data.features[i + 1] == null || !res.data.features[i].id.includes('jgmile') ) { //-----------点击的是区间---------- let id = res.data.features[i].properties.seg; let result = this.mapSectionList.filter((item) => item.SectionId == id)[0]; this.sectionQjName = `${result.SectionName} 区间 `; this.sectionQjNameDisplay = true; this.mapSectionInfo = result; } else if (res.data.features[i + 1].id.includes('jgmile')) { //-----------点击的是站点---------- let name = res.data.features[i].properties.station; let result = this.mapStationList.filter((item) => item.StationName == name)[0]; this.stationFxName = `${result.StationName}站`; this.stationFxNameDisplay = true; this.mapStationInfo = result; } } } } catch (e) { ); } }

7.vue+openlayers引入高德地图—老版本地图 (网上采取资料实现 – 项目最好不采用)
.box { width: 100% !important; height: 100% !important; position: relative !important; } #container { width: 100% !important; height: 100% !important; } .ol-control { display: none !important; }

9.Vue+openlayers中使用拖拽缩放控件 代码片段:
import { ZoomSlider } from "ol/control"; createMap() { this.map = new Map({ target: "map", layers: [ new TileLayer({ source: new XYZ({ url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", }), }), ], view: new View({ center: fromLonLat([116.394926, 39.9125]), projection: "EPSG:3857", zoom: 12, maxZoom: 20, }), }); let zoomslider = new ZoomSlider(); this.map.addControl(zoomslider); },

10.openlayers使用全屏控件
import { FullScreen } from "ol/control"; this.map.addControl(new FullScreen()); //在初始化地图是加上

11.openlayers使用鹰眼控件 注意事项:
  1. 实例化 overviewMapControl 控件,几个常用参数:
    (1) className: 可自定义鹰眼控件的类名
    (2) collapsed: 控件一开始为展开方式
    (3) collapseLabel: 鹰眼展开时功能按钮上的标识
    (4) label: 鹰眼折叠时功能按钮上的标识
  2. 鹰眼的数据源和主地图的数据源要对应一致
  3. 主地图的坐标系和鹰眼的坐标系,必须对应一致。
    如下: 均使用 EPSG:4326 坐标系
import { OverviewMap, defaults as defaultControls } from "ol/control"; createMap() { let overviewMapControl = new OverviewMap({ className: "ol-overviewmap ol-custom-overviewmap", layers: [ new TileLayer({ source: new XYZ({ url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", }), }), ], view: new View({ projection: "EPSG:3857", //坐标系 }), collapseLabel: "?", //鹰眼展开时功能按钮上的标识 label: "?", //鹰眼折叠时功能按钮上的标识 collapsed: false, //初始为展开显示方式 }); this.map = new Map({ target: "map", layers: [ new TileLayer({ source: new XYZ({ url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", }), }), ], view: new View({ center: fromLonLat([116.394926, 39.9125]), projection: "EPSG:3857", zoom: 12, maxZoom: 20, }), }); //鹰眼控件 this.map.addControl(overviewMapControl); },

12.点位显示 非聚合 一、实现步骤
  1. 初始化一张地图
  2. 调用 showPoints() 来展示聚合点位,具体如下:
    (1) ol.layer.Vector 创建矢量图层,数据源为 ol.source.Vector 类的实例对象
let vectorLayer = new VectorLayer({ source: new VectorSource(), style: new Style({ image: new Icon({ src: pointImg }) }) });

(2) 将点位数据遍历,生成 features 数组
(3) vectorLayer.getSource().addFeatures(features): 将要素添加到 图层数据源中
(4) this.map.addLayer(vectorLayer): 聚合图层添加到地图中
全部代码:
.box { width: 100% !important; height: 100% !important; position: relative !important; } #container { width: 100% !important; height: 100% !important; } .ol-control { display: none !important; }

13.点位显示 聚合 一、实现步骤
  1. 初始化一张地图
  2. 调用 showPoints() 来展示聚合点位,具体如下:
    (1) ol.source.Cluster 创建聚合对象并设置数据源和距离
    (2) ol.layer.Vector 创建矢量图层,并为图层设置聚合数据源
    (3) 将点位数据遍历,生成 features 数组
    (4) sourceCluster.getSource().addFeatures(features): 将要素添加到数据源中
    (5) this.map.addLayer(vectorLayer): 聚合图层添加到地图中
二、注意实现 1、创建矢量图层 vectorLayer 时候,可进行图层样式设置。
2、图层样式,分聚合和非聚合两种状态,调用 setClusterStyle 方法设置
const vectorLayer = new VectorLayer({ source: sourceCluster, style: feature => this.setClusterStyle(feature) });

.map { width: 100vw; height: 100vh; }

14.鼠标移入或点击显示气泡 一、实现关键
  1. addPopup(): 地图初始化后,添加 overlay 到地图中
  2. map对象添加 click 事件监听
this.map.on("click", evt => { this.mapPointerClick(evt); });

  1. mapPointerClick(): 鼠标移动的回调函数,判断鼠标移动之处的feature是否只有单个点位图层。只有单个点位图层,则弹出气泡显示详情
  2. 要素feature的数据,使用get()方法来获取
feature.get("domain_type_name")

二、注意事项 对于png图片,透明部分点击触发不了地图事件
.map { width: 100vw; height: 100vh; } .ol-popup { position: absolute; background-color: white; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; min-width: 280px; } .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; } .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; } .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; } .ol-popup-closer:after { content: "?"; }

15.绘制 点 线 圆 多边形 如果需要修改绘制的类型 就更换Draw下type的值
点:Point 线:LineString 圆:Circle 多边形:Polygon
注意:如果把4中类型的绘制集成起来 必须要写删除交互 否则回不断的记录你上次选择的type 就会造成你绘制圆的同时也会绘制其他的形状
.btn { position: fixed; top: 10px; right: 10px; }

16.测量距离 一、注意实现
  1. ol/sphere里有getLength()和getArea()可以用来测量距离和区域面积,默认的投影坐标系是EPSG:3857
  2. 若是 EPSG:3857, 需要转换,直接使用 getLength() 和 getArea()
  3. 若不是EPSG:3857,则方案有两:
    (1)使用时, 可以先把几何图形转换成‘EPSG:3857 ’的投影方式,然后再使用getLength和getArea
    (2) ol/sphere里有getLength()和getArea(),可以设置options参数
var formatLength = function (line) { var sourceProj = map.getView().getProjection(); //获取投影坐标系 /****** 方法1 *********/ // var geom = (line.clone().transform(sourceProj, 'EPSG:3857')); // var length = getLength(geom); /****** 方法2 *********/ var length = getLength(line, {projection: sourceProj/*, radius: 6371008.8*/}); ... };

代码展示:
// 提示的样式 /deep/ .ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } //移动时的样式 /deep/ .ol-tooltip-measure { opacity: 1; font-weight: bold; } //双击时的样式 /deep/ .ol-tooltip-static { background-color: #ffcc33; color: black; border: 1px solid white; } //下三角 /deep/ .ol-tooltip-measure:before, /deep/ .ol-tooltip-static:before { border-top: 6px solid rgba(0, 0, 0, 0.5); border-right: 6px solid transparent; border-left: 6px solid transparent; content: ""; position: absolute; bottom: -6px; margin-left: -7px; left: 50%; } /deep/ .ol-tooltip-static:before { border-top-color: #ffcc33; }

17.测面 一、注意实现
  1. ol/sphere里有getLength()和getArea()可以用来测量距离和区域面积,默认的投影坐标系是EPSG:3857
  2. 若是 EPSG:3857, 需要转换,直接使用 getLength() 和 getArea()
  3. 若不是EPSG:3857,则方案有两:
    (1)使用时, 可以先把几何图形转换成‘EPSG:3857 ’的投影方式,然后再使用getLength和getArea
    (2) ol/sphere里有getLength()和getArea(),可以设置options参数
var formatArea = function(polygon){ var sourceProj = map.getView().getProjection(); //获取投影坐标系 /****** 方法1 *********/ // var geom = (polygon.clone().transform(sourceProj, 'EPSG:3857')); // var area = getArea(geom); /****** 方法2 *********/ var area = getArea(polygon, {projection: sourceProj/*, radius: 6371008.8*/}) };

.map { width: 100vw; height: 100vh; /deep/ .ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } /deep/ .ol-tooltip-measure { opacity: 1; font-weight: bold; } /deep/ .ol-tooltip-static { background-color: #ffcc33; color: black; border: 1px solid white; } /deep/ .ol-tooltip-measure:before, /deep/ .ol-tooltip-static:before { border-top: 6px solid rgba(0, 0, 0, 0.5); border-right: 6px solid transparent; border-left: 6px solid transparent; content: ""; position: absolute; bottom: -6px; margin-left: -7px; left: 50%; } /deep/ .ol-tooltip-static:before { border-top-color: #ffcc33; } }

18.测距+侧面(可删除)
  1. 综合了上面测距和侧面的功能
  2. 增加删除按钮和功能,具体实现如下:
    (1)drawstart 绘画开始阶段:向 measureTooltip 中插入“删除测量”按钮
    (2)drawend 绘画结束阶段:给“删除测量”按钮绑定事件
  3. 缓存绘画时候,缓存所绘制的feature 和 measureTooltip 在 drawCache 对象中
  4. 删除测量,便是从drawCache找到对象的 feature 和 measureTooltip 进行删除,分别调用 removeFeature 和 removeOverlay 方法
.map-box { width: 100vw; height: 100vh; position: relative; .map { height: 100%; } .btns-box { position: absolute; right: 20px; top: 20px; } } .map { /deep/ .ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 14px 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } /deep/ .ol-tooltip-measure { opacity: 1; font-weight: bold; } /deep/ .ol-tooltip-static { background-color: #ffcc33; color: black; border: 1px solid white; } /deep/ .ol-tooltip-measure:before, /deep/ .ol-tooltip-static:before { border-top: 6px solid rgba(0, 0, 0, 0.5); border-right: 6px solid transparent; border-left: 6px solid transparent; content: ""; position: absolute; bottom: -6px; margin-left: -5px; left: 50%; } /deep/ .ol-tooltip-static:before { border-top-color: #ffcc33; }//测面、测距的样式 /deep/ .tooltip-close-btn { font-style: normal; position: absolute; color: #2d8cf0; right: 0px; top: -7px; font-weight: bold; font-size: 15px; cursor: pointer; &:hover { color: #fff; } } }

19.多地图切换 (OSM 高德 百度) 踩坑:
也可以有很多种写法,但是不要每次调用Init方法,因为每次都会new一个新的map对象,所以会出现多个地图,我们此处可以去官网下查找其他更改数据源的方法,我此处用的是addLayer()方法
.box { width: 100vw; height: 100vh; // position: relative; #map { width: 100%; height: 100%; } .btn { position: fixed; top: 10px; right: 10px; } }

20.导出地图
.map-box { width: 100vw; height: 100vh; // height: 100%; position: relative; .map { width: 100%; height: 100%; } .export-btn { position: absolute; right: 15px; top: 15px; } }

21.阻止双击放大地图事件
import DoubleClickZoom from "ol/interaction/DoubleClickZoom"; clearDouble() { let dblClickInteraction = this.map .getInteractions() .getArray() .find((interaction) => { return interaction instanceof DoubleClickZoom; }); this.map.removeInteraction(dblClickInteraction); },

22.openlayers之地图图层数据来源(ol.source)详解 source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址。除了在构造函数中制定外,可以使用 layer.setSource(source) 稍后指定。
一、包含的类型 上面介绍的都是可以实例化的类,还有一部分基类,不能被实例化,只负责被继承,有:
ol.source.Image,提供单一图片数据的类型,直接继承自 ol.source.Source;
ol.source.Tile,提供被切分为网格切片的图片数据,继承自 ol.source.Source;
ol.source.Vector,提供矢量图层数据,继承自 ol.source.Source;
二、用法说明
1. ol.source.Vector 矢量图层的数据来源 1.1 事件 包含四个事件,addfeature,changefeature,clear,removefeature。 addfeature,当一个要素添加到 source 中触发; changefeature,当要素变化时触发; clear,当 source 的 clear 方法调用时候触发; removefeature,当要素移除时候发生。1.2 参数 /** * @typedef {{attributions: (Array.|undefined), *features: (Array.|undefined), *format: (ol.format.Feature|undefined), *loader: (ol.FeatureLoader|undefined), *logo: (string|olx.LogoOptions|undefined), *strategy: (ol.LoadingStrategy|undefined), *url: (string|undefined), *wrapX: (boolean|undefined)}} * @api */ attribution,地图右下角的 logo 包含的内容; features,地理要素,从字符串读取的数据; format,url属性设置后,加载要素使用的数据格式,采用异步的 AJAX 加载; loader,加载要素使用的加载函数; logo,logo包含的内容; strategy,加载要素使用的策略,默认是 一次性加载所有要素; url,要素数据的地址; wrapX,是否在地图水平坐标轴上重复,默认是 true。1.3实例 features 方法 假如有一个包含空间数据的字符串,geojsonObject,是GeoJSON字符串格式,那么可以用来初始化一个图层。 var vectorSource = new ol.source.Vector({ features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) }); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: style }); map.addLayer(vectorLayer); url + format 方法 如果有一个文件作为数据源,那么可以配置 url 属性来加载数据: var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'data/geojson/countries.geojson', format: new ol.format.GeoJSON() }) 这两种方法中都会指定数据来源格式, 矢量数据源支持的格式包含很多:gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities(兼容 wms 的格式)、 wms getfeatureinfo、 wmts capabilities、xlink、xsd等格式。这些格式都有readFeatures 、readFeature 和readGeometry 方法用于读取数据。2. ol.source.Tile 提供被切分为切片的图片地图数据 可配置的选项/** * @typedef {{attributions: (Array.|undefined), *extent: (ol.Extent|undefined), *logo: (string|olx.LogoOptions|undefined), *opaque: (boolean|undefined), *tilePixelRatio: (number|undefined), *projection: ol.proj.ProjectionLike, *state: (ol.source.State|undefined), *tileGrid: (ol.tilegrid.TileGrid|undefined), *wrapX: (boolean|undefined)}} */ 与 vector 一样的选项就不介绍了,介绍与 vector 特有的选项:extent,地图视图默认的坐标范围; opaque,不透明与否,一个布尔值,默认 false; tilePixelRatio,切片的大小调整选项,如 256 × 256,和 512 × 512; projection,投影; state,地图所处的状态,包括undefined,loading,ready,error; tileGrid,覆盖在地图上的格网; 接受的事件 tileloadstart,切片开始加载时触发的事件; tileloadend,切片加载完毕触发事件; tileloaderror,切片加载出错时的处理。3. ol.source.Image 提供单一的图片地图。 可以配置的选项/** * @typedef {{attributions: (Array.|undefined), *extent: (null|ol.Extent|undefined), *logo: (string|olx.LogoOptions|undefined), *projection: ol.proj.ProjectionLike, *resolutions: (Array.|undefined), *state: (ol.source.State|undefined)}} */ resolutions,地图分辨率。其他的选项都与以上的一样。 触发的事件imageloadstart,图片地图开始加载触发的事件; imageloadend,图片地图加载完毕触发的事件; imageloaderror,图片地图加载出错时触发的事件。 四、总结 source 是 layer 中必须的选项,定义着地图数据的来源,与数据有关的函数,如addfeature、getfeature等函数都定义在 source 中,而且数据源支持多种格式。

23.Openlayers的类
Ajax:顾名思义,用于实现Ajax功能,只是OpenLayers的开发者们把它单独写到一个类里了,其中用到了Prototype.js框架里的一些东西。同时,设计的时候也考虑了跨浏览器的问题。
BaseTypes:这里定制了OpenLayers中用到的string,number 和 function。比如,OpenLayers. String. startsWith,用于测试一个字符串是否一以另一个字符串开头;OpenLayers. Number. limitSigDigs,用于限制整数的有效数位;OpenLayers. Function.bind,用于把某一函数绑定于对象等等。
Console:OpenLayers.Console,此名称空间用于调试和把错误等输出到“控制台”上,需要结合使用…/Firebug/firebug.js。
Control:我们通常所说的控件类,它提供各种各样的控件,比如上节中说的图层开关LayerSwitcher,编辑工具条EditingToolbar等等。加载控件的例子:
class = new OpenLayers.Map(‘map’, { controls: [] });
【openlayer|vue+openLayers入门教程】map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MouseToolbar());
Events:用于实现OpenLayers的事件机制。具体来说,OpenLayers中的事件分为两种,一种是浏览器事件,例如mouseup,mousedown之类的;另外一种是自定义的,如addLayer之类的。OpenLayers中的事件机制是非常值得我们学习的,后面将具体讨论。
Feature:我们知道:Feature是geography 和attributes的集合。在OpenLayers中,特别地OpenLayers.Feature 类由一个Feature和一个lonlat组成。
Format:此类用于读/写各种格式的数据,它的子类都分别创建了各个格式的解析器。这些格式有:XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。
Geometry:怎么翻译呢,几何?是对地理对象的描述。它的子类有Collection、Curve、LinearRing、LineString、MultiLineString、MultiPoint、MultiPolygon、Point、Polygon、Rectangle、Surface,正是这些类的实例,构成了我们看到的地图。需要说明的是,Surface 类暂时还没有实现。
Handler:这个类用于处理序列事件,可被激活和取消。同时,它也有命名类似于浏览器事件的方法。当一个handler 被激活,处理事件的方法就会被注册到浏览器监听器listener ,以响应相应的事件;当一个handler被取消,这些方法在事件监听器中也会相应的被取消注册。Handler通过控件control被创建,而control通过icon表现。
Icon:在计算机屏幕上以图标的形式呈现,有url、尺寸size和位置position 3个属性。一般情况,它与 OpenLayers.Marker结合应用,表现为一个Marker。
Layer:图层。
Map:网业中动态地图。它就像容器,可向里面添加图层Layer和控件Control。实际上,单个Map是毫无意义的,正是Layer和Control成就了它。
Marker:它的实例是OpenLayers.LonLat 和OpenLayers.Icon的集合。通俗一点儿说,Icon附上一定的经纬度就是Marker。
Popup:地图上一个小巧的层,实现地图“开关”功能。使用例子:
Class = new OpenLayers.Popup(“chicken”,
new OpenLayers.LonLat(5,40),
new OpenLayers.Size(200,200),“example popup”,true);
map.addPopup(popup);
Renderer :渲染类。在 OpenLayers 中,渲染功能是作为矢量图层的一个属性存在的,我们称之为渲染器,矢量图层就是通过这个渲染器提供的方法将矢量数据显示出来。
Tile:设计这个类用于指明单个“瓦片”Tile,或者更小的分辨率。Tiles存储它们自身的信息,比如url和size等。
24.GeoJSON介绍 GeoJSON是一种用于编码各种地理数据结构的格式
{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [125.6, 10.1] }, "properties": { "name": "Dinagat Islands" } }

以GeoJSON支持以下几何类型:PointLineStringPolygonMultiPointMultiLineString,和MultiPolygon。具有附加属性的几何对象是Feature对象。特征集由FeatureCollection对象包含。
GeoJSON 规范 (RFC 7946)
2015 年,互联网工程任务组 (IETF) 与原始规范作者一起组成了GeoJSON WG来标准化 GeoJSON。 RFC 7946于 2016 年 8 月发布,是 GeoJSON 格式的新标准规范,取代了 2008 GeoJSON 规范。
25.解析GeoJSON数据 有两种概况,一个是安装包或者文件夹解析成GeoJSON数据,这个里面必须报好一个.shp文件作为入口.或者是.getjson文件.
第一种情况:
1. yarn add shpjs 2. const shapefile = require("shpjs"); shapefile("http://127.0.0.1:5500/国道").then((geojson) => { this.fileData = https://www.it610.com/article/geojson; }); 注意:路径如果读取本地有可能会读取不到并报错,所以我把数据放在了线上 如何放在线上? 使用vscode,下载liveServe插件,然后再文件夹中找到该文件,然后再vscode中启动,并创建一个Html文件,任意命名,因为没有Html文件的话vscode是识别不到的,然后 `shift+!`生成html结构,然后右键有一个open widht live serve 点击它接口生成线上服务,这个vcode窗口不可以关闭,可以最小化,

第二种情况:因为已经是geojson文件了所以我们拿过来直接解析即可
let VectorLayer = new Vector({ source: new VectorSource({ projection: "EPSG:4326", url: "./simplestyles.geojson", format: new GeoJSON(), defaultFeatureProjection: "EPSG:4326", }), }); this.map.addLayer(VectorLayer); //添加图层 注意:这个url也需要是线上地址,本地路径有可能会报错

26.openLayers加载ArcGIS服务
因为是矢量数据所以使用Image 也就是投影 let layers = '0,1,2,3,4,' let ImgLayer = new Image({ source: new ImageArcGISRest({ ratio: 1, params: { layers: `show:${layers}`, projection: "EPSG:4490", }, url: "/map/arcgis/rest/services/%E5%BC%A0%E5%AE%B6%E5%8F%A3/%E7%94%B5%E5%AD%90%E5%BA%95%E5%9B%BE/MapServer", }), }); this.map.addLayers()

27.创建天地图,ArcGIS瓦片地图,Bing地图,谷歌地图 注意:这些url中的key都需要自己去相对应的官网去注册 都是不收费的O~
//创建天地图 create_sky_map() { let tian_di_tu_satellite_layer = new Tile({ title: "天地图卫星影像", //基本无用 source: new XYZ({ url: "arcgisServe?T=ter_w&tk=ley&x={x}&y={y}&l={z}", }), }); let tian_di_tu_road_layer = new Tile({ title: "天地图路网", source: new XYZ({ url: "arcgisServe?T=vec_w&x={x}&y={y}&l={z}&tk=ley", }), }); let tian_di_tu_annotation = new Tile({ title: "天地图文字标注", source: new XYZ({ url: "arcgisServe?T=cva_w&x={x}&y={y}&l={z}&tk=ley", }), }); let Layergroup = new LayerGroup({ layers: [tian_di_tu_road_layer, tian_di_tu_annotation], }); return Layergroup; },//创建ArcGIS底图 create_GIS_Map() { let url = `https://services.arcgisonline.com/ArcGIS/rest/services/****/MapServer`; let Img_laye = new Tile({ source: new TileArcGISRest({ ratio: 1, params: {}, url1, }), }); return Img_laye; },//创建Bing地图 create_Bimg_map() { let layer = new Tile({ title: "Bimg_map", source: new BingMaps({ key: "https://www.bingmapsportal.com/key", imagerySet: "AerialWithLabelsOnDemand", }), }); return layer; },//创建谷歌地图 create_Google() { let layer = new Tile({ title: "谷歌矢量地图服务", source: new XYZ({ url: "http://www.google.cn/maps/vt?lyrs=****n&x={x}&y={y}&z={z}", }), }); return layer; },

28.openlayers添加弹出层
//创建弹出层 let queryalert = document.getElementsByClassName("queryAlert")[0]; if (!queryalert) { queryalert = document.createElement("div"); queryalert.className = "queryAlert"; } this.overlay = new Overlay({ element: queryalert, autoPan: true, //autoPanAnimation: { //duration: 250, //}, }); this.map.addOverlay(this.overlay); queryalert.style.display = "block"; queryalert.innerHTML = DomTemplate; this.overlay.setPosition(obj.e.coordinate);

28.openlayers坐标转换 https://spatialreference.org/ref/sr-org/wgs84/proj4/
proj4方法库import proJ4 from "proj4"; // proJ4(自身的坐标系,要转换的坐标系,投影坐标) let one = proJ4(proj_4490, proj_4526, newList); //返回一个数组

后续会继续更新…

    推荐阅读