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 }) }); ...