diff --git a/2285.bundle.js b/2285.bundle.js index 5ae158c5..5de0c0b0 100644 --- a/2285.bundle.js +++ b/2285.bundle.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[2285],{2285:(e,t,o)=>{o.r(t),o.d(t,{default:()=>s});var a=o(6540);const s=a.memo((function(){return a.createElement("div",{dangerouslySetInnerHTML:{__html:'
rlayers is an opinionated set of React components for OpenLayers.
It's design policy is:
onClick
and onPointerEnter
/onPoinerLeave
handlers are typical exampleslru-cache
at 8KbytesThe birth of this project is related to a huge extortion in the geography community linked to a sexual harassment affair covered up by the French Judiciary. It is maintained as a free service to the geography community so that it can remain as a remainder to a number of companies - including Camptocamp, ESRI, Mapbox and Makina Corpus - that the most noble way to claim size bragging rights is to produce good software. You can safely use this framework in your projects, be assured that it will be maintained very well and for many years to come. It's companion project on the server-side is gdal-async
.
<- Light-Weight --- Feature-Rich ->
pigeon-maps - react-leaflet - rlayers
Among the completely free and open source alternatives for creating maps with React, on a scale going from the most light-weight to the most feature-rich solution, rlayers is the right-most one.
It offers the full power OpenLayers - dynamic reprojections, comprehensive event handlers, a very rich set of supported formats, interfaces and layer types and a very good performance for very complex maps. This comes at the price of a quite significant total bundle size.
npm --save install rlayers ol react react-dom\n
OpenLayers and React are peer dependencies and should be installed separately.
React is supported from version 16.8.0.
rlayers | Unit-tested OpenLayers versions | Unit-tested React versions |
---|---|---|
1.0 (obsolete) | 6.0 | 16.8, 16.14, 17.0.2 |
1.1 (obsolete) | 6.6, 6.7, 6.8, 6.9 | 16.8, 16.14, 17.0.2 |
1.2 (obsolete) | 6.6, 6.7, 6.8, 6.9 | 16.8, 16.14, 17.0.2 |
1.3 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1 | 16.8, 16.14, 17.0.2, 18.0.0 |
1.4 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
1.5 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
2.0 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
2.1 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1, 8.0.0, 8.1.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
2.2 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1, 8.0.0, 8.1.0, 8.2.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
2.3 (@latest) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1, 8.0.0, 8.1.0, 8.2.0, 9.0.0, 9.1.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0, 18.3.1 |
3.0 (@next ) | 9.2.2 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0, 18.3.1 |
When using dynamic styles with React 18, you may get a warning in the console in debug mode: https://github.com/mmomtchev/rlayers/issues/40. You can safely ignore it as has no functional consequences - React 18, including the concurrent renderer, is fully supported.
rlayers is a set of reusable React components that can be nested in various ways to create map applications for the web through React composition in the true spirit of React. The components are based on a simplified model of the OpenLayers classes: for example the layers and the sources abstraction levels have been fused into one single level and the map and the view are also represented by a single component.
In order to avoid confusion between the OpenLayers classes and the rlayers classes which sometimes have the same names - all rlayers classes are prefixed with R. If a class begins with R, it is from rlayers, otherwise it is an OpenLayers class.
The most important element is the <RMap>
. Every other element, except <RStyle>
, requires a parent to function - an <RLayer>
must be part of a map, an <RFeature>
must be part of an <RLayerVector>
, an <RControl>
must also be part of a map.
This is the simple overlay example - https://mmomtchev.github.io/rlayers/#/overlays
import React from 'react';\nimport {fromLonLat} from 'ol/proj';\nimport {Point} from 'ol/geom';\nimport 'ol/ol.css';\n\nimport {RMap, ROSM, RLayerVector, RFeature, ROverlay, RStyle} from 'rlayers';\nimport locationIcon from './svg/location.svg';\n\n// Create a map, its size is set in the CSS class example-map\n<RMap className='example-map' initial={{center: fromLonLat([2.364, 48.82]), zoom: 11}}>\n {/* Use an OpenStreetMap background */}\n <ROSM />\n {/* Create a single layer for holding vector features */}\n <RLayerVector zIndex={10}>\n {/* Create a style for rendering the features */}\n <RStyle.RStyle>\n {/* Consisting of a single icon, that is slightly offset\n * so that its center falls over the center of the feature */}\n <RStyle.RIcon src={locationIcon} anchor={[0.5, 0.8]} />\n </RStyle.RStyle>\n {/* Create a single feature in the vector layer */}\n <RFeature\n {/* Its geometry is a point geometry over the monument */}\n geometry={new Point(fromLonLat([2.295, 48.8737]))}\n {/* Bind an onClick handler */}\n onClick={(e) =>\n {/* e.map is the underlying OpenLayers map - we call getView().fit()\n to pan/zoom the map over the monument with a small animation */}\n e.map.getView().fit(e.target.getGeometry().getExtent(), {\n duration: 250,\n maxZoom: 15\n })\n }\n >\n {/* The icon is an SVG image that represents the feature on the map\n while an overlay allows us to add a normal HTML element over the feature */}\n <ROverlay className='example-overlay'>\n Arc de Triomphe\n <br />\n <em>⬉ click to zoom</em>\n </ROverlay>\n </RFeature>\n </RLayerVector>\n</RMap>\n
Check examples/static_pages.html for a fully self-contained static HTML page using rlayers.
You can also check the GPLed XC-DB for a larger and more complex project entirely implemented using React, Redux and rlayers.
Composition works by using React Contexts. Every nested element uses the context of its nearest parent.
The underlying OpenLayers objects can be accessed using the useOL()
hook - check the Geolocation
example to see how.
Currently useOL()
has an RContextType
and can contain the following elements:
map
provided by a map, every other element, except an RStyle
must have a map parentlayer
and source
provided by all layers - not required for anything at the moment, but can be used to access the underlying OpenLayers objectsvectorlayer
and vectorsource
provided by vector layers only - required for <RFeature>
vectortilelayer
provided by vector tile layers onlylocation
and feature
provided by a map feature - required for <ROverlay>
and <RPopup>
style
provided by a style definition - the only one which can be outside of a mapAdditionally, useRLayersComponent()
allows retrieving the containing rlayers component.
The underlying OpenLayers objects can be accessed in a number of different ways:
React.Context.Consumer
this
will contain the rlayers component and this.context
will contain the context - this is an alternative to using useOL()
event.target
and the map in event.map
- the popups example uses this methodReact.RefObject
s. The high performance example contains an example of this. The underlying OpenLayers objects can be accessed through the ol
property of every component. Additionaly, for layer
objects, the underlying OpenLayers source can be accessed through source
:const layerRef = React.createRef() as React.RefObject<RLayerVector>;\n
Then after rendering:<RLayerVector ref={layerRef} />\n
layerRef.current.ol
will contain the OpenLayers layer and layerRef.current.source
will contain the source. This is the only way of accessing the object outside its context.Style definitions can be placed anywhere inside the DOM and can be referenced with a React reference. rlayers includes two special types for dealing with styles:
RStyleRef
which is an alias to React.RefObject<RStyle>
is a React reference to an <RStyle>
element. It can be transparently used everywhere where a classical OpenLayers StyleLike
is requiredRStyleLike
is the new union type that allows for StyleLike
or a RStyleRef
A style placed inside a vector layer will be automatically applied to that vector layer.
A style can either be static or dynamic. A static style depends only on its properties. A dynamic style is a function that takes an OpenLayers Feature
object as its input and returns a Style
. A dynamic style creates a new object for every rendered feature, so this must be taken into account. A simple caching mechanism is also provided, based on a user-supplied hash function. It can greatly improve performance when the majority of the features use relatively few different styles.
You can refer to
Classical OpenLayers StyleLike
objects are supported too, but this is not the React way. Still, if you need every last bit of performance, writing an optimized OpenLayers style function is the best solution.
React is a wonderful framework that makes it very easy to write complex web applications without having to manually handle all the interdependencies between the various components. This is the reason why it is called React - components automatically React to changes in other components. In the true spirit of React, rlayers prefers to err on the safe side - always updating when there is a chance that the component needs updating - making it easy on the beginner who wants simple interface while still allowing the experienced engineer to achieve the performance he needs.
When high performance is required, particular care must be taken that the component properties do not change without a reason. This is especially true when the pointermove
event is used. In these cases one should avoid using anonymous objects, arrays or functions as properties.
Take for example this:
<RFeature\n geometry={new Point(fromLonLat([2.295, 48.858])}\n onClick={(e: MapBrowserEvent) => process(e.target)}\n/>\n
This is a feature that will be re-evaluated at every frame. Its geometry appears to be a constant, but it is in fact an anonymous object that is created at every frame - even if it always holds the same value. Passing a constant is one way around this, but the true React way is using the two tools React provides: React.useMemo
and React.useCallback
. They memoize the value and take care to always return a reference to the same object unless one of the listed dependencies is modified.
This is a much better performing code that won't rerender the feature component:
<RFeature\n geometry={React.useMemo(new Point(fromLonLat([2.295, 48.858]), [/* no deps */])}\n onClick={React.useCallback((e: MapBrowserEvent) => process(e.target), [/* no deps */])}\n/>\n
Anonymous objects, arrays and especially lambdas in the properties of a component are prime candidates for memoization. Sometimes, you can also memoize whole components or groups of components - for a very significant performance boost.
Generally, if you are binding code to the pointermove
event and your performance is not good enough, this is the first thing you should be looking at - which components update at every pointermove
and why.
These 3 examples run code on various high-frequency events, take a look at them:
pointermove
that carefully avoids rerenderingpointerenter
/pointerleave
pointermove
Also, when searching for features listening on pointermove
/pointerenter
/pointerleave
events, rlayers 2.0.0 and later, is able to eliminate very early feature layers that do not contain features listenening for those events. If your map contains a large number of features, and only a handful of these use pointermove
events - try to group them in a separate layer.
The examples can be found here: https://mmomtchev.github.io/rlayers/
When using with Next.js, you have to install next-transpile-modules
:
npm install --save next-transpile-modules\n
And then create the following next.config.js
:
const withTranspile = require('next-transpile-modules')(['ol', 'rlayers']);\nmodule.exports = withTranspile({experimental: {esmExternals: 'loose'}});\n
It is known to work with Next.js 10 to Next.js 13. You can check rlayers-npm-tests
repository for examples for working configurations.
Server-side rendering of map components is difficult - there is still no comprehensive solution. Besides the obvious complexities of rendering on canvas outside the browser, one of the major issues is that server-side rendering runs before the browser layout flowing - and thus must work independent of layout and resolution.
The best solution is to use a WMS-compatible server (such as Geoserver) and to serve prerendered maps over WMS - eventually replacing the initial image by a canvas.
An intermediate solution, which does not require extensive server-side investment (such as Geoserver), but is limited to static layout(s), is to prerender one (or one per screen size) image to be used as a temporary place-holder until the map is loading. In this case, at least some devices, will get an ugly looking map for the first few seconds.
Pushing the initial tiles is also an option:
Currently, server-side rendering of raster layers on fixed map sizes has reached POC status and an online demo is accessible at https://rlayers-ssr.meteo.guru/. The code can be found in the ssr
branch of this project. The next.js
project can be found at https://github.com/mmomtchev/rlayers-ssr-demo.git. This is still not a user-friendly, install-and-run project. Take a look at pages/index.js
if you want see how it is meant to be used.
As of March 2022, SSR support is stale and I am not working on it anymore.
The Google Maps API is not open and although it is now supported out-of-the-box by OpenLayers starting from version 9.0, it requires a paid subscription (with an eventual trial period). Adding Google Maps support is not possible unless someone is willing to sponsor it.
You can browse the full documentation at https://mmomtchev.github.io/rlayers/api.
rlayers is an opinionated set of React components for OpenLayers.
It's design policy is:
onClick
and onPointerEnter
/onPoinerLeave
handlers are typical exampleslru-cache
at 8KbytesThe birth of this project is related to a huge extortion in the geography community linked to a sexual harassment affair covered up by the French Judiciary. It is maintained as a free service to the geography community so that it can remain as a remainder to a number of companies - including Camptocamp, ESRI, Mapbox and Makina Corpus - that the most noble way to claim size bragging rights is to produce good software. You can safely use this framework in your projects, be assured that it will be maintained very well and for many years to come. It's companion project on the server-side is gdal-async
.
<- Light-Weight --- Feature-Rich ->
pigeon-maps - react-leaflet - rlayers
Among the completely free and open source alternatives for creating maps with React, on a scale going from the most light-weight to the most feature-rich solution, rlayers is the right-most one.
It offers the full power OpenLayers - dynamic reprojections, comprehensive event handlers, a very rich set of supported formats, interfaces and layer types and a very good performance for very complex maps. This comes at the price of a quite significant total bundle size.
npm --save install rlayers ol react react-dom\n
OpenLayers and React are peer dependencies and should be installed separately.
React is supported from version 16.8.0.
rlayers | Unit-tested OpenLayers versions | Unit-tested React versions |
---|---|---|
1.0 (obsolete) | 6.0 | 16.8, 16.14, 17.0.2 |
1.1 (obsolete) | 6.6, 6.7, 6.8, 6.9 | 16.8, 16.14, 17.0.2 |
1.2 (obsolete) | 6.6, 6.7, 6.8, 6.9 | 16.8, 16.14, 17.0.2 |
1.3 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1 | 16.8, 16.14, 17.0.2, 18.0.0 |
1.4 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
1.5 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
2.0 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
2.1 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1, 8.0.0, 8.1.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
2.2 (obsolete) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1, 8.0.0, 8.1.0, 8.2.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0 |
2.3 (@latest) | 6.10, 6.11, 6.12, 6.13, 6.14, 6.14.1, 6.15, 6.15.1, 7.0.0, 7.1.0, 7.2.0, 7.2.2, 7.3.0, 7.4.0, 7.5.1, 8.0.0, 8.1.0, 8.2.0, 9.0.0, 9.1.0 | 16.8, 16.14, 17.0.2, 18.0.0, 18.1.0, 18.2.0, 18.3.1 |
3.0 (@next ) | 9.2.2 | 18.0.0, 18.1.0, 18.2.0, 18.3.1 |
When using dynamic styles with React 18, you may get a warning in the console in debug mode: https://github.com/mmomtchev/rlayers/issues/40. You can safely ignore it as has no functional consequences - React 18, including the concurrent renderer, is fully supported.
rlayers is a set of reusable React components that can be nested in various ways to create map applications for the web through React composition in the true spirit of React. The components are based on a simplified model of the OpenLayers classes: for example the layers and the sources abstraction levels have been fused into one single level and the map and the view are also represented by a single component.
In order to avoid confusion between the OpenLayers classes and the rlayers classes which sometimes have the same names - all rlayers classes are prefixed with R. If a class begins with R, it is from rlayers, otherwise it is an OpenLayers class.
The most important element is the <RMap>
. Every other element, except <RStyle>
, requires a parent to function - an <RLayer>
must be part of a map, an <RFeature>
must be part of an <RLayerVector>
, an <RControl>
must also be part of a map.
This is the simple overlay example - https://mmomtchev.github.io/rlayers/#/overlays
import React from 'react';\nimport {fromLonLat} from 'ol/proj';\nimport {Point} from 'ol/geom';\nimport 'ol/ol.css';\n\nimport {RMap, ROSM, RLayerVector, RFeature, ROverlay, RStyle} from 'rlayers';\nimport locationIcon from './svg/location.svg';\n\n// Create a map, its size is set in the CSS class example-map\n<RMap className='example-map' initial={{center: fromLonLat([2.364, 48.82]), zoom: 11}}>\n {/* Use an OpenStreetMap background */}\n <ROSM />\n {/* Create a single layer for holding vector features */}\n <RLayerVector zIndex={10}>\n {/* Create a style for rendering the features */}\n <RStyle.RStyle>\n {/* Consisting of a single icon, that is slightly offset\n * so that its center falls over the center of the feature */}\n <RStyle.RIcon src={locationIcon} anchor={[0.5, 0.8]} />\n </RStyle.RStyle>\n {/* Create a single feature in the vector layer */}\n <RFeature\n {/* Its geometry is a point geometry over the monument */}\n geometry={new Point(fromLonLat([2.295, 48.8737]))}\n {/* Bind an onClick handler */}\n onClick={(e) =>\n {/* e.map is the underlying OpenLayers map - we call getView().fit()\n to pan/zoom the map over the monument with a small animation */}\n e.map.getView().fit(e.target.getGeometry().getExtent(), {\n duration: 250,\n maxZoom: 15\n })\n }\n >\n {/* The icon is an SVG image that represents the feature on the map\n while an overlay allows us to add a normal HTML element over the feature */}\n <ROverlay className='example-overlay'>\n Arc de Triomphe\n <br />\n <em>⬉ click to zoom</em>\n </ROverlay>\n </RFeature>\n </RLayerVector>\n</RMap>\n
Check examples/static_pages.html for a fully self-contained static HTML page using rlayers.
You can also check the GPLed XC-DB for a larger and more complex project entirely implemented using React, Redux and rlayers.
Composition works by using React Contexts. Every nested element uses the context of its nearest parent.
The underlying OpenLayers objects can be accessed using the useOL()
hook - check the Geolocation
example to see how.
Currently useOL()
has an RContextType
and can contain the following elements:
map
provided by a map, every other element, except an RStyle
must have a map parentlayer
and source
provided by all layers - not required for anything at the moment, but can be used to access the underlying OpenLayers objectsvectorlayer
and vectorsource
provided by vector layers only - required for <RFeature>
vectortilelayer
provided by vector tile layers onlylocation
and feature
provided by a map feature - required for <ROverlay>
and <RPopup>
style
provided by a style definition - the only one which can be outside of a mapAdditionally, useRLayersComponent()
allows retrieving the containing rlayers component.
The underlying OpenLayers objects can be accessed in a number of different ways:
React.Context.Consumer
this
will contain the rlayers component and this.context
will contain the context - this is an alternative to using useOL()
event.target
and the map in event.map
- the popups example uses this methodReact.RefObject
s. The high performance example contains an example of this. The underlying OpenLayers objects can be accessed through the ol
property of every component. Additionaly, for layer
objects, the underlying OpenLayers source can be accessed through source
:const layerRef = React.createRef() as React.RefObject<RLayerVector>;\n
Then after rendering:<RLayerVector ref={layerRef} />\n
layerRef.current.ol
will contain the OpenLayers layer and layerRef.current.source
will contain the source. This is the only way of accessing the object outside its context.Style definitions can be placed anywhere inside the DOM and can be referenced with a React reference. rlayers includes two special types for dealing with styles:
RStyleRef
which is an alias to React.RefObject<RStyle>
is a React reference to an <RStyle>
element. It can be transparently used everywhere where a classical OpenLayers StyleLike
is requiredRStyleLike
is the new union type that allows for StyleLike
or a RStyleRef
A style placed inside a vector layer will be automatically applied to that vector layer.
A style can either be static or dynamic. A static style depends only on its properties. A dynamic style is a function that takes an OpenLayers Feature
object as its input and returns a Style
. A dynamic style creates a new object for every rendered feature, so this must be taken into account. A simple caching mechanism is also provided, based on a user-supplied hash function. It can greatly improve performance when the majority of the features use relatively few different styles.
You can refer to
Classical OpenLayers StyleLike
objects are supported too, but this is not the React way. Still, if you need every last bit of performance, writing an optimized OpenLayers style function is the best solution.
React is a wonderful framework that makes it very easy to write complex web applications without having to manually handle all the interdependencies between the various components. This is the reason why it is called React - components automatically React to changes in other components. In the true spirit of React, rlayers prefers to err on the safe side - always updating when there is a chance that the component needs updating - making it easy on the beginner who wants simple interface while still allowing the experienced engineer to achieve the performance he needs.
When high performance is required, particular care must be taken that the component properties do not change without a reason. This is especially true when the pointermove
event is used. In these cases one should avoid using anonymous objects, arrays or functions as properties.
Take for example this:
<RFeature\n geometry={new Point(fromLonLat([2.295, 48.858])}\n onClick={(e: MapBrowserEvent) => process(e.target)}\n/>\n
This is a feature that will be re-evaluated at every frame. Its geometry appears to be a constant, but it is in fact an anonymous object that is created at every frame - even if it always holds the same value. Passing a constant is one way around this, but the true React way is using the two tools React provides: React.useMemo
and React.useCallback
. They memoize the value and take care to always return a reference to the same object unless one of the listed dependencies is modified.
This is a much better performing code that won't rerender the feature component:
<RFeature\n geometry={React.useMemo(new Point(fromLonLat([2.295, 48.858]), [/* no deps */])}\n onClick={React.useCallback((e: MapBrowserEvent) => process(e.target), [/* no deps */])}\n/>\n
Anonymous objects, arrays and especially lambdas in the properties of a component are prime candidates for memoization. Sometimes, you can also memoize whole components or groups of components - for a very significant performance boost.
Generally, if you are binding code to the pointermove
event and your performance is not good enough, this is the first thing you should be looking at - which components update at every pointermove
and why.
These 3 examples run code on various high-frequency events, take a look at them:
pointermove
that carefully avoids rerenderingpointerenter
/pointerleave
pointermove
Also, when searching for features listening on pointermove
/pointerenter
/pointerleave
events, rlayers 2.0.0 and later, is able to eliminate very early feature layers that do not contain features listenening for those events. If your map contains a large number of features, and only a handful of these use pointermove
events - try to group them in a separate layer.
The examples can be found here: https://mmomtchev.github.io/rlayers/
When using with Next.js, you have to install next-transpile-modules
:
npm install --save next-transpile-modules\n
And then create the following next.config.js
:
const withTranspile = require('next-transpile-modules')(['ol', 'rlayers']);\nmodule.exports = withTranspile({experimental: {esmExternals: 'loose'}});\n
It is known to work with Next.js 10 to Next.js 13. You can check rlayers-npm-tests
repository for examples for working configurations.
Server-side rendering of map components is difficult - there is still no comprehensive solution. Besides the obvious complexities of rendering on canvas outside the browser, one of the major issues is that server-side rendering runs before the browser layout flowing - and thus must work independent of layout and resolution.
The best solution is to use a WMS-compatible server (such as Geoserver) and to serve prerendered maps over WMS - eventually replacing the initial image by a canvas.
An intermediate solution, which does not require extensive server-side investment (such as Geoserver), but is limited to static layout(s), is to prerender one (or one per screen size) image to be used as a temporary place-holder until the map is loading. In this case, at least some devices, will get an ugly looking map for the first few seconds.
Pushing the initial tiles is also an option:
Currently, server-side rendering of raster layers on fixed map sizes has reached POC status and an online demo is accessible at https://rlayers-ssr.meteo.guru/. The code can be found in the ssr
branch of this project. The next.js
project can be found at https://github.com/mmomtchev/rlayers-ssr-demo.git. This is still not a user-friendly, install-and-run project. Take a look at pages/index.js
if you want see how it is meant to be used.
As of March 2022, SSR support is stale and I am not working on it anymore.
The Google Maps API is not open and although it is now supported out-of-the-box by OpenLayers starting from version 9.0, it requires a paid subscription (with an eventual trial period). Adding Google Maps support is not possible unless someone is willing to sponsor it.
You can browse the full documentation at https://mmomtchev.github.io/rlayers/api.
a&&(a=u),d>l&&(l=d);_=0!==(_=Math.max(a-r,l-o))?32767/_:0}return s(m,x,n,r,o,_,0),x}function i(t,e,i,n,s){var r,o;if(s===R(t,e,i,n)>0)for(r=e;r=e;r-=n)o=A(r,t[r],t[r+1],o);return o&&m(o,o.next)&&(C(o),o=o.next),o}function n(t,e){if(!t)return t;e||(e=t);var i,n=t;do{if(i=!1,n.steiner||!m(n,n.next)&&0!==p(n.prev,n,n.next))n=n.next;else{if(C(n),(n=e=n.prev)===n.next)break;i=!0}}while(i||n!==e);return e}function s(t,e,i,h,c,u,g){if(t){!g&&u&&function(t,e,i,n){var s=t;do{0===s.z&&(s.z=d(s.x,s.y,e,i,n)),s.prevZ=s.prev,s.nextZ=s.next,s=s.next}while(s!==t);s.prevZ.nextZ=null,s.prevZ=null,function(t){var e,i,n,s,r,o,a,l,h=1;do{for(i=t,t=null,r=null,o=0;i;){for(o++,n=i,a=0,e=0;e a&&(a=u),d>l&&(l=d);_=0!==(_=Math.max(a-r,l-o))?32767/_:0}return s(m,x,n,r,o,_,0),x}function i(t,e,i,n,s){var r,o;if(s===R(t,e,i,n)>0)for(r=e;r=e;r-=n)o=A(r,t[r],t[r+1],o);return o&&m(o,o.next)&&(C(o),o=o.next),o}function n(t,e){if(!t)return t;e||(e=t);var i,n=t;do{if(i=!1,n.steiner||!m(n,n.next)&&0!==p(n.prev,n,n.next))n=n.next;else{if(C(n),(n=e=n.prev)===n.next)break;i=!0}}while(i||n!==e);return e}function s(t,e,i,h,c,u,g){if(t){!g&&u&&function(t,e,i,n){var s=t;do{0===s.z&&(s.z=d(s.x,s.y,e,i,n)),s.prevZ=s.prev,s.nextZ=s.next,s=s.next}while(s!==t);s.prevZ.nextZ=null,s.prevZ=null,function(t){var e,i,n,s,r,o,a,l,h=1;do{for(i=t,t=null,r=null,o=0;i;){for(o++,n=i,a=0,e=0;e0;)n=this.dequeue()[0],s=n.getKey(),i=n.getState(),i!==V.A.IDLE||s in this.tilesLoadingKeys_||(this.tilesLoadingKeys_[s]=!0,++this.tilesLoading_,++r,n.load())}};var q=i(3568),K=i(2703),$=i(7456),J=i(2898),Q=i(9186),tt=i(6068),et=i(4473),it=i(4051),nt=i(4423),st=i(9888),rt=i(6856);const ot=class{constructor(t,e,i){this.decay_=t,this.minVelocity_=e,this.delay_=i,this.points_=[],this.angle_=0,this.initialVelocity_=0}begin(){this.points_.length=0,this.angle_=0,this.initialVelocity_=0}update(t,e){this.points_.push(t,e,Date.now())}end(){if(this.points_.length<6)return!1;const t=Date.now()-this.delay_,e=this.points_.length-3;if(this.points_[e+2]0?o/s.duration:1;a>=1?(s.complete=!0,a=1):r=!1;const l=s.easing(a);if(s.sourceCenter){const t=s.sourceCenter[0],e=s.sourceCenter[1],i=s.targetCenter[0],n=s.targetCenter[1];this.nextCenter_=s.targetCenter;const r=t+l*(i-t),o=e+l*(n-e);this.targetCenter_=[r,o]}if(s.sourceResolution&&s.targetResolution){const t=1===l?s.targetResolution:s.sourceResolution+l*(s.targetResolution-s.sourceResolution);if(s.anchor){const e=this.getViewportSize_(this.getRotation()),i=this.constraints_.resolution(t,0,e,!0);this.targetCenter_=this.calculateCenterZoom(i,s.anchor)}this.nextResolution_=s.targetResolution,this.targetResolution_=t,this.applyTargetState_(!0)}if(void 0!==s.sourceRotation&&void 0!==s.targetRotation){const t=1===l?(0,u.xP)(s.targetRotation+Math.PI,2*Math.PI)-Math.PI:s.sourceRotation+l*(s.targetRotation-s.sourceRotation);if(s.anchor){const e=this.constraints_.rotation(t,!0);this.targetCenter_=this.calculateCenterRotate(e,s.anchor)}this.nextRotation_=s.targetRotation,this.targetRotation_=t}if(this.applyTargetState_(!0),e=!0,!s.complete)break}if(r){this.animations_[i]=null,this.setHint(s.A.ANIMATING,-1),this.nextCenter_=null,this.nextResolution_=NaN,this.nextRotation_=NaN;const t=n[0].callback;t&&A(t,!0)}}this.animations_=this.animations_.filter(Boolean),e&&void 0===this.updateAnimationKey_&&(this.updateAnimationKey_=requestAnimationFrame(this.updateAnimations_.bind(this)))}calculateCenterRotate(t,e){let i;const n=this.getCenterInternal();return void 0!==n&&(i=[n[0]-e[0],n[1]-e[1]],(0,h.e$)(i,t-this.getRotation()),(0,h.WQ)(i,e)),i}calculateCenterZoom(t,e){let i;const n=this.getCenterInternal(),s=this.getResolution();return void 0!==n&&void 0!==s&&(i=[e[0]-t*(e[0]-n[0])/s,e[1]-t*(e[1]-n[1])/s]),i}getViewportSize_(t){const e=this.viewportSize_;if(t){const i=e[0],n=e[1];return[Math.abs(i*Math.cos(t))+Math.abs(n*Math.sin(t)),Math.abs(i*Math.sin(t))+Math.abs(n*Math.cos(t))]}return e}setViewportSize(t){this.viewportSize_=Array.isArray(t)?t.slice():[100,100],this.getAnimating()||this.resolveConstraints(0)}getCenter(){const t=this.getCenterInternal();return t?(0,a.te)(t,this.getProjection()):t}getCenterInternal(){return this.get(r.A.CENTER)}getConstraints(){return this.constraints_}getConstrainResolution(){return this.get("constrainResolution")}getHints(t){return void 0!==t?(t[0]=this.hints_[0],t[1]=this.hints_[1],t):this.hints_.slice()}calculateExtent(t){const e=this.calculateExtentInternal(t);return(0,a.JR)(e,this.getProjection())}calculateExtentInternal(t){t=t||this.getViewportSizeMinusPadding_();const e=this.getCenterInternal();(0,c.v)(e,"The view center is not defined");const i=this.getResolution();(0,c.v)(void 0!==i,"The view resolution is not defined");const n=this.getRotation();return(0,c.v)(void 0!==n,"The view rotation is not defined"),(0,_.Bg)(e,i,n,t)}getMaxResolution(){return this.maxResolution_}getMinResolution(){return this.minResolution_}getMaxZoom(){return this.getZoomForResolution(this.minResolution_)}setMaxZoom(t){this.applyOptions_(this.getUpdatedOptions_({maxZoom:t}))}getMinZoom(){return this.getZoomForResolution(this.maxResolution_)}setMinZoom(t){this.applyOptions_(this.getUpdatedOptions_({minZoom:t}))}setConstrainResolution(t){this.applyOptions_(this.getUpdatedOptions_({constrainResolution:t}))}getProjection(){return this.projection_}getResolution(){return this.get(r.A.RESOLUTION)}getResolutions(){return this.resolutions_}getResolutionForExtent(t,e){return this.getResolutionForExtentInternal((0,a.SD)(t,this.getProjection()),e)}getResolutionForExtentInternal(t,e){e=e||this.getViewportSizeMinusPadding_();const i=(0,_.RG)(t)/e[0],n=(0,_.Oq)(t)/e[1];return Math.max(i,n)}getResolutionForValueFunction(t){t=t||2;const e=this.getConstrainedResolution(this.maxResolution_),i=this.minResolution_,n=Math.log(e/i)/Math.log(t);return function(i){return e/Math.pow(t,i*n)}}getRotation(){return this.get(r.A.ROTATION)}getValueForResolutionFunction(t){const e=Math.log(t||2),i=this.getConstrainedResolution(this.maxResolution_),n=this.minResolution_,s=Math.log(i/n)/e;return function(t){return Math.log(i/t)/e/s}}getViewportSizeMinusPadding_(t){let e=this.getViewportSize_(t);const i=this.padding_;return i&&(e=[e[0]-i[1]-i[3],e[1]-i[0]-i[2]]),e}getState(){const t=this.getProjection(),e=this.getResolution(),i=this.getRotation();let n=this.getCenterInternal();const s=this.padding_;if(s){const t=this.getViewportSizeMinusPadding_();n=S(n,this.getViewportSize_(),[t[0]/2+s[3],t[1]/2+s[0]],e,i)}return{center:n.slice(0),projection:void 0!==t?t:null,resolution:e,nextCenter:this.nextCenter_,nextResolution:this.nextResolution_,nextRotation:this.nextRotation_,rotation:i,zoom:this.getZoom()}}getViewStateAndExtent(){return{viewState:this.getState(),extent:this.calculateExtent()}}getZoom(){let t;const e=this.getResolution();return void 0!==e&&(t=this.getZoomForResolution(e)),t}getZoomForResolution(t){let e,i,n=this.minZoom_||0;if(this.resolutions_){const s=(0,f.FT)(this.resolutions_,t,1);n=s,e=this.resolutions_[s],i=s==this.resolutions_.length-1?2:e/this.resolutions_[s+1]}else e=this.maxResolution_,i=this.zoomFactor_;return n+Math.log(e/t)/Math.log(i)}getResolutionForZoom(t){if(this.resolutions_){if(this.resolutions_.length<=1)return 0;const e=(0,u.qE)(Math.floor(t),0,this.resolutions_.length-2),i=this.resolutions_[e]/this.resolutions_[e+1];return this.resolutions_[e]/Math.pow(i,(0,u.qE)(t-e,0,1))}return this.maxResolution_/Math.pow(this.zoomFactor_,t-this.minZoom_)}fit(t,e){let i;if((0,c.v)(Array.isArray(t)||"function"==typeof t.getSimplifiedGeometry,"Invalid extent or geometry provided as `geometry`"),Array.isArray(t)){(0,c.v)(!(0,_.Im)(t),"Cannot fit empty extent provided as `geometry`");const e=(0,a.SD)(t,this.getProjection());i=(0,E.VY)(e)}else if("Circle"===t.getType()){const e=(0,a.SD)(t.getExtent(),this.getProjection());i=(0,E.VY)(e),i.rotate(this.getRotation(),(0,_.q1)(e))}else{const e=(0,a.Tf)();i=e?t.clone().transform(e,this.getProjection()):t}this.fitInternal(i,e)}rotatedExtentForGeometry(t){const e=this.getRotation(),i=Math.cos(e),n=Math.sin(-e),s=t.getFlatCoordinates(),r=t.getStride();let o=1/0,a=1/0,l=-1/0,h=-1/0;for(let t=0,e=s.length;ts[2])&&(i=i||(0,n.RG)(s),r=Math.floor((t[0]-s[0])/i)),r}},5176:(t,e,i)=>{"use strict";i.d(e,{$N:()=>a,K5:()=>u,Q5:()=>s,Si:()=>n,Vv:()=>o,XI:()=>r,nT:()=>l});const n="ol-hidden",s="ol-selectable",r="ol-unselectable",o="ol-unsupported",a="ol-control",l="ol-collapsed",h=new RegExp(["^\\s*(?=(?:(?:[-a-z]+\\s*){0,2}(italic|oblique))?)","(?=(?:(?:[-a-z]+\\s*){0,2}(small-caps))?)","(?=(?:(?:[-a-z]+\\s*){0,2}(bold(?:er)?|lighter|[1-9]00 ))?)","(?:(?:normal|\\1|\\2|\\3)\\s*){0,3}((?:xx?-)?","(?:small|large)|medium|smaller|larger|[\\.\\d]+(?:\\%|in|[cem]m|ex|p[ctx]))","(?:\\s*\\/\\s*(normal|[\\.\\d]+(?:\\%|in|[cem]m|ex|p[ctx])?))","?\\s*([-,\\\"\\'\\sa-z]+?)\\s*$"].join(""),"i"),c=["style","variant","weight","size","lineHeight","family"],u=function(t){const e=t.match(h);if(!e)return null;const i={lineHeight:"normal",size:"1.2em",style:"normal",weight:"normal",variant:"normal"};for(let t=0,n=c.length;t{"use strict";i.d(e,{DG:()=>v,Fq:()=>u,SR:()=>y,T8:()=>a,Xj:()=>m,Ye:()=>L,ZD:()=>T,_D:()=>x,cT:()=>h,go:()=>f,ho:()=>p,j:()=>o,mE:()=>c,qg:()=>E,wl:()=>l});var n=i(6514),s=i(3730);let r=0;const o=0,a=1<{"use strict";i.d(e,{uZ:()=>m,nR:()=>x,VO:()=>h,Lm:()=>d,z0:()=>f,$R:()=>a,Tl:()=>g,Sl:()=>_});const n=class{constructor(t,e){this.name=t,this.data=e,this.texture_=null}getTexture(t){if(!this.texture_){const e=t.createTexture();t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.data.length/4,1,0,t.RGBA,t.UNSIGNED_BYTE,this.data),this.texture_=e}return this.texture_}delete(t){this.texture_&&t.deleteTexture(this.texture_),this.texture_=null}};var s=i(9825),r=i(2323),o=i(3730);function a(t){const e=t.toString();return e.includes(".")?e:e+".0"}function l(t){if(t.length<2||t.length>4)throw new Error("`formatArray` can only output `vec2`, `vec3` or `vec4` arrays.");return`vec${t.length}(${t.map(a).join(", ")})`}function h(t){const e=(0,o._j)(t),i=e.length>3?e[3]:1;return l([e[0]/255*i,e[1]/255*i,e[2]/255*i,i])}const c={};let u=0;function d(t){return t in c||(c[t]=u++),c[t]}function g(t){return a(d(t))}function _(t){return"u_var_"+t}function f(){return{inFragmentShader:!1,variables:{},properties:{},functions:{},bandCount:0,style:{}}}const p="getBandValue",m="u_paletteTextures";function x(t,e,i,n){const r=(0,s.qg)(t,i,e);if((0,s.Xj)(r.type,s.j))throw new Error("No matching type was found");if(!(0,s.ho)(e,r.type)){const t=(0,s.go)(e),i=(0,s.go)(r.type);throw new Error(`Expected expression to be of type ${t}, got ${i}`)}return E(r,e,n)}function v(t){return(e,i,n)=>{const s=i.args.length,r=new Array(s);for(let t=0;t{const i=e.args[0].value;return i in t.properties||(t.properties[i]={name:i,type:e.type}),(t.inFragmentShader?"v_prop_":"a_prop_")+i},[s.ZD.GeometryType]:(t,e,i)=>{const n="geometryType";return n in t.properties||(t.properties[n]={name:n,type:s.cT,evaluator:t=>(0,s.Ye)(t.getGeometry())}),(t.inFragmentShader?"v_prop_":"a_prop_")+n},[s.ZD.Var]:(t,e)=>{const i=e.args[0].value;return i in t.variables||(t.variables[i]={name:i,type:e.type}),_(i)},[s.ZD.Resolution]:()=>"u_resolution",[s.ZD.Zoom]:()=>"u_zoom",[s.ZD.Time]:()=>"u_time",[s.ZD.Any]:v((t=>`(${t.join(" || ")})`)),[s.ZD.All]:v((t=>`(${t.join(" && ")})`)),[s.ZD.Not]:v((([t])=>`(!${t})`)),[s.ZD.Equal]:v((([t,e])=>`(${t} == ${e})`)),[s.ZD.NotEqual]:v((([t,e])=>`(${t} != ${e})`)),[s.ZD.GreaterThan]:v((([t,e])=>`(${t} > ${e})`)),[s.ZD.GreaterThanOrEqualTo]:v((([t,e])=>`(${t} >= ${e})`)),[s.ZD.LessThan]:v((([t,e])=>`(${t} < ${e})`)),[s.ZD.LessThanOrEqualTo]:v((([t,e])=>`(${t} <= ${e})`)),[s.ZD.Multiply]:v((t=>`(${t.join(" * ")})`)),[s.ZD.Divide]:v((([t,e])=>`(${t} / ${e})`)),[s.ZD.Add]:v((t=>`(${t.join(" + ")})`)),[s.ZD.Subtract]:v((([t,e])=>`(${t} - ${e})`)),[s.ZD.Clamp]:v((([t,e,i])=>`clamp(${t}, ${e}, ${i})`)),[s.ZD.Mod]:v((([t,e])=>`mod(${t}, ${e})`)),[s.ZD.Pow]:v((([t,e])=>`pow(${t}, ${e})`)),[s.ZD.Abs]:v((([t])=>`abs(${t})`)),[s.ZD.Floor]:v((([t])=>`floor(${t})`)),[s.ZD.Ceil]:v((([t])=>`ceil(${t})`)),[s.ZD.Round]:v((([t])=>`floor(${t} + 0.5)`)),[s.ZD.Sin]:v((([t])=>`sin(${t})`)),[s.ZD.Cos]:v((([t])=>`cos(${t})`)),[s.ZD.Atan]:v((([t,e])=>void 0!==e?`atan(${t}, ${e})`:`atan(${t})`)),[s.ZD.Sqrt]:v((([t])=>`sqrt(${t})`)),[s.ZD.Match]:v((t=>{const e=t[0],i=t[t.length-1];let n=null;for(let s=t.length-3;s>=1;s-=2)n=`(${e} == ${t[s]} ? ${t[s+1]} : ${n||i})`;return n})),[s.ZD.Between]:v((([t,e,i])=>`(${t} >= ${e} && ${t} <= ${i})`)),[s.ZD.Interpolate]:v((([t,e,...i])=>{let n="";for(let s=0;so&&(h|=n.A.ABOVE),h===n.A.UNKNOWN&&(h=n.A.INTERSECTING),h}function d(){return[1/0,1/0,-1/0,-1/0]}function g(t,e,i,n,s){return s?(s[0]=t,s[1]=e,s[2]=i,s[3]=n,s):[t,e,i,n]}function _(t){return g(1/0,1/0,-1/0,-1/0,t)}function f(t,e){const i=t[0],n=t[1];return g(i,n,i,n,e)}function p(t,e,i,n,s){return E(_(s),t,e,i,n)}function m(t,e){return t[0]==e[0]&&t[2]==e[2]&&t[1]==e[1]&&t[3]==e[3]}function x(t,e,i){return Math.abs(t[0]-e[0])t[2]&&(t[2]=e[2]),e[1]{"use strict";i.d(e,{B4:()=>a,W8:()=>r,hq:()=>l,rT:()=>s,tV:()=>o});var n=i(6514);function s(){return!0}function r(){return!1}function o(){}function a(t){let e,i,s,r=!1;return function(){const o=Array.prototype.slice.call(arguments);return r&&this===s&&(0,n.aI)(o,i)||(r=!0,s=this,i=o,e=t.apply(this,arguments)),e}}function l(t){return function(){let e;try{e=t()}catch(t){return Promise.reject(t)}return e instanceof Promise?e:Promise.resolve(e)}()}},7430:(t,e,i)=>{"use strict";i.d(e,{A:()=>d});var n=i(4120),s=i(4087),r=i(9703),o=i(915),a=i(3407),l=i(4238),h=i(7622);const c=(0,r.vt)();class u extends n.A{constructor(){super(),this.extent_=(0,o.S5)(),this.extentRevision_=-1,this.simplifiedGeometryMaxMinSquaredTolerance=0,this.simplifiedGeometryRevision=0,this.simplifyTransformedInternal=(0,l.B4)(((t,e,i)=>{if(!i)return this.getSimplifiedGeometry(e);const n=this.clone();return n.applyTransform(i),n.getSimplifiedGeometry(e)}))}simplifyTransformed(t,e){return this.simplifyTransformedInternal(this.getRevision(),t,e)}clone(){return(0,s.b0)()}closestPointXY(t,e,i,n){return(0,s.b0)()}containsXY(t,e){const i=this.getClosestPoint([t,e]);return i[0]===t&&i[1]===e}getClosestPoint(t,e){return e=e||[NaN,NaN],this.closestPointXY(t[0],t[1],e,1/0),e}intersectsCoordinate(t){return this.containsXY(t[0],t[1])}computeExtent(t){return(0,s.b0)()}getExtent(t){if(this.extentRevision_!=this.getRevision()){const t=this.computeExtent(this.extent_);(isNaN(t[0])||isNaN(t[1]))&&(0,o.aZ)(t),this.extentRevision_=this.getRevision()}return(0,o.$u)(this.extent_,t)}rotate(t,e){(0,s.b0)()}scale(t,e,i){(0,s.b0)()}simplify(t){return this.getSimplifiedGeometry(t*t)}getSimplifiedGeometry(t){return(0,s.b0)()}getType(){return(0,s.b0)()}applyTransform(t){(0,s.b0)()}intersectsExtent(t){return(0,s.b0)()}translate(t,e){(0,s.b0)()}transform(t,e){const i=(0,a.Jt)(t),n="tile-pixels"==i.getUnits()?function(t,n,s){const l=i.getExtent(),u=i.getWorldExtent(),d=(0,o.Oq)(u)/(0,o.Oq)(l);return(0,r.Zz)(c,u[0],u[3],d,-d,0,0,0),(0,h.Rc)(t,0,t.length,s,c,n),(0,a.RG)(i,e)(t,n,s)}:(0,a.RG)(i,e);return this.applyTransform(n),this}}const d=u},4338:(t,e,i)=>{"use strict";i.d(e,{A:()=>h});var n=i(6837),s=i(7430),r=i(915),o=i(9438);class a extends s.A{constructor(t){super(),this.geometries_=t,this.changeEventsKeys_=[],this.listenGeometriesChange_()}unlistenGeometriesChange_(){this.changeEventsKeys_.forEach(o.JH),this.changeEventsKeys_.length=0}listenGeometriesChange_(){const t=this.geometries_;for(let e=0,i=t.length;et.clone()))}const h=a},1217:(t,e,i)=>{"use strict";i.d(e,{A:()=>f});var n=i(2096),s=i(3953),r=i(915),o=i(2497),a=i(3671),l=i(6514),h=i(1374),c=i(6361),u=i(9969),d=i(4350),g=i(904);class _ extends n.Ay{constructor(t,e){super(),this.flatMidpoint_=null,this.flatMidpointRevision_=-1,this.maxDelta_=-1,this.maxDeltaRevision_=-1,void 0===e||Array.isArray(t[0])?this.setCoordinates(t,e):this.setFlatCoordinates(e,t)}appendCoordinate(t){(0,l.X$)(this.flatCoordinates,t),this.changed()}clone(){const t=new _(this.flatCoordinates.slice(),this.layout);return t.applyProperties(this),t}closestPointXY(t,e,i,n){return n<(0,r.Ld)(this.getExtent(),t,e)?n:(this.maxDeltaRevision_!=this.getRevision()&&(this.maxDelta_=Math.sqrt((0,s.MD)(this.flatCoordinates,0,this.flatCoordinates.length,this.stride,0)),this.maxDeltaRevision_=this.getRevision()),(0,s.n)(this.flatCoordinates,0,this.flatCoordinates.length,this.stride,this.maxDelta_,!1,t,e,i,n))}forEachSegment(t){return(0,h.j)(this.flatCoordinates,0,this.flatCoordinates.length,this.stride,t)}getCoordinateAtM(t,e){return"XYM"!=this.layout&&"XYZM"!=this.layout?null:(e=void 0!==e&&e,(0,u.gr)(this.flatCoordinates,0,this.flatCoordinates.length,this.stride,t,e))}getCoordinates(){return(0,c.n2)(this.flatCoordinates,0,this.flatCoordinates.length,this.stride)}getCoordinateAt(t,e){return(0,u.SH)(this.flatCoordinates,0,this.flatCoordinates.length,this.stride,t,e,this.stride)}getLength(){return(0,g.k)(this.flatCoordinates,0,this.flatCoordinates.length,this.stride)}getFlatMidpoint(){return this.flatMidpointRevision_!=this.getRevision()&&(this.flatMidpoint_=this.getCoordinateAt(.5,this.flatMidpoint_??void 0),this.flatMidpointRevision_=this.getRevision()),this.flatMidpoint_}getSimplifiedGeometryInternal(t){const e=[];return e.length=(0,a.P4)(this.flatCoordinates,0,this.flatCoordinates.length,this.stride,t,e,0),new _(e,"XY")}getType(){return"LineString"}intersectsExtent(t){return(0,d.gp)(this.flatCoordinates,0,this.flatCoordinates.length,this.stride,t)}setCoordinates(t,e){this.setLayout(e,t,1),this.flatCoordinates||(this.flatCoordinates=[]),this.flatCoordinates.length=(0,o.z2)(this.flatCoordinates,0,t,this.stride),this.changed()}}const f=_},6702:(t,e,i)=>{"use strict";i.d(e,{A:()=>_});var n=i(1217),s=i(2096),r=i(3953),o=i(915),a=i(2497),l=i(3671),h=i(6514),c=i(6361),u=i(9969),d=i(4350);class g extends s.Ay{constructor(t,e,i){if(super(),this.ends_=[],this.maxDelta_=-1,this.maxDeltaRevision_=-1,Array.isArray(t[0]))this.setCoordinates(t,e);else if(void 0!==e&&i)this.setFlatCoordinates(e,t),this.ends_=i;else{const e=t,i=[],n=[];for(let t=0,s=e.length;t{"use strict";i.d(e,{A:()=>u});var n=i(4294),s=i(2096),r=i(915),o=i(2497),a=i(6514),l=i(6361),h=i(1597);class c extends s.Ay{constructor(t,e){super(),e&&!Array.isArray(t[0])?this.setFlatCoordinates(e,t):this.setCoordinates(t,e)}appendPoint(t){(0,a.X$)(this.flatCoordinates,t.getFlatCoordinates()),this.changed()}clone(){const t=new c(this.flatCoordinates.slice(),this.layout);return t.applyProperties(this),t}closestPointXY(t,e,i,n){if(n<(0,r.Ld)(this.getExtent(),t,e))return n;const s=this.flatCoordinates,o=this.stride;for(let r=0,a=s.length;r{"use strict";i.d(e,{A:()=>v});var n=i(503),s=i(1064),r=i(2096),o=i(3953),a=i(915),l=i(2497),h=i(6514),c=i(2616),u=i(6361),d=i(4350),g=i(3402),_=i(8609),f=i(4049),p=i(2845),m=i(3671);class x extends r.Ay{constructor(t,e,i){if(super(),this.endss_=[],this.flatInteriorPointsRevision_=-1,this.flatInteriorPoints_=null,this.maxDelta_=-1,this.maxDeltaRevision_=-1,this.orientedRevision_=-1,this.orientedFlatCoordinates_=null,!i&&!Array.isArray(t[0])){const n=t,s=[],r=[];for(let t=0,e=n.length;tr&&(r=l),o=i,a=s}return r}function o(t,e,i,n,s){for(let o=0,a=i.length;o{"use strict";i.d(e,{Gd:()=>a,a_:()=>r,t7:()=>s,zb:()=>o});var n=i(915);function s(t,e,i,s,o){return!(0,n.sB)(o,(function(n){return!r(t,e,i,s,n[0],n[1])}))}function r(t,e,i,n,s,r){let o=0,a=t[i-n],l=t[i-n+1];for(;er&&(i-a)*(r-l)-(s-a)*(n-l)>0&&o++:n<=r&&(i-a)*(r-l)-(s-a)*(n-l)<0&&o--,a=i,l=n}return 0!==o}function o(t,e,i,n,s,o){if(0===i.length)return!1;if(!r(t,e,i[0],n,s,o))return!1;for(let e=1,a=i.length;e{"use strict";function n(t,e,i,n){for(let n=0,s=i.length;nr,_n:()=>n,d6:()=>o,z2:()=>s})},6361:(t,e,i)=>{"use strict";function n(t,e,i,n,s){s=void 0!==s?s:[];let r=0;for(let o=e;or,cD:()=>s,n2:()=>n})},2616:(t,e,i)=>{"use strict";i.d(e,{J:()=>r,p:()=>o});var n=i(6514),s=i(2845);function r(t,e,i,r,o,a,l){let h,c,u,d,g,_,f;const p=o[a+1],m=[];for(let n=0,s=i.length;nv&&(u=(d+g)/2,(0,s.zb)(t,e,i,r,u,p)&&(x=u,v=n)),d=g}return isNaN(x)&&(x=o[a]),l?(l.push(x,p,v),l):[x,p,v]}function o(t,e,i,n,s){let o=[];for(let a=0,l=i.length;a=0;--t)this.insertVertex_(s[t],r)}return!!this.vertexFeature_}handleUpEvent(t){for(let e=this.dragSegments_.length-1;e>=0;--e){const i=this.dragSegments_[e][0],n=i.geometry;if("Circle"===n.getType()){const e=n.getCenter(),s=i.featureSegments[0],r=i.featureSegments[1];s.segment[0]=e,s.segment[1]=e,r.segment[0]=e,r.segment[1]=e,this.rBush_.update((0,p.dP)(e),s);let o=n;const a=(0,E.Tf)();if(a){const e=t.map.getView().getProjection();o=o.clone().transform(a,e),o=(0,y.nD)(o).transform(e,a)}this.rBush_.update(o.getExtent(),r)}else this.rBush_.update((0,p.Tr)(i.segment),i)}return this.featuresBeingModified_&&(this.dispatchEvent(new R(S,this.featuresBeingModified_,t)),this.featuresBeingModified_=null),!1}handlePointerMove_(t){this.lastPixel_=t.pixel,this.handlePointerAtPixel_(t.pixel,t.map,t.coordinate)}handlePointerAtPixel_(t,e,i){const n=i||e.getCoordinateFromPixel(t),s=e.getView().getProjection(),r=function(t,e){return I(n,t,s)-I(n,e,s)};let o,l;if(this.hitDetection_){const i="object"==typeof this.hitDetection_?t=>t===this.hitDetection_:void 0;e.forEachFeatureAtPixel(t,((t,e,i)=>{i&&"Point"===i.getType()&&(i=new h.A((0,E.te)(i.getCoordinates(),s)));const n=i||t.getGeometry();if(t instanceof a.A&&this.features_.getArray().includes(t)){l=n;const e=t.getGeometry().getFlatCoordinates().slice(0,2);o=[{feature:t,geometry:l,segment:[e,e]}]}return!0}),{layerFilter:i})}if(!o){const t=(0,E.SD)((0,p.dP)(n,A),s),i=e.getView().getResolution()*this.pixelTolerance_,r=(0,E.JR)((0,p.r)(t,i,A),s);o=this.rBush_.getInExtent(r)}if(o&&o.length>0){const i=o.sort(r)[0],a=i.segment;let h=L(n,i,s);const c=e.getPixelFromCoordinate(h);let u=(0,m.Io)(t,c);if(l||u<=this.pixelTolerance_){const t={};if(t[(0,T.v6)(a)]=!0,this.snapToPointer_||(this.delta_[0]=h[0]-n[0],this.delta_[1]=h[1]-n[1]),"Circle"===i.geometry.getType()&&1===i.index)this.snappedToVertex_=!0,this.createOrUpdateVertexFeature_(h,[i.feature],[i.geometry]);else{const n=e.getPixelFromCoordinate(a[0]),s=e.getPixelFromCoordinate(a[1]),r=(0,m.hG)(c,n),l=(0,m.hG)(c,s);u=Math.sqrt(Math.min(r,l)),this.snappedToVertex_=u<=this.pixelTolerance_,this.snappedToVertex_&&(h=r>l?a[1]:a[0]),this.createOrUpdateVertexFeature_(h,[i.feature],[i.geometry]);const d={};d[(0,T.v6)(i.geometry)]=!0;for(let e=1,i=o.length;e=0;--o)s=t[o],u=s[0],d=(0,T.v6)(u.feature),u.depth&&(d+="-"+u.depth.join("-")),d in e||(e[d]={}),0===s[1]?(e[d].right=u,e[d].index=u.index):1==s[1]&&(e[d].left=u,e[d].index=u.index+1);for(d in e){switch(c=e[d].right,l=e[d].left,a=e[d].index,h=a-1,u=void 0!==l?l:c,h<0&&(h=0),r=u.geometry,n=r.getCoordinates(),i=n,g=!1,r.getType()){case"MultiLineString":n[u.depth[0]].length>2&&(n[u.depth[0]].splice(a,1),g=!0);break;case"LineString":n.length>2&&(n.splice(a,1),g=!0);break;case"MultiPolygon":i=i[u.depth[1]];case"Polygon":i=i[u.depth[0]],i.length>4&&(a==i.length-1&&(a=0),i.splice(a,1),g=!0,0===a&&(i.pop(),i.push(i[0]),h=i.length-1))}if(g){this.setGeometryCoordinates_(r,n);const e=[];if(void 0!==l&&(this.rBush_.remove(l),e.push(l.segment[0])),void 0!==c&&(this.rBush_.remove(c),e.push(c.segment[1])),void 0!==l&&void 0!==c){const t={depth:u.depth,feature:u.feature,geometry:u.geometry,index:h,segment:e};this.rBush_.insert((0,p.Tr)(t.segment),t)}this.updateSegmentIndices_(r,a,u.depth,-1),this.vertexFeature_&&(this.overlay_.getSource().removeFeature(this.vertexFeature_),this.vertexFeature_=null),t.length=0}}return g}setGeometryCoordinates_(t,e){this.changingFeature_=!0,t.setCoordinates(e),this.changingFeature_=!1}updateSegmentIndices_(t,e,i,n){this.rBush_.forEachInExtent(t.getExtent(),(function(s){s.geometry===t&&(void 0===i||void 0===s.depth||(0,v.aI)(s.depth,i))&&s.index>e&&(s.index+=n)}))}}function b(t,e){return t.index-e.index}function I(t,e,i){const n=e.geometry;if("Circle"===n.getType()){let s=n;if(1===e.index){const e=(0,E.Tf)();e&&(s=s.clone().transform(e,i));const n=(0,m.hG)(s.getCenter(),(0,E.Ad)(t,i)),r=Math.sqrt(n)-s.getRadius();return r*r}}const s=(0,E.Ad)(t,i);return C[0]=(0,E.Ad)(e.segment[0],i),C[1]=(0,E.Ad)(e.segment[1],i),(0,m.$x)(s,C)}function L(t,e,i){const n=e.geometry;if("Circle"===n.getType()&&1===e.index){let e=n;const s=(0,E.Tf)();return s&&(e=e.clone().transform(s,i)),(0,E.te)(e.getClosestPoint((0,E.Ad)(t,i)),i)}const s=(0,E.Ad)(t,i);return C[0]=(0,E.Ad)(e.segment[0],i),C[1]=(0,E.Ad)(e.segment[1],i),(0,E.te)((0,m.sG)(s,C),i)}function P(){const t=(0,x.mY)();return function(e,i){return t.Point}}const M=w},8751:(t,e,i)=>{"use strict";i.d(e,{A:()=>h});var n=i(6837),s=i(6292),r=i(7771),o=i(8704),a=i(1597);class l extends s.Ay{constructor(t){super(t=t||{}),this.totalDelta_=0,this.lastDelta_=0,this.maxDelta_=void 0!==t.maxDelta?t.maxDelta:1,this.duration_=void 0!==t.duration?t.duration:250,this.timeout_=void 0!==t.timeout?t.timeout:80,this.useAnchor_=void 0===t.useAnchor||t.useAnchor,this.constrainResolution_=void 0!==t.constrainResolution&&t.constrainResolution;const e=t.condition?t.condition:o.Gk;this.condition_=t.onFocusOnly?(0,o.Q7)(o.eL,e):e,this.lastAnchor_=null,this.startTime_=void 0,this.timeoutId_,this.mode_=void 0,this.trackpadEventGap_=400,this.trackpadTimeoutId_,this.deltaPerZoom_=300}endInteraction_(){this.trackpadTimeoutId_=void 0;const t=this.getMap();t&&t.getView().endInteraction(void 0,this.lastDelta_?this.lastDelta_>0?1:-1:0,this.lastAnchor_)}handleEvent(t){if(!this.condition_(t))return!0;if(t.type!==n.A.WHEEL)return!0;const e=t.map,i=t.originalEvent;let s;if(i.preventDefault(),this.useAnchor_&&(this.lastAnchor_=t.coordinate),t.type==n.A.WHEEL&&(s=i.deltaY,r._p&&i.deltaMode===WheelEvent.DOM_DELTA_PIXEL&&(s/=r.cr),i.deltaMode===WheelEvent.DOM_DELTA_LINE&&(s*=40)),0===s)return!1;this.lastDelta_=s;const o=Date.now();void 0===this.startTime_&&(this.startTime_=o),(!this.mode_||o-this.startTime_>this.trackpadEventGap_)&&(this.mode_=Math.abs(s)<4?"trackpad":"wheel");const a=e.getView();if("trackpad"===this.mode_&&!a.getConstrainResolution()&&!this.constrainResolution_)return this.trackpadTimeoutId_?clearTimeout(this.trackpadTimeoutId_):(a.getAnimating()&&a.cancelAnimations(),a.beginInteraction()),this.trackpadTimeoutId_=setTimeout(this.endInteraction_.bind(this),this.timeout_),a.adjustZoom(-s/this.deltaPerZoom_,this.lastAnchor_),this.startTime_=o,!1;this.totalDelta_+=s;const l=Math.max(this.timeout_-(o-this.startTime_),0);return clearTimeout(this.timeoutId_),this.timeoutId_=setTimeout(this.handleWheelZoom_.bind(this,e),l),!1}handleWheelZoom_(t){const e=t.getView();e.getAnimating()&&e.cancelAnimations();let i=-(0,a.qE)(this.totalDelta_,-this.maxDelta_*this.deltaPerZoom_,this.maxDelta_*this.deltaPerZoom_)/this.deltaPerZoom_;(e.getConstrainResolution()||this.constrainResolution_)&&(i=i?i>0?1:-1:0),(0,s.D2)(e,i,this.lastAnchor_,this.duration_),this.mode_=void 0,this.totalDelta_=0,this.lastAnchor_=null,this.startTime_=void 0,this.timeoutId_=void 0}setMouseAnchor(t){this.useAnchor_=t,t||(this.lastAnchor_=null)}}const h=l},3711:(t,e,i)=>{"use strict";i.d(e,{A:()=>a});var n=i(1409),s=i(4238),r=i(4498);class o extends n.A{constructor(t){const e=t=t||{};e.stopDown||(e.stopDown=s.W8),super(e),this.anchor_=null,this.lastAngle_=void 0,this.rotating_=!1,this.rotationDelta_=0,this.threshold_=void 0!==t.threshold?t.threshold:.3,this.duration_=void 0!==t.duration?t.duration:250}handleDragEvent(t){let e=0;const i=this.targetPointers[0],s=this.targetPointers[1],o=Math.atan2(s.clientY-i.clientY,s.clientX-i.clientX);if(void 0!==this.lastAngle_){const t=o-this.lastAngle_;this.rotationDelta_+=t,!this.rotating_&&Math.abs(this.rotationDelta_)>this.threshold_&&(this.rotating_=!0),e=t}this.lastAngle_=o;const a=t.map,l=a.getView();l.getConstraints().rotation!==r.b8&&(this.anchor_=a.getCoordinateFromPixelInternal(a.getEventPixel((0,n.v)(this.targetPointers))),this.rotating_&&(a.render(),l.adjustRotationInternal(e,this.anchor_)))}handleUpEvent(t){return!(this.targetPointers.length<2)||(t.map.getView().endInteraction(this.duration_),!1)}handleDownEvent(t){if(this.targetPointers.length>=2){const e=t.map;return this.anchor_=null,this.lastAngle_=void 0,this.rotating_=!1,this.rotationDelta_=0,this.handlingDownUpSequence||e.getView().beginInteraction(),!0}return!1}}const a=o},5243:(t,e,i)=>{"use strict";i.d(e,{A:()=>o});var n=i(1409),s=i(4238);class r extends n.A{constructor(t){const e=t=t||{};e.stopDown||(e.stopDown=s.W8),super(e),this.anchor_=null,this.duration_=void 0!==t.duration?t.duration:400,this.lastDistance_=void 0,this.lastScaleDelta_=1}handleDragEvent(t){let e=1;const i=this.targetPointers[0],s=this.targetPointers[1],r=i.clientX-s.clientX,o=i.clientY-s.clientY,a=Math.sqrt(r*r+o*o);void 0!==this.lastDistance_&&(e=this.lastDistance_/a),this.lastDistance_=a;const l=t.map,h=l.getView();1!=e&&(this.lastScaleDelta_=e),this.anchor_=l.getCoordinateFromPixelInternal(l.getEventPixel((0,n.v)(this.targetPointers))),l.render(),h.adjustResolutionInternal(e,this.anchor_)}handleUpEvent(t){if(this.targetPointers.length<2){const e=t.map.getView(),i=this.lastScaleDelta_>1?1:-1;return e.endInteraction(this.duration_,i),!1}return!0}handleDownEvent(t){if(this.targetPointers.length>=2){const e=t.map;return this.anchor_=null,this.lastDistance_=void 0,this.lastScaleDelta_=1,this.handlingDownUpSequence||e.getView().beginInteraction(),!0}return!1}}const o=r},1409:(t,e,i)=>{"use strict";i.d(e,{A:()=>a,v:()=>o});var n=i(6292),s=i(3445);class r extends n.Ay{constructor(t){super(t=t||{}),t.handleDownEvent&&(this.handleDownEvent=t.handleDownEvent),t.handleDragEvent&&(this.handleDragEvent=t.handleDragEvent),t.handleMoveEvent&&(this.handleMoveEvent=t.handleMoveEvent),t.handleUpEvent&&(this.handleUpEvent=t.handleUpEvent),t.stopDown&&(this.stopDown=t.stopDown),this.handlingDownUpSequence=!1,this.targetPointers=[]}getPointerCount(){return this.targetPointers.length}handleDownEvent(t){return!1}handleDragEvent(t){}handleEvent(t){if(!t.originalEvent)return!0;let e=!1;if(this.updateTrackedPointers_(t),this.handlingDownUpSequence){if(t.type==s.A.POINTERDRAG)this.handleDragEvent(t),t.originalEvent.preventDefault();else if(t.type==s.A.POINTERUP){const e=this.handleUpEvent(t);this.handlingDownUpSequence=e&&this.targetPointers.length>0}}else if(t.type==s.A.POINTERDOWN){const i=this.handleDownEvent(t);this.handlingDownUpSequence=i,e=this.stopDown(i)}else t.type==s.A.POINTERMOVE&&this.handleMoveEvent(t);return!e}handleMoveEvent(t){}handleUpEvent(t){return!1}stopDown(t){return t}updateTrackedPointers_(t){t.activePointers&&(this.targetPointers=t.activePointers)}}function o(t){const e=t.length;let i=0,n=0;for(let s=0;sn(t)<=s(t);case d.ZD.GreaterThan:return t=>n(t)>s(t);case d.ZD.GreaterThanOrEqualTo:return t=>n(t)>=s(t);default:throw new Error(`Unsupported comparison operator ${i}`)}}(t,e);case d.ZD.Multiply:case d.ZD.Divide:case d.ZD.Add:case d.ZD.Subtract:case d.ZD.Clamp:case d.ZD.Mod:case d.ZD.Pow:case d.ZD.Abs:case d.ZD.Floor:case d.ZD.Ceil:case d.ZD.Round:case d.ZD.Sin:case d.ZD.Cos:case d.ZD.Atan:case d.ZD.Sqrt:return function(t,e){const i=t.operator,n=t.args.length,s=new Array(n);for(let i=0;i0||f>0&&r;)0!==o&&(0===f||!r||n.z<=r.z)?(x=n,n=n.nextZ,o--):(x=r,r=r.nextZ,f--),i?i.nextZ=x:e=x,x.prevZ=i,i=x;n=r}i.nextZ=null,s*=2}while(u>1)}(x)}(e,r,x,i);for(var o,f,p=e;e.prev!==e.next;)if(o=e.prev,f=e.next,i?v(e,r,x,i):l(e))t.push(o.i/n|0),t.push(e.i/n|0),t.push(f.i/n|0),B(e),e=f.next,p=f.next;else if((e=f)===p){u?1===u?a(e=h(s(e),t,n),t,n,r,x,i,2):2===u&&c(e,t,n,r,x,i):a(s(e),t,n,r,x,i,1);break}}}function l(e){var t=e.prev,n=e,r=e.next;if(w(t,n,r)>=0)return!1;for(var x=t.x,i=n.x,u=r.x,o=t.y,f=n.y,s=r.y,a=xi?x>u?x:u:i>u?i:u,h=o>f?o>s?o:s:f>s?f:s,c=r.next;c!==t;){if(c.x>=a&&c.x<=v&&c.y>=l&&c.y<=h&&M(x,o,i,f,u,s,c.x,c.y)&&w(c.prev,c,c.next)>=0)return!1;c=c.next}return!0}function v(e,t,n,r){var x=e.prev,i=e,u=e.next;if(w(x,i,u)>=0)return!1;for(var o=x.x,f=i.x,s=u.x,a=x.y,l=i.y,v=u.y,h=o{const e=this.weightFunction_(t);return void 0!==e?(0,M.qE)(e,0,1):1}}],uniforms:{u_size:()=>2*(this.get(k)+this.get(F)),u_blurSlope:()=>this.get(k)/Math.max(1,this.get(F))},hitDetectionEnabled:!0,vertexShader:t.getSymbolVertexShader(),fragmentShader:t.getSymbolFragmentShader(),postProcesses:[{fragmentShader:"\n precision mediump float;\n\n uniform sampler2D u_image;\n uniform sampler2D u_gradientTexture;\n uniform float u_opacity;\n\n varying vec2 v_texCoord;\n\n void main() {\n vec4 color = texture2D(u_image, v_texCoord);\n gl_FragColor.a = color.a * u_opacity;\n gl_FragColor.rgb = texture2D(u_gradientTexture, vec2(0.5, color.a)).rgb;\n gl_FragColor.rgb *= gl_FragColor.a;\n }",uniforms:{u_gradientTexture:()=>this.gradient_,u_opacity:()=>this.getOpacity()}}]})}renderDeclutter(){}}const z=G},8044:(t,e,i)=>{"use strict";i.d(e,{A:()=>_});var n=i(764);class s extends n.A{constructor(t){super(t=t||{})}}const r=s;var o=i(6769),a=i(6141),l=i(2703),h=i(9703),c=i(915),u=i(3407);class d extends o.A{constructor(t){super(t),this.image_=null}getImage(){return this.image_?this.image_.getImage():null}prepareFrame(t){const e=t.layerStatesArray[t.layerIndex],i=t.pixelRatio,n=t.viewState,s=n.resolution,r=this.getLayer().getSource(),o=t.viewHints;let h=t.extent;if(void 0!==e.extent&&(h=(0,c._N)(h,(0,u.SD)(e.extent,n.projection))),!o[l.A.ANIMATING]&&!o[l.A.INTERACTING]&&!(0,c.Im)(h))if(r){const t=n.projection,e=r.getImage(h,s,i,t);e&&(this.loadImage(e)?this.image_=e:e.getState()===a.A.EMPTY&&(this.image_=null))}else this.image_=null;return!!this.image_}getData(t){const e=this.frameState;if(!e)return null;const i=this.getLayer(),n=(0,h.Bb)(e.pixelToCoordinateTransform,t.slice()),s=i.getExtent();if(s&&!(0,c.Ym)(s,n))return null;const r=this.image_.getExtent(),o=this.image_.getImage(),a=(0,c.RG)(r),l=Math.floor(o.width*((n[0]-r[0])/a));if(l<0||l>=o.width)return null;const u=(0,c.Oq)(r),d=Math.floor(o.height*((r[3]-n[1])/u));return d<0||d>=o.height?null:this.getImageData(o,l,d)}renderFrame(t,e){const i=this.image_,n=i.getExtent(),s=i.getResolution(),[r,o]=Array.isArray(s)?s:[s,s],a=i.getPixelRatio(),l=t.layerStatesArray[t.layerIndex],d=t.pixelRatio,g=t.viewState,_=g.center,f=g.resolution,p=d*r/(f*a),m=d*o/(f*a);this.prepareContainer(t,e);const x=this.context.canvas.width,v=this.context.canvas.height,y=this.getRenderContext(t);let E=!1,T=!0;if(l.extent){const e=(0,u.SD)(l.extent,g.projection);T=(0,c.HY)(e,t.extent),E=T&&!(0,c.ms)(e,t.extent),E&&this.clipUnrotated(y,t,e)}const A=i.getImage(),C=(0,h.Zz)(this.tempTransform,x/2,v/2,p,m,0,a*(n[0]-_[0])/r,a*(_[1]-n[3])/o);this.renderedResolution=o*d/a;const S=A.width*C[0],R=A.height*C[3];if(this.getLayer().getSource().getInterpolate()||(y.imageSmoothingEnabled=!1),this.preRender(y,t),T&&S>=.5&&R>=.5){const t=C[4],e=C[5],i=l.opacity;1!==i&&(y.save(),y.globalAlpha=i),y.drawImage(A,0,0,+A.width,+A.height,t,e,S,R),1!==i&&y.restore()}return this.postRender(this.context,t),E&&y.restore(),y.imageSmoothingEnabled=!0,this.container}}const g=d,_=class extends r{constructor(t){super(t)}createRenderer(){return new g(this)}getData(t){return super.getData(t)}}},764:(t,e,i)=>{"use strict";i.d(e,{A:()=>g,l:()=>d});var n=i(8620),s=i(6837),r=i(5332),o=i(3984),a=i(3568),l=i(588),h=i(915),c=i(9438);class u extends n.A{constructor(t){const e=Object.assign({},t);delete e.source,super(e),this.on,this.once,this.un,this.mapPrecomposeKey_=null,this.mapRenderKey_=null,this.sourceChangeKey_=null,this.renderer_=null,this.sourceReady_=!1,this.rendered=!1,t.render&&(this.render=t.render),t.map&&this.setMap(t.map),this.addChangeListener(r.A.SOURCE,this.handleSourcePropertyChange_);const i=t.source?t.source:null;this.setSource(i)}getLayersArray(t){return(t=t||[]).push(this),t}getLayerStatesArray(t){return(t=t||[]).push(this.getLayerState()),t}getSource(){return this.get(r.A.SOURCE)||null}getRenderSource(){return this.getSource()}getSourceState(){const t=this.getSource();return t?t.getState():"undefined"}handleSourceChange_(){this.changed(),this.sourceReady_||"ready"!==this.getSource().getState()||(this.sourceReady_=!0,this.dispatchEvent("sourceready"))}handleSourcePropertyChange_(){this.sourceChangeKey_&&((0,c.JH)(this.sourceChangeKey_),this.sourceChangeKey_=null),this.sourceReady_=!1;const t=this.getSource();t&&(this.sourceChangeKey_=(0,c.KT)(t,s.A.CHANGE,this.handleSourceChange_,this),"ready"===t.getState()&&(this.sourceReady_=!0,setTimeout((()=>{this.dispatchEvent("sourceready")}),0))),this.changed()}getFeatures(t){return this.renderer_?this.renderer_.getFeatures(t):Promise.resolve([])}getData(t){return this.renderer_&&this.rendered?this.renderer_.getData(t):null}isVisible(t){let e;const i=this.getMapInternal();let n;!t&&i&&(t=i.getView()),e=t instanceof a.Ay?{viewState:t.getState(),extent:t.calculateExtent()}:t,!e.layerStatesArray&&i&&(e.layerStatesArray=i.getLayerGroup().getLayerStatesArray()),n=e.layerStatesArray?e.layerStatesArray.find((t=>t.layer===this)):this.getLayerState();const s=this.getExtent();return d(n,e.viewState)&&(!s||(0,h.HY)(s,e.extent))}getAttributions(t){if(!this.isVisible(t))return[];let e;const i=this.getSource();if(i&&(e=i.getAttributions()),!e)return[];let n=e(t instanceof a.Ay?t.getViewStateAndExtent():t);return Array.isArray(n)||(n=[n]),n}render(t,e){const i=this.getRenderer();return i.prepareFrame(t)?(this.rendered=!0,i.renderFrame(t,e)):null}unrender(){this.rendered=!1}getDeclutter(){}renderDeclutter(t,e){}renderDeferred(t){const e=this.getRenderer();e&&e.renderDeferred(t)}setMapInternal(t){t||this.unrender(),this.set(r.A.MAP,t)}getMapInternal(){return this.get(r.A.MAP)}setMap(t){this.mapPrecomposeKey_&&((0,c.JH)(this.mapPrecomposeKey_),this.mapPrecomposeKey_=null),t||this.changed(),this.mapRenderKey_&&((0,c.JH)(this.mapRenderKey_),this.mapRenderKey_=null),t&&(this.mapPrecomposeKey_=(0,c.KT)(t,o.A.PRECOMPOSE,(function(t){const e=t.frameState.layerStatesArray,i=this.getLayerState(!1);(0,l.v)(!e.some((function(t){return t.layer===i.layer})),"A layer can only be added to the map once. Use either `layer.setMap()` or `map.addLayer()`, not both."),e.push(i)}),this),this.mapRenderKey_=(0,c.KT)(this,s.A.CHANGE,t.render,t),this.changed())}setSource(t){this.set(r.A.SOURCE,t)}getRenderer(){return this.renderer_||(this.renderer_=this.createRenderer()),this.renderer_}hasRenderer(){return!!this.renderer_}createRenderer(){return null}disposeInternal(){this.renderer_&&(this.renderer_.dispose(),delete this.renderer_),this.setSource(null),super.disposeInternal()}}function d(t,e){if(!t.visible)return!1;const i=e.resolution;if(i{if(t===this.squaredTolerance_)return this.simplifiedGeometry_;this.simplifiedGeometry_=this.clone(),e&&this.simplifiedGeometry_.applyTransform(e);const i=this.simplifiedGeometry_.getFlatCoordinates();let n;switch(this.type_){case"LineString":i.length=(0,r.P4)(i,0,this.simplifiedGeometry_.flatCoordinates_.length,this.simplifiedGeometry_.stride_,t,i,0),n=[i.length];break;case"MultiLineString":n=[],i.length=(0,r.AL)(i,0,this.simplifiedGeometry_.ends_,this.simplifiedGeometry_.stride_,t,i,0,n);break;case"Polygon":n=[],i.length=(0,r.Hg)(i,0,this.simplifiedGeometry_.ends_,this.simplifiedGeometry_.stride_,Math.sqrt(t),i,0,n)}return n&&(this.simplifiedGeometry_=new f(this.type_,i,n,2,this.properties_,this.id_)),this.squaredTolerance_=t,this.simplifiedGeometry_})),this}}f.prototype.getFlatCoordinates=f.prototype.getOrientedFlatCoordinates;const p=f},2826:(t,e,i)=>{"use strict";i.d(e,{A:()=>n});const n=class{drawCustom(t,e,i,n,s){}drawGeometry(t){}setStyle(t){}drawCircle(t,e,i){}drawFeature(t,e,i){}drawGeometryCollection(t,e,i){}drawLineString(t,e,i){}drawMultiLineString(t,e,i){}drawMultiPoint(t,e,i){}drawMultiPolygon(t,e,i){}drawPoint(t,e,i){}drawPolygon(t,e,i){}drawText(t,e,i){}setFillStrokeStyle(t,e){}setImageStyle(t,e){}setTextStyle(t,e){}}},8774:(t,e,i)=>{"use strict";i.d(e,{Jw:()=>L,M8:()=>m,MY:()=>p,NT:()=>f,Oq:()=>u,TA:()=>b,Tq:()=>x,ZV:()=>l,_K:()=>g,_m:()=>c,aq:()=>v,eL:()=>_,fZ:()=>C,jT:()=>I,qY:()=>h,vk:()=>d,yY:()=>y});var n=i(4120),s=i(7771),r=i(3530),o=i(8711),a=i(5176);const l="10px sans-serif",h="#000",c="round",u=[],d=0,g="round",_=10,f="#000",p="center",m="middle",x=[0,0,0,0],v=1,y=new n.A;let E,T=null;const A={},C=function(){const t="32px ",e=["monospace","serif"],i=e.length,n="wmytzilWMYTZIL@#/&?$%10";let s,o;function l(s,r,a){let l=!0;for(let h=0;hMath.max(e,w(t,i))),0);return i[e]=n,n}function I(t,e){const i=[],n=[],s=[];let r=0,o=0,a=0,l=0;for(let h=0,c=e.length;h<=c;h+=2){const u=e[h];if("\n"===u||h===c){r=Math.max(r,o),s.push(o),o=0,a+=l,l=0;continue}const d=e[h+1]||t.font,g=w(d,u);i.push(g),o+=g;const _=S(d);n.push(_),l=Math.max(l,_)}return{width:r,height:a,widths:i,heights:n,lineWidths:s}}function L(t,e,i,n,s,r,o,a,l,h,c){t.save(),1!==i&&(void 0===t.globalAlpha?t.globalAlpha=t=>t.globalAlpha*=i:t.globalAlpha*=i),e&&t.transform.apply(t,e),n.contextInstructions?(t.translate(l,h),t.scale(c[0],c[1]),function(t,e){const i=t.contextInstructions;for(let t=0,n=i.length;t{const i=e.getState();if(i!==o.A.IDLE&&i!==o.A.LOADING)return;t++;const n=(0,d.KT)(e,r.A.CHANGE,(function(){const i=e.getState();i!=o.A.LOADED&&i!=o.A.ERROR&&i!=o.A.EMPTY||((0,d.JH)(n),t--,0===t&&(this.unlistenSources_(),this.reproject_()))}),this);this.sourcesListenerKeys_.push(n)})),0===t?setTimeout(this.reproject_.bind(this),0):this.sourceTiles_.forEach((function({tile:t}){t.getState()==o.A.IDLE&&t.load()}))}unlistenSources_(){this.sourcesListenerKeys_.forEach(d.JH),this.sourcesListenerKeys_=null}}const _=g},7404:(t,e,i)=>{"use strict";i.d(e,{A:()=>_});var n=i(3101),s=i(6837),r=i(8143),o=i(1078),a=i(2913),l=i(3513),h=i(1597),c=i(915),u=i(9438),d=i(8711);class g extends r.A{constructor(t,e,i,s,r,u,d,g,_,f,p,m){super(r,o.A.IDLE,m),this.renderEdges_=void 0!==p&&p,this.pixelRatio_=d,this.gutter_=g,this.canvas_=null,this.sourceTileGrid_=e,this.targetTileGrid_=s,this.wrappedTileCoord_=u||r,this.sourceTiles_=[],this.sourcesListenerKeys_=null,this.sourceZ_=0,this.clipExtent_=t.canWrapX()?t.getExtent():void 0;const x=s.getTileCoordExtent(this.wrappedTileCoord_),v=this.targetTileGrid_.getExtent();let y=this.sourceTileGrid_.getExtent();const E=v?(0,c._N)(x,v):x;if(0===(0,c.UG)(E))return void(this.state=o.A.EMPTY);const T=t.getExtent();T&&(y=y?(0,c._N)(y,T):T);const A=s.getResolution(this.wrappedTileCoord_[0]),C=(0,l.aY)(t,i,E,A);if(!isFinite(C)||C<=0)return void(this.state=o.A.EMPTY);const S=void 0!==f?f:n.l;if(this.triangulation_=new a.A(t,i,E,y,C*S,A),0===this.triangulation_.getTriangles().length)return void(this.state=o.A.EMPTY);this.sourceZ_=e.getZForResolution(C);let R=this.triangulation_.calculateSourceExtent();if(y&&(t.canWrapX()?(R[1]=(0,h.qE)(R[1],y[1],y[3]),R[3]=(0,h.qE)(R[3],y[1],y[3])):R=(0,c._N)(R,y)),(0,c.UG)(R)){let i=0,n=0;t.canWrapX()&&(i=(0,c.RG)(T),n=Math.floor((R[0]-T[0])/i)),(0,c.QJ)(R.slice(),t,!0).forEach((t=>{const s=e.getTileRangeForExtentAndZ(t,this.sourceZ_);for(let t=s.minX;t<=s.maxX;t++)for(let e=s.minY;e<=s.maxY;e++){const s=_(this.sourceZ_,t,e,d);if(s){const t=n*i;this.sourceTiles_.push({tile:s,offset:t})}}++n})),0===this.sourceTiles_.length&&(this.state=o.A.EMPTY)}else this.state=o.A.EMPTY}getImage(){return this.canvas_}reproject_(){const t=[];if(this.sourceTiles_.forEach((e=>{const i=e.tile;if(i&&i.getState()==o.A.LOADED){const n=this.sourceTileGrid_.getTileCoordExtent(i.tileCoord);n[0]+=e.offset,n[2]+=e.offset;const s=this.clipExtent_?.slice();s&&(s[0]+=e.offset,s[2]+=e.offset),t.push({extent:n,clipExtent:s,image:i.getImage()})}})),this.sourceTiles_.length=0,0===t.length)this.state=o.A.ERROR;else{const e=this.wrappedTileCoord_[0],i=this.targetTileGrid_.getTileSize(e),n="number"==typeof i?i:i[0],s="number"==typeof i?i:i[1],r=this.targetTileGrid_.getResolution(e),a=this.sourceTileGrid_.getResolution(this.sourceZ_),h=this.targetTileGrid_.getTileCoordExtent(this.wrappedTileCoord_);this.canvas_=(0,l.XX)(n,s,this.pixelRatio_,a,this.sourceTileGrid_.getExtent(),r,h,this.triangulation_,t,this.gutter_,this.renderEdges_,this.interpolate),this.state=o.A.LOADED}this.changed()}load(){if(this.state==o.A.IDLE){this.state=o.A.LOADING,this.changed();let t=0;this.sourcesListenerKeys_=[],this.sourceTiles_.forEach((({tile:e})=>{const i=e.getState();if(i==o.A.IDLE||i==o.A.LOADING){t++;const i=(0,u.KT)(e,s.A.CHANGE,(function(n){const s=e.getState();s!=o.A.LOADED&&s!=o.A.ERROR&&s!=o.A.EMPTY||((0,u.JH)(i),t--,0===t&&(this.unlistenSources_(),this.reproject_()))}),this);this.sourcesListenerKeys_.push(i)}})),0===t?setTimeout(this.reproject_.bind(this),0):this.sourceTiles_.forEach((function({tile:t},e,i){t.getState()==o.A.IDLE&&t.load()}))}}unlistenSources_(){this.sourcesListenerKeys_.forEach(u.JH),this.sourcesListenerKeys_=null}release(){this.canvas_&&((0,d.Yg)(this.canvas_.getContext("2d")),l.BV.push(this.canvas_),this.canvas_=null),super.release()}}const _=g},2913:(t,e,i)=>{"use strict";i.d(e,{A:()=>o});var n=i(915),s=i(3407),r=i(1597);const o=class{constructor(t,e,i,r,o,a){this.sourceProj_=t,this.targetProj_=e;let l={};const h=(0,s.RG)(this.targetProj_,this.sourceProj_);this.transformInv_=function(t){const e=t[0]+"/"+t[1];return l[e]||(l[e]=h(t)),l[e]},this.maxSourceExtent_=r,this.errorThresholdSquared_=o*o,this.triangles_=[],this.wrapsXInSource_=!1,this.canWrapXInSource_=this.sourceProj_.canWrapX()&&!!r&&!!this.sourceProj_.getExtent()&&(0,n.RG)(r)>=(0,n.RG)(this.sourceProj_.getExtent()),this.sourceWorldWidth_=this.sourceProj_.getExtent()?(0,n.RG)(this.sourceProj_.getExtent()):null,this.targetWorldWidth_=this.targetProj_.getExtent()?(0,n.RG)(this.targetProj_.getExtent()):null;const c=(0,n.Py)(i),u=(0,n.WU)(i),d=(0,n.k_)(i),g=(0,n.R)(i),_=this.transformInv_(c),f=this.transformInv_(u),p=this.transformInv_(d),m=this.transformInv_(g),x=10+(a?Math.max(0,Math.ceil(Math.log2((0,n.UG)(i)/(a*a*256*256)))):0);if(this.addQuad_(c,u,d,g,_,f,p,m,x),this.wrapsXInSource_){let t=1/0;this.triangles_.forEach((function(e,i,n){t=Math.min(t,e.source[0][0],e.source[1][0],e.source[2][0])})),this.triangles_.forEach((e=>{if(Math.max(e.source[0][0],e.source[1][0],e.source[2][0])-t>this.sourceWorldWidth_/2){const i=[[e.source[0][0],e.source[0][1]],[e.source[1][0],e.source[1][1]],[e.source[2][0],e.source[2][1]]];i[0][0]-t>this.sourceWorldWidth_/2&&(i[0][0]-=this.sourceWorldWidth_),i[1][0]-t>this.sourceWorldWidth_/2&&(i[1][0]-=this.sourceWorldWidth_),i[2][0]-t>this.sourceWorldWidth_/2&&(i[2][0]-=this.sourceWorldWidth_);const n=Math.min(i[0][0],i[1][0],i[2][0]);Math.max(i[0][0],i[1][0],i[2][0])-n{"use strict";i.d(e,{A:()=>r});var n=i(6936);class s extends n.A{constructor(t){super({points:1/0,fill:(t=t||{radius:5}).fill,radius:t.radius,stroke:t.stroke,scale:void 0!==t.scale?t.scale:1,rotation:void 0!==t.rotation?t.rotation:0,rotateWithView:void 0!==t.rotateWithView&&t.rotateWithView,displacement:void 0!==t.displacement?t.displacement:[0,0],declutterMode:t.declutterMode})}clone(){const t=this.getScale(),e=new s({fill:this.getFill()?this.getFill().clone():void 0,stroke:this.getStroke()?this.getStroke().clone():void 0,radius:this.getRadius(),scale:Array.isArray(t)?t.slice():t,rotation:this.getRotation(),rotateWithView:this.getRotateWithView(),displacement:this.getDisplacement().slice(),declutterMode:this.getDeclutterMode()});return e.setOpacity(this.getOpacity()),e}setRadius(t){this.radius_=t,this.render()}}const r=s},3628:(t,e,i)=>{"use strict";i.d(e,{A:()=>o});var n=i(6141),s=i(7907);class r{constructor(t){t=t||{},this.patternImage_=null,this.color_=null,void 0!==t.color&&this.setColor(t.color)}clone(){const t=this.getColor();return new r({color:Array.isArray(t)?t.slice():t||void 0})}getColor(){return this.color_}setColor(t){if(null!==t&&"object"==typeof t&&"src"in t){const e=(0,s.J)(null,t.src,"anonymous",void 0,t.offset?null:t.color?t.color:null,!(t.offset&&t.size));e.ready().then((()=>{this.patternImage_=null})),e.getImageState()===n.A.IDLE&&e.load(),e.getImageState()===n.A.LOADING&&(this.patternImage_=e)}this.color_=t}loading(){return!!this.patternImage_}ready(){return this.patternImage_?this.patternImage_.ready():Promise.resolve()}}const o=r},9700:(t,e,i)=>{"use strict";i.d(e,{A:()=>d});var n=i(6837),s=i(6141),r=i(940),o=i(3730),a=i(588),l=i(7907),h=i(4087);function c(t,e,i,n){return void 0!==i&&void 0!==n?[i/t,n/e]:void 0!==i?i/t:void 0!==n?n/e:1}class u extends r.A{constructor(t){const e=void 0!==(t=t||{}).opacity?t.opacity:1,i=void 0!==t.rotation?t.rotation:0,n=void 0!==t.scale?t.scale:1,r=void 0!==t.rotateWithView&&t.rotateWithView;super({opacity:e,rotation:i,scale:n,displacement:void 0!==t.displacement?t.displacement:[0,0],rotateWithView:r,declutterMode:t.declutterMode}),this.anchor_=void 0!==t.anchor?t.anchor:[.5,.5],this.normalizedAnchor_=null,this.anchorOrigin_=void 0!==t.anchorOrigin?t.anchorOrigin:"top-left",this.anchorXUnits_=void 0!==t.anchorXUnits?t.anchorXUnits:"fraction",this.anchorYUnits_=void 0!==t.anchorYUnits?t.anchorYUnits:"fraction",this.crossOrigin_=void 0!==t.crossOrigin?t.crossOrigin:null;const u=void 0!==t.img?t.img:null;let d,g=t.src;if((0,a.v)(!(void 0!==g&&u),"`image` and `src` cannot be provided at the same time"),void 0!==g&&0!==g.length||!u||(g=u.src||(0,h.v6)(u)),(0,a.v)(void 0!==g&&g.length>0,"A defined and non-empty `src` or `image` must be provided"),(0,a.v)(!((void 0!==t.width||void 0!==t.height)&&void 0!==t.scale),"`width` or `height` cannot be provided together with `scale`"),void 0!==t.src?d=s.A.IDLE:void 0!==u&&(d="complete"in u?u.complete?u.src?s.A.LOADED:s.A.IDLE:s.A.LOADING:s.A.LOADED),this.color_=void 0!==t.color?(0,o._j)(t.color):null,this.iconImage_=(0,l.J)(u,g,this.crossOrigin_,d,this.color_),this.offset_=void 0!==t.offset?t.offset:[0,0],this.offsetOrigin_=void 0!==t.offsetOrigin?t.offsetOrigin:"top-left",this.origin_=null,this.size_=void 0!==t.size?t.size:null,void 0!==t.width||void 0!==t.height){let e,i;if(t.size)[e,i]=t.size;else{const n=this.getImage(1);if(n.width&&n.height)e=n.width,i=n.height;else if(n instanceof HTMLImageElement){this.initialOptions_=t;const e=()=>{if(this.unlistenImageChange(e),!this.initialOptions_)return;const i=this.iconImage_.getSize();this.setScale(c(i[0],i[1],t.width,t.height))};return void this.listenImageChange(e)}}void 0!==e&&this.setScale(c(e,i,t.width,t.height))}}clone(){let t,e,i;return this.initialOptions_?(e=this.initialOptions_.width,i=this.initialOptions_.height):(t=this.getScale(),t=Array.isArray(t)?t.slice():t),new u({anchor:this.anchor_.slice(),anchorOrigin:this.anchorOrigin_,anchorXUnits:this.anchorXUnits_,anchorYUnits:this.anchorYUnits_,color:this.color_&&this.color_.slice?this.color_.slice():this.color_||void 0,crossOrigin:this.crossOrigin_,offset:this.offset_.slice(),offsetOrigin:this.offsetOrigin_,opacity:this.getOpacity(),rotateWithView:this.getRotateWithView(),rotation:this.getRotation(),scale:t,width:e,height:i,size:null!==this.size_?this.size_.slice():void 0,src:this.getSrc(),displacement:this.getDisplacement().slice(),declutterMode:this.getDeclutterMode()})}getAnchor(){let t=this.normalizedAnchor_;if(!t){t=this.anchor_;const e=this.getSize();if("fraction"==this.anchorXUnits_||"fraction"==this.anchorYUnits_){if(!e)return null;t=this.anchor_.slice(),"fraction"==this.anchorXUnits_&&(t[0]*=e[0]),"fraction"==this.anchorYUnits_&&(t[1]*=e[1])}if("top-left"!=this.anchorOrigin_){if(!e)return null;t===this.anchor_&&(t=this.anchor_.slice()),"top-right"!=this.anchorOrigin_&&"bottom-right"!=this.anchorOrigin_||(t[0]=-t[0]+e[0]),"bottom-left"!=this.anchorOrigin_&&"bottom-right"!=this.anchorOrigin_||(t[1]=-t[1]+e[1])}this.normalizedAnchor_=t}const e=this.getDisplacement(),i=this.getScaleArray();return[t[0]-e[0]/i[0],t[1]+e[1]/i[1]]}setAnchor(t){this.anchor_=t,this.normalizedAnchor_=null}getColor(){return this.color_}getImage(t){return this.iconImage_.getImage(t)}getPixelRatio(t){return this.iconImage_.getPixelRatio(t)}getImageSize(){return this.iconImage_.getSize()}getImageState(){return this.iconImage_.getImageState()}getHitDetectionImage(){return this.iconImage_.getHitDetectionImage()}getOrigin(){if(this.origin_)return this.origin_;let t=this.offset_;if("top-left"!=this.offsetOrigin_){const e=this.getSize(),i=this.iconImage_.getSize();if(!e||!i)return null;t=t.slice(),"top-right"!=this.offsetOrigin_&&"bottom-right"!=this.offsetOrigin_||(t[0]=i[0]-e[0]-t[0]),"bottom-left"!=this.offsetOrigin_&&"bottom-right"!=this.offsetOrigin_||(t[1]=i[1]-e[1]-t[1])}return this.origin_=t,this.origin_}getSrc(){return this.iconImage_.getSrc()}getSize(){return this.size_?this.size_:this.iconImage_.getSize()}getWidth(){const t=this.getScaleArray();return this.size_?this.size_[0]*t[0]:this.iconImage_.getImageState()==s.A.LOADED?this.iconImage_.getSize()[0]*t[0]:void 0}getHeight(){const t=this.getScaleArray();return this.size_?this.size_[1]*t[1]:this.iconImage_.getImageState()==s.A.LOADED?this.iconImage_.getSize()[1]*t[1]:void 0}setScale(t){delete this.initialOptions_,super.setScale(t)}listenImageChange(t){this.iconImage_.addEventListener(n.A.CHANGE,t)}load(){this.iconImage_.load()}unlistenImageChange(t){this.iconImage_.removeEventListener(n.A.CHANGE,t)}ready(){return this.iconImage_.ready()}}const d=u},7907:(t,e,i)=>{"use strict";i.d(e,{J:()=>d});var n=i(9332),s=i(6837),r=i(6141),o=i(3730),a=i(8711),l=i(3938),h=i(2241);let c=null;class u extends n.A{constructor(t,e,i,n,s){super(),this.hitDetectionImage_=null,this.image_=t,this.crossOrigin_=i,this.canvas_={},this.color_=s,this.imageState_=void 0===n?r.A.IDLE:n,this.size_=t&&t.width&&t.height?[t.width,t.height]:null,this.src_=e,this.tainted_,this.ready_=null}initializeImage_(){this.image_=new Image,null!==this.crossOrigin_&&(this.image_.crossOrigin=this.crossOrigin_)}isTainted_(){if(void 0===this.tainted_&&this.imageState_===r.A.LOADED){c||(c=(0,a.Y)(1,1,void 0,{willReadFrequently:!0})),c.drawImage(this.image_,0,0);try{c.getImageData(0,0,1,1),this.tainted_=!1}catch(t){c=null,this.tainted_=!0}}return!0===this.tainted_}dispatchChangeEvent_(){this.dispatchEvent(s.A.CHANGE)}handleImageError_(){this.imageState_=r.A.ERROR,this.dispatchChangeEvent_()}handleImageLoad_(){this.imageState_=r.A.LOADED,this.size_=[this.image_.width,this.image_.height],this.dispatchChangeEvent_()}getImage(t){return this.image_||this.initializeImage_(),this.replaceColor_(t),this.canvas_[t]?this.canvas_[t]:this.image_}getPixelRatio(t){return this.replaceColor_(t),this.canvas_[t]?t:1}getImageState(){return this.imageState_}getHitDetectionImage(){if(this.image_||this.initializeImage_(),!this.hitDetectionImage_)if(this.isTainted_()){const t=this.size_[0],e=this.size_[1],i=(0,a.Y)(t,e);i.fillRect(0,0,t,e),this.hitDetectionImage_=i.canvas}else this.hitDetectionImage_=this.image_;return this.hitDetectionImage_}getSize(){return this.size_}getSrc(){return this.src_}load(){if(this.imageState_===r.A.IDLE){this.image_||this.initializeImage_(),this.imageState_=r.A.LOADING;try{void 0!==this.src_&&(this.image_.src=this.src_)}catch(t){this.handleImageError_()}this.image_ instanceof HTMLImageElement&&(0,l.RA)(this.image_,this.src_).then((t=>{this.image_=t,this.handleImageLoad_()})).catch(this.handleImageError_.bind(this))}}replaceColor_(t){if(!this.color_||this.canvas_[t]||this.imageState_!==r.A.LOADED)return;const e=this.image_,i=document.createElement("canvas");i.width=Math.ceil(e.width*t),i.height=Math.ceil(e.height*t);const n=i.getContext("2d");n.scale(t,t),n.drawImage(e,0,0),n.globalCompositeOperation="multiply",n.fillStyle=(0,o.oJ)(this.color_),n.fillRect(0,0,i.width/t,i.height/t),n.globalCompositeOperation="destination-in",n.drawImage(e,0,0),this.canvas_[t]=i}ready(){return this.ready_||(this.ready_=new Promise((t=>{this.imageState_===r.A.LOADED||this.imageState_===r.A.ERROR?t():this.addEventListener(s.A.CHANGE,(function e(){this.imageState_!==r.A.LOADED&&this.imageState_!==r.A.ERROR||(this.removeEventListener(s.A.CHANGE,e),t())}))}))),this.ready_}}function d(t,e,i,n,s,r){let o=void 0===e?void 0:h.ue.get(e,i,s);return o||(o=new u(t,t&&"src"in t?t.src||void 0:e,i,n,s),h.ue.set(e,i,s,o,r)),r&&o&&!h.ue.getPattern(e,i,s)&&h.ue.set(e,i,s,o,r),o}},2241:(t,e,i)=>{"use strict";i.d(e,{ue:()=>a});var n=i(6141),s=i(3730),r=i(8711);function o(t,e,i){return e+":"+t+":"+(i?(0,s._j)(i):"null")}const a=new class{constructor(){this.cache_={},this.patternCache_={},this.cacheSize_=0,this.maxCacheSize_=32}clear(){this.cache_={},this.patternCache_={},this.cacheSize_=0}canExpireCache(){return this.cacheSize_>this.maxCacheSize_}expire(){if(this.canExpireCache()){let t=0;for(const e in this.cache_){const i=this.cache_[e];3&t++||i.hasListener()||(delete this.cache_[e],delete this.patternCache_[e],--this.cacheSize_)}}}get(t,e,i){const n=o(t,e,i);return n in this.cache_?this.cache_[n]:null}getPattern(t,e,i){const n=o(t,e,i);return n in this.patternCache_?this.patternCache_[n]:null}set(t,e,i,s,a){const l=o(t,e,i),h=l in this.cache_;this.cache_[l]=s,a&&(s.getImageState()===n.A.IDLE&&s.load(),s.getImageState()===n.A.LOADING?s.ready().then((()=>{this.patternCache_[l]=(0,r.lr)().createPattern(s.getImage(1),"repeat")})):this.patternCache_[l]=(0,r.lr)().createPattern(s.getImage(1),"repeat")),h||++this.cacheSize_}setSize(t){this.maxCacheSize_=t,this.expire()}}},940:(t,e,i)=>{"use strict";i.d(e,{A:()=>o});var n=i(4087),s=i(4401);class r{constructor(t){this.opacity_=t.opacity,this.rotateWithView_=t.rotateWithView,this.rotation_=t.rotation,this.scale_=t.scale,this.scaleArray_=(0,s.xq)(t.scale),this.displacement_=t.displacement,this.declutterMode_=t.declutterMode}clone(){const t=this.getScale();return new r({opacity:this.getOpacity(),scale:Array.isArray(t)?t.slice():t,rotation:this.getRotation(),rotateWithView:this.getRotateWithView(),displacement:this.getDisplacement().slice(),declutterMode:this.getDeclutterMode()})}getOpacity(){return this.opacity_}getRotateWithView(){return this.rotateWithView_}getRotation(){return this.rotation_}getScale(){return this.scale_}getScaleArray(){return this.scaleArray_}getDisplacement(){return this.displacement_}getDeclutterMode(){return this.declutterMode_}getAnchor(){return(0,n.b0)()}getImage(t){return(0,n.b0)()}getHitDetectionImage(){return(0,n.b0)()}getPixelRatio(t){return 1}getImageState(){return(0,n.b0)()}getImageSize(){return(0,n.b0)()}getOrigin(){return(0,n.b0)()}getSize(){return(0,n.b0)()}setDisplacement(t){this.displacement_=t}setOpacity(t){this.opacity_=t}setRotateWithView(t){this.rotateWithView_=t}setRotation(t){this.rotation_=t}setScale(t){this.scale_=t,this.scaleArray_=(0,s.xq)(t)}listenImageChange(t){(0,n.b0)()}load(){(0,n.b0)()}unlistenImageChange(t){(0,n.b0)()}ready(){return Promise.resolve()}}const o=r},6936:(t,e,i)=>{"use strict";i.d(e,{A:()=>c});var n=i(6141),s=i(940),r=i(3730),o=i(7295),a=i(8711),l=i(8774);class h extends s.A{constructor(t){super({opacity:1,rotateWithView:void 0!==t.rotateWithView&&t.rotateWithView,rotation:void 0!==t.rotation?t.rotation:0,scale:void 0!==t.scale?t.scale:1,displacement:void 0!==t.displacement?t.displacement:[0,0],declutterMode:t.declutterMode}),this.canvases_,this.hitDetectionCanvas_=null,this.fill_=void 0!==t.fill?t.fill:null,this.origin_=[0,0],this.points_=t.points,this.radius_=t.radius,this.radius2_=t.radius2,this.angle_=void 0!==t.angle?t.angle:0,this.stroke_=void 0!==t.stroke?t.stroke:null,this.size_,this.renderOptions_,this.imageState_=this.fill_&&this.fill_.loading()?n.A.LOADING:n.A.LOADED,this.imageState_===n.A.LOADING&&this.ready().then((()=>this.imageState_=n.A.LOADED)),this.render()}clone(){const t=this.getScale(),e=new h({fill:this.getFill()?this.getFill().clone():void 0,points:this.getPoints(),radius:this.getRadius(),radius2:this.getRadius2(),angle:this.getAngle(),stroke:this.getStroke()?this.getStroke().clone():void 0,rotation:this.getRotation(),rotateWithView:this.getRotateWithView(),scale:Array.isArray(t)?t.slice():t,displacement:this.getDisplacement().slice(),declutterMode:this.getDeclutterMode()});return e.setOpacity(this.getOpacity()),e}getAnchor(){const t=this.size_,e=this.getDisplacement(),i=this.getScaleArray();return[t[0]/2-e[0]/i[0],t[1]/2+e[1]/i[1]]}getAngle(){return this.angle_}getFill(){return this.fill_}setFill(t){this.fill_=t,this.render()}getHitDetectionImage(){return this.hitDetectionCanvas_||(this.hitDetectionCanvas_=this.createHitDetectionCanvas_(this.renderOptions_)),this.hitDetectionCanvas_}getImage(t){let e=this.canvases_[t];if(!e){const i=this.renderOptions_,n=(0,a.Y)(i.size*t,i.size*t);this.draw_(i,n,t),e=n.canvas,this.canvases_[t]=e}return e}getPixelRatio(t){return t}getImageSize(){return this.size_}getImageState(){return this.imageState_}getOrigin(){return this.origin_}getPoints(){return this.points_}getRadius(){return this.radius_}getRadius2(){return this.radius2_}getSize(){return this.size_}getStroke(){return this.stroke_}setStroke(t){this.stroke_=t,this.render()}listenImageChange(t){}load(){}unlistenImageChange(t){}calculateLineJoinSize_(t,e,i){if(0===e||this.points_===1/0||"bevel"!==t&&"miter"!==t)return e;let n=this.radius_,s=void 0===this.radius2_?n:this.radius2_;if(n{"use strict";i.d(e,{A:()=>s});class n{constructor(t){t=t||{},this.color_=void 0!==t.color?t.color:null,this.lineCap_=t.lineCap,this.lineDash_=void 0!==t.lineDash?t.lineDash:null,this.lineDashOffset_=t.lineDashOffset,this.lineJoin_=t.lineJoin,this.miterLimit_=t.miterLimit,this.width_=t.width}clone(){const t=this.getColor();return new n({color:Array.isArray(t)?t.slice():t||void 0,lineCap:this.getLineCap(),lineDash:this.getLineDash()?this.getLineDash().slice():void 0,lineDashOffset:this.getLineDashOffset(),lineJoin:this.getLineJoin(),miterLimit:this.getMiterLimit(),width:this.getWidth()})}getColor(){return this.color_}getLineCap(){return this.lineCap_}getLineDash(){return this.lineDash_}getLineDashOffset(){return this.lineDashOffset_}getLineJoin(){return this.lineJoin_}getMiterLimit(){return this.miterLimit_}getWidth(){return this.width_}setColor(t){this.color_=t}setLineCap(t){this.lineCap_=t}setLineDash(t){this.lineDash_=t}setLineDashOffset(t){this.lineDashOffset_=t}setLineJoin(t){this.lineJoin_=t}setMiterLimit(t){this.miterLimit_=t}setWidth(t){this.width_=t}}const s=n},9276:(t,e,i)=>{"use strict";i.d(e,{Ay:()=>g,d1:()=>c,mC:()=>l,mY:()=>u});var n=i(7733),s=i(3628),r=i(953),o=i(588);class a{constructor(t){t=t||{},this.geometry_=null,this.geometryFunction_=d,void 0!==t.geometry&&this.setGeometry(t.geometry),this.fill_=void 0!==t.fill?t.fill:null,this.image_=void 0!==t.image?t.image:null,this.renderer_=void 0!==t.renderer?t.renderer:null,this.hitDetectionRenderer_=void 0!==t.hitDetectionRenderer?t.hitDetectionRenderer:null,this.stroke_=void 0!==t.stroke?t.stroke:null,this.text_=void 0!==t.text?t.text:null,this.zIndex_=t.zIndex}clone(){let t=this.getGeometry();return t&&"object"==typeof t&&(t=t.clone()),new a({geometry:t??void 0,fill:this.getFill()?this.getFill().clone():void 0,image:this.getImage()?this.getImage().clone():void 0,renderer:this.getRenderer()??void 0,stroke:this.getStroke()?this.getStroke().clone():void 0,text:this.getText()?this.getText().clone():void 0,zIndex:this.getZIndex()})}getRenderer(){return this.renderer_}setRenderer(t){this.renderer_=t}setHitDetectionRenderer(t){this.hitDetectionRenderer_=t}getHitDetectionRenderer(){return this.hitDetectionRenderer_}getGeometry(){return this.geometry_}getGeometryFunction(){return this.geometryFunction_}getFill(){return this.fill_}setFill(t){this.fill_=t}getImage(){return this.image_}setImage(t){this.image_=t}getStroke(){return this.stroke_}setStroke(t){this.stroke_=t}getText(){return this.text_}setText(t){this.text_=t}getZIndex(){return this.zIndex_}setGeometry(t){"function"==typeof t?this.geometryFunction_=t:"string"==typeof t?this.geometryFunction_=function(e){return e.get(t)}:t?void 0!==t&&(this.geometryFunction_=function(){return t}):this.geometryFunction_=d,this.geometry_=t}setZIndex(t){this.zIndex_=t}}function l(t){let e;if("function"==typeof t)e=t;else{let i;Array.isArray(t)?i=t:((0,o.v)("function"==typeof t.getZIndex,"Expected an `Style` or an array of `Style`"),i=[t]),e=function(){return i}}return e}let h=null;function c(t,e){if(!h){const t=new s.A({color:"rgba(255,255,255,0.4)"}),e=new r.A({color:"#3399CC",width:1.25});h=[new a({image:new n.A({fill:t,stroke:e,radius:5}),fill:t,stroke:e})]}return h}function u(){const t={},e=[255,255,255,1],i=[0,153,255,1];return t.Polygon=[new a({fill:new s.A({color:[255,255,255,.5]})})],t.MultiPolygon=t.Polygon,t.LineString=[new a({stroke:new r.A({color:e,width:5})}),new a({stroke:new r.A({color:i,width:3})})],t.MultiLineString=t.LineString,t.Circle=t.Polygon.concat(t.LineString),t.Point=[new a({image:new n.A({radius:6,fill:new s.A({color:i}),stroke:new r.A({color:e,width:1.5})}),zIndex:1/0})],t.MultiPoint=t.Point,t.GeometryCollection=t.Polygon.concat(t.LineString,t.Point),t}function d(t){return t.getGeometry()}const g=a},1426:(t,e,i)=>{"use strict";i.d(e,{A:()=>o});var n=i(3628),s=i(4401);class r{constructor(t){t=t||{},this.font_=t.font,this.rotation_=t.rotation,this.rotateWithView_=t.rotateWithView,this.scale_=t.scale,this.scaleArray_=(0,s.xq)(void 0!==t.scale?t.scale:1),this.text_=t.text,this.textAlign_=t.textAlign,this.justify_=t.justify,this.repeat_=t.repeat,this.textBaseline_=t.textBaseline,this.fill_=void 0!==t.fill?t.fill:new n.A({color:"#333"}),this.maxAngle_=void 0!==t.maxAngle?t.maxAngle:Math.PI/4,this.placement_=void 0!==t.placement?t.placement:"point",this.overflow_=!!t.overflow,this.stroke_=void 0!==t.stroke?t.stroke:null,this.offsetX_=void 0!==t.offsetX?t.offsetX:0,this.offsetY_=void 0!==t.offsetY?t.offsetY:0,this.backgroundFill_=t.backgroundFill?t.backgroundFill:null,this.backgroundStroke_=t.backgroundStroke?t.backgroundStroke:null,this.padding_=void 0===t.padding?null:t.padding,this.declutterMode_=t.declutterMode}clone(){const t=this.getScale();return new r({font:this.getFont(),placement:this.getPlacement(),repeat:this.getRepeat(),maxAngle:this.getMaxAngle(),overflow:this.getOverflow(),rotation:this.getRotation(),rotateWithView:this.getRotateWithView(),scale:Array.isArray(t)?t.slice():t,text:this.getText(),textAlign:this.getTextAlign(),justify:this.getJustify(),textBaseline:this.getTextBaseline(),fill:this.getFill()?this.getFill().clone():void 0,stroke:this.getStroke()?this.getStroke().clone():void 0,offsetX:this.getOffsetX(),offsetY:this.getOffsetY(),backgroundFill:this.getBackgroundFill()?this.getBackgroundFill().clone():void 0,backgroundStroke:this.getBackgroundStroke()?this.getBackgroundStroke().clone():void 0,padding:this.getPadding()||void 0,declutterMode:this.getDeclutterMode()})}getOverflow(){return this.overflow_}getFont(){return this.font_}getMaxAngle(){return this.maxAngle_}getPlacement(){return this.placement_}getRepeat(){return this.repeat_}getOffsetX(){return this.offsetX_}getOffsetY(){return this.offsetY_}getFill(){return this.fill_}getRotateWithView(){return this.rotateWithView_}getRotation(){return this.rotation_}getScale(){return this.scale_}getScaleArray(){return this.scaleArray_}getStroke(){return this.stroke_}getText(){return this.text_}getTextAlign(){return this.textAlign_}getJustify(){return this.justify_}getTextBaseline(){return this.textBaseline_}getBackgroundFill(){return this.backgroundFill_}getBackgroundStroke(){return this.backgroundStroke_}getPadding(){return this.padding_}getDeclutterMode(){return this.declutterMode_}setOverflow(t){this.overflow_=t}setFont(t){this.font_=t}setMaxAngle(t){this.maxAngle_=t}setOffsetX(t){this.offsetX_=t}setOffsetY(t){this.offsetY_=t}setPlacement(t){this.placement_=t}setRepeat(t){this.repeat_=t}setRotateWithView(t){this.rotateWithView_=t}setFill(t){this.fill_=t}setRotation(t){this.rotation_=t}setScale(t){this.scale_=t,this.scaleArray_=(0,s.xq)(void 0!==t?t:1)}setStroke(t){this.stroke_=t}setText(t){this.text_=t}setTextAlign(t){this.textAlign_=t}setJustify(t){this.justify_=t}setTextBaseline(t){this.textBaseline_=t}setBackgroundFill(t){this.backgroundFill_=t}setBackgroundStroke(t){this.backgroundStroke_=t}setPadding(t){this.padding_=t}}const o=r},186:(t,e,i)=>{"use strict";function n(t,e,i,n){return void 0!==n?(n[0]=t,n[1]=e,n[2]=i,n):[t,e,i]}function s(t,e,i){return t+"/"+e+"/"+i}function r(t){return s(t[0],t[1],t[2])}function o(t){const[e,i,n]=t.substring(t.lastIndexOf("/")+1,t.length).split(",").map(Number);return s(e,i,n)}function a(t){return t.split("/").map(Number)}function l(t){return(t[1]<{if(i="function"==typeof s.value?s.value(t):s.value,i instanceof HTMLCanvasElement||i instanceof HTMLImageElement||i instanceof ImageData||i instanceof WebGLTexture){i instanceof WebGLTexture&&!s.texture?(s.prevValue=void 0,s.texture=i):s.texture||(s.prevValue=void 0,s.texture=e.createTexture()),this.bindTexture(s.texture,n,s.name),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE);const t=!(i instanceof HTMLImageElement)||i.complete;i instanceof WebGLTexture||!t||s.prevValue===i||(s.prevValue=i,e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,i)),n++}else if(Array.isArray(i)&&6===i.length)this.setUniformMatrixValue(s.name,(0,u.Z)(this.tmpMat4_,i));else if(Array.isArray(i)&&i.length<=4)switch(i.length){case 2:return void e.uniform2f(this.getUniformLocation(s.name),i[0],i[1]);case 3:return void e.uniform3f(this.getUniformLocation(s.name),i[0],i[1],i[2]);case 4:return void e.uniform4f(this.getUniformLocation(s.name),i[0],i[1],i[2],i[3]);default:return}else"number"==typeof i&&e.uniform1f(this.getUniformLocation(s.name),i)}))}useProgram(t,e){this.gl_.useProgram(t),this.currentProgram_=t,this.applyFrameState(e),this.applyUniforms(e)}compileShader(t,e){const i=this.gl_,n=i.createShader(e);return i.shaderSource(n,t),i.compileShader(n),n}getProgram(t,e){const i=this.gl_,n=this.compileShader(t,i.FRAGMENT_SHADER),s=this.compileShader(e,i.VERTEX_SHADER),r=i.createProgram();if(i.attachShader(r,n),i.attachShader(r,s),i.linkProgram(r),!i.getShaderParameter(n,i.COMPILE_STATUS)){const t=`Fragment shader compilation failed: ${i.getShaderInfoLog(n)}`;throw new Error(t)}if(i.deleteShader(n),!i.getShaderParameter(s,i.COMPILE_STATUS)){const t=`Vertex shader compilation failed: ${i.getShaderInfoLog(s)}`;throw new Error(t)}if(i.deleteShader(s),!i.getProgramParameter(r,i.LINK_STATUS)){const t=`GL program linking failed: ${i.getProgramInfoLog(r)}`;throw new Error(t)}return r}getUniformLocation(t){const e=(0,o.v6)(this.currentProgram_);return void 0===this.uniformLocationsByProgram_[e]&&(this.uniformLocationsByProgram_[e]={}),void 0===this.uniformLocationsByProgram_[e][t]&&(this.uniformLocationsByProgram_[e][t]=this.gl_.getUniformLocation(this.currentProgram_,t)),this.uniformLocationsByProgram_[e][t]}getAttributeLocation(t){const e=(0,o.v6)(this.currentProgram_);return void 0===this.attribLocationsByProgram_[e]&&(this.attribLocationsByProgram_[e]={}),void 0===this.attribLocationsByProgram_[e][t]&&(this.attribLocationsByProgram_[e][t]=this.gl_.getAttribLocation(this.currentProgram_,t)),this.attribLocationsByProgram_[e][t]}makeProjectionTransform(t,e){const i=t.size,n=t.viewState.rotation,s=t.viewState.resolution,r=t.viewState.center;return(0,c.Zz)(e,0,0,2/(s*i[0]),2/(s*i[1]),-n,-r[0],-r[1]),e}setUniformFloatValue(t,e){this.gl_.uniform1f(this.getUniformLocation(t),e)}setUniformFloatVec2(t,e){this.gl_.uniform2fv(this.getUniformLocation(t),e)}setUniformFloatVec4(t,e){this.gl_.uniform4fv(this.getUniformLocation(t),e)}setUniformMatrixValue(t,e){this.gl_.uniformMatrix4fv(this.getUniformLocation(t),!1,e)}enableAttributeArray_(t,e,i,n,s){const r=this.getAttributeLocation(t);r<0||(this.gl_.enableVertexAttribArray(r),this.gl_.vertexAttribPointer(r,e,i,!1,n,s))}enableAttributes(t){const e=function(t){let e=0;for(let i=0;i