@mapgis/webclient-leaflet-plugin
Version:
3,206 lines • 148 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> leaflet/util/extend/L.markercluster.js</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/app.min.css">
<link type="text/css" rel="stylesheet" href="styles/iframe.css">
<link type="text/css" rel="stylesheet" href="">
</head>
<body class="layout small-header">
<div id="stickyNavbarOverlay"></div>
<div class="top-nav">
<div class="inner">
<a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="logo">
<h1> MapGIS Client for JavaScript API</h1>
</div>
<div class="menu">
<div class="navigation">
<a
class="link user-link "
href="/docs/cesium/index.html"
>
Cesium
</a>
<a
class="link user-link "
href="/docs/mapboxgl/index.html"
>
MapboxGL
</a>
<a
class="link user-link "
href="/docs/leaflet/index.html"
>
Leaflet
</a>
<a
class="link user-link "
href="/docs/openlayers/index.html"
>
OpenLayers
</a>
</div>
</div>
</div>
</div>
<div id="main">
<div
class="sidebar "
id="sidebarNav"
>
<div>
<span class="mapgis-api-document-span"><a href="index.html">API文档</a></span>
</div>
<div class="search-wrapper">
<input id="search" type="text" placeholder="搜索文档..." class="input">
</div>
<nav>
<div class="category"><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">服务模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="AddressServer.html">AddressServer</a><span style="display: none;"><p>地址服务，基地址：/igs/rest/services/{folder}/{serviceName}/AddressServer</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ArcGISFeatureServer.html">ArcGISFeatureServer</a><span style="display: none;"><p>ArcGIS的FeatureServer服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ArcGISGeometryServer.html">ArcGISGeometryServer</a><span style="display: none;"><p>ArcGIS的GeometryServer服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ArcGISMapServer.html">ArcGISMapServer</a><span style="display: none;"><p>ArcGIS的MapServer服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ArcGISVectorTileServer.html">ArcGISVectorTileServer</a><span style="display: none;"><p>ArcGIS的VectorTileServer服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="BaseServer.html">BaseServer</a><span style="display: none;"><p>服务查询基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Cesium3DTilesServer.html">Cesium3DTilesServer</a><span style="display: none;"><p>3DTiles服务，基地址：/igs/rest/services/{folder}/{serviceName}/3DTilesServer</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Config.html">Config</a><span style="display: none;"><p>全局配置信息<br/>
示例如下：<br/>
<a href='#config1'>[1、设置全局token]</a><br/>
<a href='#config2'>[2、设置全局headers]</a><br/>
<a href='#config3'>[3、设置拦截器 - 在所有链接上设置拦截器]</a><br/>
<a href='#config4'>[4、设置拦截器 - 指定拦截器应用的url]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="FeatureServer.html">FeatureServer</a><span style="display: none;"><p>要素服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="GeometryServer.html">GeometryServer</a><span style="display: none;"><p>地理几何服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ImageServer.html">ImageServer</a><span style="display: none;"><p>影像服务，服务地址：/igs/rest/services/{folder}/{serviceName}/ImageServer</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Interceptor.html">Interceptor</a><span style="display: none;"><p>请求拦截和相应拦截器参数</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="M3DServer.html">M3DServer</a><span style="display: none;"><p>M3d服务，服务地址:/igs/rest/services/{folder}/{serviceName}/M3dServer</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MapServer.html">MapServer</a><span style="display: none;"><p>地图服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="PlotServer.html">PlotServer</a><span style="display: none;"><p>标绘服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="PoiServer.html">PoiServer</a><span style="display: none;"><p>兴趣点服务,服务地址：/igs/rest/services/{folder}/{serviceName}/PoiServer</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="RequestConfig.html">RequestConfig</a><span style="display: none;"><p>请求配置参数</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="RequestInterceptor.html">RequestInterceptor</a><span style="display: none;"><p>请求拦截器对象</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ResourceServer.html">ResourceServer</a><span style="display: none;"><p>资源服务，基地址为http://{ip}:{port}/igs/rest/services/system/ResourceServer</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ResponseInterceptor.html">ResponseInterceptor</a><span style="display: none;"><p>响应拦截器对象</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="RootServer.html">RootServer</a><span style="display: none;"><p>根目录服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SceneServer.html">SceneServer</a><span style="display: none;"><p>场景服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SecurityServer.html">SecurityServer</a><span style="display: none;"><p>安全服务,服务地址:/igs/rest/services/SecurityServer</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="TerrainServer.html">TerrainServer</a><span style="display: none;"><p>地形缓存服务，基地址:/igs/rest/services/{folder}/{serviceName}/TerrainServer</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ThemeServer.html">ThemeServer</a><span style="display: none;"><p>专题图服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="TileServer.html">TileServer</a><span style="display: none;"><p>瓦片服务,基地址：/igs/rest/services/{folder}/{serviceName}/TileServer</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="VectorTileServer.html">VectorTileServer</a><span style="display: none;"><p>矢量瓦片服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="WFSServer.html">WFSServer</a><span style="display: none;"><p>IGS的WFS服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="WMSServer.html">WMSServer</a><span style="display: none;"><p>IGS的WMS服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="WMTSServer.html">WMTSServer</a><span style="display: none;"><p>IGS的WMTS服务</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="WorkFlowServer.html">WorkFlowServer</a><span style="display: none;"><p>工作流服务,基地址http://{ip}:{port}/igs/rest/services/workflow/{serviceName}/WorkflowServer</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">图层模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ArcGISMapImageLayer.html">ArcGISMapImageLayer</a><span style="display: none;"><p>ArcGIS地图图片图层，<br/>
目前二维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，三维上仅支持4326(包括4490，4214以及4610)以及3857坐标系，会自动读取元信息上的坐标系，不需要用户指定
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.ArcGISMapImageLayer() <br/>
[ES6引入方式]：<br/>
import { ArcGISMapImageLayer } from "@mapgis/webclient-common" <br/>
<br/>
针对图层的操作请在图层加载完毕事件中进行<br/>
Layer.on('layerview-created', function (result) {<br/>
console.log("加载完毕:", result.layer)<br/>
});<br/>
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作<br/>
if(layer.loadStatus === 'loaded') {<br/>
// 你的业务逻辑<br/>
}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ArcGISMapImageSubLayer.html">ArcGISMapImageSubLayer</a><span style="display: none;"><p>ArcGIS地图图片子图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ArcGISTileLayer.html">ArcGISTileLayer</a><span style="display: none;"><p>ArcGIS瓦片图层，<br>
目前二维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，三维上仅支持4326(包括4490，4214以及4610)以及3857坐标系，会自动读取元信息上的坐标系，不需要用户指定，
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.ArcGISTileLayer() <br/>
[ES6引入方式]：<br/>
import { ArcGISTileLayer } from "@mapgis/webclient-common" <br/>
<br/>
针对图层的操作请在图层加载完毕事件中进行<br/>
Layer.on('layerview-created', function (result) {<br/>
console.log("加载完毕:", result.layer)<br/>
});<br/>
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作<br/>
if(layer.loadStatus === 'loaded') {<br/>
// 你的业务逻辑<br/>
}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Cesium3DTilesCacheLayer.html">Cesium3DTilesCacheLayer</a><span style="display: none;"><p>Cesium3DTiles图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="EchartsLayer.html">EchartsLayer</a><span style="display: none;"><p>Echarts图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="FeatureLayer.html">FeatureLayer</a><span style="display: none;"><p>要素图层基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="GeoJSONLayer.html">GeoJSONLayer</a><span style="display: none;"><p>geojson图层，仅支持文件服务<br/>
目前二维和三维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，若是想要绘制源数据为非4326坐标系几何数据，需要在初始化时指定具体坐标系<br/>
参考示例：<br/>
<a href='#add-GeoJSONLayer'>[加载GeoJSON图层]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.GraphicsLayer() <br/>
[ES6引入方式]：<br/>
import { GraphicsLayer } from "@mapgis/webclient-common"</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="GraphicsLayer.html">GraphicsLayer</a><span style="display: none;"><p>几何图形图层，不支持在线数据，仅支持传入多个几何对象并绘制<br/>
目前二维和三维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，若是想要绘制非4326坐标系几何，需要在初始化要素对象的几何时，指定具体坐标系
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.GraphicsLayer() <br/>
[ES6引入方式]：<br/>
import { GraphicsLayer } from "@mapgis/webclient-common" <br/>
<br/>
针对图层的操作请在图层加载完毕事件中进行<br/>
Layer.on('layerview-created', function (result) {<br/>
console.log("加载完毕:", result.layer)<br/>
});<br/>
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作<br/>
if(layer.loadStatus === 'loaded') {<br/>
// 你的业务逻辑<br/>
}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="GroupLayer.html">GroupLayer</a><span style="display: none;"><p>组图层，支持的图层类型有：WMS图层、WMTS图层、地图图层、瓦片图层、cesium3DTiles图层、echarts图层、
M3D图层、场景图层、矢量瓦片图层、mapv图层、地形图层
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.GroupLayer() <br/>
[ES6引入方式]：<br/>
import { GroupLayer } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IGSFeatureLayer.html">IGSFeatureLayer</a><span style="display: none;"><p>IGS要素图层，<br>
目前二维和三维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，要素服务会自动读取元信息上的坐标系，不需要用户指定
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.IGSFeatureLayer() <br/>
[ES6引入方式]：<br/>
import { IGSFeatureLayer } from "@mapgis/webclient-common" <br/>
<br/>
针对图层的操作请在图层加载完毕事件中进行<br/>
Layer.on('layerview-created', function (result) {<br/>
console.log("加载完毕:", result.layer)<br/>
});<br/>
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作<br/>
if(layer.loadStatus === 'loaded') {<br/>
// 你的业务逻辑<br/>
}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IGSImageLayer.html">IGSImageLayer</a><span style="display: none;"><p>IGS影像图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IGSMapImageLayer.html">IGSMapImageLayer</a><span style="display: none;"><p>IGS地图图片图层，<br/>
支持IGS1.0和2.0两个服务版本，支持自定义坐标系，当IGS版本是1.0时，需要手动设置图层坐标系，当IGS版本是2.0时，会自动读取元信息上的坐标系，不需要用户指定<br/>
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.IGSMapImageLayer() <br/>
[ES6引入方式]：<br/>
import { IGSMapImageLayer } from "@mapgis/webclient-common" <br/>
<br/>
针对图层的操作请在图层加载完毕事件中进行<br/>
Layer.on('layerview-created', function (result) {<br/>
console.log("加载完毕:", result.layer)<br/>
});<br/>
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作<br/>
if(layer.loadStatus === 'loaded') {<br/>
// 你的业务逻辑<br/>
}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IGSMapImageSubLayer.html">IGSMapImageSubLayer</a><span style="display: none;"><p>IGS地图图片图层的子图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IGSSceneLayer.html">IGSSceneLayer</a><span style="display: none;"><p>IGS的SceneLayer图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IGSSceneSubLayer.html">IGSSceneSubLayer</a><span style="display: none;"><p>IGS的SceneLayer子图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IGSTileLayer.html">IGSTileLayer</a><span style="display: none;"><p>IGS瓦片图层，<br>
支持IGS1.0和2.0两个服务版本，支持自定义坐标系，当IGS版本是1.0时，需要手动设置图层坐标系，当IGS版本是2.0时，会自动读取元信息上的坐标系，不需要用户指定，
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.IGSTileLayer() <br/>
[ES6引入方式]：<br/>
import { IGSTileLayer } from "@mapgis/webclient-common" <br/>
<br/>
针对图层的操作请在图层加载完毕事件中进行<br/>
Layer.on('layerview-created', function (result) {<br/>
console.log("加载完毕:", result.layer)<br/>
});<br/>
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作<br/>
if(layer.loadStatus === 'loaded') {<br/>
// 你的业务逻辑<br/>
}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IGSVectorTileLayer.html">IGSVectorTileLayer</a><span style="display: none;"><p>IGS矢量瓦片图层
支持IGS1.0和2.0两个服务版本，目前二维和三维上支持4326(包括4490，4214以及4610)，3857，会自动读取元信息上的坐标系，不需要用户指定，
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.IGSVectorTileLayer() <br/>
[ES6引入方式]：<br/>
import { IGSVectorTileLayer } from "@mapgis/webclient-common" <br/>
<br/>
针对图层的操作请在图层加载完毕事件中进行<br/>
Layer.on('layerview-created', function (result) {<br/>
console.log("加载完毕:", result.layer)<br/>
});<br/>
如果不想在该事件中放入业务代码，则请确认图层资源以加载完毕后再进行操作<br/>
if(layer.loadStatus === 'loaded') {<br/>
// 你的业务逻辑<br/>
}
<br/>
<br/>
注意:三维上,不支持简单Marker样式设定;二维上,简单Marker的颜色,外边线样式,旋转角度无法在图层初始化和初始化后修改,须在制作数据时进行指定</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IGSVectorTileSubLayer.html">IGSVectorTileSubLayer</a><span style="display: none;"><p>IGS矢量瓦片子图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Layer.html">Layer</a><span style="display: none;"><p>图层基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="M3DModelCacheLayer.html">M3DModelCacheLayer</a><span style="display: none;"><p>M3D缓存图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MapImageLayer.html">MapImageLayer</a><span style="display: none;"><p>影像图层基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MapVLayer.html">MapVLayer</a><span style="display: none;"><p>MapV图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="OGCLayer.html">OGCLayer</a><span style="display: none;"><p>OGS图层基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="OverlayLayer.html">OverlayLayer</a><span style="display: none;"><p>覆盖物图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Scene.html">Scene</a><span style="display: none;"><p>场景对象</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SceneLayer.html">SceneLayer</a><span style="display: none;"><p>场景图层基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SubLayer.html">SubLayer</a><span style="display: none;"><p>子图层基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="TerrainCacheLayer.html">TerrainCacheLayer</a><span style="display: none;"><p>地形图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="TileLayer.html">TileLayer</a><span style="display: none;"><p>瓦片图层基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="UnknownLayer.html">UnknownLayer</a><span style="display: none;"><p>未定义图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="VectorTileLayer.html">VectorTileLayer</a><span style="display: none;"><p>图层基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="WFSLayer.html">WFSLayer</a><span style="display: none;"><p>WFS图层，<br>
目前二维和三维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，WFS服务会自动读取元信息上的坐标系，不需要用户指定
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.WMTSLayer() <br/>
[ES6引入方式]：<br/>
import { WMTSLayer } from "@mapgis/webclient-common" <br/>
<br/>
针对图层的操作请在图层加载完毕事件中进行<br/>
Layer.on('layerview-created', function (result) {<br/>
console.log("加载完毕:", result.layer)<br/>
});<br/>
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作<br/>
if(layer.loadStatus === 'loaded') {<br/>
// 你的业务逻辑<br/>
}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="WMSLayer.html">WMSLayer</a><span style="display: none;"><p>WMS图层，<br/>
目前二维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，三维上仅支持4326(包括4490，4214以及4610)以及3857坐标系，会自动读取元信息上的坐标系，不需要用户指定，同时所有的WMS服务都支持动态投影，用户也可指定任意该服务支持的坐标系<br/>
<br>[ES5引入方式]：<br/>
Zondy.Layer.WMSLayer() <br/>
[ES6引入方式]：<br/>
import { WMSLayer } from "@mapgis/webclient-common" <br/>
<br/>
针对图层的操作请在图层加载完毕事件中进行<br/>
Layer.on('layerview-created', function (result) {<br/>
console.log("加载完毕:", result.layer)<br/>
});<br/>
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作<br/>
if(layer.loadStatus === 'loaded') {<br/>
// 你的业务逻辑<br/>
}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="WMSSubLayer.html">WMSSubLayer</a><span style="display: none;"><p>WMS子图层</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="WMTSLayer.html">WMTSLayer</a><span style="display: none;"><p>WMTS图层，<br>
目前二维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，三维上仅支持4326(包括4490，4214以及4610)以及3857坐标系，WMTS服务会自动读取元信息上的坐标系，不需要用户指定
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.WMTSLayer() <br/>
[ES6引入方式]：<br/>
import { WMTSLayer } from "@mapgis/webclient-common" <br/>
<br/>
针对图层的操作请在图层加载完毕事件中进行<br/>
Layer.on('layerview-created', function (result) {<br/>
console.log("加载完毕:", result.layer)<br/>
});<br/>
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作<br/>
if(layer.loadStatus === 'loaded') {<br/>
// 你的业务逻辑<br/>
}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="WMTSSubLayer.html">WMTSSubLayer</a><span style="display: none;"><p>IGS地图服务图层</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">地图模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Basemap.html">Basemap</a><span style="display: none;"><p>基础地图对象
<br>[ES5引入方式]：<br/>
Zondy.Basemap() <br/>
[ES6引入方式]：<br/>
import { Map } from "@mapgis/webclient-common" <br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Map.html">Map</a><span style="display: none;"><p>图层管理容器，和地图引擎无关，通过此对象而不是地图引擎来对图层进行管理
<br>[ES5引入方式]：<br/>
Zondy.Map() <br/>
[ES6引入方式]：<br/>
import { Map } from "@mapgis/webclient-common" <br/></p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">渲染器模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="BaseRenderer.html">BaseRenderer</a><span style="display: none;"><p>专题图渲染基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ClassBreakInfo.html">ClassBreakInfo</a><span style="display: none;"><p>三维专题图-分段信息</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ClassBreakRenderer.html">ClassBreakRenderer</a><span style="display: none;"><p>分段专题图渲染样式，支持的图层如下：<br/>
[IGS地图图片图层]{@link IGSMapImageLayer}、[几何图形图层]{@link GraphicsLayer}、[IGS要素图层]{@link IGSFeatureLayer}、
[geojson图层]{@link GeoJSONLayer}、[OGC-WFS图层]{@link WFSLayer}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ClusterInfo.html">ClusterInfo</a><span style="display: none;"><p>聚合点数量区间内的符号信息</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ClusterRenderer.html">ClusterRenderer</a><span style="display: none;"><p>聚类渲染器，多个点聚集在一起，会形成一个点符号</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ColorStop.html">ColorStop</a><span style="display: none;"><p>颜色分段</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ColorVariable.html">ColorVariable</a><span style="display: none;"><p>color视觉变量</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="HeatmapColorStop.html">HeatmapColorStop</a><span style="display: none;"><p>热力图分段颜色和比率</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="HeatmapRenderer.html">HeatmapRenderer</a><span style="display: none;"><p>热力图渲染器</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="OpacityStop.html">OpacityStop</a><span style="display: none;"><p>透明度分段</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="OpacityVariable.html">OpacityVariable</a><span style="display: none;"><p>opacity视觉变量</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="RandomRenderer.html">RandomRenderer</a><span style="display: none;"><p>随机渲染器，将随机颜色赋予要素，根据zoom等级颜色也将发生变化</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="RankRenderer.html">RankRenderer</a><span style="display: none;"><p>等级符号专题图，符号尺寸随指定字段的值的变化而变化</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SimpleRenderer.html">SimpleRenderer</a><span style="display: none;"><p>统一专题图渲染样式，支持的图层如下：<br/>
[几何图形图层]{@link GraphicsLayer}、[IGS要素图层]{@link IGSFeatureLayer}、
[geojson图层]{@link GeoJSONLayer}、[OGC-WFS图层]{@link WFSLayer}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SizeStop.html">SizeStop</a><span style="display: none;"><p>size视觉变量</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SizeVariable.html">SizeVariable</a><span style="display: none;"><p>size视觉变量</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="UniqueValueInfo.html">UniqueValueInfo</a><span style="display: none;"><p>三维专题图-单值信息</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="UniqueValueRenderer.html">UniqueValueRenderer</a><span style="display: none;"><p>单值专题图渲染样式，支持的图层如下：<br/>
[IGS地图图片图层]{@link IGSMapImageLayer}、[几何图形图层]{@link GraphicsLayer}、[IGS要素图层]{@link IGSFeatureLayer}、
[geojson图层]{@link GeoJSONLayer}、[OGC-WFS图层]{@link WFSLayer}</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="VisualVariable.html">VisualVariable</a><span style="display: none;"><p>视觉变量基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Zondy.ThemeLayer.GraphThemeLayer.html">GraphThemeLayer</a><span style="display: none;"><p>统计专题图通过为每个要素绘制统计图表来反映其对应的专题值的大小。它可同时表示多个字段属性信息，在区域本身与各区域之间形成横向和纵向的对比。<br>统计专题图多用于具有相关数量特征的地图上，比如表示不同地区多年的粮食产量、GDP、人口等，不同时段客运量、地铁流量等。目前提供的统计图类型有：柱状图（Bar），折线图（Line），饼图（Pie），三维柱状图（Bar3D），点状图（Point），环状图（Ring）。</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">视图模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="BaseView.html">BaseView</a><span style="display: none;"><p>视图类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MapView.html">MapView</a><span style="display: none;"><p>二维场景视图(leaflet引擎)，对地图引擎进行管理，如果要对地图图层进行管理请参考[Map]{@link Map}，<br/>
参考示例：
<a href='#MapView'>[初始化二维场景视图]</a>
<br>[ES5引入方式]：<br/>
Zondy.MapView() <br/>
[ES6引入方式]：<br/>
import { MapView } from '@mapgis/webclient-leaflet-plugin' <br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="VideoMapView.html">VideoMapView</a><span style="display: none;">undefined</span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">符号模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Callout3D.html">Callout3D</a><span style="display: none;"><p>三维索引样式基类，当一个符号相对于原始位置有偏移时，该符号能显示其真实位置</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ColorMaterial.html">ColorMaterial</a><span style="display: none;"><p>颜色材质，适用于所有三维符号</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Edges3D.html">Edges3D</a><span style="display: none;"><p>轮廓线样式</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ExtrudeSymbol3DLayer.html">ExtrudeSymbol3DLayer</a><span style="display: none;"><p>三维拉伸区符号图层，用来在三维场景中绘制拉伸的区几何，不支持二维地图视图<br/>
示例如下：<br/>
<a href='#ExtrudeSymbol3DLayer'>[1、创建三维拉伸区符号图层]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="FillSymbol.html">FillSymbol</a><span style="display: none;"><p>填充符号基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="FillSymbol3DLayer.html">FillSymbol3DLayer</a><span style="display: none;"><p>三维区符号图层，用于在三维场景中绘制平面区对象，不支持二维视图<br/>
示例如下：<br/>
<a href='#FillSymbol3DLayer'>[1、创建三维区符号图层]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="FillSymbol3DOutline.html">FillSymbol3DOutline</a><span style="display: none;"><p>三维区符号图层的外边线样式</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IconResource.html">IconResource</a><span style="display: none;"><p>图标资源，如果没有设置href，则使用系统自带的图标</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="IconSymbol3DLayer.html">IconSymbol3DLayer</a><span style="display: none;"><p>三维图标符号图层，用来在三维场景中绘制图标，不支持二维地图视图<br/>
支持使用网络图片资源或者使用系统自带的图标资源<br/>
是一个始终朝向屏幕，并且立起来的图标<br/>
示例如下：<br/>
<a href='#IconSymbol3DLayer-href'>[1、使用网络资源创建一个三维图标图层对象]</a><br/>
<a href='#IconSymbol3DLayer-primitive'>[2、使用系统自带资源创建一个三维图标图层对象]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="LabelSymbol3D.html">LabelSymbol3D</a><span style="display: none;"><p>三维注记符号，用于在三维场景中渲染线几何要素，不支持在二维视图中使用；<br/>
三维注记符号必须包含如下符号图层中的一个或多个，才能在三维场景中显示要素：<br/>
[三维文字符号图层]{@link TextSymbol3DLayer}<br/>
示例如下：<br/>
<a href='#LabelSymbol3D'>[1、创建一个三维注记符号对象]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="LineCallout3D.html">LineCallout3D</a><span style="display: none;"><p>注记索引线样式，该线会链接注记和所属要素，当一个符号相对于原始位置有偏移时，该符号能显示其真实位置</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="LineStyleMarker3D.html">LineStyleMarker3D</a><span style="display: none;"><p>设置线的端点的Marker的样式</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="LineStylePattern3D.html">LineStylePattern3D</a><span style="display: none;"><p>三维虚线样式设置</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="LineSymbol.html">LineSymbol</a><span style="display: none;"><p>线符号基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="LineSymbol3D.html">LineSymbol3D</a><span style="display: none;"><p>三维线符号，用于在三维场景中渲染线几何要素，不支持在二维视图中使用；<br/>
三维线符号必须包含如下符号图层中的一个或多个，才能在三维场景中显示要素：<br/>
[三维线符号图层]{@link LineSymbol3DLayer}、[三维管道符号图层]{@link PathSymbol3DLayer}<br/>
示例如下：<br/>
<a href='#LineSymbol3D'>[1、创建线三维符号]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="LineSymbol3DLayer.html">LineSymbol3DLayer</a><span style="display: none;"><p>三维线符号图层，用来在三维场景中绘制二维线，不支持二维地图视图<br/>
示例如下：<br/>
<a href='#LineSymbol3DLayer'>[1、创建三维线符号图层]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="LineSymbolMarker.html">LineSymbolMarker</a><span style="display: none;"><p>标记符号</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MapGISTextSymbol.html">MapGISTextSymbol</a><span style="display: none;"><p>文本符号，支持点几何对象，参考示例：<a href='#new-MapGISTextSymbol'>[创建文本样式]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.Symbol.MapGISTextSymbol() <br/>
[ES6引入方式]：<br/>
import { MapGISTextSymbol } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MarkerSymbol.html">MarkerSymbol</a><span style="display: none;"><p>Marker符号基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ObjectSymbol3DLayer.html">ObjectSymbol3DLayer</a><span style="display: none;"><p>三维体对象符号图层，使用三维体符号来绘制一个点几何要素<br/>
通过设置resource的primitive属性来设置符号形状，支持如下形状：<br/>
sphere、cylinder、cube、cone、inverted-cone、diamond、tetrahedron<br/>
也可通过设置resource中的href属性，来加载gltf数据<br/>
同时通过设置material属性来设置符号的外观<br/>
示例如下：<br/>
<a href='#ObjectSymbol3DLayer-href'>[1、使用网络资源创建一个三维体对象符号图层对象]</a><br/>
<a href='#ObjectSymbol3DLayer-primitive'>[2、使用系统自带资源创建一个三维体对象符号图层对象]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="PathSymbol3DLayer.html">PathSymbol3DLayer</a><span style="display: none;"><p>三维管道符号图层，定义如何在三维场景视图中绘制一个管道线<br/>
示例如下：<br/>
<a href='#PathSymbol3DLayer'>[1、创建三维管道符号图层]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="PictureFillSymbol.html">PictureFillSymbol</a><span style="display: none;"><p>图片填充符号</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="PictureMarkerSymbol.html">PictureMarkerSymbol</a><span style="display: none;"><p>图片Marker符号，支持点几何对象，参考示例：<a href='#new-PictureMarkerSymbol'>[图片Marker样式]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.Symbol.PictureMarkerSymbol() <br/>
[ES6引入方式]：<br/>
import { PictureMarkerSymbol } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="PointSymbol3D.html">PointSymbol3D</a><span style="display: none;"><p>三维点符号，在三维场景中渲染点几何要素，不支持二维视图；<br/>
三维点符号必须包含如下符号图层中的一个或多个，才能在三维场景中显示要素：<br/>
[三维图标符号图层]{@link IconSymbol3DLayer}、[三维对象符号图层]{@link ObjectSymbol3DLayer}、[三维文字符号图层]{@link TextSymbol3DLayer}<br/>
示例如下：<br/>
<a href='#PointSymbol3D'>[1、创建一个三维点符号对象]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="PointSymbol3DOutline.html">PointSymbol3DOutline</a><span style="display: none;"><p>三维点符号图层的外边线样式</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="PolygonSymbol3D.html">PolygonSymbol3D</a><span style="display: none;"><p>三维体符号，用于在三维场景视图中渲染几何要素，不支持二维视图<br/>
三维体符号必须包含如下符号图层中的一个或多个，才能在三维场景中显示要素：<br/>
[三维区符号图层]{@link FillSymbol3DLayer}、[三维拉伸区符号图层]{@link ExtrudeSymbol3DLayer}、[三维线符号图层]{@link LineSymbol3DLayer}、[三维图标符号图层]{@link IconSymbol3DLayer}、[三维体对象符号图层]{@link ObjectSymbol3DLayer}、[三维注记符号图层]{@link TextSymbol3DLayer}<br/>
示例如下：<br/>
<a href='#PolygonSymbol3D'>[1、创建一个三维体符号对象]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SimpleFillSymbol.html">SimpleFillSymbol</a><span style="display: none;"><p>简单填充符号，参考示例：<a href='#new-SimpleFillSymbol'>[填充符号样式]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.Symbol.SimpleFillSymbol() <br/>
[ES6引入方式]：<br/>
import { SimpleFillSymbol } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SimpleLineSymbol.html">SimpleLineSymbol</a><span style="display: none;"><p>简单线符号，支持线几何对象，参考示例：<a href='#new-SimpleLineSymbol'>[线符号样式]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.Symbol.SimpleLineSymbol() <br/>
[ES6引入方式]：<br/>
import { SimpleLineSymbol } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SimpleMarkerSymbol.html">SimpleMarkerSymbol</a><span style="display: none;"><p>简单Marker符号，支持点几何对象，参考示例：<a href='#new-SimpleMarkerSymbol'>[简单Marker样式]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.Symbol.SimpleMarkerSymbol() <br/>
[ES6引入方式]：<br/>
import { SimpleMarkerSymbol } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="StylePattern3D.html">StylePattern3D</a><span style="display: none;"><p>三维区间隔填充样式设置</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Symbol.html">Symbol</a><span style="display: none;"><p>符号基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Symbol3DLayer.html">Symbol3DLayer</a><span style="display: none;"><p>三维符号图层基类，用来定义在三维中展示的点、线、区几何以及gltf的样式<br/>
所有的三维符号都有一个symbolLayers属性，是一个Symbol3DLayer的集合对象，所有的符号必须至少拥有一个或多个三维符号图层，才能进行正常显示<br/>
现有如下类型的三维符号图层：<br/>
IconSymbol3DLayer、ObjectSymbol3DLayer、LineSymbol3DLayer、PathSymbol3DLayer、FillSymbol3DLayer、WaterSymbol3DLayer、ExtrudeSymbol3DLayer、TextSymbol3DLayer<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Symbol3DVerticalOffset.html">Symbol3DVerticalOffset</a><span style="display: none;"><p>符号垂直偏移量，将一个符号在竖直世界轴的方向上进行平移</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="TextHalo.html">TextHalo</a><span style="display: none;"><p>文字光晕样式</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="TextSymbol.html">TextSymbol</a><span style="display: none;"><p>文本符号，支持点几何对象，参考示例：<a href='#new-TextSymbol'>[创建文本样式]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.Symbol.TextSymbol() <br/>
[ES6引入方式]：<br/>
import { TextSymbol } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="TextSymbol3DLayer.html">TextSymbol3DLayer</a><span style="display: none;"><p>三维注记符号图层，定义如何在三维场景中显示文字，不支持二维视图<br/>
示例如下：<br/>
<a href='#TextSymbol3DLayer'>[1、创建一个三维注记符号图层对象]</a><br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="WaterSymbol3DLayer.html">WaterSymbol3DLayer</a><span style="display: none;"><p>水面符号图层，定义如何在三维场景中沟构造水面几何，不支持二维视图</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">几何模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Circle.html">Circle</a><span style="display: none;"><p>几何圆，参考示例：<a href='#Circle'>[几何圆对象]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.Geometry.Circle() <br/>
[ES6引入方式]：<br/>
import { Circle } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Extent.html">Extent</a><span style="display: none;"><p>几何范围对象，即左下角和右上角组成的矩形范围几何对象，参考示例：<a href='#Extent'>[几何范围对象]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.Geometry.Extent() <br/>
[ES6引入方式]：<br/>
import { Extent } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Geometry.html">Geometry</a><span style="display: none;"><p>几何图形对象基类
<br><br>[ES5引入方式]：<br/>
Zondy.Geometry.Geometry() <br/>
[ES6引入方式]：<br/>
import { Geometry } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="GeometryEngine.html">GeometryEngine</a><span style="display: none;"><p>几何分析工具</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="LineString.html">LineString</a><span style="display: none;"><p>线几何对象
<br><br>[ES5引入方式]：<br/>
Zondy.Geometry.LineString() <br/>
[ES6引入方式]：<br/>
import { LineString } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MultiLineString.html">MultiLineString</a><span style="display: none;"><p>多线段几何
<br><br>[ES5引入方式]：<br/>
Zondy.Geometry.MultiLineString() <br/>
[ES6引入方式]：<br/>
import { MultiLineString } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MultiPoint.html">MultiPoint</a><span style="display: none;"><p>多点几何对象
<br><br>[ES5引入方式]：<br/>
Zondy.Geometry.MultiPoint() <br/>
[ES6引入方式]：<br/>
import { MultiPoint } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MultiPolygon.html">MultiPolygon</a><span style="display: none;"><p>多区几何
<br><br>[ES5引入方式]：<br/>
Zondy.Geometry.MultiPolygon() <br/>
[ES6引入方式]：<br/>
import { MultiPolygon } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Point.html">Point</a><span style="display: none;"><p>点几何对象
<br><br>[ES5引入方式]：<br/>
Zondy.Geometry.Point() <br/>
[ES6引入方式]：<br/>
import { Point } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Polygon.html">Polygon</a><span style="display: none;"><p>区几何，由多个环(ring)构成的几何对象，仅支持带洞区和非带洞区，不支持带岛区，即三个圈重叠<br/>
多边形的第一个环(ring)即外圈，从第二个环开始为内圈，内圈可以重合、相交、自相交，但是不能超过外圈
<br><br>[ES5引入方式]：<br/>
Zondy.Geometry.Polygon() <br/>
[ES6引入方式]：<br/>
import { Polygon } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SpatialReference.html">SpatialReference</a><span style="display: none;"><p>空间参考系
<br><br>[ES5引入方式]：<br/>
Zondy.SpatialReference() <br/>
[ES6引入方式]：<br/>
import { SpatialReference } from "@mapgis/webclient-common" <br/>
<br/></p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">undefined</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="DrawControl.html">DrawControl</a><span style="display: none;"><p>绘制工具</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Screenshot.html">Screenshot</a><span style="display: none;"><p>打印工具</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">基础对象模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Evented.html">Evented</a><span style="display: none;"><p>事件基类,所有可接收或者发送的对象继承于此</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="UpdateContent.html">UpdateContent</a><span style="display: none;"><p>更新内容对象</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">要素模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Feature.html">Feature</a><span style="display: none;"><p>要素对象，示例如下：<a id='add-Feature'>[初始化要素对象]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.Feature() <br/>
[ES6引入方式]：<br/>
import { Feature } from "@mapgis/webclient-common" <br/>
<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="FeatureSet.html">FeatureSet</a><span style="display: none;"><p>要素集合类，示例如下：<a id='add-FeatureSet'>[初始化要素集合对象]</a>
<br><br>[ES5引入方式]：<br/>
Zondy.FeatureSet() <br/>
[ES6引入方式]：<br/>
import { FeatureSet } from "@mapgis/webclient-common" <br/>
<br/></p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">undefined</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Popup.html">Popup</a><span style="display: none;"><p>二维场景信息弹窗(leaflet引擎)
参考示例：
<a href='#MapView'>[初始化二维场景视图]</a>
[ES6引入方式]：<br/>
import { Popup } from '@mapgis/webclient-leaflet-plugin' <br/>
自定义样式说明：<br/>
zondy-popup__content 弹窗容器样式<br/>
zondy-popup__tip 弹窗对话框箭头样式<br/>
zondy-popup__header 弹窗头部样式<br/>
zondy-popup__content 弹窗主体样式<br/>
zondy-popup__footer 弹窗底部样式<br/></p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">草图编辑模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchBaseDrawTool.html">SketchBaseDrawTool</a><span style="display: none;"><p>草图基础绘图工具类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchCircleDrawTool.html">SketchCircleDrawTool</a><span style="display: none;"><p>面绘图工具类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditor.html">SketchEditor</a><span style="display: none;"><p>草图编辑基类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditorLeaflet.html">SketchEditorLeaflet</a><span style="display: none;"><p>二维场景草图编辑类<br/>
<br>[ES5引入方式]：<br/>
const { SketchEditorLeaflet } = Zondy <br/>
[ES6引入方式]：<br/>
import { SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditorVideo.html">SketchEditorVideo</a><span style="display: none;">undefined</span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditorVideoBase.html">SketchEditorVideoBase</a><span style="display: none;">undefined</span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchExtentDrawTool.html">SketchExtentDrawTool</a><span style="display: none;"><p>面绘图工具类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchPointDrawTool.html">SketchPointDrawTool</a><span style="display: none;"><p>点绘图工具类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchPolygonDrawTool.html">SketchPolygonDrawTool</a><span style="display: none;"><p>面绘图工具类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchPolylineDrawTool.html">SketchPolylineDrawTool</a><span style="display: none;"><p>面绘图工具类</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchStage.html">SketchStage</a><span style="display: none;"><p>草图图形集合</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchStyle.html">SketchStyle</a><span style="display: none;"><p>草图样式管理类</p></span></li></ul></div>
</nav>
</div>
<div class="core" id="main-content-wrapper">
<div class="content">
<header id="page-title" class="page-title">
<span class="page-title-main">类名</span>
<span class="page-title-sub">leaflet/util/extend/L.markercluster.js</span>
</header>
<section>
<article>
<pre class="prettyprint source linenums"><code>import * as L from '@mapgis/leaflet'
/*
* Leaflet.markercluster 1.5.4+master.bd2794c,
* Provides Beautiful Animated Marker Clustering functionality for Leaflet, a JS library for interactive maps.
* https://github.com/Leaflet/Leaflet.markercluster
* (c) 2012-2017, Dave Leaver, smartrak
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory((global.Leaflet = global.Leaflet || {}, global.Leaflet.markercluster = {})));
}(this, function (exports) { 'use strict';
/*
* L.MarkerClusterGroup extends L.FeatureGroup by clustering the markers contained within
*/
var MarkerClusterGroup = L.MarkerClusterGroup = L.FeatureGroup.extend({
options: {
maxClusterRadius: 80, //A cluster will cover at most this many pixels from its center
iconCreateFunction: null,
clusterPane: L.Marker.prototype.options.pane,
spiderfyOnEveryZoom: false,
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
singleMarkerMode: false,
disableClusteringAtZoom: null,
// Setting this to false prevents the removal of any clusters outside of the viewpoint, which
// is the default behaviour for performance reasons.
removeOutsideVisibleBounds: true,
// Set to false to disable all animations (zoom and spiderfy).
// If false, option animateAddingMarkers below has no effect.
// If L.DomUtil.TRANSITION is falsy, this option has no effect.
animate: true,
//Whether to animate adding markers after adding the MarkerClusterGroup to the map
// If you are adding individual markers set to true, if adding bulk markers leave false for massive performance gains.
animateAddingMarkers: false,
// Make it possible to provide custom function to calculate spiderfy shape positions
spiderfyShapePositions: null,
//Increase to increase the distance away that spiderfied markers appear from the center
spiderfyDistanceMultiplier: 1,
// Make it possible to specify a polyline options on a spider leg
spiderLegPolylineOptions: { weight: 1.5, color: '#222', opacity: 0.5 },
// When bulk adding layers, adds markers in chunks. Means addLayers may not add all the layers in the call, others will be loaded during setTimeouts
chunkedLoading: false,
chunkInterval: 200, // process markers for a maximum of ~ n milliseconds (then trigger the chunkProgress callback)
chunkDelay: 50, // at the end of each interval, give n milliseconds back to system/browser
chunkProgress: null, // progress callback: function(processed, total, elapsed) (e.g. for a progress indicator)
//Options to pass to the L.Polygon constructor
polygonOptions: {}
},
initialize: function (options) {
L.Util.setOptions(this, options);
if (!this.options.iconCreateFunction) {
this.options.iconCreateFunction = this._defaultIconCreateFunction;
}
this._featureGroup = L.featureGroup();
this._featureGroup.addEventParent(this);
this._nonPointGroup = L.featureGroup();
this._nonPointGroup.addEventParent(this);
this._inZoomAnimation = 0;
this._needsClustering = [];
this._needsRemoving = []; //Markers removed while we aren't on the map need to be kept track of
//The bounds of the currently shown area (from _getExpandedVisibleBounds) Updated on zoom/move
this._currentShownBounds = null;
this._queue = [];
this._childMarkerEventHandlers = {
'dragstart': this._childMarkerDragStart,
'move': this._childMarkerMoved,
'dragend': this._childMarkerDragEnd,
};
// Hook the appropriate animation methods.
var animate = L.DomUtil.TRANSITION && this.options.animate;
L.extend(this, animate ? this._withAnimation : this._noAnimation);
// Remember which MarkerCluster class to instantiate (animated or not).
this._markerCluster = animate ? L.MarkerCluster : L.MarkerClusterNonAnimated;
},
addLayer: function (layer) {
if (layer instanceof L.LayerGroup) {
return this.addLayers([layer]);
}
//Don't cluster non point data
if (!layer.getLatLng) {
this._nonPointGroup.addLayer(layer);
this.fire('layeradd', { layer: layer });
return this;
}
if (!this._map) {
this._needsClustering.push(layer);
this.fire('layeradd', { layer: layer });
return this;
}
if (this.hasLayer(layer)) {
return this;
}
//If we have already clustered we'll need to add this one to a cluster
if (this._unspiderfy) {
this._unspiderfy();
}
this._addLayer(layer, this._maxZoom);
this.fire('layeradd', { layer: layer });
// Refresh bounds and weighted positions.
this._topClusterLevel._recalculateBounds();
this._refreshClustersIcons();
//Work out what is visible
var visibleLayer = layer,
currentZoom = this._zoom;
if (layer.__parent) {
while (visibleLayer.__parent._zoom >= currentZoom) {
visibleLayer = visibleLayer.__parent;
}
}
if (this._currentShownBounds.contains(visibleLayer.getLatLng())) {
if (this.options.animateAddingMarkers) {
this._animationAddLayer(layer, visibleLayer);
} else {
this._animationAddLayerNonAnimated(layer, visibleLayer);
}
}
return this;
},
removeLayer: function (layer) {
if (layer instanceof L.LayerGroup) {
return this.removeLayers([layer]);
}
//Non point layers
if (!layer.getLatLng) {
this._nonPointGroup.removeLayer(layer);
this.fire('layerremove', { layer: layer });
return this;
}
if (!this._map) {
if (!this._arraySplice(this._needsClustering, layer) && this.hasLayer(layer)) {
this._needsRemoving.push({ layer: layer, latlng: layer._latlng });
}
this.fire('layerremove', { layer: layer });
return this;
}
if (!layer.__parent) {
return this;
}
if (this._unspiderfy) {
this._unspiderfy();
this._unspiderfyLayer(layer);
}
//Remove the marker from clusters
this._removeLayer(layer, true);
this.fire('layerremove', { layer: layer });
// Refresh bounds and weighted positions.
this._topClusterLevel._recalculateBounds();
this._refreshClustersIcons();
layer.off(this._childMarkerEventHandlers, this);
if (this._featureGroup.hasLayer(layer)) {
this._featureGroup.removeLayer(layer);
if (layer.clusterShow) {
layer.clusterShow();
}
}
return this;
},
//Takes an array of markers and adds them in bulk
addLayers: function (layersArray, skipLayerAddEvent) {
if (!L.Util.isArray(layersArray)) {
return this.addLayer(layersArray);
}
var fg = this._featureGroup,
npg = this._nonPointGroup,
chunked = this.options.chunkedLoading,
chunkInterval = this.options.chunkInterval,
chunkProgress = this.options.chunkProgress,
l = layersArray.length,
offset = 0,
originalArray = true,
m;
if (this._map) {
var started = (new Date()).getTime();
var process = L.bind(function () {
var start = (new Date()).getTime();
// Make sure to unspiderfy before starting to add some layers
if (this._map && this._unspiderfy) {
this._unspiderfy();
}
for (; offset < l; offset++) {
if (chunked && offset % 200 === 0) {
// every couple hundred markers, instrument the time elapsed since processing started:
var elapsed = (new Date()).getTime() - start;
if (elapsed > chunkInterval) {
break; // been working too hard, time to take a break :-)
}
}
m = layersArray[offset];
// Group of layers, append children to layersArray and skip.
// Side effects:
// - Total increases, so chunkProgress ratio jumps backward.
// - Groups are not included in this group, only their non-group child layers (hasLayer).
// Changing array length while looping does not affect performance in current browsers:
// http://jsperf.com/for-loop-changing-length/6
if (m instanceof L.LayerGroup) {
if (originalArray) {
layersArray = layersArray.slice();
originalArray = false;
}
this._extractNonGroupLayers(m, layersArray);
l = layersArray.length;
continue;
}
//Not point data, can't be clustered
if (!m.getLatLng) {
npg.addLayer(m);
if (!skipLayerAddEvent) {
this.fire('layeradd', { layer: m });
}
continue;
}
if (this.hasLayer(m)) {
continue;
}
this._addLayer(m, this._maxZoom);
if (!skipLayerAddEvent) {
this.fire('layeradd', { layer: m });
}
//If we just made a cluster of size 2 then we need to remove the other marker from the map (if it is) or we never will
if (m.__parent) {
if (m.__parent.getChildCount() === 2) {
var markers = m.__parent.getAllChildMarkers(),
otherMarker = markers[0] === m ? markers[1] : markers[0];
fg.removeLayer(otherMarker);
}
}
}
if (chunkProgress) {
// report progress and time elapsed:
chunkProgress(offset, l, (new Date()).getTime() - started);
}
// Completed processing all markers.
if (offset === l) {
// Refresh bounds and weighted positions.
this._topClusterLevel._recalculateBounds();
this._refreshClustersIcons();
this._topClusterLevel._recursivelyAddChildrenToMap(null, this._zoom, this._currentShownBounds);
} else {
setTimeout(process, this.options.chunkDelay);
}
}, this);
process();
} else {
var needsClustering = this._needsClustering;
for (; offset < l; offset++) {
m = layersArray[offset];
// Group of layers, append children to layersArray and skip.
if (m instanceof L.LayerGroup) {
if (originalArray) {
layersArray = layersArray.slice();
originalArray = false;
}
this._extractNonGroupLayers(m, layersArray);
l = layersArray.length;
continue;
}
//Not point data, can't be clustered
if (!m.getLatLng) {
npg.addLayer(m);
continue;
}
if (this.hasLayer(m)) {
continue;
}
needsClustering.push(m);
}
}
return this;
},
//Takes an array of markers and removes them in bulk
removeLayers: function (layersArray) {
var i, m,
l = layersArray.length,
fg = this._featureGroup,
npg = this._nonPointGroup,
originalArray = true;
if (!this._map) {
for (i = 0; i < l; i++) {
m = layersArray[i];
// Group of layers, append children to layersArray and skip.
if (m instanceof L.LayerGroup) {
if (originalArray) {
layersArray = layersArray.slice();
originalArray = false;
}
this._extractNonGroupLayers(m, layersArray);
l = layersArray.length;
continue;
}
this._arraySplice(this._needsClustering, m);
npg.removeLayer(m);
if (this.hasLayer(m)) {
this._needsRemoving.push({ layer: m, latlng: m._latlng });
}
this.fire('layerremove', { layer: m });
}
return this;
}
if (this._unspiderfy) {
this._unspiderfy();
// Work on a copy of the array, so that next loop is not affected.
var layersArray2 = layersArray.slice(),
l2 = l;
for (i = 0; i < l2; i++) {
m = layersArray2[i];
// Group of layers, append children to layersArray and skip.
if (m instanceof L.LayerGroup) {
this._extractNonGroupLayers(m, layersArray2);
l2 = layersArray2.length;
continue;
}
this._unspiderfyLayer(m);
}
}
for (i = 0; i < l; i++) {
m = layersArray[i];
// Group of layers, append children to layersArray and skip.
if (m instanceof L.LayerGroup) {
if (originalArray) {
layersArray = layersArray.slice();
originalArray = false;
}
this._extractNonGroupLayers(m, layersArray);
l = layersArray.length;
continue;
}
if (!m.__parent) {
npg.removeLayer(m);
this.fire('layerremove', { layer: m });
continue;
}
this._removeLayer(m, true, true);
this.fire('layerremove', { layer: m });
if (fg.hasLayer(m)) {
fg.removeLayer(m);
if (m.clusterShow) {
m.clusterShow();
}
}
}
// Refresh bounds and weighted positions.
this._topClusterLevel._recalculateBounds();
this._refreshClustersIcons();
//Fix up the clusters and markers on the map
this._topClusterLevel._recursivelyAddChildrenToMap(null, this._zoom, this._currentShownBounds);
return this;
},
//Removes all layers from the MarkerClusterGroup
clearLayers: function () {
//Need our own special implementation as the LayerGroup one doesn't work for us
//If we aren't on the map (yet), blow away the markers we know of
if (!this._map) {
this._needsClustering = [];
this._needsRemoving = [];
delete this._gridClusters;
delete this._gridUnclustered;
}
if (this._noanimationUnspiderfy) {
this._noanimationUnspiderfy();
}
//Remove all the visible layers
this._featureGroup.clearLayers();
this._nonPointGroup.clearLayers();
this.eachLayer(function (marker) {
marker.off(this._childMarkerEventHandlers, this);
delete marker.__parent;
}, this);
if (this._map) {
//Reset _topClusterLevel and the DistanceGrids
this._generateInitialClusters();
}
return this;
},
//Override FeatureGroup.getBounds as it doesn't work
getBounds: function () {
var bounds = new L.LatLngBounds();
if (this._topClusterLevel) {
bounds.extend(this._topClusterLevel._bounds);
}
for (var i = this._needsClustering.length - 1; i >= 0; i--) {
bounds.extend(this._needsClustering[i].getLatLng());
}
bounds.extend(this._nonPointGroup.getBounds());
return bounds;
},
//Overrides LayerGroup.eachLayer
eachLayer: function (method, context) {
var markers = this._needsClustering.slice(),
needsRemoving = this._needsRemoving,
thisNeedsRemoving, i, j;
if (this._topClusterLevel) {
this._topClusterLevel.getAllChildMarkers(markers);
}
for (i = markers.length - 1; i >= 0; i--) {
thisNeedsRemoving = true;
for (j = needsRemoving.length - 1; j >= 0; j--) {
if (needsRemoving[j].layer === markers[i]) {
thisNeedsRemoving = false;
break;
}
}
if (thisNeedsRemoving) {
method.call(context, markers[i]);
}
}
this._nonPointGroup.eachLayer(method, context);
},
//Overrides LayerGroup.getLayers
getLayers: function () {
var layers = [];
this.eachLayer(function (l) {
layers.push(l);
});
return layers;
},
//Overrides LayerGroup.getLayer, WARNING: Really bad performance
getLayer: function (id) {
var result = null;
id = parseInt(id, 10);
this.eachLayer(function (l) {
if (L.stamp(l) === id) {
result = l;
}
});
return result;
},
//Returns true if the given layer is in this MarkerClusterGroup
hasLayer: function (layer) {
if (!layer) {
return false;
}
var i, anArray = this._needsClustering;
for (i = anArray.length - 1; i >= 0; i--) {
if (anArray[i] === layer) {
return true;
}
}
anArray = this._needsRemoving;
for (i = anArray.length - 1; i >= 0; i--) {
if (anArray[i].layer === layer) {
return false;
}
}
return !!(layer.__parent && layer.__parent._group === this) || this._nonPointGroup.hasLayer(layer);
},
//Zoom down to show the given layer (spiderfying if necessary) then calls the callback
zoomToShowLayer: function (layer, callback) {
var map = this._map;
if (typeof callback !== 'function') {
callback = function () {};
}
var showMarker = function () {
// Assumes that map.hasLayer checks for direct appearance on map, not recursively calling
// hasLayer on Layer Groups that are on map (typically not calling this MarkerClusterGroup.hasLayer, which would always return true)
if ((map.hasLayer(layer) || map.hasLayer(layer.__parent)) && !this._inZoomAnimation) {
this._map.off('moveend', showMarker, this);
this.off('animationend', showMarker, this);
if (map.hasLayer(layer)) {
callback();
} else if (layer.__parent._icon) {
this.once('spiderfied', callback, this);
layer.__parent.spiderfy();
}
}
};
if (layer._icon && this._map.getBounds().contains(layer.getLatLng())) {
//Layer is visible ond on screen, immediate return
callback();
} else if (layer.__parent._zoom < Math.round(this._map._zoom)) {
//Layer should be visible at this zoom level. It must not be on screen so just pan over to it
this._map.on('moveend', showMarker, this);
this._map.panTo(layer.getLatLng());
} else {
this._map.on('moveend', showMarker, this);
this.on('animationend', showMarker, this);
layer.__parent.zoomToBounds();
}
},
//Overrides FeatureGroup.onAdd
onAdd: function (map) {
this._map = map;
var i, l, layer;
if (!isFinite(this._map.getMaxZoom())) {
throw "Map has no maxZoom specified";
}
this._featureGroup.addTo(map);
this._nonPointGroup.addTo(map);
if (!this._gridClusters) {
this._generateInitialClusters();
}
this._maxLat = map.options.crs.projection.MAX_LATITUDE;
//Restore all the positions as they are in the MCG before removing them
for (i = 0, l = this._needsRemoving.length; i < l; i++) {
layer = this._needsRemoving[i];
layer.newlatlng = layer.layer._latlng;
layer.layer._latlng = layer.latlng;
}
//Remove them, then restore their new positions
for (i = 0, l = this._needsRemoving.length; i < l; i++) {
layer = this._needsRemoving[i];
this._removeLayer(layer.layer, true);
layer.layer._latlng = layer.newlatlng;
}
this._needsRemoving = [];
//Remember the current zoom level and bounds
this._zoom = Math.round(this._map._zoom);
this._currentShownBounds = this._getExpandedVisibleBounds();
this._map.on('zoomend', this._zoomEnd, this);
this._map.on('moveend', this._moveEnd, this);
if (this._spiderfierOnAdd) { //TODO FIXME: Not sure how to have spiderfier add something on here nicely
this._spiderfierOnAdd();
}
this._bindEvents();
//Actually add our markers to the map:
l = this._needsClustering;
this._needsClustering = [];
this.addLayers(l, true);
},
//Overrides FeatureGroup.onRemove
onRemove: function (map) {
map.off('zoomend', this._zoomEnd, this);
map.off('moveend', this._moveEnd, this);
this._unbindEvents();
//In case we are in a cluster animation
this._map._mapPane.className = this._map._mapPane.className.replace(' leaflet-cluster-anim', '');
if (this._spiderfierOnRemove) { //TODO FIXME: Not sure how to have spiderfier add something on here nicely
this._spiderfierOnRemove();
}
delete this._maxLat;
//Clean up all the layers we added to the map
this._hideCoverage();
this._featureGroup.remove();
this._nonPointGroup.remove();
this._featureGroup.clearLayers();
this._map = null;
},
getVisibleParent: function (marker) {
var vMarker = marker;
while (vMarker && !vMarker._icon) {
vMarker = vMarker.__parent;
}
return vMarker || null;
},
//Remove the given object from the given array
_arraySplice: function (anArray, obj) {
for (var i = anArray.length - 1; i >= 0; i--) {
if (anArray[i] === obj) {
anArray.splice(i, 1);
return true;
}
}
},
/**
* Removes a marker from all _gridUnclustered zoom levels, starting at the supplied zoom.
* @param marker to be removed from _gridUnclustered.
* @param z integer bottom start zoom level (included)
* @private
*/
_removeFromGridUnclustered: function (marker, z) {
var map = this._map,
gridUnclustered = this._gridUnclustered,
minZoom = Math.floor(this._map.getMinZoom());
for (; z >= minZoom; z--) {
if (!gridUnclustered[z].removeObject(marker, map.project(marker.getLatLng(), z))) {
break;
}
}
},
_childMarkerDragStart: function (e) {
e.target.__dragStart = e.target._latlng;
},
_childMarkerMoved: function (e) {
if (!this._ignoreMove && !e.target.__dragStart) {
var isPopupOpen = e.target._popup && e.target._popup.isOpen();
this._moveChild(e.target, e.oldLatLng, e.latlng);
if (isPopupOpen) {
e.target.openPopup();
}
}
},
_moveChild: function (layer, from, to) {
layer._latlng = from;
this.removeLayer(layer);
layer._latlng = to;
this.addLayer(layer);
},
_childMarkerDragEnd: function (e) {
var dragStart = e.target.__dragStart;
delete e.target.__dragStart;
if (dragStart) {
this._moveChild(e.target, dragStart, e.target._latlng);
}
},
//Internal function for removing a marker from everything.
//dontUpdateMap: set to true if you will handle updating the map manually (for bulk functions)
_removeLayer: function (marker, removeFromDistanceGrid, dontUpdateMap) {
var gridClusters = this._gridClusters,
gridUnclustered = this._gridUnclustered,
fg = this._featureGroup,
map = this._map,
minZoom = Math.floor(this._map.getMinZoom());
//Remove the marker from distance clusters it might be in
if (removeFromDistanceGrid) {
this._removeFromGridUnclustered(marker, this._maxZoom);
}
//Work our way up the clusters removing them as we go if required
var cluster = marker.__parent,
markers = cluster._markers,
otherMarker;
//Remove the marker from the immediate parents marker list
this._arraySplice(markers, marker);
while (cluster) {
cluster._childCount--;
cluster._boundsNeedUpdate = true;
if (cluster._zoom < minZoom) {
//Top level, do nothing
break;
} else if (removeFromDistanceGrid && cluster._childCount <= 1) { //Cluster no longer required
//We need to push the other marker up to the parent
otherMarker = cluster._markers[0] === marker ? cluster._markers[1] : cluster._markers[0];
//Update distance grid
gridClusters[cluster._zoom].removeObject(cluster, map.project(cluster._cLatLng, cluster._zoom));
gridUnclustered[cluster._zoom].addObject(otherMarker, map.project(otherMarker.getLatLng(), cluster._zoom));
//Move otherMarker up to parent
this._arraySplice(cluster.__parent._childClusters, cluster);
cluster.__parent._markers.push(otherMarker);
otherMarker.__parent = cluster.__parent;
if (cluster._icon) {
//Cluster is currently on the map, need to put the marker on the map instead
fg.removeLayer(cluster);
if (!dontUpdateMap) {
fg.addLayer(otherMarker);
}
}
} else {
cluster._iconNeedsUpdate = true;
}
cluster = cluster.__parent;
}
delete marker.__parent;
},
_isOrIsParent: function (el, oel) {
while (oel) {
if (el === oel) {
return true;
}
oel = oel.parentNode;
}
return false;
},
//Override L.Evented.fire
fire: function (type, data, propagate) {
if (data && data.layer instanceof L.MarkerCluster) {
//Prevent multiple clustermouseover/off events if the icon is made up of stacked divs (Doesn't work in ie <= 8, no relatedTarget)
if (data.originalEvent && this._isOrIsParent(data.layer._icon, data.originalEvent.relatedTarget)) {
return;
}
type = 'cluster' + type;
}
L.FeatureGroup.prototype.fire.call(this, type, data, propagate);
},
//Override L.Evented.listens
listens: function (type, propagate) {
return L.FeatureGroup.prototype.listens.call(this, type, propagate) || L.FeatureGroup.prototype.listens.call(this, 'cluster' + type, propagate);
},
//Default functionality
_defaultIconCreateFunction: function (cluster) {
var childCount = cluster.getChildCount();
var c = ' marker-cluster-';
if (childCount < 10) {
c += 'small';
} else if (childCount < 100) {
c += 'medium';
} else {
c += 'large';
}
return new L.DivIcon({ html: '<div><span>' + childCount + ' <span aria-label="markers"></span>' + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
},
_bindEvents: function () {
var map = this._map,
spiderfyOnMaxZoom = this.options.spiderfyOnMaxZoom,
showCoverageOnHover = this.options.showCoverageOnHover,
zoomToBoundsOnClick = this.options.zoomToBoundsOnClick,
spiderfyOnEveryZoom = this.options.spiderfyOnEveryZoom;
//Zoom on cluster click or spiderfy if we are at the lowest level
if (spiderfyOnMaxZoom || zoomToBoundsOnClick || spiderfyOnEveryZoom) {
this.on('clusterclick clusterkeypress', this._zoomOrSpiderfy, this);
}
//Show convex hull (boundary) polygon on mouse over
if (showCoverageOnHover) {
this.on('clustermouseover', this._showCoverage, this);
this.on('clustermouseout', this._hideCoverage, this);
map.on('zoomend', this._hideCoverage, this);
}
},
_zoomOrSpiderfy: function (e) {
var cluster = e.layer,
bottomCluster = cluster;
if (e.type === 'clusterkeypress' && e.originalEvent && e.originalEvent.keyCode !== 13) {
return;
}
while (bottomCluster._childClusters.length === 1) {
bottomCluster = bottomCluster._childClusters[0];
}
if (bottomCluster._zoom === this._maxZoom &&
bottomCluster._childCount === cluster._childCount &&
this.options.spiderfyOnMaxZoom) {
// All child markers are contained in a single cluster from this._maxZoom to this cluster.
cluster.spiderfy();
} else if (this.options.zoomToBoundsOnClick) {
cluster.zoomToBounds();
}
if (this.options.spiderfyOnEveryZoom) {
cluster.spiderfy();
}
// Focus the map again for keyboard users.
if (e.originalEvent && e.originalEvent.keyCode === 13) {
this._map._container.focus();
}
},
_showCoverage: function (e) {
var map = this._map;
if (this._inZoomAnimation) {
return;
}
if (this._shownPolygon) {
map.removeLayer(this._shownPolygon);
}
if (e.layer.getChildCount() > 2 && e.layer !== this._spiderfied) {
this._shownPolygon = new L.Polygon(e.layer.getConvexHull(), this.options.polygonOptions);
map.addLayer(this._shownPolygon);
}
},
_hideCoverage: function () {
if (this._shownPolygon) {
this._map.removeLayer(this._shownPolygon);
this._shownPolygon = null;
}
},
_unbindEvents: function () {
var spiderfyOnMaxZoom = this.options.spiderfyOnMaxZoom,
showCoverageOnHover = this.options.showCoverageOnHover,
zoomToBoundsOnClick = this.options.zoomToBoundsOnClick,
spiderfyOnEveryZoom = this.options.spiderfyOnEveryZoom,
map = this._map;
if (spiderfyOnMaxZoom || zoomToBoundsOnClick || spiderfyOnEveryZoom) {
this.off('clusterclick clusterkeypress', this._zoomOrSpiderfy, this);
}
if (showCoverageOnHover) {
this.off('clustermouseover', this._showCoverage, this);
this.off('clustermouseout', this._hideCoverage, this);
map.off('zoomend', this._hideCoverage, this);
}
},
_zoomEnd: function () {
if (!this._map) { //May have been removed from the map by a zoomEnd handler
return;
}
this._mergeSplitClusters();
this._zoom = Math.round(this._map._zoom);
this._currentShownBounds = this._getExpandedVisibleBounds();
},
_moveEnd: function () {
if (this._inZoomAnimation) {
return;
}
var newBounds = this._getExpandedVisibleBounds();
this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, Math.floor(this._map.getMinZoom()), this._zoom, newBounds);
this._topClusterLevel._recursivelyAddChildrenToMap(null, Math.round(this._map._zoom), newBounds);
this._currentShownBounds = newBounds;
return;
},
_generateInitialClusters: function () {
var maxZoom = Math.ceil(this._map.getMaxZoom()),
minZoom = Math.floor(this._map.getMinZoom()),
radius = this.options.maxClusterRadius,
radiusFn = radius;
//If we just set maxClusterRadius to a single number, we need to create
//a simple function to return that number. Otherwise, we just have to
//use the function we've passed in.
if (typeof radius !== "function") {
radiusFn = function () { return radius; };
}
if (this.options.disableClusteringAtZoom !== null) {
maxZoom = this.options.disableClusteringAtZoom - 1;
}
this._maxZoom = maxZoom;
this._gridClusters = {};
this._gridUnclustered = {};
//Set up DistanceGrids for each zoom
if (!isFinite(maxZoom) ) {
throw "Map has no maxZoom specified";
}
if (!isFinite(minZoom)) {
throw "Map has no minZoom specified";
}
for (var zoom = maxZoom; zoom >= minZoom; zoom--) {
this._gridClusters[zoom] = new L.DistanceGrid(radiusFn(zoom));
this._gridUnclustered[zoom] = new L.DistanceGrid(radiusFn(zoom));
}
// Instantiate the appropriate L.MarkerCluster class (animated or not).
this._topClusterLevel = new this._markerCluster(this, minZoom - 1);
},
//Zoom: Zoom to start adding at (Pass this._maxZoom to start at the bottom)
_addLayer: function (layer, zoom) {
var gridClusters = this._gridClusters,
gridUnclustered = this._gridUnclustered,
minZoom = Math.floor(this._map.getMinZoom()),
markerPoint, z;
if (this.options.singleMarkerMode) {
this._overrideMarkerIcon(layer);
}
layer.on(this._childMarkerEventHandlers, this);
//Find the lowest zoom level to slot this one in
for (; zoom >= minZoom; zoom--) {
markerPoint = this._map.project(layer.getLatLng(), zoom); // calculate pixel position
//Try find a cluster close by
var closest = gridClusters[zoom].getNearObject(markerPoint);
if (closest) {
closest._addChild(layer);
layer.__parent = closest;
return;
}
//Try find a marker close by to form a new cluster with
closest = gridUnclustered[zoom].getNearObject(markerPoint);
if (closest) {
var parent = closest.__parent;
if (parent) {
this._removeLayer(closest, false);
}
//Create new cluster with these 2 in it
var newCluster = new this._markerCluster(this, zoom, closest, layer);
gridClusters[zoom].addObject(newCluster, this._map.project(newCluster._cLatLng, zoom));
closest.__parent = newCluster;
layer.__parent = newCluster;
//First create any new intermediate parent clusters that don't exist
var lastParent = newCluster;
for (z = zoom - 1; z > parent._zoom; z--) {
lastParent = new this._markerCluster(this, z, lastParent);
gridClusters[z].addObject(lastParent, this._map.project(closest.getLatLng(), z));
}
parent._addChild(lastParent);
//Remove closest from this zoom level and any above that it is in, replace with newCluster
this._removeFromGridUnclustered(closest, zoom);
return;
}
//Didn't manage to cluster in at this zoom, record us as a marker here and continue upwards
gridUnclustered[zoom].addObject(layer, markerPoint);
}
//Didn't get in anything, add us to the top
this._topClusterLevel._addChild(layer);
layer.__parent = this._topClusterLevel;
return;
},
/**
* Refreshes the icon of all "dirty" visible clusters.
* Non-visible "dirty" clusters will be updated when they are added to the map.
* @private
*/
_refreshClustersIcons: function () {
this._featureGroup.eachLayer(function (c) {
if (c instanceof L.MarkerCluster && c._iconNeedsUpdate) {
c._updateIcon();
}
});
},
//Enqueue code to fire after the marker expand/contract has happened
_enqueue: function (fn) {
this._queue.push(fn);
if (!this._queueTimeout) {
this._queueTimeout = setTimeout(L.bind(this._processQueue, this), 300);
}
},
_processQueue: function () {
for (var i = 0; i < this._queue.length; i++) {
this._queue[i].call(this);
}
this._queue.length = 0;
clearTimeout(this._queueTimeout);
this._queueTimeout = null;
},
//Merge and split any existing clusters that are too big or small
_mergeSplitClusters: function () {
var mapZoom = Math.round(this._map._zoom);
//In case we are starting to split before the animation finished
this._processQueue();
if (this._zoom < mapZoom && this._currentShownBounds.intersects(this._getExpandedVisibleBounds())) { //Zoom in, split
this._animationStart();
//Remove clusters now off screen
this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, Math.floor(this._map.getMinZoom()), this._zoom, this._getExpandedVisibleBounds());
this._animationZoomIn(this._zoom, mapZoom);
} else if (this._zoom > mapZoom) { //Zoom out, merge
this._animationStart();
this._animationZoomOut(this._zoom, mapZoom);
} else {
this._moveEnd();
}
},
//Gets the maps visible bounds expanded in each direction by the size of the screen (so the user cannot see an area we do not cover in one pan)
_getExpandedVisibleBounds: function () {
if (!this.options.removeOutsideVisibleBounds) {
return this._mapBoundsInfinite;
} else if (L.Browser.mobile) {
return this._checkBoundsMaxLat(this._map.getBounds());
}
return this._checkBoundsMaxLat(this._map.getBounds().pad(1)); // Padding expands the bounds by its own dimensions but scaled with the given factor.
},
/**
* Expands the latitude to Infinity (or -Infinity) if the input bounds reach the map projection maximum defined latitude
* (in the case of Web/Spherical Mercator, it is 85.0511287798 / see https://en.wikipedia.org/wiki/Web_Mercator#Formulas).
* Otherwise, the removeOutsideVisibleBounds option will remove markers beyond that limit, whereas the same markers without
* this option (or outside MCG) will have their position floored (ceiled) by the projection and rendered at that limit,
* making the user think that MCG "eats" them and never displays them again.
* @param bounds L.LatLngBounds
* @returns {L.LatLngBounds}
* @private
*/
_checkBoundsMaxLat: function (bounds) {
var maxLat = this._maxLat;
if (maxLat !== undefined) {
if (bounds.getNorth() >= maxLat) {
bounds._northEast.lat = Infinity;
}
if (bounds.getSouth() <= -maxLat) {
bounds._southWest.lat = -Infinity;
}
}
return bounds;
},
//Shared animation code
_animationAddLayerNonAnimated: function (layer, newCluster) {
if (newCluster === layer) {
this._featureGroup.addLayer(layer);
} else if (newCluster._childCount === 2) {
newCluster._addToMap();
var markers = newCluster.getAllChildMarkers();
this._featureGroup.removeLayer(markers[0]);
this._featureGroup.removeLayer(markers[1]);
} else {
newCluster._updateIcon();
}
},
/**
* Extracts individual (i.e. non-group) layers from a Layer Group.
* @param group to extract layers from.
* @param output {Array} in which to store the extracted layers.
* @returns {*|Array}
* @private
*/
_extractNonGroupLayers: function (group, output) {
var layers = group.getLayers(),
i = 0,
layer;
output = output || [];
for (; i < layers.length; i++) {
layer = layers[i];
if (layer instanceof L.LayerGroup) {
this._extractNonGroupLayers(layer, output);
continue;
}
output.push(layer);
}
return output;
},
/**
* Implements the singleMarkerMode option.
* @param layer Marker to re-style using the Clusters iconCreateFunction.
* @returns {L.Icon} The newly created icon.
* @private
*/
_overrideMarkerIcon: function (layer) {
var icon = layer.options.icon = this.options.iconCreateFunction({
getChildCount: function () {
return 1;
},
getAllChildMarkers: function () {
return [layer];
}
});
return icon;
}
});
// Constant bounds used in case option "removeOutsideVisibleBounds" is set to false.
L.MarkerClusterGroup.include({
_mapBoundsInfinite: new L.LatLngBounds(new L.LatLng(-Infinity, -Infinity), new L.LatLng(Infinity, Infinity))
});
L.MarkerClusterGroup.include({
_noAnimation: {
//Non Animated versions of everything
_animationStart: function () {
//Do nothing...
},
_animationZoomIn: function (previousZoomLevel, newZoomLevel) {
this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, Math.floor(this._map.getMinZoom()), previousZoomLevel);
this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
//We didn't actually animate, but we use this event to mean "clustering animations have finished"
this.fire('animationend');
},
_animationZoomOut: function (previousZoomLevel, newZoomLevel) {
this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, Math.floor(this._map.getMinZoom()), previousZoomLevel);
this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
//We didn't actually animate, but we use this event to mean "clustering animations have finished"
this.fire('animationend');
},
_animationAddLayer: function (layer, newCluster) {
this._animationAddLayerNonAnimated(layer, newCluster);
}
},
_withAnimation: {
//Animated versions here
_animationStart: function () {
this._map._mapPane.className += ' leaflet-cluster-anim';
this._inZoomAnimation++;
},
_animationZoomIn: function (previousZoomLevel, newZoomLevel) {
var bounds = this._getExpandedVisibleBounds(),
fg = this._featureGroup,
minZoom = Math.floor(this._map.getMinZoom()),
i;
this._ignoreMove = true;
//Add all children of current clusters to map and remove those clusters from map
this._topClusterLevel._recursively(bounds, previousZoomLevel, minZoom, function (c) {
var startPos = c._latlng,
markers = c._markers,
m;
if (!bounds.contains(startPos)) {
startPos = null;
}
if (c._isSingleParent() && previousZoomLevel + 1 === newZoomLevel) { //Immediately add the new child and remove us
fg.removeLayer(c);
c._recursivelyAddChildrenToMap(null, newZoomLevel, bounds);
} else {
//Fade out old cluster
c.clusterHide();
c._recursivelyAddChildrenToMap(startPos, newZoomLevel, bounds);
}
//Remove all markers that aren't visible any more
//TODO: Do we actually need to do this on the higher levels too?
for (i = markers.length - 1; i >= 0; i--) {
m = markers[i];
if (!bounds.contains(m._latlng)) {
fg.removeLayer(m);
}
}
});
this._forceLayout();
//Update opacities
this._topClusterLevel._recursivelyBecomeVisible(bounds, newZoomLevel);
//TODO Maybe? Update markers in _recursivelyBecomeVisible
fg.eachLayer(function (n) {
if (!(n instanceof L.MarkerCluster) && n._icon) {
n.clusterShow();
}
});
//update the positions of the just added clusters/markers
this._topClusterLevel._recursively(bounds, previousZoomLevel, newZoomLevel, function (c) {
c._recursivelyRestoreChildPositions(newZoomLevel);
});
this._ignoreMove = false;
//Remove the old clusters and close the zoom animation
this._enqueue(function () {
//update the positions of the just added clusters/markers
this._topClusterLevel._recursively(bounds, previousZoomLevel, minZoom, function (c) {
fg.removeLayer(c);
c.clusterShow();
});
this._animationEnd();
});
},
_animationZoomOut: function (previousZoomLevel, newZoomLevel) {
this._animationZoomOutSingle(this._topClusterLevel, previousZoomLevel - 1, newZoomLevel);
//Need to add markers for those that weren't on the map before but are now
this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
//Remove markers that were on the map before but won't be now
this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, Math.floor(this._map.getMinZoom()), previousZoomLevel, this._getExpandedVisibleBounds());
},
_animationAddLayer: function (layer, newCluster) {
var me = this,
fg = this._featureGroup;
fg.addLayer(layer);
if (newCluster !== layer) {
if (newCluster._childCount > 2) { //Was already a cluster
newCluster._updateIcon();
this._forceLayout();
this._animationStart();
layer._setPos(this._map.latLngToLayerPoint(newCluster.getLatLng()));
layer.clusterHide();
this._enqueue(function () {
fg.removeLayer(layer);
layer.clusterShow();
me._animationEnd();
});
} else { //Just became a cluster
this._forceLayout();
me._animationStart();
me._animationZoomOutSingle(newCluster, this._map.getMaxZoom(), this._zoom);
}
}
}
},
// Private methods for animated versions.
_animationZoomOutSingle: function (cluster, previousZoomLevel, newZoomLevel) {
var bounds = this._getExpandedVisibleBounds(),
minZoom = Math.floor(this._map.getMinZoom());
//Animate all of the markers in the clusters to move to their cluster center point
cluster._recursivelyAnimateChildrenInAndAddSelfToMap(bounds, minZoom, previousZoomLevel + 1, newZoomLevel);
var me = this;
//Update the opacity (If we immediately set it they won't animate)
this._forceLayout();
cluster._recursivelyBecomeVisible(bounds, newZoomLevel);
//TODO: Maybe use the transition timing stuff to make this more reliable
//When the animations are done, tidy up
this._enqueue(function () {
//This cluster stopped being a cluster before the timeout fired
if (cluster._childCount === 1) {
var m = cluster._markers[0];
//If we were in a cluster animation at the time then the opacity and position of our child could be wrong now, so fix it
this._ignoreMove = true;
m.setLatLng(m.getLatLng());
this._ignoreMove = false;
if (m.clusterShow) {
m.clusterShow();
}
} else {
cluster._recursively(bounds, newZoomLevel, minZoom, function (c) {
c._recursivelyRemoveChildrenFromMap(bounds, minZoom, previousZoomLevel + 1);
});
}
me._animationEnd();
});
},
_animationEnd: function () {
if (this._map) {
this._map._mapPane.className = this._map._mapPane.className.replace(' leaflet-cluster-anim', '');
}
this._inZoomAnimation--;
this.fire('animationend');
},
//Force a browser layout of stuff in the map
// Should apply the current opacity and location to all elements so we can update them again for an animation
_forceLayout: function () {
//In my testing this works, infact offsetWidth of any element seems to work.
//Could loop all this._layers and do this for each _icon if it stops working
L.Util.falseFn(document.body.offsetWidth);
}
});
L.markerClusterGroup = function (options) {
return new L.MarkerClusterGroup(options);
};
var MarkerCluster = L.MarkerCluster = L.Marker.extend({
options: L.Icon.prototype.options,
initialize: function (group, zoom, a, b) {
L.Marker.prototype.initialize.call(this, a ? (a._cLatLng || a.getLatLng()) : new L.LatLng(0, 0),
{ icon: this, pane: group.options.clusterPane });
this._group = group;
this._zoom = zoom;
this._markers = [];
this._childClusters = [];
this._childCount = 0;
this._iconNeedsUpdate = true;
this._boundsNeedUpdate = true;
this._bounds = new L.LatLngBounds();
if (a) {
this._addChild(a);
}
if (b) {
this._addChild(b);
}
},
//Recursively retrieve all child markers of this cluster
getAllChildMarkers: function (storageArray, ignoreDraggedMarker) {
storageArray = storageArray || [];
for (var i = this._childClusters.length - 1; i >= 0; i--) {
this._childClusters[i].getAllChildMarkers(storageArray, ignoreDraggedMarker);
}
for (var j = this._markers.length - 1; j >= 0; j--) {
if (ignoreDraggedMarker && this._markers[j].__dragStart) {
continue;
}
storageArray.push(this._markers[j]);
}
return storageArray;
},
//Returns the count of how many child markers we have
getChildCount: function () {
return this._childCount;
},
//Zoom to the minimum of showing all of the child markers, or the extents of this cluster
zoomToBounds: function (fitBoundsOptions) {
var childClusters = this._childClusters.slice(),
map = this._group._map,
boundsZoom = map.getBoundsZoom(this._bounds),
zoom = this._zoom + 1,
mapZoom = map.getZoom(),
i;
//calculate how far we need to zoom down to see all of the markers
while (childClusters.length > 0 && boundsZoom > zoom) {
zoom++;
var newClusters = [];
for (i = 0; i < childClusters.length; i++) {
newClusters = newClusters.concat(childClusters[i]._childClusters);
}
childClusters = newClusters;
}
if (boundsZoom > zoom) {
this._group._map.setView(this._latlng, zoom);
} else if (boundsZoom <= mapZoom) { //If fitBounds wouldn't zoom us down, zoom us down instead
this._group._map.setView(this._latlng, mapZoom + 1);
} else {
this._group._map.fitBounds(this._bounds, fitBoundsOptions);
}
},
getBounds: function () {
var bounds = new L.LatLngBounds();
bounds.extend(this._bounds);
return bounds;
},
_updateIcon: function () {
this._iconNeedsUpdate = true;
if (this._icon) {
this.setIcon(this);
}
},
//Cludge for Icon, we pretend to be an icon for performance
createIcon: function () {
if (this._iconNeedsUpdate) {
this._iconObj = this._group.options.iconCreateFunction(this);
this._iconNeedsUpdate = false;
}
return this._iconObj.createIcon();
},
createShadow: function () {
return this._iconObj.createShadow();
},
_addChild: function (new1, isNotificationFromChild) {
this._iconNeedsUpdate = true;
this._boundsNeedUpdate = true;
this._setClusterCenter(new1);
if (new1 instanceof L.MarkerCluster) {
if (!isNotificationFromChild) {
this._childClusters.push(new1);
new1.__parent = this;
}
this._childCount += new1._childCount;
} else {
if (!isNotificationFromChild) {
this._markers.push(new1);
}
this._childCount++;
}
if (this.__parent) {
this.__parent._addChild(new1, true);
}
},
/**
* Makes sure the cluster center is set. If not, uses the child center if it is a cluster, or the marker position.
* @param child L.MarkerCluster|L.Marker that will be used as cluster center if not defined yet.
* @private
*/
_setClusterCenter: function (child) {
if (!this._cLatLng) {
// when clustering, take position of the first point as the cluster center
this._cLatLng = child._cLatLng || child._latlng;
}
},
/**
* Assigns impossible bounding values so that the next extend entirely determines the new bounds.
* This method avoids having to trash the previous L.LatLngBounds object and to create a new one, which is much slower for this class.
* As long as the bounds are not extended, most other methods would probably fail, as they would with bounds initialized but not extended.
* @private
*/
_resetBounds: function () {
var bounds = this._bounds;
if (bounds._southWest) {
bounds._southWest.lat = Infinity;
bounds._southWest.lng = Infinity;
}
if (bounds._northEast) {
bounds._northEast.lat = -Infinity;
bounds._northEast.lng = -Infinity;
}
},
_recalculateBounds: function () {
var markers = this._markers,
childClusters = this._childClusters,
latSum = 0,
lngSum = 0,
totalCount = this._childCount,
i, child, childLatLng, childCount;
// Case where all markers are removed from the map and we are left with just an empty _topClusterLevel.
if (totalCount === 0) {
return;
}
// Reset rather than creating a new object, for performance.
this._resetBounds();
// Child markers.
for (i = 0; i < markers.length; i++) {
childLatLng = markers[i]._latlng;
this._bounds.extend(childLatLng);
latSum += childLatLng.lat;
lngSum += childLatLng.lng;
}
// Child clusters.
for (i = 0; i < childClusters.length; i++) {
child = childClusters[i];
// Re-compute child bounds and weighted position first if necessary.
if (child._boundsNeedUpdate) {
child._recalculateBounds();
}
this._bounds.extend(child._bounds);
childLatLng = child._wLatLng;
childCount = child._childCount;
latSum += childLatLng.lat * childCount;
lngSum += childLatLng.lng * childCount;
}
this._latlng = this._wLatLng = new L.LatLng(latSum / totalCount, lngSum / totalCount);
// Reset dirty flag.
this._boundsNeedUpdate = false;
},
//Set our markers position as given and add it to the map
_addToMap: function (startPos) {
if (startPos) {
this._backupLatlng = this._latlng;
this.setLatLng(startPos);
}
this._group._featureGroup.addLayer(this);
},
_recursivelyAnimateChildrenIn: function (bounds, center, maxZoom) {
this._recursively(bounds, this._group._map.getMinZoom(), maxZoom - 1,
function (c) {
var markers = c._markers,
i, m;
for (i = markers.length - 1; i >= 0; i--) {
m = markers[i];
//Only do it if the icon is still on the map
if (m._icon) {
m._setPos(center);
m.clusterHide();
}
}
},
function (c) {
var childClusters = c._childClusters,
j, cm;
for (j = childClusters.length - 1; j >= 0; j--) {
cm = childClusters[j];
if (cm._icon) {
cm._setPos(center);
cm.clusterHide();
}
}
}
);
},
_recursivelyAnimateChildrenInAndAddSelfToMap: function (bounds, mapMinZoom, previousZoomLevel, newZoomLevel) {
this._recursively(bounds, newZoomLevel, mapMinZoom,
function (c) {
c._recursivelyAnimateChildrenIn(bounds, c._group._map.latLngToLayerPoint(c.getLatLng()).round(), previousZoomLevel);
//TODO: depthToAnimateIn affects _isSingleParent, if there is a multizoom we may/may not be.
//As a hack we only do a animation free zoom on a single level zoom, if someone does multiple levels then we always animate
if (c._isSingleParent() && previousZoomLevel - 1 === newZoomLevel) {
c.clusterShow();
c._recursivelyRemoveChildrenFromMap(bounds, mapMinZoom, previousZoomLevel); //Immediately remove our children as we are replacing them. TODO previousBounds not bounds
} else {
c.clusterHide();
}
c._addToMap();
}
);
},
_recursivelyBecomeVisible: function (bounds, zoomLevel) {
this._recursively(bounds, this._group._map.getMinZoom(), zoomLevel, null, function (c) {
c.clusterShow();
});
},
_recursivelyAddChildrenToMap: function (startPos, zoomLevel, bounds) {
this._recursively(bounds, this._group._map.getMinZoom() - 1, zoomLevel,
function (c) {
if (zoomLevel === c._zoom) {
return;
}
//Add our child markers at startPos (so they can be animated out)
for (var i = c._markers.length - 1; i >= 0; i--) {
var nm = c._markers[i];
if (!bounds.contains(nm._latlng)) {
continue;
}
if (startPos) {
nm._backupLatlng = nm.getLatLng();
nm.setLatLng(startPos);
if (nm.clusterHide) {
nm.clusterHide();
}
}
c._group._featureGroup.addLayer(nm);
}
},
function (c) {
c._addToMap(startPos);
}
);
},
_recursivelyRestoreChildPositions: function (zoomLevel) {
//Fix positions of child markers
for (var i = this._markers.length - 1; i >= 0; i--) {
var nm = this._markers[i];
if (nm._backupLatlng) {
nm.setLatLng(nm._backupLatlng);
delete nm._backupLatlng;
}
}
if (zoomLevel - 1 === this._zoom) {
//Reposition child clusters
for (var j = this._childClusters.length - 1; j >= 0; j--) {
this._childClusters[j]._restorePosition();
}
} else {
for (var k = this._childClusters.length - 1; k >= 0; k--) {
this._childClusters[k]._recursivelyRestoreChildPositions(zoomLevel);
}
}
},
_restorePosition: function () {
if (this._backupLatlng) {
this.setLatLng(this._backupLatlng);
delete this._backupLatlng;
}
},
//exceptBounds: If set, don't remove any markers/clusters in it
_recursivelyRemoveChildrenFromMap: function (previousBounds, mapMinZoom, zoomLevel, exceptBounds) {
var m, i;
this._recursively(previousBounds, mapMinZoom - 1, zoomLevel - 1,
function (c) {
//Remove markers at every level
for (i = c._markers.length - 1; i >= 0; i--) {
m = c._markers[i];
if (!exceptBounds || !exceptBounds.contains(m._latlng)) {
c._group._featureGroup.removeLayer(m);
if (m.clusterShow) {
m.clusterShow();
}
}
}
},
function (c) {
//Remove child clusters at just the bottom level
for (i = c._childClusters.length - 1; i >= 0; i--) {
m = c._childClusters[i];
if (!exceptBounds || !exceptBounds.contains(m._latlng)) {
c._group._featureGroup.removeLayer(m);
if (m.clusterShow) {
m.clusterShow();
}
}
}
}
);
},
//Run the given functions recursively to this and child clusters
// boundsToApplyTo: a L.LatLngBounds representing the bounds of what clusters to recurse in to
// zoomLevelToStart: zoom level to start running functions (inclusive)
// zoomLevelToStop: zoom level to stop running functions (inclusive)
// runAtEveryLevel: function that takes an L.MarkerCluster as an argument that should be applied on every level
// runAtBottomLevel: function that takes an L.MarkerCluster as an argument that should be applied at only the bottom level
_recursively: function (boundsToApplyTo, zoomLevelToStart, zoomLevelToStop, runAtEveryLevel, runAtBottomLevel) {
var childClusters = this._childClusters,
zoom = this._zoom,
i, c;
if (zoomLevelToStart <= zoom) {
if (runAtEveryLevel) {
runAtEveryLevel(this);
}
if (runAtBottomLevel && zoom === zoomLevelToStop) {
runAtBottomLevel(this);
}
}
if (zoom < zoomLevelToStart || zoom < zoomLevelToStop) {
for (i = childClusters.length - 1; i >= 0; i--) {
c = childClusters[i];
if (c._boundsNeedUpdate) {
c._recalculateBounds();
}
if (boundsToApplyTo.intersects(c._bounds)) {
c._recursively(boundsToApplyTo, zoomLevelToStart, zoomLevelToStop, runAtEveryLevel, runAtBottomLevel);
}
}
}
},
//Returns true if we are the parent of only one cluster and that cluster is the same as us
_isSingleParent: function () {
//Don't need to check this._markers as the rest won't work if there are any
return this._childClusters.length > 0 && this._childClusters[0]._childCount === this._childCount;
}
});
/*
* Extends L.Marker to include two extra methods: clusterHide and clusterShow.
*
* They work as setOpacity(0) and setOpacity(1) respectively, but
* don't overwrite the options.opacity
*
*/
L.Marker.include({
clusterHide: function () {
var backup = this.options.opacity;
this.setOpacity(0);
this.options.opacity = backup;
return this;
},
clusterShow: function () {
return this.setOpacity(this.options.opacity);
}
});
L.DistanceGrid = function (cellSize) {
this._cellSize = cellSize;
this._sqCellSize = cellSize * cellSize;
this._grid = {};
this._objectPoint = { };
};
L.DistanceGrid.prototype = {
addObject: function (obj, point) {
var x = this._getCoord(point.x),
y = this._getCoord(point.y),
grid = this._grid,
row = grid[y] = grid[y] || {},
cell = row[x] = row[x] || [],
stamp = L.Util.stamp(obj);
this._objectPoint[stamp] = point;
cell.push(obj);
},
updateObject: function (obj, point) {
this.removeObject(obj);
this.addObject(obj, point);
},
//Returns true if the object was found
removeObject: function (obj, point) {
var x = this._getCoord(point.x),
y = this._getCoord(point.y),
grid = this._grid,
row = grid[y] = grid[y] || {},
cell = row[x] = row[x] || [],
i, len;
delete this._objectPoint[L.Util.stamp(obj)];
for (i = 0, len = cell.length; i < len; i++) {
if (cell[i] === obj) {
cell.splice(i, 1);
if (len === 1) {
delete row[x];
}
return true;
}
}
},
eachObject: function (fn, context) {
var i, j, k, len, row, cell, removed,
grid = this._grid;
for (i in grid) {
row = grid[i];
for (j in row) {
cell = row[j];
for (k = 0, len = cell.length; k < len; k++) {
removed = fn.call(context, cell[k]);
if (removed) {
k--;
len--;
}
}
}
}
},
getNearObject: function (point) {
var x = this._getCoord(point.x),
y = this._getCoord(point.y),
i, j, k, row, cell, len, obj, dist,
objectPoint = this._objectPoint,
closestDistSq = this._sqCellSize,
closest = null;
for (i = y - 1; i <= y + 1; i++) {
row = this._grid[i];
if (row) {
for (j = x - 1; j <= x + 1; j++) {
cell = row[j];
if (cell) {
for (k = 0, len = cell.length; k < len; k++) {
obj = cell[k];
dist = this._sqDist(objectPoint[L.Util.stamp(obj)], point);
if (dist < closestDistSq ||
dist <= closestDistSq && closest === null) {
closestDistSq = dist;
closest = obj;
}
}
}
}
}
}
return closest;
},
_getCoord: function (x) {
var coord = Math.floor(x / this._cellSize);
return isFinite(coord) ? coord : x;
},
_sqDist: function (p, p2) {
var dx = p2.x - p.x,
dy = p2.y - p.y;
return dx * dx + dy * dy;
}
};
/* Copyright (c) 2012 the authors listed at the following URL, and/or
the authors of referenced articles or incorporated external code:
http://en.literateprograms.org/Quickhull_(Javascript)?action=history&offset=20120410175256
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Retrieved from: http://en.literateprograms.org/Quickhull_(Javascript)?oldid=18434
*/
(function () {
L.QuickHull = {
/*
* @param {Object} cpt a point to be measured from the baseline
* @param {Array} bl the baseline, as represented by a two-element
* array of latlng objects.
* @returns {Number} an approximate distance measure
*/
getDistant: function (cpt, bl) {
var vY = bl[1].lat - bl[0].lat,
vX = bl[0].lng - bl[1].lng;
return (vX * (cpt.lat - bl[0].lat) + vY * (cpt.lng - bl[0].lng));
},
/*
* @param {Array} baseLine a two-element array of latlng objects
* representing the baseline to project from
* @param {Array} latLngs an array of latlng objects
* @returns {Object} the maximum point and all new points to stay
* in consideration for the hull.
*/
findMostDistantPointFromBaseLine: function (baseLine, latLngs) {
var maxD = 0,
maxPt = null,
newPoints = [],
i, pt, d;
for (i = latLngs.length - 1; i >= 0; i--) {
pt = latLngs[i];
d = this.getDistant(pt, baseLine);
if (d > 0) {
newPoints.push(pt);
} else {
continue;
}
if (d > maxD) {
maxD = d;
maxPt = pt;
}
}
return { maxPoint: maxPt, newPoints: newPoints };
},
/*
* Given a baseline, compute the convex hull of latLngs as an array
* of latLngs.
*
* @param {Array} latLngs
* @returns {Array}
*/
buildConvexHull: function (baseLine, latLngs) {
var convexHullBaseLines = [],
t = this.findMostDistantPointFromBaseLine(baseLine, latLngs);
if (t.maxPoint) { // if there is still a point "outside" the base line
convexHullBaseLines =
convexHullBaseLines.concat(
this.buildConvexHull([baseLine[0], t.maxPoint], t.newPoints)
);
convexHullBaseLines =
convexHullBaseLines.concat(
this.buildConvexHull([t.maxPoint, baseLine[1]], t.newPoints)
);
return convexHullBaseLines;
} else { // if there is no more point "outside" the base line, the current base line is part of the convex hull
return [baseLine[0]];
}
},
/*
* Given an array of latlngs, compute a convex hull as an array
* of latlngs
*
* @param {Array} latLngs
* @returns {Array}
*/
getConvexHull: function (latLngs) {
// find first baseline
var maxLat = false, minLat = false,
maxLng = false, minLng = false,
maxLatPt = null, minLatPt = null,
maxLngPt = null, minLngPt = null,
maxPt = null, minPt = null,
i;
for (i = latLngs.length - 1; i >= 0; i--) {
var pt = latLngs[i];
if (maxLat === false || pt.lat > maxLat) {
maxLatPt = pt;
maxLat = pt.lat;
}
if (minLat === false || pt.lat < minLat) {
minLatPt = pt;
minLat = pt.lat;
}
if (maxLng === false || pt.lng > maxLng) {
maxLngPt = pt;
maxLng = pt.lng;
}
if (minLng === false || pt.lng < minLng) {
minLngPt = pt;
minLng = pt.lng;
}
}
if (minLat !== maxLat) {
minPt = minLatPt;
maxPt = maxLatPt;
} else {
minPt = minLngPt;
maxPt = maxLngPt;
}
var ch = [].concat(this.buildConvexHull([minPt, maxPt], latLngs),
this.buildConvexHull([maxPt, minPt], latLngs));
return ch;
}
};
}());
L.MarkerCluster.include({
getConvexHull: function () {
var childMarkers = this.getAllChildMarkers(),
points = [],
p, i;
for (i = childMarkers.length - 1; i >= 0; i--) {
p = childMarkers[i].getLatLng();
points.push(p);
}
return L.QuickHull.getConvexHull(points);
}
});
//This code is 100% based on https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet
//Huge thanks to jawj for implementing it first to make my job easy :-)
L.MarkerCluster.include({
_2PI: Math.PI * 2,
_circleFootSeparation: 25, //related to circumference of circle
_circleStartAngle: 0,
_spiralFootSeparation: 28, //related to size of spiral (experiment!)
_spiralLengthStart: 11,
_spiralLengthFactor: 5,
_circleSpiralSwitchover: 9, //show spiral instead of circle from this marker count upwards.
// 0 -> always spiral; Infinity -> always circle
spiderfy: function () {
if (this._group._spiderfied === this || this._group._inZoomAnimation) {
return;
}
var childMarkers = this.getAllChildMarkers(null, true),
group = this._group,
map = group._map,
center = map.latLngToLayerPoint(this._latlng),
positions;
this._group._unspiderfy();
this._group._spiderfied = this;
//TODO Maybe: childMarkers order by distance to center
if (this._group.options.spiderfyShapePositions) {
positions = this._group.options.spiderfyShapePositions(childMarkers.length, center);
} else if (childMarkers.length >= this._circleSpiralSwitchover) {
positions = this._generatePointsSpiral(childMarkers.length, center);
} else {
center.y += 10; // Otherwise circles look wrong => hack for standard blue icon, renders differently for other icons.
positions = this._generatePointsCircle(childMarkers.length, center);
}
this._animationSpiderfy(childMarkers, positions);
},
unspiderfy: function (zoomDetails) {
/// <param Name="zoomDetails">Argument from zoomanim if being called in a zoom animation or null otherwise</param>
if (this._group._inZoomAnimation) {
return;
}
this._animationUnspiderfy(zoomDetails);
this._group._spiderfied = null;
},
_generatePointsCircle: function (count, centerPt) {
var circumference = this._group.options.spiderfyDistanceMultiplier * this._circleFootSeparation * (2 + count),
legLength = circumference / this._2PI, //radius from circumference
angleStep = this._2PI / count,
res = [],
i, angle;
legLength = Math.max(legLength, 35); // Minimum distance to get outside the cluster icon.
res.length = count;
for (i = 0; i < count; i++) { // Clockwise, like spiral.
angle = this._circleStartAngle + i * angleStep;
res[i] = new L.Point(centerPt.x + legLength * Math.cos(angle), centerPt.y + legLength * Math.sin(angle))._round();
}
return res;
},
_generatePointsSpiral: function (count, centerPt) {
var spiderfyDistanceMultiplier = this._group.options.spiderfyDistanceMultiplier,
legLength = spiderfyDistanceMultiplier * this._spiralLengthStart,
separation = spiderfyDistanceMultiplier * this._spiralFootSeparation,
lengthFactor = spiderfyDistanceMultiplier * this._spiralLengthFactor * this._2PI,
angle = 0,
res = [],
i;
res.length = count;
// Higher index, closer position to cluster center.
for (i = count; i >= 0; i--) {
// Skip the first position, so that we are already farther from center and we avoid
// being under the default cluster icon (especially important for Circle Markers).
if (i < count) {
res[i] = new L.Point(centerPt.x + legLength * Math.cos(angle), centerPt.y + legLength * Math.sin(angle))._round();
}
angle += separation / legLength + i * 0.0005;
legLength += lengthFactor / angle;
}
return res;
},
_noanimationUnspiderfy: function () {
var group = this._group,
map = group._map,
fg = group._featureGroup,
childMarkers = this.getAllChildMarkers(null, true),
m, i;
group._ignoreMove = true;
this.setOpacity(1);
for (i = childMarkers.length - 1; i >= 0; i--) {
m = childMarkers[i];
fg.removeLayer(m);
if (m._preSpiderfyLatlng) {
m.setLatLng(m._preSpiderfyLatlng);
delete m._preSpiderfyLatlng;
}
if (m.setZIndexOffset) {
m.setZIndexOffset(0);
}
if (m._spiderLeg) {
map.removeLayer(m._spiderLeg);
delete m._spiderLeg;
}
}
group.fire('unspiderfied', {
cluster: this,
markers: childMarkers
});
group._ignoreMove = false;
group._spiderfied = null;
}
});
//Non Animated versions of everything
L.MarkerClusterNonAnimated = L.MarkerCluster.extend({
_animationSpiderfy: function (childMarkers, positions) {
var group = this._group,
map = group._map,
fg = group._featureGroup,
legOptions = this._group.options.spiderLegPolylineOptions,
i, m, leg, newPos;
group._ignoreMove = true;
// Traverse in ascending order to make sure that inner circleMarkers are on top of further legs. Normal markers are re-ordered by newPosition.
// The reverse order trick no longer improves performance on modern browsers.
for (i = 0; i < childMarkers.length; i++) {
newPos = map.layerPointToLatLng(positions[i]);
m = childMarkers[i];
// Add the leg before the marker, so that in case the latter is a circleMarker, the leg is behind it.
leg = new L.Polyline([this._latlng, newPos], legOptions);
map.addLayer(leg);
m._spiderLeg = leg;
// Now add the marker.
m._preSpiderfyLatlng = m._latlng;
m.setLatLng(newPos);
if (m.setZIndexOffset) {
m.setZIndexOffset(1000000); //Make these appear on top of EVERYTHING
}
fg.addLayer(m);
}
this.setOpacity(0.3);
group._ignoreMove = false;
group.fire('spiderfied', {
cluster: this,
markers: childMarkers
});
},
_animationUnspiderfy: function () {
this._noanimationUnspiderfy();
}
});
//Animated versions here
L.MarkerCluster.include({
_animationSpiderfy: function (childMarkers, positions) {
var me = this,
group = this._group,
map = group._map,
fg = group._featureGroup,
thisLayerLatLng = this._latlng,
thisLayerPos = map.latLngToLayerPoint(thisLayerLatLng),
svg = L.Path.SVG,
legOptions = L.extend({}, this._group.options.spiderLegPolylineOptions), // Copy the options so that we can modify them for animation.
finalLegOpacity = legOptions.opacity,
i, m, leg, legPath, legLength, newPos;
if (finalLegOpacity === undefined) {
finalLegOpacity = L.MarkerClusterGroup.prototype.options.spiderLegPolylineOptions.opacity;
}
if (svg) {
// If the initial opacity of the spider leg is not 0 then it appears before the animation starts.
legOptions.opacity = 0;
// Add the class for CSS transitions.
legOptions.className = (legOptions.className || '') + ' leaflet-cluster-spider-leg';
} else {
// Make sure we have a defined opacity.
legOptions.opacity = finalLegOpacity;
}
group._ignoreMove = true;
// Add markers and spider legs to map, hidden at our center point.
// Traverse in ascending order to make sure that inner circleMarkers are on top of further legs. Normal markers are re-ordered by newPosition.
// The reverse order trick no longer improves performance on modern browsers.
for (i = 0; i < childMarkers.length; i++) {
m = childMarkers[i];
newPos = map.layerPointToLatLng(positions[i]);
// Add the leg before the marker, so that in case the latter is a circleMarker, the leg is behind it.
leg = new L.Polyline([thisLayerLatLng, newPos], legOptions);
map.addLayer(leg);
m._spiderLeg = leg;
// Explanations: https://jakearchibald.com/2013/animated-line-drawing-svg/
// In our case the transition property is declared in the CSS file.
if (svg) {
legPath = leg._path;
legLength = legPath.getTotalLength() + 0.1; // Need a small extra length to avoid remaining dot in Firefox.
legPath.style.strokeDasharray = legLength; // Just 1 length is enough, it will be duplicated.
legPath.style.strokeDashoffset = legLength;
}
// If it is a marker, add it now and we'll animate it out
if (m.setZIndexOffset) {
m.setZIndexOffset(1000000); // Make normal markers appear on top of EVERYTHING
}
if (m.clusterHide) {
m.clusterHide();
}
// Vectors just get immediately added
fg.addLayer(m);
if (m._setPos) {
m._setPos(thisLayerPos);
}
}
group._forceLayout();
group._animationStart();
// Reveal markers and spider legs.
for (i = childMarkers.length - 1; i >= 0; i--) {
newPos = map.layerPointToLatLng(positions[i]);
m = childMarkers[i];
//Move marker to new position
m._preSpiderfyLatlng = m._latlng;
m.setLatLng(newPos);
if (m.clusterShow) {
m.clusterShow();
}
// Animate leg (animation is actually delegated to CSS transition).
if (svg) {
leg = m._spiderLeg;
legPath = leg._path;
legPath.style.strokeDashoffset = 0;
//legPath.style.strokeOpacity = finalLegOpacity;
leg.setStyle({opacity: finalLegOpacity});
}
}
this.setOpacity(0.3);
group._ignoreMove = false;
setTimeout(function () {
group._animationEnd();
group.fire('spiderfied', {
cluster: me,
markers: childMarkers
});
}, 200);
},
_animationUnspiderfy: function (zoomDetails) {
var me = this,
group = this._group,
map = group._map,
fg = group._featureGroup,
thisLayerPos = zoomDetails ? map._latLngToNewLayerPoint(this._latlng, zoomDetails.zoom, zoomDetails.center) : map.latLngToLayerPoint(this._latlng),
childMarkers = this.getAllChildMarkers(null, true),
svg = L.Path.SVG,
m, i, leg, legPath, legLength, nonAnimatable;
group._ignoreMove = true;
group._animationStart();
//Make us visible and bring the child markers back in
this.setOpacity(1);
for (i = childMarkers.length - 1; i >= 0; i--) {
m = childMarkers[i];
//Marker was added to us after we were spiderfied
if (!m._preSpiderfyLatlng) {
continue;
}
//Close any popup on the marker first, otherwise setting the location of the marker will make the map scroll
m.closePopup();
//Fix up the location to the real one
m.setLatLng(m._preSpiderfyLatlng);
delete m._preSpiderfyLatlng;
//Hack override the location to be our center
nonAnimatable = true;
if (m._setPos) {
m._setPos(thisLayerPos);
nonAnimatable = false;
}
if (m.clusterHide) {
m.clusterHide();
nonAnimatable = false;
}
if (nonAnimatable) {
fg.removeLayer(m);
}
// Animate the spider leg back in (animation is actually delegated to CSS transition).
if (svg) {
leg = m._spiderLeg;
legPath = leg._path;
legLength = legPath.getTotalLength() + 0.1;
legPath.style.strokeDashoffset = legLength;
leg.setStyle({opacity: 0});
}
}
group._ignoreMove = false;
setTimeout(function () {
//If we have only <= one child left then that marker will be shown on the map so don't remove it!
var stillThereChildCount = 0;
for (i = childMarkers.length - 1; i >= 0; i--) {
m = childMarkers[i];
if (m._spiderLeg) {
stillThereChildCount++;
}
}
for (i = childMarkers.length - 1; i >= 0; i--) {
m = childMarkers[i];
if (!m._spiderLeg) { //Has already been unspiderfied
continue;
}
if (m.clusterShow) {
m.clusterShow();
}
if (m.setZIndexOffset) {
m.setZIndexOffset(0);
}
if (stillThereChildCount > 1) {
fg.removeLayer(m);
}
map.removeLayer(m._spiderLeg);
delete m._spiderLeg;
}
group._animationEnd();
group.fire('unspiderfied', {
cluster: me,
markers: childMarkers
});
}, 200);
}
});
L.MarkerClusterGroup.include({
//The MarkerCluster currently spiderfied (if any)
_spiderfied: null,
unspiderfy: function () {
this._unspiderfy.apply(this, arguments);
},
_spiderfierOnAdd: function () {
this._map.on('click', this._unspiderfyWrapper, this);
if (this._map.options.zoomAnimation) {
this._map.on('zoomstart', this._unspiderfyZoomStart, this);
}
//Browsers without zoomAnimation or a big zoom don't fire zoomstart
this._map.on('zoomend', this._noanimationUnspiderfy, this);
if (!L.Browser.touch) {
this._map.getRenderer(this);
//Needs to happen in the pageload, not after, or animations don't work in webkit
// http://stackoverflow.com/questions/8455200/svg-animate-with-dynamically-added-elements
//Disable on touch browsers as the animation messes up on a touch zoom and isn't very noticable
}
},
_spiderfierOnRemove: function () {
this._map.off('click', this._unspiderfyWrapper, this);
this._map.off('zoomstart', this._unspiderfyZoomStart, this);
this._map.off('zoomanim', this._unspiderfyZoomAnim, this);
this._map.off('zoomend', this._noanimationUnspiderfy, this);
//Ensure that markers are back where they should be
// Use no animation to avoid a sticky leaflet-cluster-anim class on mapPane
this._noanimationUnspiderfy();
},
//On zoom start we add a zoomanim handler so that we are guaranteed to be last (after markers are animated)
//This means we can define the animation they do rather than Markers doing an animation to their actual location
_unspiderfyZoomStart: function () {
if (!this._map) { //May have been removed from the map by a zoomEnd handler
return;
}
this._map.on('zoomanim', this._unspiderfyZoomAnim, this);
},
_unspiderfyZoomAnim: function (zoomDetails) {
//Wait until the first zoomanim after the user has finished touch-zooming before running the animation
if (L.DomUtil.hasClass(this._map._mapPane, 'leaflet-touching')) {
return;
}
this._map.off('zoomanim', this._unspiderfyZoomAnim, this);
this._unspiderfy(zoomDetails);
},
_unspiderfyWrapper: function () {
/// <summary>_unspiderfy but passes no arguments</summary>
this._unspiderfy();
},
_unspiderfy: function (zoomDetails) {
if (this._spiderfied) {
this._spiderfied.unspiderfy(zoomDetails);
}
},
_noanimationUnspiderfy: function () {
if (this._spiderfied) {
this._spiderfied._noanimationUnspiderfy();
}
},
//If the given layer is currently being spiderfied then we unspiderfy it so it isn't on the map anymore etc
_unspiderfyLayer: function (layer) {
if (layer._spiderLeg) {
this._featureGroup.removeLayer(layer);
if (layer.clusterShow) {
layer.clusterShow();
}
//Position will be fixed up immediately in _animationUnspiderfy
if (layer.setZIndexOffset) {
layer.setZIndexOffset(0);
}
this._map.removeLayer(layer._spiderLeg);
delete layer._spiderLeg;
}
}
});
/**
* Adds 1 public method to MCG and 1 to L.Marker to facilitate changing
* markers' icon options and refreshing their icon and their parent clusters
* accordingly (case where their iconCreateFunction uses data of childMarkers
* to make up the cluster icon).
*/
L.MarkerClusterGroup.include({
/**
* Updates the icon of all clusters which are parents of the given marker(s).
* In singleMarkerMode, also updates the given marker(s) icon.
* @param layers L.MarkerClusterGroup|L.LayerGroup|Array(L.Marker)|Map(L.Marker)|
* L.MarkerCluster|L.Marker (optional) list of markers (or single marker) whose parent
* clusters need to be updated. If not provided, retrieves all child markers of this.
* @returns {L.MarkerClusterGroup}
*/
refreshClusters: function (layers) {
if (!layers) {
layers = this._topClusterLevel.getAllChildMarkers();
} else if (layers instanceof L.MarkerClusterGroup) {
layers = layers._topClusterLevel.getAllChildMarkers();
} else if (layers instanceof L.LayerGroup) {
layers = layers._layers;
} else if (layers instanceof L.MarkerCluster) {
layers = layers.getAllChildMarkers();
} else if (layers instanceof L.Marker) {
layers = [layers];
} // else: must be an Array(L.Marker)|Map(L.Marker)
this._flagParentsIconsNeedUpdate(layers);
this._refreshClustersIcons();
// In case of singleMarkerMode, also re-draw the markers.
if (this.options.singleMarkerMode) {
this._refreshSingleMarkerModeMarkers(layers);
}
return this;
},
/**
* Simply flags all parent clusters of the given markers as having a "dirty" icon.
* @param layers Array(L.Marker)|Map(L.Marker) list of markers.
* @private
*/
_flagParentsIconsNeedUpdate: function (layers) {
var id, parent;
// Assumes layers is an Array or an Object whose prototype is non-enumerable.
for (id in layers) {
// Flag parent clusters' icon as "dirty", all the way up.
// Dumb process that flags multiple times upper parents, but still
// much more efficient than trying to be smart and make short lists,
// at least in the case of a hierarchy following a power law:
// http://jsperf.com/flag-nodes-in-power-hierarchy/2
parent = layers[id].__parent;
while (parent) {
parent._iconNeedsUpdate = true;
parent = parent.__parent;
}
}
},
/**
* Re-draws the icon of the supplied markers.
* To be used in singleMarkerMode only.
* @param layers Array(L.Marker)|Map(L.Marker) list of markers.
* @private
*/
_refreshSingleMarkerModeMarkers: function (layers) {
var id, layer;
for (id in layers) {
layer = layers[id];
// Make sure we do not override markers that do not belong to THIS group.
if (this.hasLayer(layer)) {
// Need to re-create the icon first, then re-draw the marker.
layer.setIcon(this._overrideMarkerIcon(layer));
}
}
}
});
L.Marker.include({
/**
* Updates the given options in the marker's icon and refreshes the marker.
* @param options map object of icon options.
* @param directlyRefreshClusters boolean (optional) true to trigger
* MCG.refreshClustersOf() right away with this single marker.
* @returns {L.Marker}
*/
refreshIconOptions: function (options, directlyRefreshClusters) {
var icon = this.options.icon;
L.setOptions(icon, options);
this.setIcon(icon);
// Shortcut to refresh the associated MCG clusters right away.
// To be used when refreshing a single marker.
// Otherwise, better use MCG.refreshClusters() once at the end with
// the list of modified markers.
if (directlyRefreshClusters && this.__parent) {
this.__parent._group.refreshClusters(this);
}
return this;
}
});
exports.MarkerClusterGroup = MarkerClusterGroup;
exports.MarkerCluster = MarkerCluster;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=leaflet.markercluster-src.js.map
</code></pre>
</article>
</section>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
<p class="sidebar-created-by">
<a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
<a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
</p>
</div>
</footer>
</div>
<div id="side-nav" class="side-nav">
<div style="margin-bottom: 10px;">
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
</div>
<div style="margin-bottom: 10px;">
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
</div>
<div style="margin-bottom: 10px;">
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
</div>
<div>
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
</div>
</div>
</div>
<script src="scripts/linenumber.js"> </script>
<script src="scripts/search.js"> </script>
</body>
</html>