Openlayers

本文次要学习openlayers的Event模块相干源码BaseEventOpenlayers依据W3C DOM Level 2 Event接口简化实现了本人的事件类,它只提供了type和target属性以及preventDefault和stopPropagation办法。 class BaseEvent { /** * @param {string} type Type. */ constructor(type) { /** * @type {boolean} */ this.propagationStopped; /** * @type {boolean} */ this.defaultPrevented; /** * The event type. * @type {string} * @api */ this.type = type; /** * The event target. * @type {Object} * @api */ this.target = null; } /** * Prevent default. This means that no emulated `click`, `singleclick` or `doubleclick` events * will be fired. * @api */ preventDefault() { this.defaultPrevented = true; } /** * Stop event propagation. * @api */ stopPropagation() { this.propagationStopped = true; }}EventTypeEventType对象保留了所有触发地图事件的事件名称。 ...

问题因为偶然有些奇怪的点位呈现在意料之外的地位，导致挪动到该点位所在位置没有下载对应的地图瓦片，所以须要判断该点位所处的地位（此时地图空白），作为参考信息。 解决思路第一种是间接找出该点位，通过接口数据来查找对应的经纬度坐标，但比拟繁琐，特地是数据量大时，很麻烦第二种是我曾经晓得那些缺失瓦片的信息（依据接口报错得悉瓦片的[z,x,y]）,通过tileCoord来判断点位的大略地位。import {createXYZ} from 'ol/tilegrid';const tilecoord = [11, 1689, 886]const tilegrid = createXYZ();const center = tilegrid.getTileCoordCenter(tilecoord) // 瓦片的核心地位源码剖析/** * @param {import("../tilecoord.js").TileCoord} tileCoord Tile coordinate. * @return {import("../coordinate.js").Coordinate} Tile center. */getTileCoordCenter(tileCoord) { const origin = this.getOrigin(tileCoord[0]); const resolution = this.getResolution(tileCoord[0]); const tileSize = toSize(this.getTileSize(tileCoord[0]), this.tmpSize_); return [ origin[0] + (tileCoord[1] + 0.5) * tileSize[0] * resolution, origin[1] - (tileCoord[2] + 0.5) * tileSize[1] * resolution, ];}首先获取原点，分辨率，以及瓦片大小，在通过公式就算得出对应的瓦片中心点的经纬度坐标。 总结记录下来得起因很简略，就是为了不便调试开发。尽管这个货色并不难，但须要你去理解openlayer的源码api，因为官网文档并没有间接点明。

/** * 多地图同步，顺次传入的多个地图都会同步 * @param {Array} 须要同步的地图 * @param {Object} options 地图同步配置参数 * @returns {Function} 勾销同步的办法 */export function syncMultiMap(syncMaps, options) { let activeMap = syncMaps.shift(); for (let map of syncMaps) { // 存储本身视图对象 map._selfView = map.getView(); // 存储同步参照物 map._activeMap = activeMap; // 绑定指标视图对象 map.setView(map.getView()); } return function () { for (let map of syncMaps) { map.setView(map._selfView); map._activeMap = null; } }}

1、环境构建yarn add ol 2、引入文件(按需引入)import "ol/ol.css";import { Map, View } from "ol";import * as olProj from "ol/proj";import { Vector as VectorLayer, Tile } from "ol/layer";import Feature from "ol/Feature";import { Point } from "ol/geom";import { XYZ, Vector as VectorSource } from "ol/source";import { Style, Icon, Fill, Stroke, Text } from "ol/style";import GeoJSON from "ol/format/GeoJSON"; 3、初始化地图 // 初始化一个 openlayers 地图 let rasterLayer = new Tile({ source: new XYZ({ url: "gis2d/terrain/{z}/{x}/{y}.jpg" }) }); this.map = new Map({ target: "map", layers: [rasterLayer], view: new View({ center: olProj.transform( [103.879389, 37.42613], "EPSG:4326", "EPSG:3857" ), minZoom: 3, zoom: 4, maxZoom: 5 }) }); ...

1、 使用openlayers自带的geom. containsXY方法 该方法是监测坐标点是否在多边形内，所以Geom的类型只能是Polygon、MultiPolygon、GeometryCollection、Circle中的一个，且该方法的参数是点 使用：polygon.containsXY(coors[0], coors[1]) 那我们如何使用这个检测点与面关系的函数，去检测面与面之间的关系？我们可以这样做： 比如有A、B两个多边形1、遍历A多边形上的点，判断是否有坐标点在B多边形内 --- 返回结果 a2、遍历B多边形上的点，判断是否有坐标点在A多边形内 --- 返回结果 b 如果a、b都为true，则两个多边形相交如果a为true，b为false，则多边形B包含多边形A如果a为false，b为true，则多边形A包含多边形B如果a、b都为false，则两个多边形远离 代码如下： function judge(coorsA, coorsB){ //booleanContains let geomA = new ol.geom.Polygon([coorsA]) let geomB = new ol.geom.Polygon([coorsB]) let boola = coorsA.some(item => { return geomB.containsXY(item[0], item[1]) }) let boolb = coorsB.some(item => { return geomA.containsXY(item[0], item[1]) }) return [ ['相离', 'A包含B'], ['B包含A', '相交'] ][+boola][+boolb]}2、 使用truf库的booleanContains函数，这个函数可以检测两个几何是否为包容关系 使用：引入相关函数，因为truf识别的geometry不是openlayers中的geometry，所以需要使用其提供的函数，转换成对应的geometry import booleanContains from '@turf/boolean-contains'import {geometry, polygon, lineString} from '@turf/helpers'let contains = booleanContains( polygon(parent.coors), polygon(child.coors) )函数可以监测的类型如下 ...

1.比例尺分类（1）数字式，用数字的比例式或分数式表示比例尺的大小。例如地图上1厘米代表实地距离500千米，可写成：1∶50 000 000或写成：五千万分之一。（2）线段式（也叫直线式），在地图上画一条线段，并注明地图上1厘米所代表的实际距离。（3）文字式，在地图上用文字直接写出地图上1厘米代表实地距离多少千米，如：图上1厘米相当于地面距离10千米。 2.openlayers中比例尺介绍openlayers中默认地图比例尺为直线式，如图该比例尺存在精确测量无法读取比例尺实际值的缺点。因此有必要将直线比例尺转换成数字比例尺。 3.实现方法 地图比例尺、分辨率、dpi关系 openlayers背景地图多为瓦片地图，瓦片地图分辨率（resolution）是非常重要的参数，其原理参考瓦片地图分辨率介绍； 地图比例尺受到分辨率，像素dpi以及地图投影关系等影响，他们之间的关系参考地图比例尺，分辨率，dpi之间的关系 因此根据这三者的关系得到数字比例尺（digitalScale）的换算公式：digitalScale=dpi/0.0254*resolution实现代码<div id="map"> <div id="digitalScale"><span>比例尺1：</span><span id="zoom"></span></div></div><script> var scaleLineControl=new ol.control.ScaleLine();//定义比例尺控件 // 实例化地图 var map=new ol.Map({ layers:[ new ol.layer.Tile({ source:new ol.source.OSM() }) ], target:'map', view:new ol.View({ center:ol.proj.transform([104,30],'EPSG:4326','EPSG:3857'), zoom:10 }), controls:ol.control.defaults().extend([scaleLineControl])//加载比例尺控件 }); // 监听分辨率变化，通过dpi和像素关系（比例尺=dpi/0.0254*分辨率）输出比例尺 map.getView().on('change:resolution', function(){ document.getElementById('zoom').innerHTML = (this.getResolution())*3779.5275590551;//这里使用了View中的getResolution方法获得当前View的分辨率。 });</script>最终效果

openlayers-自定义瓦片定义一个瓦片地址ol.source.TileImage.tileUrlFunction官方文档由此我们只需要重写这个ol.source.TileImage.tileUrlFunction方法即可数据准备用爬虫下载了一些高德地图放大层数最小的图片256*256大小的简单服务器配置，将这些图片放到tomcat下使之能够正常访问代码编写常用参数配置 var proj_3857 = new ol.proj.get(“EPSG:3857”); var proj_3857Extent = proj_3857.getExtent(); var mapWidth3857 = ol.extent.getWidth(proj_3857.getExtent()); var resolutions3857 = [156543.03392804097, 78271.51696402048, 39135.75848201024, 19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282, 611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813, 19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395];用于调试的网格编号(很重要) var tileGrid = new ol.tilegrid.TileGrid({ resolutions: resolutions3857, tileSize: [256, 256], extent: proj_3857Extent, origin: ol.extent.getTopLeft(proj_3857Extent), });使用说明：可以用来检查是否是对应的图片瓦片图层 var tilesource = new ol.source.TileImage({ tileUrlFunction: function (tileCoord) { var z = tileCoord[0]; var x = tileCoord[1]; var y = Math.abs(tileCoord[2]); return “http://localhost:9999/gaode_tiles_tms/” + z + “/” + x + “/” + y + “.png”; }, tileGrid: tileGrid, projection: proj_3857, });完整demo<!DOCTYPE html><html xmlns=“http://www.w3.org/1999/xhtml"><head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/> <title></title> <script src=“https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity=“sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=“anonymous”></script> <script src=“https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity=“sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4” crossorigin=“anonymous”></script> <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity=“sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1” crossorigin=“anonymous”></script> <link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" integrity=“sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=” crossorigin=“anonymous”/> <script src=“https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" integrity=“sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA=” crossorigin=“anonymous”></script></head><body><div id=“map”></div><script type=“text/javascript”> var proj_3857 = new ol.proj.get(“EPSG:3857”); var proj_3857Extent = proj_3857.getExtent(); var mapWidth3857 = ol.extent.getWidth(proj_3857.getExtent()); var resolutions3857 = [156543.03392804097, 78271.51696402048, 39135.75848201024, 19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282, 611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813, 19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395]; /** * 网格标注 * @type {ol.tilegrid.TileGrid} */ var tileGrid = new ol.tilegrid.TileGrid({ resolutions: resolutions3857, tileSize: [256, 256], extent: proj_3857Extent, origin: ol.extent.getTopLeft(proj_3857Extent), }); var tilesource = new ol.source.TileImage({ tileUrlFunction: function (tileCoord) { var z = tileCoord[0]; var x = tileCoord[1]; var y = Math.abs(tileCoord[2]); return “http://localhost:9999/gaode_tiles_tms/” + z + “/” + x + “/” + y + “.png”; }, tileGrid: tileGrid, projection: proj_3857, }); var AMap = new ol.layer.Tile({ source: tilesource, projection: proj_3857, }); var map = new ol.Map({ layers: [ AMap, // 加载本地瓦片 new ol.layer.Tile({ source: new ol.source.TileDebug({ projection: proj_3857, tileGrid: tileGrid }) }) ], target: ‘map’, view: new ol.View({ center: ol.proj.transform([120, 30], ‘EPSG:4326’, ‘EPSG:3857’), resulotions: resolutions3857, zoom: 1, minZoom: 1, maxZoom: 19 }), });</script></body></html> ...