@nextgis/ol-map-adapter
Advanced tools
Comparing version 1.18.21 to 1.19.0
@@ -30,3 +30,3 @@ /// <reference types="node" /> | ||
| import OSM from 'ol/source/OSM'; | ||
| import { Paint } from '@nextgis/paint'; | ||
| import type { Paint } from '@nextgis/paint'; | ||
| import type { PropertiesFilter } from '@nextgis/properties-filter'; | ||
@@ -33,0 +33,0 @@ import type { TileAdapterOptions } from '@nextgis/webmap'; |
@@ -1,2 +0,2 @@ | ||
| /** Bundle of @nextgis/ol-map-adapter; version: 1.18.21; author: NextGIS */ | ||
| /** Bundle of @nextgis/ol-map-adapter; version: 1.19.0; author: NextGIS */ | ||
| import { EventEmitter } from 'events'; | ||
@@ -6,28 +6,193 @@ import Map from 'ol/Map'; | ||
| import { transform, transformExtent, fromLonLat } from 'ol/proj'; | ||
| import TileLayer from 'ol/layer/Tile'; | ||
| import TileWMS from 'ol/source/TileWMS'; | ||
| import Attr from 'ol/control/Attribution'; | ||
| import ControlContainer from '@nextgis/control-container'; | ||
| import Control from 'ol/control/Control'; | ||
| import Zoom from 'ol/control/Zoom'; | ||
| import { create } from '@nextgis/dom'; | ||
| import { getCoordinates, defined } from '@nextgis/utils'; | ||
| import Overlay from 'ol/Overlay'; | ||
| import GeoJSON from 'ol/format/GeoJSON'; | ||
| import OSM, { ATTRIBUTION } from 'ol/source/OSM'; | ||
| import XYZ from 'ol/source/XYZ'; | ||
| import ImageLayer from 'ol/layer/Image'; | ||
| import CanvasImageLayerRenderer from 'ol/renderer/canvas/ImageLayer'; | ||
| import ImageWMS from 'ol/source/ImageWMS'; | ||
| import Overlay from 'ol/Overlay'; | ||
| import VectorLayer from 'ol/layer/Vector'; | ||
| import VectorSource from 'ol/source/Vector'; | ||
| import { create } from '@nextgis/dom'; | ||
| import { getCoordinates, defined } from '@nextgis/utils'; | ||
| import { getCenter } from 'ol/extent'; | ||
| import polylabel from 'polylabel'; | ||
| import { getCenter } from 'ol/extent'; | ||
| import CircleStyle from 'ol/style/Circle'; | ||
| import { isPaintCallback, isPaint } from '@nextgis/paint'; | ||
| import { asArray } from 'ol/color'; | ||
| import { Fill, Stroke, Style, Text } from 'ol/style'; | ||
| import CircleStyle from 'ol/style/Circle'; | ||
| import Icon from 'ol/style/Icon'; | ||
| import IconAnchorUnits from 'ol/style/IconAnchorUnits'; | ||
| import Icon from 'ol/style/Icon'; | ||
| import { isPaintCallback, isPaint } from '@nextgis/paint'; | ||
| import Zoom from 'ol/control/Zoom'; | ||
| import Attr from 'ol/control/Attribution'; | ||
| import Control from 'ol/control/Control'; | ||
| import ControlContainer from '@nextgis/control-container'; | ||
| import ImageLayer from 'ol/layer/Image'; | ||
| import CanvasImageLayerRenderer from 'ol/renderer/canvas/ImageLayer'; | ||
| import ImageWMS from 'ol/source/ImageWMS'; | ||
| import TileLayer from 'ol/layer/Tile'; | ||
| import OSM, { ATTRIBUTION } from 'ol/source/OSM'; | ||
| import XYZ from 'ol/source/XYZ'; | ||
| import TileWMS from 'ol/source/TileWMS'; | ||
| const OPTIONS$1 = { | ||
| collapsible: false, | ||
| }; | ||
| class Attribution extends Attr { | ||
| constructor(options) { | ||
| super({ ...OPTIONS$1, ...options }); | ||
| } | ||
| } | ||
| const OPTIONS = { | ||
| collapsible: false, | ||
| }; | ||
| class PanelControl extends Control { | ||
| constructor(options) { | ||
| const panelContainer = new ControlContainer(); | ||
| const element = panelContainer.getContainer(); | ||
| super({ ...OPTIONS, ...options, element }); | ||
| this.panelContainer = panelContainer; | ||
| } | ||
| async addControl(control, position) { | ||
| const map = this.getMap(); | ||
| if (map) { | ||
| const target = this.panelContainer.newPositionContainer(position); | ||
| if (target) { | ||
| const _control = await control; | ||
| const element = _control.element; | ||
| if (element) { | ||
| element.classList.add('webmap-ctrl'); | ||
| } | ||
| _control.setTarget(target); | ||
| map.addControl(_control); | ||
| } | ||
| } | ||
| } | ||
| removeControl(control) { | ||
| const map = this.getMap(); | ||
| if (map) { | ||
| map.removeControl(control); | ||
| } | ||
| } | ||
| getContainer() { | ||
| return this.panelContainer.getContainer(); | ||
| } | ||
| } | ||
| class ZoomControl extends Zoom { | ||
| constructor(...args) { | ||
| super(...args); | ||
| this.element.classList.remove('ol-control'); | ||
| this.element.classList.add('webmap-ctrl-group'); | ||
| } | ||
| } | ||
| function createButtonControl(options) { | ||
| const newControl = (function (C) { | ||
| function NewControl() { | ||
| const button = document.createElement('button'); | ||
| button.className = 'custom-button-control'; | ||
| if (typeof options.html === 'string') { | ||
| button.innerHTML = options.html; | ||
| } | ||
| else if (options.html) { | ||
| button.appendChild(options.html); | ||
| } | ||
| if (typeof options.title === 'string') { | ||
| button.title = options.title; | ||
| } | ||
| const element = document.createElement('div'); | ||
| element.className = | ||
| (options.addClass ? options.addClass + ' ' : '') + | ||
| 'ol-unselectable webmap-ctrl-group'; | ||
| element.appendChild(button); | ||
| C.call(this, { element }); | ||
| button.addEventListener('click', () => options.onClick(), false); | ||
| } | ||
| if (C) { | ||
| NewControl.__proto__ = C; | ||
| } | ||
| NewControl.prototype = Object.create(Control && Control.prototype); | ||
| NewControl.prototype.constructor = NewControl; | ||
| NewControl.prototype.handleRotateNorth = function handleRotateNorth() { | ||
| this.getMap().getView().setRotation(0); | ||
| }; | ||
| return NewControl; | ||
| })(Control); | ||
| // @ts-ignore | ||
| return new newControl(); | ||
| } | ||
| function createControl(control, options = {}, map) { | ||
| const NewControl = (function (C) { | ||
| function NewControl() { | ||
| const element = document.createElement('div'); | ||
| element.className = | ||
| (options.addClass ? options.addClass + ' ' : '') + | ||
| 'ol-unselectable' + | ||
| (options.bar ? ' webmap-ctrl-group' : '') + | ||
| (options.margin ? ' ol-control-margin' : ''); | ||
| const content = control.onAdd(map); | ||
| if (content) { | ||
| element.appendChild(content); | ||
| } | ||
| C.call(this, { | ||
| element, | ||
| }); | ||
| } | ||
| if (C) { | ||
| NewControl.__proto__ = C; | ||
| } | ||
| NewControl.prototype = Object.create(Control && Control.prototype); | ||
| NewControl.prototype.constructor = NewControl; | ||
| NewControl.prototype.handleRotateNorth = function handleRotateNorth() { | ||
| this.getMap().getView().setRotation(0); | ||
| }; | ||
| return NewControl; | ||
| })(Control); | ||
| // @ts-ignore | ||
| return new NewControl(); | ||
| // return control; | ||
| } | ||
| function convertMapClickEvent(evt, displayProjection = 'EPSG:3857', lonlatProjection = 'EPSG:4326') { | ||
| const [lng, lat] = transform(evt.coordinate, displayProjection, lonlatProjection); | ||
| const latLng = { | ||
| lat, | ||
| lng, | ||
| }; | ||
| return { | ||
| latLng, | ||
| lngLat: [lng, lat], | ||
| pixel: { left: evt.pixel[0], top: evt.pixel[1] }, | ||
| source: evt, | ||
| }; | ||
| } | ||
| function featuresSource({ feature, dataProjection, featureProjection, }) { | ||
| const olFeatures = new GeoJSON().readFeatures({ | ||
| type: 'FeatureCollection', | ||
| features: Array.isArray(feature) ? feature : [feature], | ||
| }, { | ||
| dataProjection, | ||
| featureProjection, | ||
| }); | ||
| const source = new VectorSource(); | ||
| source.addFeatures(olFeatures); | ||
| return source; | ||
| } | ||
| function getFeaturesBounds(opt) { | ||
| const source = featuresSource(opt); | ||
| const bounds = source.getExtent(); | ||
| const extent = transformExtent(bounds, opt.featureProjection, opt.dataProjection); | ||
| source.dispose(); | ||
| return extent; | ||
| } | ||
| function getFeaturesCenter(opt) { | ||
| const extent = getFeaturesBounds(opt); | ||
| return getCenter(extent); | ||
| } | ||
| function createFeaturePositionOptions(opt) { | ||
| return { | ||
| getBounds: () => getFeaturesBounds(opt), | ||
| getCenter: () => getFeaturesCenter(opt), | ||
| }; | ||
| } | ||
| const DPI = 1000 / 39.37 / 0.28; | ||
@@ -57,2 +222,24 @@ const IPM = 39.37; | ||
| function getCentroid(feature) { | ||
| if (feature.geometry.type === 'Polygon') { | ||
| return polylabel(feature.geometry.coordinates); | ||
| } | ||
| else if (feature.geometry.type === 'Point') { | ||
| return feature.geometry.coordinates; | ||
| } | ||
| return getCoordinatesCentroid(getCoordinates(feature)); | ||
| } | ||
| // https://stackoverflow.com/a/22796806 | ||
| function getCoordinatesCentroid(arr) { | ||
| return arr.reduce((x, y) => { | ||
| return [x[0] + y[0] / arr.length, x[1] + y[1] / arr.length]; | ||
| }, [0, 0]); | ||
| } | ||
| function makeHtmlFromString(str) { | ||
| const html = document.createElement('div'); | ||
| html.innerHTML = str; | ||
| return html; | ||
| } | ||
| function getFeature(feature) { | ||
@@ -111,302 +298,2 @@ const geojson = new GeoJSON(); | ||
| function setTileLoadFunction(tile, src, headers) { | ||
| const xhr = new XMLHttpRequest(); | ||
| xhr.open('GET', src); | ||
| xhr.responseType = 'arraybuffer'; | ||
| for (const h in headers) { | ||
| xhr.setRequestHeader(h, headers[h]); | ||
| } | ||
| xhr.onload = function () { | ||
| const arrayBufferView = new Uint8Array(this.response); | ||
| const blob = new Blob([arrayBufferView], { type: 'image/png' }); | ||
| // @ts-ignore for typedoc | ||
| const urlCreator = window.URL || window.webkitURL; | ||
| const imageUrl = urlCreator.createObjectURL(blob); | ||
| // @ts-ignore | ||
| tile.getImage().src = imageUrl; | ||
| }; | ||
| xhr.send(); | ||
| } | ||
| class BaseAdapter { | ||
| constructor(map, options) { | ||
| this.map = map; | ||
| this.options = options; | ||
| } | ||
| setOpacity(val) { | ||
| this.options.opacity = Number(val); | ||
| if (this.layer && this.layer.setOpacity) { | ||
| this.layer.setOpacity(this.options.opacity); | ||
| } | ||
| } | ||
| } | ||
| class WmsAdapter extends BaseAdapter { | ||
| constructor(map, options) { | ||
| super(map, options); | ||
| this.map = map; | ||
| this.options = options; | ||
| } | ||
| addLayer(options) { | ||
| Object.assign(this.options, options); | ||
| const wmsOptions = { | ||
| url: options.url, | ||
| params: { LAYERS: options.layers, VERSION: options.version }, | ||
| projection: undefined, | ||
| }; | ||
| const updateWmsParams = options.updateWmsParams; | ||
| if (updateWmsParams) { | ||
| wmsOptions.tileLoadFunction = (image, src) => { | ||
| const url = src.split('?')[0]; | ||
| const query = src.split('?')[1]; | ||
| const { resource, BBOX, WIDTH, HEIGHT } = queryToObject(query); | ||
| const queryString = objectToQuery(updateWmsParams({ | ||
| resource, | ||
| bbox: BBOX, | ||
| width: WIDTH, | ||
| height: HEIGHT, | ||
| })); | ||
| const headers = options.headers; | ||
| const _src = url + '?' + queryString; | ||
| if (headers) { | ||
| setTileLoadFunction(image, _src, headers); | ||
| } | ||
| else { | ||
| // @ts-ignore | ||
| image.getImage().src = _src; | ||
| } | ||
| }; | ||
| } | ||
| const source = new TileWMS(wmsOptions); | ||
| const layer = new TileLayer({ | ||
| source, | ||
| opacity: options.opacity, | ||
| ...resolutionOptions(this.map, options), | ||
| ...options.nativeOptions, | ||
| }); | ||
| this.layer = layer; | ||
| return layer; | ||
| } | ||
| } | ||
| class OsmAdapter extends BaseAdapter { | ||
| constructor(map, options) { | ||
| super(map, options); | ||
| this.map = map; | ||
| this.options = options; | ||
| this.name = 'OpenStreetMap'; | ||
| } | ||
| addLayer(options) { | ||
| Object.assign(this.options, options); | ||
| this.options.name = this.name; | ||
| const attributions = [ATTRIBUTION]; | ||
| const layer = new TileLayer({ | ||
| source: new OSM({ | ||
| attributions, | ||
| }), | ||
| ...options.nativeOptions, | ||
| }); | ||
| return layer; | ||
| } | ||
| } | ||
| function getUrlsWithSubdomains(url, subdomains) { | ||
| const urls = []; | ||
| const subdomains_ = typeof subdomains === 'string' ? subdomains.split('') : subdomains; | ||
| if (subdomains_ === null || subdomains_ === void 0 ? void 0 : subdomains_.length) { | ||
| subdomains_.forEach((x) => { | ||
| urls.push(url.replace(/{s}/, x)); | ||
| }); | ||
| } | ||
| else { | ||
| urls.push(url); | ||
| } | ||
| return urls; | ||
| } | ||
| class TileAdapter extends BaseAdapter { | ||
| constructor(map, options) { | ||
| super(map, options); | ||
| this.map = map; | ||
| this.options = options; | ||
| } | ||
| addLayer(options) { | ||
| Object.assign(this.options, options); | ||
| const urls = getUrlsWithSubdomains(options.url, options.subdomains); | ||
| const xyzOpt = { | ||
| attributions: options.attribution ? [options.attribution] : [], | ||
| urls, | ||
| // tilePixelRatio: 2 | ||
| }; | ||
| if (options.crossOrigin) { | ||
| xyzOpt.crossOrigin = options.crossOrigin; | ||
| } | ||
| const source = new XYZ(xyzOpt); | ||
| const headers = options.headers; | ||
| if (headers) { | ||
| source.setTileLoadFunction((tile, src) => { | ||
| setTileLoadFunction(tile, src, headers); | ||
| }); | ||
| } | ||
| const layer = new TileLayer({ | ||
| source, | ||
| opacity: options.opacity, | ||
| ...resolutionOptions(this.map, options), | ||
| ...options.nativeOptions, | ||
| }); | ||
| return layer; | ||
| } | ||
| } | ||
| class ImageAdapter extends BaseAdapter { | ||
| constructor(map, options) { | ||
| super(map, options); | ||
| this.map = map; | ||
| this.options = options; | ||
| } | ||
| addLayer(options) { | ||
| Object.assign(this.options, options); | ||
| if (options.url) { | ||
| const ratio = options.ratio !== undefined ? options.ratio : 1; | ||
| const imageOptions = { | ||
| url: options.url, | ||
| params: { | ||
| ...options.params, | ||
| }, | ||
| projection: undefined, | ||
| }; | ||
| const updateWmsParams = options.updateWmsParams; | ||
| imageOptions.imageLoadFunction = (image, src) => { | ||
| const url = src.split('?')[0]; | ||
| const query = src.split('?')[1]; | ||
| const { resource, BBOX, WIDTH, HEIGHT, ...params } = queryToObject(query); | ||
| const queryParams = { | ||
| resource, | ||
| bbox: BBOX, | ||
| width: WIDTH, | ||
| height: HEIGHT, | ||
| ...params, | ||
| }; | ||
| const queryString = objectToQuery(updateWmsParams ? updateWmsParams(queryParams) : params); | ||
| const headers = options.headers; | ||
| const _src = url + '?' + queryString; | ||
| if (headers) { | ||
| setTileLoadFunction(image, _src, headers); | ||
| } | ||
| else { | ||
| // @ts-ignore | ||
| image.getImage().src = _src; | ||
| } | ||
| // const im = image.getImage(); | ||
| // im.addEventListener('load', () => { | ||
| // console.log(im); | ||
| // return true; | ||
| // }); | ||
| }; | ||
| let ImLayer = ImageLayer; | ||
| let ImWms = ImageWMS; | ||
| if (ratio > 1) { | ||
| imageOptions.ratio = ratio; | ||
| imageOptions.serverType = 'mapserver'; | ||
| class CanvasILRendererExtended extends CanvasImageLayerRenderer { | ||
| renderFrame(frameState, target) { | ||
| frameState.pixelRatio = ratio; | ||
| // @ts-ignore | ||
| return super.renderFrame(frameState, target); | ||
| } | ||
| } | ||
| class ImageLayerExtended extends ImageLayer { | ||
| // @ts-ignore | ||
| createRenderer() { | ||
| return new CanvasILRendererExtended(this); | ||
| } | ||
| } | ||
| // @ts-ignore | ||
| ImLayer = ImageLayerExtended; | ||
| class ImageWmsExtended extends ImageWMS { | ||
| getImageInternal(extent, resolution, pixelRatio, projection) { | ||
| return super.getImageInternal(extent, resolution, ratio, projection); | ||
| } | ||
| } | ||
| ImWms = ImageWmsExtended; | ||
| } | ||
| const source = new ImWms(imageOptions); | ||
| const layer = new ImLayer({ | ||
| source, | ||
| opacity: options.opacity, | ||
| ...resolutionOptions(this.map, options), | ||
| ...options.nativeOptions, | ||
| }); | ||
| this.layer = layer; | ||
| return layer; | ||
| } | ||
| } | ||
| } | ||
| function getCentroid(feature) { | ||
| if (feature.geometry.type === 'Polygon') { | ||
| return polylabel(feature.geometry.coordinates); | ||
| } | ||
| else if (feature.geometry.type === 'Point') { | ||
| return feature.geometry.coordinates; | ||
| } | ||
| return getCoordinatesCentroid(getCoordinates(feature)); | ||
| } | ||
| // https://stackoverflow.com/a/22796806 | ||
| function getCoordinatesCentroid(arr) { | ||
| return arr.reduce((x, y) => { | ||
| return [x[0] + y[0] / arr.length, x[1] + y[1] / arr.length]; | ||
| }, [0, 0]); | ||
| } | ||
| function makeHtmlFromString(str) { | ||
| const html = document.createElement('div'); | ||
| html.innerHTML = str; | ||
| return html; | ||
| } | ||
| function convertMapClickEvent(evt, displayProjection = 'EPSG:3857', lonlatProjection = 'EPSG:4326') { | ||
| const [lng, lat] = transform(evt.coordinate, displayProjection, lonlatProjection); | ||
| const latLng = { | ||
| lat, | ||
| lng, | ||
| }; | ||
| return { | ||
| latLng, | ||
| lngLat: [lng, lat], | ||
| pixel: { left: evt.pixel[0], top: evt.pixel[1] }, | ||
| source: evt, | ||
| }; | ||
| } | ||
| function featuresSource({ feature, dataProjection, featureProjection, }) { | ||
| const olFeatures = new GeoJSON().readFeatures({ | ||
| type: 'FeatureCollection', | ||
| features: Array.isArray(feature) ? feature : [feature], | ||
| }, { | ||
| dataProjection, | ||
| featureProjection, | ||
| }); | ||
| const source = new VectorSource(); | ||
| source.addFeatures(olFeatures); | ||
| return source; | ||
| } | ||
| function getFeaturesBounds(opt) { | ||
| const source = featuresSource(opt); | ||
| const bounds = source.getExtent(); | ||
| const extent = transformExtent(bounds, opt.featureProjection, opt.dataProjection); | ||
| source.dispose(); | ||
| return extent; | ||
| } | ||
| function getFeaturesCenter(opt) { | ||
| const extent = getFeaturesBounds(opt); | ||
| return getCenter(extent); | ||
| } | ||
| function createFeaturePositionOptions(opt) { | ||
| return { | ||
| getBounds: () => getFeaturesBounds(opt), | ||
| getCenter: () => getFeaturesCenter(opt), | ||
| }; | ||
| } | ||
| const typeAlias = { | ||
@@ -523,2 +410,15 @@ Point: 'point', | ||
| class BaseAdapter { | ||
| constructor(map, options) { | ||
| this.map = map; | ||
| this.options = options; | ||
| } | ||
| setOpacity(val) { | ||
| this.options.opacity = Number(val); | ||
| if (this.layer && this.layer.setOpacity) { | ||
| this.layer.setOpacity(this.options.opacity); | ||
| } | ||
| } | ||
| } | ||
| class GeoJsonAdapter extends BaseAdapter { | ||
@@ -1029,121 +929,221 @@ constructor(map, options) { | ||
| class ZoomControl extends Zoom { | ||
| constructor(...args) { | ||
| super(...args); | ||
| this.element.classList.remove('ol-control'); | ||
| this.element.classList.add('webmap-ctrl-group'); | ||
| function setTileLoadFunction(tile, src, headers) { | ||
| const xhr = new XMLHttpRequest(); | ||
| xhr.open('GET', src); | ||
| xhr.responseType = 'arraybuffer'; | ||
| for (const h in headers) { | ||
| xhr.setRequestHeader(h, headers[h]); | ||
| } | ||
| xhr.onload = function () { | ||
| const arrayBufferView = new Uint8Array(this.response); | ||
| const blob = new Blob([arrayBufferView], { type: 'image/png' }); | ||
| // @ts-ignore for typedoc | ||
| const urlCreator = window.URL || window.webkitURL; | ||
| const imageUrl = urlCreator.createObjectURL(blob); | ||
| // @ts-ignore | ||
| tile.getImage().src = imageUrl; | ||
| }; | ||
| xhr.send(); | ||
| } | ||
| const OPTIONS$1 = { | ||
| collapsible: false, | ||
| }; | ||
| class Attribution extends Attr { | ||
| constructor(options) { | ||
| super({ ...OPTIONS$1, ...options }); | ||
| class ImageAdapter extends BaseAdapter { | ||
| constructor(map, options) { | ||
| super(map, options); | ||
| this.map = map; | ||
| this.options = options; | ||
| } | ||
| } | ||
| const OPTIONS = { | ||
| collapsible: false, | ||
| }; | ||
| class PanelControl extends Control { | ||
| constructor(options) { | ||
| const panelContainer = new ControlContainer(); | ||
| const element = panelContainer.getContainer(); | ||
| super({ ...OPTIONS, ...options, element }); | ||
| this.panelContainer = panelContainer; | ||
| } | ||
| async addControl(control, position) { | ||
| const map = this.getMap(); | ||
| if (map) { | ||
| const target = this.panelContainer.newPositionContainer(position); | ||
| if (target) { | ||
| const _control = await control; | ||
| const element = _control.element; | ||
| if (element) { | ||
| element.classList.add('webmap-ctrl'); | ||
| addLayer(options) { | ||
| Object.assign(this.options, options); | ||
| if (options.url) { | ||
| const ratio = options.ratio !== undefined ? options.ratio : 1; | ||
| const imageOptions = { | ||
| url: options.url, | ||
| params: { | ||
| ...options.params, | ||
| }, | ||
| projection: undefined, | ||
| }; | ||
| const updateWmsParams = options.updateWmsParams; | ||
| imageOptions.imageLoadFunction = (image, src) => { | ||
| const url = src.split('?')[0]; | ||
| const query = src.split('?')[1]; | ||
| const { resource, BBOX, WIDTH, HEIGHT, ...params } = queryToObject(query); | ||
| const queryParams = { | ||
| resource, | ||
| bbox: BBOX, | ||
| width: WIDTH, | ||
| height: HEIGHT, | ||
| ...params, | ||
| }; | ||
| const queryString = objectToQuery(updateWmsParams ? updateWmsParams(queryParams) : params); | ||
| const headers = options.headers; | ||
| const _src = url + '?' + queryString; | ||
| if (headers) { | ||
| setTileLoadFunction(image, _src, headers); | ||
| } | ||
| _control.setTarget(target); | ||
| map.addControl(_control); | ||
| else { | ||
| // @ts-ignore | ||
| image.getImage().src = _src; | ||
| } | ||
| // const im = image.getImage(); | ||
| // im.addEventListener('load', () => { | ||
| // console.log(im); | ||
| // return true; | ||
| // }); | ||
| }; | ||
| let ImLayer = ImageLayer; | ||
| let ImWms = ImageWMS; | ||
| if (ratio > 1) { | ||
| imageOptions.ratio = ratio; | ||
| imageOptions.serverType = 'mapserver'; | ||
| class CanvasILRendererExtended extends CanvasImageLayerRenderer { | ||
| renderFrame(frameState, target) { | ||
| frameState.pixelRatio = ratio; | ||
| // @ts-ignore | ||
| return super.renderFrame(frameState, target); | ||
| } | ||
| } | ||
| class ImageLayerExtended extends ImageLayer { | ||
| // @ts-ignore | ||
| createRenderer() { | ||
| return new CanvasILRendererExtended(this); | ||
| } | ||
| } | ||
| // @ts-ignore | ||
| ImLayer = ImageLayerExtended; | ||
| class ImageWmsExtended extends ImageWMS { | ||
| getImageInternal(extent, resolution, pixelRatio, projection) { | ||
| return super.getImageInternal(extent, resolution, ratio, projection); | ||
| } | ||
| } | ||
| ImWms = ImageWmsExtended; | ||
| } | ||
| const source = new ImWms(imageOptions); | ||
| const layer = new ImLayer({ | ||
| source, | ||
| opacity: options.opacity, | ||
| ...resolutionOptions(this.map, options), | ||
| ...options.nativeOptions, | ||
| }); | ||
| this.layer = layer; | ||
| return layer; | ||
| } | ||
| } | ||
| removeControl(control) { | ||
| const map = this.getMap(); | ||
| if (map) { | ||
| map.removeControl(control); | ||
| } | ||
| } | ||
| class OsmAdapter extends BaseAdapter { | ||
| constructor(map, options) { | ||
| super(map, options); | ||
| this.map = map; | ||
| this.options = options; | ||
| this.name = 'OpenStreetMap'; | ||
| } | ||
| getContainer() { | ||
| return this.panelContainer.getContainer(); | ||
| addLayer(options) { | ||
| Object.assign(this.options, options); | ||
| this.options.name = this.name; | ||
| const attributions = [ATTRIBUTION]; | ||
| const layer = new TileLayer({ | ||
| source: new OSM({ | ||
| attributions, | ||
| }), | ||
| ...options.nativeOptions, | ||
| }); | ||
| return layer; | ||
| } | ||
| } | ||
| function createControl(control, options = {}, map) { | ||
| const NewControl = (function (C) { | ||
| function NewControl() { | ||
| const element = document.createElement('div'); | ||
| element.className = | ||
| (options.addClass ? options.addClass + ' ' : '') + | ||
| 'ol-unselectable' + | ||
| (options.bar ? ' webmap-ctrl-group' : '') + | ||
| (options.margin ? ' ol-control-margin' : ''); | ||
| const content = control.onAdd(map); | ||
| if (content) { | ||
| element.appendChild(content); | ||
| } | ||
| C.call(this, { | ||
| element, | ||
| function getUrlsWithSubdomains(url, subdomains) { | ||
| const urls = []; | ||
| const subdomains_ = typeof subdomains === 'string' ? subdomains.split('') : subdomains; | ||
| if (subdomains_ === null || subdomains_ === void 0 ? void 0 : subdomains_.length) { | ||
| subdomains_.forEach((x) => { | ||
| urls.push(url.replace(/{s}/, x)); | ||
| }); | ||
| } | ||
| else { | ||
| urls.push(url); | ||
| } | ||
| return urls; | ||
| } | ||
| class TileAdapter extends BaseAdapter { | ||
| constructor(map, options) { | ||
| super(map, options); | ||
| this.map = map; | ||
| this.options = options; | ||
| } | ||
| addLayer(options) { | ||
| Object.assign(this.options, options); | ||
| const urls = getUrlsWithSubdomains(options.url, options.subdomains); | ||
| const xyzOpt = { | ||
| attributions: options.attribution ? [options.attribution] : [], | ||
| urls, | ||
| // tilePixelRatio: 2 | ||
| }; | ||
| if (options.crossOrigin) { | ||
| xyzOpt.crossOrigin = options.crossOrigin; | ||
| } | ||
| const source = new XYZ(xyzOpt); | ||
| const headers = options.headers; | ||
| if (headers) { | ||
| source.setTileLoadFunction((tile, src) => { | ||
| setTileLoadFunction(tile, src, headers); | ||
| }); | ||
| } | ||
| if (C) { | ||
| NewControl.__proto__ = C; | ||
| } | ||
| NewControl.prototype = Object.create(Control && Control.prototype); | ||
| NewControl.prototype.constructor = NewControl; | ||
| NewControl.prototype.handleRotateNorth = function handleRotateNorth() { | ||
| this.getMap().getView().setRotation(0); | ||
| }; | ||
| return NewControl; | ||
| })(Control); | ||
| // @ts-ignore | ||
| return new NewControl(); | ||
| // return control; | ||
| const layer = new TileLayer({ | ||
| source, | ||
| opacity: options.opacity, | ||
| ...resolutionOptions(this.map, options), | ||
| ...options.nativeOptions, | ||
| }); | ||
| return layer; | ||
| } | ||
| } | ||
| function createButtonControl(options) { | ||
| const newControl = (function (C) { | ||
| function NewControl() { | ||
| const button = document.createElement('button'); | ||
| button.className = 'custom-button-control'; | ||
| if (typeof options.html === 'string') { | ||
| button.innerHTML = options.html; | ||
| } | ||
| else if (options.html) { | ||
| button.appendChild(options.html); | ||
| } | ||
| if (typeof options.title === 'string') { | ||
| button.title = options.title; | ||
| } | ||
| const element = document.createElement('div'); | ||
| element.className = | ||
| (options.addClass ? options.addClass + ' ' : '') + | ||
| 'ol-unselectable webmap-ctrl-group'; | ||
| element.appendChild(button); | ||
| C.call(this, { element }); | ||
| button.addEventListener('click', () => options.onClick(), false); | ||
| class WmsAdapter extends BaseAdapter { | ||
| constructor(map, options) { | ||
| super(map, options); | ||
| this.map = map; | ||
| this.options = options; | ||
| } | ||
| addLayer(options) { | ||
| Object.assign(this.options, options); | ||
| const wmsOptions = { | ||
| url: options.url, | ||
| params: { LAYERS: options.layers, VERSION: options.version }, | ||
| projection: undefined, | ||
| }; | ||
| const updateWmsParams = options.updateWmsParams; | ||
| if (updateWmsParams) { | ||
| wmsOptions.tileLoadFunction = (image, src) => { | ||
| const url = src.split('?')[0]; | ||
| const query = src.split('?')[1]; | ||
| const { resource, BBOX, WIDTH, HEIGHT } = queryToObject(query); | ||
| const queryString = objectToQuery(updateWmsParams({ | ||
| resource, | ||
| bbox: BBOX, | ||
| width: WIDTH, | ||
| height: HEIGHT, | ||
| })); | ||
| const headers = options.headers; | ||
| const _src = url + '?' + queryString; | ||
| if (headers) { | ||
| setTileLoadFunction(image, _src, headers); | ||
| } | ||
| else { | ||
| // @ts-ignore | ||
| image.getImage().src = _src; | ||
| } | ||
| }; | ||
| } | ||
| if (C) { | ||
| NewControl.__proto__ = C; | ||
| } | ||
| NewControl.prototype = Object.create(Control && Control.prototype); | ||
| NewControl.prototype.constructor = NewControl; | ||
| NewControl.prototype.handleRotateNorth = function handleRotateNorth() { | ||
| this.getMap().getView().setRotation(0); | ||
| }; | ||
| return NewControl; | ||
| })(Control); | ||
| // @ts-ignore | ||
| return new newControl(); | ||
| const source = new TileWMS(wmsOptions); | ||
| const layer = new TileLayer({ | ||
| source, | ||
| opacity: options.opacity, | ||
| ...resolutionOptions(this.map, options), | ||
| ...options.nativeOptions, | ||
| }); | ||
| this.layer = layer; | ||
| return layer; | ||
| } | ||
| } | ||
@@ -1150,0 +1150,0 @@ |
@@ -1,2 +0,2 @@ | ||
| import{EventEmitter as t}from"events";import e from"ol/Map";import o from"ol/View";import{transform as i,transformExtent as s,fromLonLat as n}from"ol/proj";import r from"ol/layer/Tile";import a from"ol/source/TileWMS";import l from"ol/format/GeoJSON";import c,{ATTRIBUTION as p}from"ol/source/OSM";import h from"ol/source/XYZ";import u from"ol/layer/Image";import m from"ol/renderer/canvas/ImageLayer";import d from"ol/source/ImageWMS";import f from"ol/Overlay";import y from"ol/layer/Vector";import g from"ol/source/Vector";import{create as _}from"@nextgis/dom";import{getCoordinates as P,defined as v}from"@nextgis/utils";import C from"polylabel";import{getCenter as w}from"ol/extent";import x from"ol/style/Circle";import{asArray as O}from"ol/color";import{Fill as b,Stroke as E,Style as L,Text as F}from"ol/style";import j from"ol/style/IconAnchorUnits";import S from"ol/style/Icon";import{isPaintCallback as V,isPaint as A}from"@nextgis/paint";import M from"ol/control/Zoom";import k from"ol/control/Attribution";import I from"ol/control/Control";import Z from"@nextgis/control-container";const R=90.71446714322,T=39.37;function D(t,e){const o={minZoom:e.minZoom,maxZoom:e.maxZoom};return e.maxScale&&(o.minResolution=U(t,e.maxScale)),e.minScale&&(o.maxResolution=U(t,e.minScale)),o}function U(t,e){if(e)return function(t,e){return t/(e*T*R)}(e,t.getView().getProjection().getMetersPerUnit()||1)}function B(t){return(new l).writeFeatureObject(t,{dataProjection:"EPSG:4326",featureProjection:"EPSG:3857"})}function z(t){const e=decodeURIComponent,o=t.split("&"),i={};let s,n;for(let r,a=0,l=o.length;a<l;++a)if(r=o[a],r.length){const t=r.indexOf("=");t<0?(s=e(r),n=""):(s=e(r.slice(0,t)),n=e(r.slice(t+1))),"string"==typeof i[s]&&(i[s]=[i[s]]),Array.isArray(i[s])?i[s].push(n):i[s]=n}return i}function G(t,e){const o=[];let i;for(i in t){const s=e?e+"["+i+"]":i,n=t[i];o.push(null!==n&&"object"==typeof n?G(n,s):encodeURIComponent(s)+"="+encodeURIComponent(n))}return o.join("&")}function H(t,e,o){const i=new XMLHttpRequest;i.open("GET",e),i.responseType="arraybuffer";for(const s in o)i.setRequestHeader(s,o[s]);i.onload=function(){const e=new Uint8Array(this.response),o=new Blob([e],{type:"image/png"}),i=(window.URL||window.webkitURL).createObjectURL(o);t.getImage().src=i},i.send()}class N{constructor(t,e){this.map=t,this.options=e}setOpacity(t){this.options.opacity=Number(t),this.layer&&this.layer.setOpacity&&this.layer.setOpacity(this.options.opacity)}}function W(t,e="EPSG:3857",o="EPSG:4326"){const[s,n]=i(t.coordinate,e,o);return{latLng:{lat:n,lng:s},lngLat:[s,n],pixel:{left:t.pixel[0],top:t.pixel[1]},source:t}}function X(t){const e=function({feature:t,dataProjection:e,featureProjection:o}){const i=(new l).readFeatures({type:"FeatureCollection",features:Array.isArray(t)?t:[t]},{dataProjection:e,featureProjection:o}),s=new g;return s.addFeatures(i),s}(t),o=e.getExtent(),i=s(o,t.featureProjection,t.dataProjection);return e.dispose(),i}function Y(t){return{getBounds:()=>X(t),getCenter:()=>function(t){const e=X(t);return w(e)}(t)}}const q={Point:"point",MultiPoint:"point",LineString:"line",MultiLineString:"line",Polygon:"polygon",MultiPolygon:"polygon",Circle:"point"},J={polygon:"path",line:"path",point:"circle"};function K(t,e){const o=O(t).slice();return o[3]=void 0!==e?e:1,o}function Q(t,e={}){if(V(e)){return Q(t,e(B(t)))}if(A(e)){const o=t.getGeometry(),i=o&&o.getType()||"Point",s={};if(!e.type){const t=q[i],o="polygon"===t||"line"===t?"path":"html"in e||"className"in e?"icon":J[t];o&&(e.type=o)}if("path"===e.type||"circle"===e.type){const{radius:t,fill:o,fillColor:n,fillOpacity:r,strokeColor:a,stroke:l,strokeOpacity:c}={...e};o&&n&&"string"==typeof n&&"number"==typeof r&&(s.fill=new b({color:K(n,r)})),a&&"string"==typeof a&&"number"==typeof c&&(l||-1!==["MultiLineString","LineString"].indexOf(i))&&(s.stroke=new E({width:e.weight,color:K(a,c)})),"circle"===e.type&&"number"==typeof t&&(s.image=new x({radius:t,...s}))}else if("icon"===e.type){const t=e.html;if(t){const o={src:"data:image/svg+xml,"+encodeURIComponent(t),anchorXUnits:j.PIXELS,anchorYUnits:j.PIXELS,anchor:e.iconAnchor,imgSize:e.iconSize,rotation:e.rotate};s.image=new S(o)}}return new L(s)}}const $={collapsible:!1};const tt={collapsible:!1};class et extends I{constructor(t){const e=new Z,o=e.getContainer();super({...tt,...t,element:o}),this.panelContainer=e}async addControl(t,e){const o=this.getMap();if(o){const i=this.panelContainer.newPositionContainer(e);if(i){const e=await t,s=e.element;s&&s.classList.add("webmap-ctrl"),e.setTarget(i),o.addControl(e)}}}removeControl(t){const e=this.getMap();e&&e.removeControl(t)}getContainer(){return this.panelContainer.getContainer()}}class ot{constructor(){this.options={target:"map"},this.layerAdapters=ot.layerAdapters,this.controlAdapters=ot.controlAdapters,this.emitter=new t,this.displayProjection="EPSG:3857",this.lonlatProjection="EPSG:4326",this._mapClickEvents=[],this._forEachFeatureAtPixel=[],this._unselectCb=[],this._isLoaded=!1,this._positionMem={}}create(t){this.options={...t};const i=this.getViewOptions(this.options),s={controls:[],view:new o(i),layers:[]};t.mapAdapterOptions&&Object.assign(s,t.mapAdapterOptions);const n={...s,target:this.options.target||"map"};this.map=this.options.map||new e(n),this._panelControl=new et,this.map.addControl(this._panelControl),this.map.set("_mapClickEvents",this._mapClickEvents),this.map.set("_forEachFeatureAtPixel",this._forEachFeatureAtPixel),this.map.set("_addUnselectCb",(t=>this._addUnselectCb(t))),this.emitter.emit("create",this),this._olView=this.map.getView(),this._isLoaded=!0,this._addMapListeners(),this._addViewListeners()}destroy(){this.map&&this.map.dispose()}getContainer(){if(this.options.target){let t;return"string"==typeof this.options.target?t=document.getElementById(this.options.target):this.options.target instanceof HTMLElement&&(t=this.options.target),t}}getControlContainer(){if(this._panelControl)return this._panelControl.getContainer();throw new Error("The ol-map-adapter ControlPanel has not been initialized yet")}setCenter(t){this._olView&&this._olView.setCenter(n(t))}getCenter(){if(this._olView){const t=this._olView.getCenter();if(t){return i(t,this.displayProjection,this.lonlatProjection)}}}setZoom(t){this._olView&&this._olView.setZoom(t)}getZoom(){if(this._olView)return this._olView.getZoom()}fitBounds(t,e={}){if(this._olView){const{padding:o,maxZoom:i,offset:n}=e,r=this.getZoom(),a=s(t,this.lonlatProjection,this.displayProjection),l={};i&&(l.maxZoom=i),o&&(l.padding=[o,o]),n&&(l.padding=n),this._olView.fit(a,l),this._emitMoveEndEvents({zoom:r})}}getBounds(){if(!this._olView)return;const t=this._olView.calculateExtent();return s(t,this.displayProjection,this.lonlatProjection)}setRotation(t){this._olView&&this._olView.setRotation(t)}setView(t,e){if(this.map)if(Array.isArray(t)){this._setView({zoom:e,center:n(t)})}else{const{bounds:e}=t,o=this.getViewOptions(t);Object.values(o).some(Boolean)&&this._setView(o),e&&this.fitBounds(e)}}removeLayer(t){this.map&&this.map.removeLayer(t)}showLayer(t){if(this.map){const e=this.map.getLayers();for(const o of e.getArray())if(o===t)return void("production"!==process.env.NODE_ENV&&console.warn("DEV: OL layer already added"));this.map.addLayer(t)}}hideLayer(t){this.map&&this.map.removeLayer(t)}setLayerOpacity(t,e){t.setOpacity&&t.setOpacity(Number(e))}setLayerOrder(t,e){t&&t.setZIndex&&t.setZIndex(e)}createControl(t,e){return function(t,e={},o){return new(function(i){function s(){const s=document.createElement("div");s.className=(e.addClass?e.addClass+" ":"")+"ol-unselectable"+(e.bar?" webmap-ctrl-group":"")+(e.margin?" ol-control-margin":"");const n=t.onAdd(o);n&&s.appendChild(n),i.call(this,{element:s})}return i&&(s.__proto__=i),(s.prototype=Object.create(I&&I.prototype)).constructor=s,s.prototype.handleRotateNorth=function(){this.getMap().getView().setRotation(0)},s}(I))}(t,e,this)}createButtonControl(t){return function(t){return new(function(e){function o(){const o=document.createElement("button");o.className="custom-button-control","string"==typeof t.html?o.innerHTML=t.html:t.html&&o.appendChild(t.html),"string"==typeof t.title&&(o.title=t.title);const i=document.createElement("div");i.className=(t.addClass?t.addClass+" ":"")+"ol-unselectable webmap-ctrl-group",i.appendChild(o),e.call(this,{element:i}),o.addEventListener("click",(()=>t.onClick()),!1)}return e&&(o.__proto__=e),(o.prototype=Object.create(I&&I.prototype)).constructor=o,o.prototype.handleRotateNorth=function(){this.getMap().getView().setRotation(0)},o}(I))}(t)}addControl(t,e){if(this._panelControl)return this._panelControl.addControl(t,e),t}removeControl(t){this._panelControl&&this._panelControl.removeControl(t)}onMapClick(t){const e=W(t);this.emitter.emit("preclick",e);this._callEachFeatureAtPixel(t,"click")||this._mapClickEvents.forEach((e=>{e(t)})),this.emitter.emit("click",e)}getViewOptions(t){const{zoom:e,center:o,maxBounds:i,minZoom:r,maxZoom:a}=t,l={zoom:e,minZoom:r,maxZoom:a,projection:this.displayProjection};if(o&&(l.center=n(o)),i){const t=s(i,this.lonlatProjection,this.displayProjection);l.extent=t}return l}_callEachFeatureAtPixel(t,e){if(t&&t.pixel&&this._forEachFeatureAtPixel.length&&this.map){const o=this._forEachFeatureAtPixel.sort(((t,e)=>e[0]-t[0]));for(const i of o){if(i[1](t.pixel,t,e))return!0}}return!1}_emitMoveEndEvents(t){if(this._isLoaded){const e=this.getZoom();t.zoom!==e&&this.emitter.emit("zoomend")}}_addMapListeners(){const t=this.map;if(t){const e=t.getViewport();t.on("click",(t=>{this.onMapClick(t)})),t.on("pointermove",(t=>{this.emitter.emit("mousemove",W(t)),this._callEachFeatureAtPixel(t,"hover")}));const o=e=>{const o=[e.x,e.y];return W({pixel:o,coordinate:t.getCoordinateFromPixel(o),...e})};e.addEventListener("mouseout",(t=>{this.emitter.emit("mouseout",o(t))}),!1),e.addEventListener("mouseover",(t=>{this.emitter.emit("mouseover",o(t))}),!1);const i=this.getCenter(),s=this.getZoom(),n=["movestart","moveend"];for(const r of n)this._positionMem[r]={center:i,zoom:s},t.on(r,(()=>{this._emitPositionChangeEvent(r)}))}}_addViewListeners(){this._olView&&(this._olView.on("change:resolution",(()=>{this.emitter.emit("zoom",this)})),this._olView.on("change:center",(()=>{this.emitter.emit("move",this)})))}_setView(t){const{center:e,zoom:i,extent:s,minZoom:n,maxZoom:r}=t,a=this.map;if(!a)return;const l=a.getView();if(void 0!==s){l.dispose();const e=new o(t);this._olView=e,this._addViewListeners(),a.setView(e)}else e&&l.setCenter(e),void 0!==i&&l.setZoom(i),void 0!==n&&l.setMinZoom(n),void 0!==r&&l.setMaxZoom(r)}_addUnselectCb(t){for(const e of this._unselectCb)e();this._unselectCb.length=0,this._unselectCb.push(t)}_emitPositionChangeEvent(t){const e=this._positionMem[t];let o,i;e&&(o=e.center,i=e.zoom);const s=this.getCenter(),n=this.getZoom();if(i!==n){this.emitter.emit("movestart"===t?"zoomstart":"zoomend",this)}if(o&&s){const[e,i]=s,[n,r]=o;e===n&&i===r||this.emitter.emit(t,this)}else o!==s&&this.emitter.emit(t,this);this._positionMem[t]={center:s,zoom:n}}}ot.layerAdapters={IMAGE:class extends N{constructor(t,e){super(t,e),this.map=t,this.options=e}addLayer(t){if(Object.assign(this.options,t),t.url){const e=void 0!==t.ratio?t.ratio:1,o={url:t.url,params:{...t.params},projection:void 0},i=t.updateWmsParams;o.imageLoadFunction=(e,o)=>{const s=o.split("?")[0],n=o.split("?")[1],{resource:r,BBOX:a,WIDTH:l,HEIGHT:c,...p}=z(n),h={resource:r,bbox:a,width:l,height:c,...p},u=G(i?i(h):p),m=t.headers,d=s+"?"+u;m?H(e,d,m):e.getImage().src=d};let s=u,n=d;if(e>1){o.ratio=e,o.serverType="mapserver";class t extends m{renderFrame(t,o){return t.pixelRatio=e,super.renderFrame(t,o)}}class i extends u{createRenderer(){return new t(this)}}s=i;class r extends d{getImageInternal(t,o,i,s){return super.getImageInternal(t,o,e,s)}}n=r}const r=new s({source:new n(o),opacity:t.opacity,...D(this.map,t),...t.nativeOptions});return this.layer=r,r}}},TILE:class extends N{constructor(t,e){super(t,e),this.map=t,this.options=e}addLayer(t){Object.assign(this.options,t);const e=function(t,e){const o=[],i="string"==typeof e?e.split(""):e;return(null==i?void 0:i.length)?i.forEach((e=>{o.push(t.replace(/{s}/,e))})):o.push(t),o}(t.url,t.subdomains),o={attributions:t.attribution?[t.attribution]:[],urls:e};t.crossOrigin&&(o.crossOrigin=t.crossOrigin);const i=new h(o),s=t.headers;s&&i.setTileLoadFunction(((t,e)=>{H(t,e,s)}));return new r({source:i,opacity:t.opacity,...D(this.map,t),...t.nativeOptions})}},WMS:class extends N{constructor(t,e){super(t,e),this.map=t,this.options=e}addLayer(t){Object.assign(this.options,t);const e={url:t.url,params:{LAYERS:t.layers,VERSION:t.version},projection:void 0},o=t.updateWmsParams;o&&(e.tileLoadFunction=(e,i)=>{const s=i.split("?")[0],n=i.split("?")[1],{resource:r,BBOX:a,WIDTH:l,HEIGHT:c}=z(n),p=G(o({resource:r,bbox:a,width:l,height:c})),h=t.headers,u=s+"?"+p;h?H(e,u,h):e.getImage().src=u});const i=new a(e),s=new r({source:i,opacity:t.opacity,...D(this.map,t),...t.nativeOptions});return this.layer=s,s}},OSM:class extends N{constructor(t,e){super(t,e),this.map=t,this.options=e,this.name="OpenStreetMap"}addLayer(t){Object.assign(this.options,t),this.options.name=this.name;return new r({source:new c({attributions:[p]}),...t.nativeOptions})}},GEOJSON:class extends N{constructor(t,e){var o;super(t,e),this.map=t,this.options=e,this.selected=!1,this.displayProjection="EPSG:3857",this.lonlatProjection="EPSG:4326",this.vectorSource=new g,this._features=[],this._selectedFeatures=[],this._openedPopup=[],this._forEachFeatureAtPixel=[],this._mapClickEvents=[],this._styleCache={},this._labelVisibility=!0,this._labelVisibility=null!==(o=e.labelVisibility)&&void 0!==o?o:this._labelVisibility,this.displayProjection=t.getView().getProjection().getCode()}get addUnselectCb(){return this.map.get("_addUnselectCb")}get mapClickEvents(){return this.map.get("_mapClickEvents")}get forEachFeatureAtPixel(){return this.map.get("_forEachFeatureAtPixel")}addLayer(t){var e;Object.assign(this.options,t),this.paint=t.paint,this.selectedPaint=t.selectedPaint;const o=t.data;o&&this.addData(o),this.layer=new y({source:this.vectorSource,style:e=>this._getFeatureStyle(e,t.paint||{},t.type),...D(this.map,t),...t.nativeOptions});return(null===(e=t.interactive)||void 0===e||e)&&this._addEventListener(),this.layer}beforeRemove(){const t=this.forEachFeatureAtPixel;for(let o=t.length;o--;){const e=t[o][1];-1!==t.findIndex((t=>t[1]===e))&&t.splice(o,1)}this._forEachFeatureAtPixel.length=0;const e=this.mapClickEvents;for(let o=e.length;o--;){-1!==e.indexOf(e[o])&&e.splice(o,1)}this._mapClickEvents.length=0,this._removeAllPopup()}clearLayer(t){if(this.unselect(),t){const e=this.vectorSource.getFeatures().values();let o;for(;!(o=e.next()).done;){t(B(o.value))&&this.vectorSource.removeFeature(o.value)}}else this.vectorSource.clear()}setData(t){this.clearLayer(),this.addData(t)}addData(t){const e=this.options.srs,o="EPSG:"+(null!=e?e:"4326"),i=(new l).readFeatures(t,{dataProjection:o,featureProjection:this.displayProjection});if(this._features=this._features.concat(i),this._filterFun)this.filter(this._filterFun);else if(this.vectorSource.addFeatures(i),this.options.popup)for(const s of this._features)this._openPopup({feature:s,type:"api",options:this.options.popupOptions})}select(t){if(this.unselect(),"function"==typeof t){const e=this._features.filter((e=>t(this._createLayerDefOpts(B(e)))));for(const t of e)this._selectFeature(t)}else this.selected||(this.selected=!0,this.selectedPaint&&this._setPaintEachLayer(this.selectedPaint))}unselect(t){let e=this._selectedFeatures;"function"==typeof t?e=this._selectedFeatures.filter((e=>t(this._createLayerDefOpts(B(e))))):this.selected&&(this.selected=!1);for(const o of e)this._unselectFeature(o);this._removeAllPopup()}getLayers(){return this._features.map((t=>this._createLayerDefOpts(B(t))))}getSelected(){return this._selectedFeatures.map((t=>this._createLayerDefOpts(B(t))))}filter(t){this._filterFun=t;const e=this._features,o=t?e.filter((e=>t(this._createLayerDefOpts(B(e))))):e;this.vectorSource.clear();const i=o.length;for(let s=0;s<i;s++)this.vectorSource.addFeature(o[s]);return o.map((t=>this._createLayerDefOpts(B(t))))}cleanFilter(){this.filter()}getExtent(){return this.getBounds()}getBounds(){if(this.layer){const t=this.layer.getSource();if(t){const e=t.getExtent();return s(e,this.displayProjection,this.lonlatProjection)}}}setPaint(t){t&&(this.paint=t,this._setPaintEachLayer(this.paint))}setSelectedPaint(t){t&&(this.selectedPaint=t,this._setPaintEachLayer(this.selectedPaint))}updatePaint(t){this.paint={...this.paint,...t},this._setPaintEachLayer(this.paint)}updateSelectedPaint(t){this.selectedPaint={...this.selectedPaint,...t},this._setPaintEachLayer(this.selectedPaint)}isLabelVisible(){return this._labelVisibility}hideLabel(){this._toggleLabel(!1)}showLabel(){this._toggleLabel(!0)}_toggleLabel(t){this._labelVisibility=t,this.updatePaint({})}_createLayerDefOpts(t){return{target:this,feature:t,...Y({feature:t,dataProjection:this.lonlatProjection,featureProjection:this.displayProjection})}}_getFeatureStyle(t,e,o="polygon"){const i=[],s=t.getId(),n=void 0!==s&&this._styleCache[s];if(n)return n;const r=Q(t,e);if(r&&i.push(r),this._labelVisibility){const{labelField:e,label:s}=this.options;let n="";if("string"==typeof e?n=t.get(e):s&&(n=s(this._createLayerDefOpts(B(t)))),n=String(n),n){const t=v(n)?n:"";if(t){const e=function(t,e){let o={font:"12px Calibri,sans-serif",overflow:!0,fill:new b({color:"#000"}),stroke:new E({color:"#fff",width:3})};return"point"===t&&(o={...o,placement:"point",textBaseline:"bottom",offsetY:20}),new L({text:new F(o)})}(o);e.getText().setText(t),i.push(e)}}}return void 0!==s&&(this._styleCache[s]=i),i}_setPaintEachLayer(t){if(this._styleCache={},this.layer){const e=this.layer.getSource();if(e){const o=e.getFeatures();for(const e of o){const o=this._getFeatureStyle(e,t,this.options.type);o&&e.setStyle(o)}}}}_addEventListener(){var t;const e=this.forEachFeatureAtPixel,o=[this.options.order||0,(t,e,o)=>this._onFeatureAtPixel(t,e,o)];this._forEachFeatureAtPixel.push(o),e.push(o);(null===(t=this.options.unselectOnClick)||void 0===t||t)&&(this._mapClickEvents.push((()=>this.unselect())),this.mapClickEvents.push((()=>this.unselect())))}_onFeatureAtPixel(t,e,o){const i=t&&this.map.getFeaturesAtPixel(t,{layerFilter:t=>t===this.layer})[0],s=(t=>({layer:this,event:W(t),source:t}))(e);if(i){const t={...s,...this._createLayerDefOpts(B(i))};let e=-1!==this._selectedFeatures.indexOf(i);return this.options.selectable&&("hover"===o&&this.options.selectOnHover||"click"===o)&&(e?this.options&&this.options.unselectOnSecondClick&&(this._unselectFeature(i),e=!1):(this._selectFeature(i,t.event.lngLat),e=!0)),"click"===o&&this.options.onClick&&this.options.onClick({selected:e,...t}),"hover"===o&&(this._mouseOver=!0,this.options.onMouseOver&&this.options.onMouseOver(t)),!0}return"hover"===o&&this._mouseOver&&(this._mouseOver=!1,this.options.onMouseOut&&this.options.onMouseOut(s),this.options.selectOnHover&&this.unselect()),!1}_selectFeature(t,e){const{multiselect:o,selectedPaint:i,popupOptions:s,popupOnSelect:n,onSelect:r}=this.options||{},a=e?"click":"api";if(!o){this.addUnselectCb((()=>this._unselectFeature(t)));for(const t of this._selectedFeatures)this._unselectFeature(t)}if(this._selectedFeatures.push(t),this.selected=!0,i){const e=Q(t,i);e&&t.setStyle(e)}if(n&&this._openPopup({coordinates:e,feature:t,options:s,type:"click"}),r){r({layer:this,features:[],type:a,...Y({feature:B(t),dataProjection:this.lonlatProjection,featureProjection:this.displayProjection})})}}_unselectFeature(t){const e=this._selectedFeatures.indexOf(t);if(-1!==e){this._selectedFeatures.splice(e,1);const o=this._openedPopup.find((e=>e[0]===t));o&&this._removePopup(o[1])}if(this.selected=this._selectedFeatures.length>0,this.options&&this.options.paint){const e=Q(t,this.options.paint);e&&t.setStyle(e)}}async _openPopup({coordinates:t,feature:e,options:o={},type:s}){const n=this.map;if(!n)return;let r;const a=[],l=()=>{r&&this._removePopup(r)},{createPopupContent:c,popupContent:p}=o,h=B(e),u=c?await c({close:l,onClose:t=>{a.push(t)},type:s,...this._createLayerDefOpts(h)}):p;if(t=t||h&&function(t){return"Polygon"===t.geometry.type?C(t.geometry.coordinates):"Point"===t.geometry.type?t.geometry.coordinates:(e=P(t)).reduce(((t,o)=>[t[0]+o[0]/e.length,t[1]+o[1]/e.length]),[0,0]);var e}(h),u&&t){const s="string"==typeof u?function(t){const e=document.createElement("div");return e.innerHTML=t,e}(u):u,c=this._createPopupElement({...o,popupContent:s,close:l});r=new f({element:c}),r.setPosition(i(t,this.lonlatProjection,this.displayProjection)),n.addOverlay(r),this._openedPopup.push([e,r,a])}}_createPopupElement({closeButton:t,popupContent:e,maxWidth:o,minWidth:i,close:s}){t=null!=t?t:!this.options.selectOnHover;const n=_("div","ol-popup");if(o&&(n.style.maxWidth=o+"px"),i&&(n.style.minWidth=i+"px"),t){const t=_("a","ol-popup-closer",n);t.setAttribute("href","#"),t.addEventListener("click",s)}return _("div","popup-content",n).appendChild(e),n}_removeAllPopup(){const t=[...this._openedPopup];this._openedPopup=[];for(const e of t)this._removePopup(e[1])}_removePopup(t){var e,o;const i=this.map;if(i){i.removeOverlay(t);const s=this._openedPopup.findIndex((e=>e[1]===t));if(-1!==s){const[t,,i]=this._openedPopup[s],n=null===(o=null===(e=this.options.popupOptions)||void 0===e?void 0:e.unselectOnClose)||void 0===o||o;for(const e of i)e(this._createLayerDefOpts(B(t)));i.length=0,n&&this._unselectFeature(t),this._openedPopup.splice(s,1)}}}}},ot.controlAdapters={ZOOM:class extends M{constructor(...t){super(...t),this.element.classList.remove("ol-control"),this.element.classList.add("webmap-ctrl-group")}},ATTRIBUTION:class extends k{constructor(t){super({...$,...t})}}};var it=ot;export{it as default}; | ||
| import{EventEmitter as t}from"events";import e from"ol/Map";import o from"ol/View";import{transform as i,transformExtent as s,fromLonLat as n}from"ol/proj";import r from"ol/control/Attribution";import a from"@nextgis/control-container";import l from"ol/control/Control";import c from"ol/control/Zoom";import{create as p}from"@nextgis/dom";import{getCoordinates as h,defined as u}from"@nextgis/utils";import m from"ol/Overlay";import d from"ol/format/GeoJSON";import f from"ol/layer/Vector";import y from"ol/source/Vector";import{getCenter as g}from"ol/extent";import _ from"polylabel";import{isPaintCallback as P,isPaint as v}from"@nextgis/paint";import{asArray as C}from"ol/color";import{Fill as w,Stroke as x,Style as O,Text as b}from"ol/style";import E from"ol/style/Circle";import L from"ol/style/Icon";import F from"ol/style/IconAnchorUnits";import j from"ol/layer/Image";import S from"ol/renderer/canvas/ImageLayer";import V from"ol/source/ImageWMS";import A from"ol/layer/Tile";import M,{ATTRIBUTION as k}from"ol/source/OSM";import I from"ol/source/XYZ";import Z from"ol/source/TileWMS";const R={collapsible:!1};const T={collapsible:!1};class D extends l{constructor(t){const e=new a,o=e.getContainer();super({...T,...t,element:o}),this.panelContainer=e}async addControl(t,e){const o=this.getMap();if(o){const i=this.panelContainer.newPositionContainer(e);if(i){const e=await t,s=e.element;s&&s.classList.add("webmap-ctrl"),e.setTarget(i),o.addControl(e)}}}removeControl(t){const e=this.getMap();e&&e.removeControl(t)}getContainer(){return this.panelContainer.getContainer()}}function U(t,e="EPSG:3857",o="EPSG:4326"){const[s,n]=i(t.coordinate,e,o);return{latLng:{lat:n,lng:s},lngLat:[s,n],pixel:{left:t.pixel[0],top:t.pixel[1]},source:t}}function B(t){const e=function({feature:t,dataProjection:e,featureProjection:o}){const i=(new d).readFeatures({type:"FeatureCollection",features:Array.isArray(t)?t:[t]},{dataProjection:e,featureProjection:o}),s=new y;return s.addFeatures(i),s}(t),o=e.getExtent(),i=s(o,t.featureProjection,t.dataProjection);return e.dispose(),i}function z(t){return{getBounds:()=>B(t),getCenter:()=>function(t){const e=B(t);return g(e)}(t)}}const G=90.71446714322,H=39.37;function N(t,e){const o={minZoom:e.minZoom,maxZoom:e.maxZoom};return e.maxScale&&(o.minResolution=W(t,e.maxScale)),e.minScale&&(o.maxResolution=W(t,e.minScale)),o}function W(t,e){if(e)return function(t,e){return t/(e*H*G)}(e,t.getView().getProjection().getMetersPerUnit()||1)}function X(t){return(new d).writeFeatureObject(t,{dataProjection:"EPSG:4326",featureProjection:"EPSG:3857"})}function Y(t){const e=decodeURIComponent,o=t.split("&"),i={};let s,n;for(let r,a=0,l=o.length;a<l;++a)if(r=o[a],r.length){const t=r.indexOf("=");t<0?(s=e(r),n=""):(s=e(r.slice(0,t)),n=e(r.slice(t+1))),"string"==typeof i[s]&&(i[s]=[i[s]]),Array.isArray(i[s])?i[s].push(n):i[s]=n}return i}function q(t,e){const o=[];let i;for(i in t){const s=e?e+"["+i+"]":i,n=t[i];o.push(null!==n&&"object"==typeof n?q(n,s):encodeURIComponent(s)+"="+encodeURIComponent(n))}return o.join("&")}const J={Point:"point",MultiPoint:"point",LineString:"line",MultiLineString:"line",Polygon:"polygon",MultiPolygon:"polygon",Circle:"point"},K={polygon:"path",line:"path",point:"circle"};function Q(t,e){const o=C(t).slice();return o[3]=void 0!==e?e:1,o}function $(t,e={}){if(P(e)){return $(t,e(X(t)))}if(v(e)){const o=t.getGeometry(),i=o&&o.getType()||"Point",s={};if(!e.type){const t=J[i],o="polygon"===t||"line"===t?"path":"html"in e||"className"in e?"icon":K[t];o&&(e.type=o)}if("path"===e.type||"circle"===e.type){const{radius:t,fill:o,fillColor:n,fillOpacity:r,strokeColor:a,stroke:l,strokeOpacity:c}={...e};o&&n&&"string"==typeof n&&"number"==typeof r&&(s.fill=new w({color:Q(n,r)})),a&&"string"==typeof a&&"number"==typeof c&&(l||-1!==["MultiLineString","LineString"].indexOf(i))&&(s.stroke=new x({width:e.weight,color:Q(a,c)})),"circle"===e.type&&"number"==typeof t&&(s.image=new E({radius:t,...s}))}else if("icon"===e.type){const t=e.html;if(t){const o={src:"data:image/svg+xml,"+encodeURIComponent(t),anchorXUnits:F.PIXELS,anchorYUnits:F.PIXELS,anchor:e.iconAnchor,imgSize:e.iconSize,rotation:e.rotate};s.image=new L(o)}}return new O(s)}}class tt{constructor(t,e){this.map=t,this.options=e}setOpacity(t){this.options.opacity=Number(t),this.layer&&this.layer.setOpacity&&this.layer.setOpacity(this.options.opacity)}}function et(t,e,o){const i=new XMLHttpRequest;i.open("GET",e),i.responseType="arraybuffer";for(const s in o)i.setRequestHeader(s,o[s]);i.onload=function(){const e=new Uint8Array(this.response),o=new Blob([e],{type:"image/png"}),i=(window.URL||window.webkitURL).createObjectURL(o);t.getImage().src=i},i.send()}class ot{constructor(){this.options={target:"map"},this.layerAdapters=ot.layerAdapters,this.controlAdapters=ot.controlAdapters,this.emitter=new t,this.displayProjection="EPSG:3857",this.lonlatProjection="EPSG:4326",this._mapClickEvents=[],this._forEachFeatureAtPixel=[],this._unselectCb=[],this._isLoaded=!1,this._positionMem={}}create(t){this.options={...t};const i=this.getViewOptions(this.options),s={controls:[],view:new o(i),layers:[]};t.mapAdapterOptions&&Object.assign(s,t.mapAdapterOptions);const n={...s,target:this.options.target||"map"};this.map=this.options.map||new e(n),this._panelControl=new D,this.map.addControl(this._panelControl),this.map.set("_mapClickEvents",this._mapClickEvents),this.map.set("_forEachFeatureAtPixel",this._forEachFeatureAtPixel),this.map.set("_addUnselectCb",(t=>this._addUnselectCb(t))),this.emitter.emit("create",this),this._olView=this.map.getView(),this._isLoaded=!0,this._addMapListeners(),this._addViewListeners()}destroy(){this.map&&this.map.dispose()}getContainer(){if(this.options.target){let t;return"string"==typeof this.options.target?t=document.getElementById(this.options.target):this.options.target instanceof HTMLElement&&(t=this.options.target),t}}getControlContainer(){if(this._panelControl)return this._panelControl.getContainer();throw new Error("The ol-map-adapter ControlPanel has not been initialized yet")}setCenter(t){this._olView&&this._olView.setCenter(n(t))}getCenter(){if(this._olView){const t=this._olView.getCenter();if(t){return i(t,this.displayProjection,this.lonlatProjection)}}}setZoom(t){this._olView&&this._olView.setZoom(t)}getZoom(){if(this._olView)return this._olView.getZoom()}fitBounds(t,e={}){if(this._olView){const{padding:o,maxZoom:i,offset:n}=e,r=this.getZoom(),a=s(t,this.lonlatProjection,this.displayProjection),l={};i&&(l.maxZoom=i),o&&(l.padding=[o,o]),n&&(l.padding=n),this._olView.fit(a,l),this._emitMoveEndEvents({zoom:r})}}getBounds(){if(!this._olView)return;const t=this._olView.calculateExtent();return s(t,this.displayProjection,this.lonlatProjection)}setRotation(t){this._olView&&this._olView.setRotation(t)}setView(t,e){if(this.map)if(Array.isArray(t)){this._setView({zoom:e,center:n(t)})}else{const{bounds:e}=t,o=this.getViewOptions(t);Object.values(o).some(Boolean)&&this._setView(o),e&&this.fitBounds(e)}}removeLayer(t){this.map&&this.map.removeLayer(t)}showLayer(t){if(this.map){const e=this.map.getLayers();for(const o of e.getArray())if(o===t)return void("production"!==process.env.NODE_ENV&&console.warn("DEV: OL layer already added"));this.map.addLayer(t)}}hideLayer(t){this.map&&this.map.removeLayer(t)}setLayerOpacity(t,e){t.setOpacity&&t.setOpacity(Number(e))}setLayerOrder(t,e){t&&t.setZIndex&&t.setZIndex(e)}createControl(t,e){return function(t,e={},o){return new(function(i){function s(){const s=document.createElement("div");s.className=(e.addClass?e.addClass+" ":"")+"ol-unselectable"+(e.bar?" webmap-ctrl-group":"")+(e.margin?" ol-control-margin":"");const n=t.onAdd(o);n&&s.appendChild(n),i.call(this,{element:s})}return i&&(s.__proto__=i),(s.prototype=Object.create(l&&l.prototype)).constructor=s,s.prototype.handleRotateNorth=function(){this.getMap().getView().setRotation(0)},s}(l))}(t,e,this)}createButtonControl(t){return function(t){return new(function(e){function o(){const o=document.createElement("button");o.className="custom-button-control","string"==typeof t.html?o.innerHTML=t.html:t.html&&o.appendChild(t.html),"string"==typeof t.title&&(o.title=t.title);const i=document.createElement("div");i.className=(t.addClass?t.addClass+" ":"")+"ol-unselectable webmap-ctrl-group",i.appendChild(o),e.call(this,{element:i}),o.addEventListener("click",(()=>t.onClick()),!1)}return e&&(o.__proto__=e),(o.prototype=Object.create(l&&l.prototype)).constructor=o,o.prototype.handleRotateNorth=function(){this.getMap().getView().setRotation(0)},o}(l))}(t)}addControl(t,e){if(this._panelControl)return this._panelControl.addControl(t,e),t}removeControl(t){this._panelControl&&this._panelControl.removeControl(t)}onMapClick(t){const e=U(t);this.emitter.emit("preclick",e);this._callEachFeatureAtPixel(t,"click")||this._mapClickEvents.forEach((e=>{e(t)})),this.emitter.emit("click",e)}getViewOptions(t){const{zoom:e,center:o,maxBounds:i,minZoom:r,maxZoom:a}=t,l={zoom:e,minZoom:r,maxZoom:a,projection:this.displayProjection};if(o&&(l.center=n(o)),i){const t=s(i,this.lonlatProjection,this.displayProjection);l.extent=t}return l}_callEachFeatureAtPixel(t,e){if(t&&t.pixel&&this._forEachFeatureAtPixel.length&&this.map){const o=this._forEachFeatureAtPixel.sort(((t,e)=>e[0]-t[0]));for(const i of o){if(i[1](t.pixel,t,e))return!0}}return!1}_emitMoveEndEvents(t){if(this._isLoaded){const e=this.getZoom();t.zoom!==e&&this.emitter.emit("zoomend")}}_addMapListeners(){const t=this.map;if(t){const e=t.getViewport();t.on("click",(t=>{this.onMapClick(t)})),t.on("pointermove",(t=>{this.emitter.emit("mousemove",U(t)),this._callEachFeatureAtPixel(t,"hover")}));const o=e=>{const o=[e.x,e.y];return U({pixel:o,coordinate:t.getCoordinateFromPixel(o),...e})};e.addEventListener("mouseout",(t=>{this.emitter.emit("mouseout",o(t))}),!1),e.addEventListener("mouseover",(t=>{this.emitter.emit("mouseover",o(t))}),!1);const i=this.getCenter(),s=this.getZoom(),n=["movestart","moveend"];for(const r of n)this._positionMem[r]={center:i,zoom:s},t.on(r,(()=>{this._emitPositionChangeEvent(r)}))}}_addViewListeners(){this._olView&&(this._olView.on("change:resolution",(()=>{this.emitter.emit("zoom",this)})),this._olView.on("change:center",(()=>{this.emitter.emit("move",this)})))}_setView(t){const{center:e,zoom:i,extent:s,minZoom:n,maxZoom:r}=t,a=this.map;if(!a)return;const l=a.getView();if(void 0!==s){l.dispose();const e=new o(t);this._olView=e,this._addViewListeners(),a.setView(e)}else e&&l.setCenter(e),void 0!==i&&l.setZoom(i),void 0!==n&&l.setMinZoom(n),void 0!==r&&l.setMaxZoom(r)}_addUnselectCb(t){for(const e of this._unselectCb)e();this._unselectCb.length=0,this._unselectCb.push(t)}_emitPositionChangeEvent(t){const e=this._positionMem[t];let o,i;e&&(o=e.center,i=e.zoom);const s=this.getCenter(),n=this.getZoom();if(i!==n){this.emitter.emit("movestart"===t?"zoomstart":"zoomend",this)}if(o&&s){const[e,i]=s,[n,r]=o;e===n&&i===r||this.emitter.emit(t,this)}else o!==s&&this.emitter.emit(t,this);this._positionMem[t]={center:s,zoom:n}}}ot.layerAdapters={IMAGE:class extends tt{constructor(t,e){super(t,e),this.map=t,this.options=e}addLayer(t){if(Object.assign(this.options,t),t.url){const e=void 0!==t.ratio?t.ratio:1,o={url:t.url,params:{...t.params},projection:void 0},i=t.updateWmsParams;o.imageLoadFunction=(e,o)=>{const s=o.split("?")[0],n=o.split("?")[1],{resource:r,BBOX:a,WIDTH:l,HEIGHT:c,...p}=Y(n),h={resource:r,bbox:a,width:l,height:c,...p},u=q(i?i(h):p),m=t.headers,d=s+"?"+u;m?et(e,d,m):e.getImage().src=d};let s=j,n=V;if(e>1){o.ratio=e,o.serverType="mapserver";class t extends S{renderFrame(t,o){return t.pixelRatio=e,super.renderFrame(t,o)}}class i extends j{createRenderer(){return new t(this)}}s=i;class r extends V{getImageInternal(t,o,i,s){return super.getImageInternal(t,o,e,s)}}n=r}const r=new s({source:new n(o),opacity:t.opacity,...N(this.map,t),...t.nativeOptions});return this.layer=r,r}}},TILE:class extends tt{constructor(t,e){super(t,e),this.map=t,this.options=e}addLayer(t){Object.assign(this.options,t);const e=function(t,e){const o=[],i="string"==typeof e?e.split(""):e;return(null==i?void 0:i.length)?i.forEach((e=>{o.push(t.replace(/{s}/,e))})):o.push(t),o}(t.url,t.subdomains),o={attributions:t.attribution?[t.attribution]:[],urls:e};t.crossOrigin&&(o.crossOrigin=t.crossOrigin);const i=new I(o),s=t.headers;s&&i.setTileLoadFunction(((t,e)=>{et(t,e,s)}));return new A({source:i,opacity:t.opacity,...N(this.map,t),...t.nativeOptions})}},WMS:class extends tt{constructor(t,e){super(t,e),this.map=t,this.options=e}addLayer(t){Object.assign(this.options,t);const e={url:t.url,params:{LAYERS:t.layers,VERSION:t.version},projection:void 0},o=t.updateWmsParams;o&&(e.tileLoadFunction=(e,i)=>{const s=i.split("?")[0],n=i.split("?")[1],{resource:r,BBOX:a,WIDTH:l,HEIGHT:c}=Y(n),p=q(o({resource:r,bbox:a,width:l,height:c})),h=t.headers,u=s+"?"+p;h?et(e,u,h):e.getImage().src=u});const i=new Z(e),s=new A({source:i,opacity:t.opacity,...N(this.map,t),...t.nativeOptions});return this.layer=s,s}},OSM:class extends tt{constructor(t,e){super(t,e),this.map=t,this.options=e,this.name="OpenStreetMap"}addLayer(t){Object.assign(this.options,t),this.options.name=this.name;return new A({source:new M({attributions:[k]}),...t.nativeOptions})}},GEOJSON:class extends tt{constructor(t,e){var o;super(t,e),this.map=t,this.options=e,this.selected=!1,this.displayProjection="EPSG:3857",this.lonlatProjection="EPSG:4326",this.vectorSource=new y,this._features=[],this._selectedFeatures=[],this._openedPopup=[],this._forEachFeatureAtPixel=[],this._mapClickEvents=[],this._styleCache={},this._labelVisibility=!0,this._labelVisibility=null!==(o=e.labelVisibility)&&void 0!==o?o:this._labelVisibility,this.displayProjection=t.getView().getProjection().getCode()}get addUnselectCb(){return this.map.get("_addUnselectCb")}get mapClickEvents(){return this.map.get("_mapClickEvents")}get forEachFeatureAtPixel(){return this.map.get("_forEachFeatureAtPixel")}addLayer(t){var e;Object.assign(this.options,t),this.paint=t.paint,this.selectedPaint=t.selectedPaint;const o=t.data;o&&this.addData(o),this.layer=new f({source:this.vectorSource,style:e=>this._getFeatureStyle(e,t.paint||{},t.type),...N(this.map,t),...t.nativeOptions});return(null===(e=t.interactive)||void 0===e||e)&&this._addEventListener(),this.layer}beforeRemove(){const t=this.forEachFeatureAtPixel;for(let o=t.length;o--;){const e=t[o][1];-1!==t.findIndex((t=>t[1]===e))&&t.splice(o,1)}this._forEachFeatureAtPixel.length=0;const e=this.mapClickEvents;for(let o=e.length;o--;){-1!==e.indexOf(e[o])&&e.splice(o,1)}this._mapClickEvents.length=0,this._removeAllPopup()}clearLayer(t){if(this.unselect(),t){const e=this.vectorSource.getFeatures().values();let o;for(;!(o=e.next()).done;){t(X(o.value))&&this.vectorSource.removeFeature(o.value)}}else this.vectorSource.clear()}setData(t){this.clearLayer(),this.addData(t)}addData(t){const e=this.options.srs,o="EPSG:"+(null!=e?e:"4326"),i=(new d).readFeatures(t,{dataProjection:o,featureProjection:this.displayProjection});if(this._features=this._features.concat(i),this._filterFun)this.filter(this._filterFun);else if(this.vectorSource.addFeatures(i),this.options.popup)for(const s of this._features)this._openPopup({feature:s,type:"api",options:this.options.popupOptions})}select(t){if(this.unselect(),"function"==typeof t){const e=this._features.filter((e=>t(this._createLayerDefOpts(X(e)))));for(const t of e)this._selectFeature(t)}else this.selected||(this.selected=!0,this.selectedPaint&&this._setPaintEachLayer(this.selectedPaint))}unselect(t){let e=this._selectedFeatures;"function"==typeof t?e=this._selectedFeatures.filter((e=>t(this._createLayerDefOpts(X(e))))):this.selected&&(this.selected=!1);for(const o of e)this._unselectFeature(o);this._removeAllPopup()}getLayers(){return this._features.map((t=>this._createLayerDefOpts(X(t))))}getSelected(){return this._selectedFeatures.map((t=>this._createLayerDefOpts(X(t))))}filter(t){this._filterFun=t;const e=this._features,o=t?e.filter((e=>t(this._createLayerDefOpts(X(e))))):e;this.vectorSource.clear();const i=o.length;for(let s=0;s<i;s++)this.vectorSource.addFeature(o[s]);return o.map((t=>this._createLayerDefOpts(X(t))))}cleanFilter(){this.filter()}getExtent(){return this.getBounds()}getBounds(){if(this.layer){const t=this.layer.getSource();if(t){const e=t.getExtent();return s(e,this.displayProjection,this.lonlatProjection)}}}setPaint(t){t&&(this.paint=t,this._setPaintEachLayer(this.paint))}setSelectedPaint(t){t&&(this.selectedPaint=t,this._setPaintEachLayer(this.selectedPaint))}updatePaint(t){this.paint={...this.paint,...t},this._setPaintEachLayer(this.paint)}updateSelectedPaint(t){this.selectedPaint={...this.selectedPaint,...t},this._setPaintEachLayer(this.selectedPaint)}isLabelVisible(){return this._labelVisibility}hideLabel(){this._toggleLabel(!1)}showLabel(){this._toggleLabel(!0)}_toggleLabel(t){this._labelVisibility=t,this.updatePaint({})}_createLayerDefOpts(t){return{target:this,feature:t,...z({feature:t,dataProjection:this.lonlatProjection,featureProjection:this.displayProjection})}}_getFeatureStyle(t,e,o="polygon"){const i=[],s=t.getId(),n=void 0!==s&&this._styleCache[s];if(n)return n;const r=$(t,e);if(r&&i.push(r),this._labelVisibility){const{labelField:e,label:s}=this.options;let n="";if("string"==typeof e?n=t.get(e):s&&(n=s(this._createLayerDefOpts(X(t)))),n=String(n),n){const t=u(n)?n:"";if(t){const e=function(t,e){let o={font:"12px Calibri,sans-serif",overflow:!0,fill:new w({color:"#000"}),stroke:new x({color:"#fff",width:3})};return"point"===t&&(o={...o,placement:"point",textBaseline:"bottom",offsetY:20}),new O({text:new b(o)})}(o);e.getText().setText(t),i.push(e)}}}return void 0!==s&&(this._styleCache[s]=i),i}_setPaintEachLayer(t){if(this._styleCache={},this.layer){const e=this.layer.getSource();if(e){const o=e.getFeatures();for(const e of o){const o=this._getFeatureStyle(e,t,this.options.type);o&&e.setStyle(o)}}}}_addEventListener(){var t;const e=this.forEachFeatureAtPixel,o=[this.options.order||0,(t,e,o)=>this._onFeatureAtPixel(t,e,o)];this._forEachFeatureAtPixel.push(o),e.push(o);(null===(t=this.options.unselectOnClick)||void 0===t||t)&&(this._mapClickEvents.push((()=>this.unselect())),this.mapClickEvents.push((()=>this.unselect())))}_onFeatureAtPixel(t,e,o){const i=t&&this.map.getFeaturesAtPixel(t,{layerFilter:t=>t===this.layer})[0],s=(t=>({layer:this,event:U(t),source:t}))(e);if(i){const t={...s,...this._createLayerDefOpts(X(i))};let e=-1!==this._selectedFeatures.indexOf(i);return this.options.selectable&&("hover"===o&&this.options.selectOnHover||"click"===o)&&(e?this.options&&this.options.unselectOnSecondClick&&(this._unselectFeature(i),e=!1):(this._selectFeature(i,t.event.lngLat),e=!0)),"click"===o&&this.options.onClick&&this.options.onClick({selected:e,...t}),"hover"===o&&(this._mouseOver=!0,this.options.onMouseOver&&this.options.onMouseOver(t)),!0}return"hover"===o&&this._mouseOver&&(this._mouseOver=!1,this.options.onMouseOut&&this.options.onMouseOut(s),this.options.selectOnHover&&this.unselect()),!1}_selectFeature(t,e){const{multiselect:o,selectedPaint:i,popupOptions:s,popupOnSelect:n,onSelect:r}=this.options||{},a=e?"click":"api";if(!o){this.addUnselectCb((()=>this._unselectFeature(t)));for(const t of this._selectedFeatures)this._unselectFeature(t)}if(this._selectedFeatures.push(t),this.selected=!0,i){const e=$(t,i);e&&t.setStyle(e)}if(n&&this._openPopup({coordinates:e,feature:t,options:s,type:"click"}),r){r({layer:this,features:[],type:a,...z({feature:X(t),dataProjection:this.lonlatProjection,featureProjection:this.displayProjection})})}}_unselectFeature(t){const e=this._selectedFeatures.indexOf(t);if(-1!==e){this._selectedFeatures.splice(e,1);const o=this._openedPopup.find((e=>e[0]===t));o&&this._removePopup(o[1])}if(this.selected=this._selectedFeatures.length>0,this.options&&this.options.paint){const e=$(t,this.options.paint);e&&t.setStyle(e)}}async _openPopup({coordinates:t,feature:e,options:o={},type:s}){const n=this.map;if(!n)return;let r;const a=[],l=()=>{r&&this._removePopup(r)},{createPopupContent:c,popupContent:p}=o,u=X(e),d=c?await c({close:l,onClose:t=>{a.push(t)},type:s,...this._createLayerDefOpts(u)}):p;if(t=t||u&&function(t){return"Polygon"===t.geometry.type?_(t.geometry.coordinates):"Point"===t.geometry.type?t.geometry.coordinates:(e=h(t)).reduce(((t,o)=>[t[0]+o[0]/e.length,t[1]+o[1]/e.length]),[0,0]);var e}(u),d&&t){const s="string"==typeof d?function(t){const e=document.createElement("div");return e.innerHTML=t,e}(d):d,c=this._createPopupElement({...o,popupContent:s,close:l});r=new m({element:c}),r.setPosition(i(t,this.lonlatProjection,this.displayProjection)),n.addOverlay(r),this._openedPopup.push([e,r,a])}}_createPopupElement({closeButton:t,popupContent:e,maxWidth:o,minWidth:i,close:s}){t=null!=t?t:!this.options.selectOnHover;const n=p("div","ol-popup");if(o&&(n.style.maxWidth=o+"px"),i&&(n.style.minWidth=i+"px"),t){const t=p("a","ol-popup-closer",n);t.setAttribute("href","#"),t.addEventListener("click",s)}return p("div","popup-content",n).appendChild(e),n}_removeAllPopup(){const t=[...this._openedPopup];this._openedPopup=[];for(const e of t)this._removePopup(e[1])}_removePopup(t){var e,o;const i=this.map;if(i){i.removeOverlay(t);const s=this._openedPopup.findIndex((e=>e[1]===t));if(-1!==s){const[t,,i]=this._openedPopup[s],n=null===(o=null===(e=this.options.popupOptions)||void 0===e?void 0:e.unselectOnClose)||void 0===o||o;for(const e of i)e(this._createLayerDefOpts(X(t)));i.length=0,n&&this._unselectFeature(t),this._openedPopup.splice(s,1)}}}}},ot.controlAdapters={ZOOM:class extends c{constructor(...t){super(...t),this.element.classList.remove("ol-control"),this.element.classList.add("webmap-ctrl-group")}},ATTRIBUTION:class extends r{constructor(t){super({...R,...t})}}};var it=ot;export{it as default}; | ||
| //# sourceMappingURL=ol-map-adapter.esm-bundler.prod.js.map |
| { | ||
| "name": "@nextgis/ol-map-adapter", | ||
| "version": "1.18.21", | ||
| "version": "1.19.0", | ||
| "_priority": 16, | ||
@@ -12,7 +12,7 @@ "description": "", | ||
| "dependencies": { | ||
| "@nextgis/control-container": "^1.18.21", | ||
| "@nextgis/dom": "^1.18.21", | ||
| "@nextgis/paint": "^1.18.21", | ||
| "@nextgis/properties-filter": "^1.18.21", | ||
| "@nextgis/webmap": "^1.18.21", | ||
| "@nextgis/control-container": "^1.19.0", | ||
| "@nextgis/dom": "^1.19.0", | ||
| "@nextgis/paint": "^1.19.0", | ||
| "@nextgis/properties-filter": "^1.19.0", | ||
| "@nextgis/webmap": "^1.19.0", | ||
| "@types/events": "^3.0.0", | ||
@@ -27,3 +27,3 @@ "@types/polylabel": "^1.0.5", | ||
| "devDependencies": { | ||
| "@nextgis/build-tools": "^1.18.21" | ||
| "@nextgis/build-tools": "^1.19.0" | ||
| }, | ||
@@ -69,3 +69,3 @@ "buildOptions": { | ||
| }, | ||
| "gitHead": "0b10e74f557715ec65285bfbcaab322b90605454" | ||
| "gitHead": "d634208dde1cf94e340f2cf1e3254c3c599fec0d" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.01%
14653322
Worsened metrics
- Lines of code
85892
Dependency changes
Updated@nextgis/dom@^1.19.0
Updated@nextgis/paint@^1.19.0
Updated@nextgis/webmap@^1.19.0