@mapgis/webclient-leaflet-plugin
Version:
2,462 lines • 128 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> leaflet/view/MapView.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="ArcGISVectorTileLayer.html">ArcGISVectorTileLayer</a><span style="display: none;"><p>ArcGIS矢量瓦片图层
支持通过加载矢量瓦片服务、加载矢量瓦片样式文件和设置矢量瓦片样式的方式创建矢量瓦片图层
<br><br>[ES5引入方式]：<br/>
Zondy.Layer.ArcGISVectorTileLayer() <br/>
[ES6引入方式]：<br/>
import { ArcGISVectorTileLayer } 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/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="ArcGISVectorTileSubLayer.html">ArcGISVectorTileSubLayer</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="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="Projection.html">Projection</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="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/view/MapView.js</span>
</header>
<section>
<article>
<pre class="prettyprint source linenums"><code>import {
Zondy,
defaultValue,
BaseView,
ViewEventType,
LayerType,
Point,
Extent,
T,
showLayerByScale,
SpatialReference,
Projection,
MapEventType,
Geometry,
Config,
cloneObject,
TileInfoUtil,
// Utils,
Map,
isNull,
toJSON
} from '@mapgis/webclient-common'
import * as L from '@mapgis/leaflet'
import UI from './ui/UI'
import MapViewUtil from './utils/MapViewUtil'
import { getLayerView } from '../document/index'
import CRS from './utils/support/CRS'
import Popup from './utils/Popup'
import Screenshot from './utils/Screenshot'
/**
* 二维场景视图(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/>
* @class MapView
* @extends Evented
* @moduleEX ViewModule
* @fires BaseView#地图视图加载完毕事件
* @fires BaseView#鼠标点击事件
* @fires BaseView#鼠标双击事件
* @fires BaseView#鼠标按下事件
* @fires BaseView#鼠标抬起事件
* @fires BaseView#鼠标右键点击事件
* @fires BaseView#鼠标移动事件
* @fires BaseView#鼠标移出视图事件
* @fires BaseView#鼠标移入视图事件
* @fires BaseView#zoom变化事件
* @fires BaseView#地图移动事件
* @fires BaseView#地图大小变化事件
* @fires BaseView#键盘输入事件
* @fires BaseView#键盘按下事件
* @fires BaseView#键盘抬起事件
* @fires BaseView#地图视图改变事件
* @param {Object} options 构造参数
* @param {Map} [options.Map] 图层管理容器对象
* @param {String} [options.viewId] 二维场景视图的容器(html的div标签)ID
* @param {Number} [options.minZoom = 0] 最小缩放级数，在此设置则所有图层都不会浏览小于该级数的图片
* @param {Number} [options.maxZoom = 19] 最大缩放级数，在此设置则所有图层都不会浏览大于该级数的图片
* @param {Number} [options.zoom = 1] 初始化二维场景视图时显示级数
* @param {Boolean} [options.attributionControl = false] 是否显示右下角水印
* @param {Boolean} [options.zoomControl = true] 是否显示缩放控件
* @param {Boolean | String} [options.doubleClickZoom = true] 是否允许双击鼠标左键缩放或者缩放至图层中心点
* @param {Boolean} [options.dragging = true] 是否允许拖拽
* @param {Number} [options.zoomSnap = 1] 当使用flyTo缩放至中心点时，缩放级数乘以的系数
* @param {Number} [options.zoomDelta = 1] 当触发zoomIn或者zoomOut操作时，缩放级数乘以的系数
* @param {Boolean} [options.trackResize = true] 是否允许图层大小随视窗变化
* @param {Boolean} [options.keyboard = true] 是否允使用键盘的+/-号，来缩放地图
* @param {Number} [options.keyboardPanDelta = 80] 使用键盘来平移或缩放地图时的系数，单位px
* @param {Boolean | String} [options.scrollWheelZoom = true] 使用键盘来平移或缩放地图时的系数，单位px
* @param {Number} [options.wheelDebounceTime = 40] 滚轮事件的触发事件，单位毫秒
* @param {Number} [options.wheelPxPerZoomLevel = 60] 滚轮缩放时，地图缩放的像素单位，单位像素
* @param {Boolean} [options.tapHold = true] 是否开启移动端，手指按压不放事件
* @param {Number} [options.tapTolerance = 15] 手指有效触发范围，单位像素
* @param {Boolean | String} [options.touchZoom = true] 是否启用手指两指缩放，当值为center，表示两只滑动，缩放至地图中心
* @param {Boolean} [options.bounceAtZoomLimits = true] 当过最大或最小级数后不再缩放
* @param {Boolean} [options.animation = true] 是否启用动画
* @param {Point} [options.center = new Point({coordinates:[0,0]})] 地图视图中心点
* @param {Extent} [options.extent = undefined] 地图视图可视范围
* @param {Number} [options.scale = undefined] 地图视图比例尺
* @param {Number} [options.maxScale = undefined] 最大比例尺
* @param {Number} [options.minScale = undefined] 最小比例尺
* @param {Object} [options.popup = undefined] 地图弹框
* @param {Number} [options.rotation = 0] 地图视图旋转选项。单位为度，默认为0，表示不进行旋转
*
* @summary <h5>支持如下方法：</h5>
* <a href='#flyTo'>[1、视点跳转]</a><br/>
* <a href='#destroy'>[2、销毁视图对象]</a><br/>
* <a href='#getCenter'>[3、获取当前视图的中心点]</a><br/>
* <a href='#getPixelCenter'>[3、获取当前视图的像素中心点]</a><br/>
* <a href='#getZoom'>[4、获取当前缩放级数]</a><br/>
* <a href='#getExtent'>[5、获取当前视图的地理范围]</a><br/>
* <a href='#getPixelWorldExtent'>[6、获取当前视图的像素范围]</a><br/>
* <a href='#getMinZoom'>[7、获取最小缩放级数]</a><br/>
* <a href='#getMaxZoom'>[8、获取最大缩放级数]</a><br/>
* <a href='#getSize'>[9、获取当前视图容器的宽高]</a><br/>
* <a href='#toJSON'>[10、导出场景视图的配置文件]</a><br/>
* <a href='#clone'>[11、克隆并返回一个新的场景视图对象]</a><br/>
* <a href='#fromJSON'>[12、通过json构造并返回一个新的场景视图对象]</a><br/>
* <a href='#takeScreenshot'>[13、屏幕快照]</a><br/>
* [14、注册事件]{@link Evented#on}<br/>
* [15、移除事件]{@link Evented#off}<br/>
* <a href='#toMap'>[15、屏幕像素坐标点转地理坐标点]</a><br/>
* <a href='#toScreen'>[16、地理坐标点转屏幕像素坐标点]</a><br/>
* <a href='#hitTest'>[17、穿透检测]</a><br/>
* <a href='#getLayer'>[18、根据实际图层对象查询并返回基础图层]</a><br/>
* <a href='#getScale'>[19、获取当前比例尺]</a><br/>
*
* @example <caption><h7 id='MapView'>初始化一个二维场景视图</h7></caption>
* // ES5引入方式
* const { Map, MapView } = Zondy
* // ES6引入方式
* import { Map, MapView } from "@mapgis/webclient-leaflet-plugin"
* // 初始化图层管理容器
* const map = new Map();
* // 初始化地图视图对象
* const mapView = new MapView({
* // 二维场景视图的容器(html的div标签)ID
* viewId: "二维场景视图的容器的id",
* // 图层管理容器
* map: map
* });
*/
class MapView extends BaseView {
constructor(options) {
super(options)
// eslint-disable-next-line no-param-reassign
options = defaultValue(options, {})
this._options = options
/**
* 地图视图中心点
* @member {Point} MapView.prototype.center
*/
// 统一center的类型
this._center = defaultValue(
options.center,
new Point({ coordinates: [0, 0] })
)
if (
this._center &&
Array.isArray(this._center) &&
this._center.length > 1
) {
this._center = new Point({
coordinates: [this._center[0], this._center[1]]
})
}
/**
* 地图坐标系
* @member {Number} MapView.prototype.zoom
*/
this.crs = undefined // defaultValue(options.crs, 'EPSG3857')
/**
* 地图视图可视范围
* @member {Extent} MapView.prototype.extent
*/
this._extent = defaultValue(options.extent, undefined)
/**
* 是否启用视角跳转动画
* @member {Boolean} MapView.prototype.animation
*/
this.animation = defaultValue(options.animation, true)
/**
* 地图视图宽度
* @readonly
* @member {Number} MapView.prototype.width
*/
this.width = undefined
/**
* 地图视图高度
* @readonly
* @member {Number} MapView.prototype.height
*/
this.height = undefined
/**
* 地图层级
* @member {Number} MapView.prototype.zoom
*/
this._zoom = defaultValue(options.zoom, 0)
this._resolution = 0 // defaultValue(options.resolution, 0)
/**
* 地图视图比例尺
* @member {Number} MapView.prototype.scale
*/
this._scale = defaultValue(options.scale, undefined)
/**
* 地图视图范围
* @member {Extent} MapView.prototype.extent
*/
this._extent = defaultValue(options.extent, undefined)
/**
* 地图视图最大比例尺
* @member {Number} MapView.prototype.maxScale
*/
this.maxScale = defaultValue(options.maxScale, undefined)
/**
* 地图视图最小比例尺
* @member {Number} MapView.prototype.minScale
*/
this.minScale = defaultValue(options.minScale, undefined)
/**
* 地图弹框popup
* @member {Popup} MapView.prototype.popup
*/
this.popup = defaultValue(options.popup, undefined)
/**
* 视图渲染方式是否为canvas
* @member {Boolean} MapView.prototype.preferCanvas
*/
this.preferCanvas = defaultValue(options.preferCanvas, false)
// if (typeof this.crs === 'string') {
// if (L.CRS[this.crs]) {
// this.crs = L.CRS[this.crs]
// } else {
// this.crs = L.CRS.EPSG4326
// }
// }
/**
* 视图空间参考系
* @readonly
* @member {SpatialReference} MapView.prototype._spatialReference
*/
this._spatialReference = undefined
this._referenceLayer = undefined
/**
* 是否锁定视图空间参考系
* @member {Boolean} MapView.prototype.spatialReferenceLocked
*/
this.spatialReferenceLocked = defaultValue(
options.spatialReferenceLocked,
false
)
/**
* 地图视图旋转选项。单位为度，默认为0，表示不进行旋转
* @member {Boolean} MapView.prototype.rotation
*/
this._rotation = defaultValue(options.rotation, 0)
// 是否重置地图视图的坐标系
this._isCustomCrs = false
// 是否绑定Leaflet
this._map._initLeafletView = true
// 屏幕打印对象
this._screenshot = null
// 初始化地图引擎
// this._initView(false, this._options)
}
/**
* 视点跳转<a id='flyTo'></a>
* @param options 跳转参数
* @param {Array} [options.center] 跳转中心点
* @param {Number} [options.zoom = 1] 地图层级
* @param {Extent} [options.extent] 按范围跳转
* @example <caption><h7>中心点跳转示例</h7></caption>
* // ES5引入方式
* const { Map, MapView } = Zondy
* // ES6引入方式
* import { Map, MapView } from "@mapgis/webclient-leaflet-plugin"
* // 初始化图层管理容器
* map = new .Map();
* // 初始化地图视图对象
* mapView = new MapView({
* // 视图id
* viewId: "view-id",
* // 图层管理容器
* map: map
* });
* // 视点跳转
* mapView.flyTo({
* // 跳转中心点
* center: [{x}, {y}],
* // 地图层级
* zoom: {zoom}
* });
*
* @example <caption><h7>按范围跳转示例</h7></caption>
* // ES5引入方式
* const { Map, MapView } = Zondy
* const { Extent } = Zondy.Geometry
* // ES6引入方式
* import { Map, MapView, Extent } from "@mapgis/webclient-leaflet-plugin"
* // 初始化图层管理容器
* map = new Map();
* // 初始化地图视图对象
* mapView = new MapView({
* // 视图id
* viewId: "view-id",
* // 图层管理容器
* map: map
* });
* mapView.flyTo({
* // 范围几何
* extent: new Extent({
* "xmin":10,
* "xmax":210,
* "ymin":0,
* "ymax":100,
* })
* });
*
* @example <caption><h7>按范围跳转示例-拿到图层信息后跳转</h7></caption>
* // ES5引入方式
* const { IGSMapImageLayer } = Zondy.Layer
* // ES6引入方式
* import { IGSMapImageLayer } from "@mapgis/webclient-leaflet-plugin"
* const igsMapImageLayer = new IGSMapImageLayer({
* url: 'http://192.168.82.89:8089/igs/rest/services/Map/Hubei4326/MapServer'
* });
* map.add(igsMapImageLayer);
* // 图层加载完毕
* igsMapImageLayer.on('layer-view-created', function (result) {
* console.log("加载完毕:", result.layer)
* //视点跳转
* mapView.flyTo({
* extent: result.layer.extent
* });
* })
*/
flyTo(options) {
options = defaultValue(options, {})
const zoom = defaultValue(options.zoom, 1)
// 获取center
const center = this._getFlyToCenter(options)
// 获取extent
const extent = this._getFlyToExtent(options)
if (this._innerView) {
if (center) {
this._innerView.setView(
[center.coordinates[1], center.coordinates[0]],
zoom
)
} else if (extent) {
this._innerView.fitBounds([
[extent.ymin, extent.xmin],
[extent.ymax, extent.xmax]
])
}
}
}
/**
* 从extent获取经纬度范围
* @private
* @param {Extent} extent 范围对象
* @return {Object} 经纬度范围
* */
_getLatLngFromExtent(extent) {
const spatialReference = new SpatialReference('EPSG:4326')
const newExtent = Projection.project(extent, spatialReference)
const northEastLatlng = new L.latLng(newExtent.ymax, newExtent.xmax)
const southWestLatlng = new L.latLng(newExtent.ymin, newExtent.xmin)
return {
northEastLatlng,
southWestLatlng
}
}
/**
* 从center获取经纬度范围
* @private
* @param {Point} point 范围对象
* @return {Object} 地理坐标
* */
_getLatLngFromPoint(point) {
const spatialReference = new SpatialReference('EPSG:4326')
const newCenter = Projection.project(point, spatialReference)
const centerLatlng = new L.latLng(
newCenter.coordinates[1],
newCenter.coordinates[0]
)
return centerLatlng
}
/**
* 初始化地图视图事件
* @private
* */
_initViewEvent() {
const self = this
// 定义一个变量存储单击触发事件
this._clickStore = null
// 定义一个变量存储拖拽事件参数
this._dragParams = { isDrag: false, origin: null, action: '', button: null }
// 地图视图加载完毕事件
self.fire(ViewEventType.loaded, {})
// leaflet注册点击事件
this._innerView.on('click', (event) => {
// 单击触发事件，300ms延迟
self._clickStore = setTimeout(function () {
// 发送左键单击点击事件
if (self._clickStore) {
self.fire(ViewEventType.click, MapViewUtil.getMouseEvent(event, self))
}
}, 300)
// 发送立即点击事件
self.fire(
ViewEventType.immediateClick,
MapViewUtil.getMouseEvent(event, self)
)
})
// 注册鼠标右键按下事件
this._innerView.on('contextmenu', (event) => {
// 单击触发事件，300ms延迟
self._clickStore = setTimeout(function () {
// 发送鼠标右键按下事件
if (self._clickStore) {
self.fire(ViewEventType.click, MapViewUtil.getMouseEvent(event, self))
}
}, 300)
// 发送立即点击事件
self.fire(
ViewEventType.immediateClick,
MapViewUtil.getMouseEvent(event, self)
)
})
// 注册双击事件
this._innerView.on('dblclick', (event) => {
// 单击事件清理
if (self._clickStore) {
clearTimeout(this._clickStore)
self._clickStore = null
}
// 发送双击事件
self.fire(
ViewEventType.doubleClick,
MapViewUtil.getMouseEvent(event, self)
)
})
// 注册鼠标按下事件
this._innerView.on('mousedown', (event) => {
// 发送鼠标按下事件
self.fire(
ViewEventType.pointerDown,
MapViewUtil.getMouseEvent(event, self)
)
// 发送鼠标拖拽开始事件
if (!this._dragParams.isDrag) {
this._dragParams.origin = {
x: event.originalEvent.layerX,
y: event.originalEvent.layerY
}
this._dragParams.button = event.originalEvent.button
this._dragParams.action = 'mouse-down'
this._dragParams.isDrag = false
}
})
// 注册鼠标抬起事件
this._innerView.on('mouseup', (event) => {
// 发送鼠标抬起事件
self.fire(ViewEventType.pointerUp, MapViewUtil.getMouseEvent(event, self))
// 发送鼠标拖拽结束事件
if (self._dragParams.isDrag && this._dragParams.action === 'update') {
this._dragParams.action = 'end'
self.fire(
ViewEventType.drag,
MapViewUtil.getDragEvent(
event,
self,
self._dragParams.origin,
this._dragParams.action
)
)
}
self._dragParams = {
isDrag: false,
origin: null,
action: '',
button: null
}
})
// 注册鼠标移动事件
this._innerView.on('mousemove', (event) => {
// 发送鼠标移动视图事件
self.fire(
ViewEventType.pointerMove,
MapViewUtil.getMouseEvent(event, self)
)
// 发送鼠标拖拽中事件
if (self._dragParams.isDrag) {
self.fire(
ViewEventType.drag,
MapViewUtil.getDragEvent(
event,
self,
self._dragParams.origin,
self._dragParams.action,
self._dragParams.button
)
)
self._dragParams.action = 'update'
} else if (this._dragParams.action === 'mouse-down') {
this._dragParams.action = 'start'
self._dragParams.isDrag = true
}
})
// 注册键盘按下事件
this._innerView.on('keydown', (event) => {
// 发送键盘按下事件
self.fire(
ViewEventType.keyDown,
MapViewUtil.getKeyEvent(event, self, ViewEventType.keyDown)
)
})
// 注册键盘抬起事件
this._innerView.on('keyup', (event) => {
// 发送键盘抬起事件
self.fire(
ViewEventType.keyUp,
MapViewUtil.getKeyEvent(event, self, ViewEventType.keyUp)
)
})
// 注册视图开始改变事件
this._innerView.on('movestart', () => {
self.stationary = false
})
// 注册zoom变化事件
this._innerView.on('zoom', (event) => {
self._map.layers.forEach(function (layer) {
switch (layer.type) {
case LayerType.igsFeature:
case LayerType.graphics:
showLayerByScale(self, layer)
break
default:
break
}
})
// 发送zoom变化事件
self.fire(ViewEventType.zoom, {
zoom: event.target._zoom,
event
})
})
// 注册zoom end事件
this._innerView.on('zoomend', (event) => {
// 更新地图视野范围，比例尺
self._zoomEndHandler()
// 发送地图视图改变事件
self.fire(
ViewEventType.viewChange,
MapViewUtil.getViewChangeEvent(event, self)
)
})
// 注册地图移动完成事件
this._innerView.on('moveend', (event) => {
// 更新地图视中心
self._moveEndHandler()
// 发送地图视图改变事件
self.fire(
ViewEventType.viewChange,
MapViewUtil.getViewChangeEvent(event, self)
)
// self.fire(ViewEventType.mapMove, event)
self.stationary = true
})
// 注册地图大小变化事件
this._innerView.on('resize', (event) => {
// 发送地图初始化后触发的事件
self.fire(ViewEventType.resize, {
oldWidth: event.oldSize.x,
oldHeight: event.oldSize.y,
width: event.newSize.x,
height: event.newSize.y
})
// 更新地图窗口宽高
self._initSize()
})
}
/**
* 设置（鼠标）操作地图事件是否可用
* @private
* @param {String} actionType 操作类型
* @param {Boolean} isEnable 是否可用
* */
_mapActionControl(actionType, isEnable) {
if (!this._innerView) return
if (actionType === 'drag-pan') {
if (isEnable) {
this._innerView.dragging.enable()
} else {
this._innerView.dragging.disable()
}
} else if (actionType === 'double-click-zoom') {
if (isEnable) {
this._innerView.doubleClickZoom.enable()
} else {
this._innerView.doubleClickZoom.disable()
}
}
}
/**
* 初始化一个地图视图对象
* @param isReset 是否是重置视图
* @private
* */
_initView(isReset, options) {
this._innerView = L.map(this._viewId, {
// 是否使用Canvas渲染方式
preferCanvas: this.preferCanvas,
// 是否显示右下角水印
attributionControl: defaultValue(options.attributionControl, false),
// 是否显示缩放控件
zoomControl: defaultValue(options.zoomControl, true),
// 是否允许双击鼠标左键缩放或者缩放至图层中心点
doubleClickZoom: defaultValue(options.doubleClickZoom, true),
// 是否允许拖拽
dragging: defaultValue(options.dragging, true),
// 当使用flyTo缩放至中心点时，缩放级数乘以的系数
zoomSnap: defaultValue(options.zoomSnap, 1),
// 当触发zoomIn或者zoomOut操作时，缩放级数乘以的系数
zoomDelta: defaultValue(options.zoomDelta, 1),
// 是否允许图层大小随视窗变化
trackResize: defaultValue(options.trackResize, true),
// 是否允使用键盘的+/-号，来缩放地图或者使用方向键来平移地图
keyboard: defaultValue(options.keyboard, true),
// 使用键盘来平移或缩放地图时的系数，单位px
keyboardPanDelta: defaultValue(options.keyboardPanDelta, 80),
// 是否允许使用鼠标滚轮来缩放地图，当值为center时，表示使用滚轮缩放至地图中心点
scrollWheelZoom: defaultValue(options.scrollWheelZoom, true),
// 滚轮事件的触发事件，单位毫秒
wheelDebounceTime: defaultValue(options.wheelDebounceTime, 40),
// 滚轮缩放时，地图缩放的像素单位，单位像素
wheelPxPerZoomLevel: defaultValue(options.wheelDebounceTime, 60),
// 是否开启移动端，手指按压不放事件
tapHold: defaultValue(options.tapHold, true),
// 手指有效触发范围，单位像素
tapTolerance: defaultValue(options.tapTolerance, 15),
// 是否启用手指两指缩放，当值为center，表示两只滑动，缩放至地图中心
touchZoom: defaultValue(options.touchZoom, true),
// 当过最大或最小级数后不再缩放
bounceAtZoomLimits: defaultValue(options.bounceAtZoomLimits, true),
// 图层空间参考系
crs: this.crs,
// 图层中心点
center:
this._center && this._center.coordinates
? [this._center.coordinates[1], this._center.coordinates[0]]
: [0, 0],
// 可视范围
extent: defaultValue(this._extent, undefined),
// 最大缩放级数
maxZoom: this.maxZoom,
// 最小缩放级数
minZoom: this.minZoom,
// 初始化时显示级数
zoom: this._zoom,
// 是否启用视点跳转动画
zoomAnimation: this.animation,
// Config
config: Config,
// 是否进行旋转，目前对外没有constraints，默认设置为true
rotate: true,
// 旋转bearing，单位为度
bearing: this._rotation
})
// 初始化ui容器
this.ui = new UI({
view: this
})
// 初始化视图事件
this._initViewEvent()
// 初始化可视范围
if (this._extent && !isReset) {
this.flyTo({ extent: this._extent })
}
// 初始化比例尺，extent定位优先于scale，center定位
if (!this._extent && this._scale && this._center && !isReset) {
this._initScale()
}
// 获取视图大小
this._initSize()
// 初始化最大比例尺和最小比例尺
this._initScaleLimit()
// 初始化地图视图弹框，目前仅支持location方式打开弹框
this._initPopup()
}
// 设置spatialReference
_setSpatialReference() {
// 如果basemap有坐标系，则view坐标系取basemap坐标系的值。
// 没有，则view根据加载的图层动态坐标系的值。
let spatialReference = null
let referenceLayer = null
if (this._map.basemap && this._map.basemap.spatialReference) {
spatialReference = this._map.basemap.spatialReference
referenceLayer = this._map.basemap._referenceLayer
} else if (this._map.layers) {
// const target = Utils.getSpatialReference(this._map.layers)
const target = TileInfoUtil.getSpatialReference(this._map.layers)
spatialReference = target.spatialReference
referenceLayer = target.referenceLayer
}
// 没有获取到图层参考系，则直接返回
if (!spatialReference) return
// 当view上未设置空间参考系锁定，
// 或空间参考系锁定但没有spatialReference时，则获取新的spatialReference
if (
!this.spatialReferenceLocked ||
(this.spatialReferenceLocked && !this._spatialReference)
) {
this._spatialReference = spatialReference
this._referenceLayer = referenceLayer
// 如果是MapImageLayer，则重置坐标系为当前坐标系
if (this._spatialReference) {
const isBasemapLayer = referenceLayer._isBasemapLayer
TileInfoUtil.setLayerSpatialReference(
this._map.layers,
this._spatialReference,
isBasemapLayer
)
}
// 设置crs
this.setCrs(referenceLayer)
}
}
setCrs(referenceLayer) {
const crs = this.getCrsByReferenceLayer(referenceLayer)
let isNew = false
let isFirst = false
if (this.crs) {
// 比较被设置的新Crs和当前this.crs是否相同。
// 判断标准 crs.option的resolutions,origin,bounds是否相等。
if (crs !== null) {
const newCrsInfo = {
wkid: crs.code.split(':')[1]
}
const currentCrsInfo = {
wkid: this.crs.code.split(':')[1]
}
if (newCrsInfo.wkid === currentCrsInfo.wkid) {
// ArcgisMapImage图层临时处理，服务数据extent有问题，暂为解决。4326、3857参考系构建对应的Leaflet参考系对象，
// 因此没有options，不参与对比bounds、resolutions，暂时组织比较wkid
// 问题解决后，统一比较 crs.options，该if条件可移除
if (
(newCrsInfo.wkid === '4326' || newCrsInfo.wkid === '3857') &&
!crs.options
) {
isNew = false
}
if (crs.options) {
const newCrsOptions = crs.options
newCrsInfo.resolutions = newCrsOptions.resolutions
newCrsInfo.origin = newCrsOptions.origin
newCrsInfo.bounds = newCrsOptions.bounds
currentCrsInfo.resolutions = this.crs.options.resolutions
currentCrsInfo.origin = this.crs.options.origin
currentCrsInfo.bounds = this.crs.options.bounds
if (
JSON.stringify(newCrsInfo.resolutions) !==
JSON.stringify(currentCrsInfo.resolutions) ||
JSON.stringify(newCrsInfo.origin) !==
JSON.stringify(currentCrsInfo.origin) ||
JSON.stringify(newCrsInfo.bounds) !==
JSON.stringify(currentCrsInfo.bounds)
) {
isNew = true
}
}
} else {
isNew = true
}
}
} else if (!this.crs && crs) {
isNew = true
isFirst = true
}
if (isNew) {
this.crs = crs
if (referenceLayer.extent) {
const extent = new Extent({
xmin: referenceLayer.extent.xmin,
xmax: referenceLayer.extent.xmax,
ymin: referenceLayer.extent.ymin,
ymax: referenceLayer.extent.ymax,
spatialReference: referenceLayer.spatialReference
})
const latLng = this._getLatLngFromExtent(extent)
this._center = new Point({
coordinates: [
(latLng.southWestLatlng.lng + latLng.northEastLatlng.lng) / 2,
(latLng.southWestLatlng.lat + latLng.northEastLatlng.lat) / 2
]
})
}
const layers = []
const baseLayers = []
this._map.layers.items.forEach((layer) => {
// 如果是当前图层load完之后触发的重置方法，则不需要重载图层
// 图层信息已加载完全并且不是第一次设置坐标系，则需要重新加载
// 图层信息没加载完全并且是第一次设置坐标系，则需要重新加载
// 图层是第一次设置坐标系，并且是graphicsLayer（不管graphicsLayer是否loaded），则需要重新加载
// 图层是参考图层，extent没变，则不需要重新加载。图层是参考图层，extent变了，则需要重新加载
if (this._loadedLayer && layer.id === this._loadedLayer.id) {
return
}
if (
(layer.loaded && !isFirst) ||
(!layer.loaded && isFirst) ||
(isFirst && layer.type === LayerType.graphics)
) {
layers.push(layer)
if (layer._isBasemapLayer) {
layer._isBasemapLayer = false
baseLayers.push(layer)
}
}
})
this._map._canResetView = false
this._map.removeMany(layers)
baseLayers.forEach((layer) => {
layer._isBasemapLayer = true
})
this._reCreateView()
this._map.addMany(layers)
this._map._canResetView = true
if (isFirst) {
referenceLayer.on('layerview-created', () => {
// 初始化可视范围
if (this._extent) {
this.flyTo({ extent: this._extent })
}
// 初始化比例尺，extent定位优先于scale，center定位
if (!this._extent && this._scale && this._center) {
this._initScale()
}
// 获取视图大小
this._initSize()
// 初始化最大比例尺和最小比例尺
this._initScaleLimit()
// 初始化地图视图弹框，目前仅支持location方式打开弹框
this._initPopup()
})
}
}
}
/**
* 删除当前视图，重新创建一个视图
* @private
* */
_reCreateView() {
if (this._innerView) {
this._innerView.remove()
this._resetExtent()
}
this._initView(true, this._options)
}
/**
* 根据crs重新创建extent，center等属性
* @private
* */
_resetExtent() {
if (this._extent) {
this._extent = undefined
this._zoom = 0
}
}
/**
* 根据图层的spatialReference对象，生成一个坐标系，在leaflet上一定要resolutions、origin、extent以及椭球体参数，
* 才可以创建一个坐标系，瓦片或者WMTS自带resolutions、origin、extent，
* 矢量或者WMS需要从extent上计算出resolutions和origin，计算操作在基础图层中完成
* @private
* @param {Layer} layer 图层
* @return {CRS} 地图视图的坐标系对象
* */
_getCrs(layer) {
const spatialReference = layer.spatialReference
// 投影范围
const layerExtent = layer.spatialReference.extent || layer.extent
const extent = Extent.fromJSON(layerExtent.toJSON())
const isSameSpatialReference = function (
spatialReference1,
spatialReference2
) {
let isSame = false
if (
[3857, 102113, 102100, 900913].indexOf(spatialReference1.wkid) > -1 &&
[3857, 102113, 102100, 900913].indexOf(spatialReference2.wkid) > -1
) {
isSame = true
} else if (
[4326, 4490, 4610, 4214].indexOf(spatialReference1.wkid) > -1 &&
[4326, 4490, 4610, 4214].indexOf(spatialReference2.wkid) > -1
) {
isSame = true
} else if (spatialReference1.wkid === spatialReference2.wkid) {
isSame = true
}
return isSame
}
this._map.layers.forEach((layerItem) => {
// 如果当前layer是基础底图，则不受普通图层的参考系范围影响，但也会受其他基础底图图层的参考系范围影响
if (layer._isBasemapLayer && !layerItem._isBasemapLayer) {
return
}
if (
layerItem.spatialReference &&
layer.spatialReference &&
isSameSpatialReference(
layerItem.spatialReference,
layer.spatialReference
) &&
layerItem.loaded
) {
if (extent.xmin > layerItem.extent.xmin) {
extent.xmin = layerItem.extent.xmin
}
if (extent.ymin > layerItem.extent.ymin) {
extent.ymin = layerItem.extent.ymin
}
if (extent.xmax < layerItem.extent.xmax) {
extent.xmax = layerItem.extent.xmax
}
if (extent.ymax < layerItem.extent.ymax) {
extent.ymax = layerItem.extent.ymax
}
}
})
let tileInfo = layer.tileInfo
// 处理 瓦片图层、arcgis瓦片图层、矢量瓦片图层
if (layer.type === LayerType.wmts) {
tileInfo = TileInfoUtil.parseWMTSTileInfo(layer)
} else if (layer.type === LayerType.wms) {
tileInfo = TileInfoUtil.parseWMSTileInfo(layer, extent)
} else if (
// igsFeature、wfs、geojson图层是矢量图形，图层没有tile size概念，
// 但Leaflet引擎需要构造分辨率级，给定一个256默认tile size，用于计算分辨率级。
// igsMapImage图层，如果是图像渲染模式则和上序逻辑相同。如果是瓦片渲染模式，tileSize取图层上设置的瓦片宽高。
// arcgisMapImage服务对接有暂时问题，暂不自定义计算，直接取arcgisMapImage的tileInfo的分辨率
layer.type === LayerType.igsMapImage ||
// layer.type === LayerType.arcgisMapImage ||
layer.type === LayerType.igsFeature ||
layer.type === LayerType.wfs ||
layer.type === LayerType.geojson
) {
tileInfo = TileInfoUtil.parseMapImageTileInfo(layer, extent)
}
// igsMapImage图层临时处理，目前根据arcgisMapImage的extent、origin和tileInfo.lods构造出来的参考系有问题。
// 问题解决后，统一走 tileInfo = TileInfoUtil.parseMapImageTileInfo(layer)逻辑。
if (layer.type === LayerType.arcgisMapImage) {
if (
[3857, 102113, 102100, 900913].indexOf(layer.spatialReference.wkid) > -1
) {
return L.CRS.EPSG3857
} else if (
[4326, 4490, 4610, 4214].indexOf(layer.spatialReference.wkid) > -1
) {
return L.CRS.EPSG4326
} else {
tileInfo = TileInfoUtil.parseMapImageTileInfo(layer)
}
}
// 原点
const origin = Point.toCoordinates(tileInfo.origin)
// 获取分辨率数组
const resolutions = tileInfo.lods.map((lod) => lod.resolution)
const length = resolutions.length
// 如果数组长度小于20，则将数组最后一个除以2，将数组扩充为20，否则地图视图无法继续缩放
if (length < 20) {
let lastResolutions = resolutions[length - 1]
let lastLod = tileInfo.lods[length - 1]
for (let i = 0; i < 20 - length; i++) {
resolutions.push(lastResolutions / 2)
lastLod = {
resolution: lastResolutions / 2,
scale: lastLod.scale / 2,
level: tileInfo.lods.length
}
tileInfo.lods.push(lastLod)
lastResolutions /= 2
}
}
// 创建一个坐标系对象
return new CRS({
// 指定wkid，wkid的优先级比wkt高，和igs保持一致
wkid: spatialReference.wkid,
// 指定wkt
wkt: spatialReference.wkt,
resolutions,
lods: tileInfo.lods,
origin,
extent,
// 加载矢量瓦片特殊逻辑，需要传入矢量瓦片tileSize(mapboxgl对于初级瓦片的要求),仅影响矢量瓦片显示
mapboxTileSize: spatialReference._mapboxTileSize
})
}
/**
* @description 创建图层视图
* @private
* @param {Layer} layer 图层
* @return {LayerView| null}
*/
_createLayerView(layer) {
const layerView = getLayerView(this, layer) || null
return layerView
}
/**
* @description 事件处理器，重载基类方法
* @private
*/
_processEvent(event) {
super._processEvent(event)
if (event.type === MapEventType.layerRemove) {
if (
!this._map._isRemoveMany &&
!this._map._isRemoveAll &&
this._map._canResetView
) {
this._setSpatialReference()
}
}
if (
event.type === MapEventType.layerRemoveMany &&
this._map._canResetView
) {
if (event.layers) {
this._setSpatialReference()
}
}
}
/**
* @description 通过参考系图层获取CRS对象
* @private
* @param {Layer} referenceLayer 图层加载完毕后的对象
* @return {CRS} CRS对象
*/
getCrsByReferenceLayer(referenceLayer) {
let crs = null
if (
!referenceLayer ||
!referenceLayer.spatialReference ||
!referenceLayer.loaded
) {
return crs
}
// 根据基础图层对象上的spatialReference，创建一个自定义坐标系
// (4326、3857也更具图层信息构造Crs，而不是定义为Leaflet的默认4326、3857Crs)
crs = this._getCrs(referenceLayer)
return crs
}
/**
* @description 初始化获取视图尺寸大小
* @private
*/
_initSize() {
const size = this._innerView.getSize()
this.width = size.x
this.height = size.y
}
/**
* 等待图层加载完毕，重写BaseView类的该方法
* @param {Layer} layer 基础图层对象
* @param {Object} result 图层加载完毕后的对象
* @param {Function} fireCreatedError 创建失败回调
* */
_waitLayerLoaded(layer, result, fireCreatedError) {
const self = this
// 是提供坐标系的图层，则加载图层
if (layer._isSRLayer) {
const promise = self._addLayer(result, event)
self._layerLoaded(promise, layer, result, fireCreatedError)
}
// 不是的则等待图层加载完毕
else {
if (layer._interval) {
clearInterval(layer._interval)
layer._interval = undefined
}
layer._interval = setInterval(function () {
const srLayer = self._map._getSRLayer()
if (!srLayer || (srLayer && srLayer.loaded)) {
clearInterval(layer._interval)
layer._interval = undefined
const promise = self._addLayer(result, event)
self._layerLoaded(promise, layer, result, fireCreatedError)
}
}, 50)
}
}
/**
* 销毁视图对象<a id='destroy'></a>
* */
destroy() {
this._innerView.remove()
}
/**
* 获取当前视图的中心点(经纬度中心点)<a id='getCenter'></a>
* @return {Object} 中心点对象
* */
getCenter() {
const center = this._innerView.getCenter()
let centerCrs = new Point({ coordinates: [center.lng, center.lat] })
this._center = centerCrs
const spatialReference = new SpatialReference(this.crs.code)
if (!spatialReference.isGeographic) {
centerCrs = Projection.project(centerCrs, spatialReference)
}
return centerCrs
}
/**
* <a id='setCenter'></a>
* 设置缩视野中心<a id='setCenter'></a>
* @private
* @param {Point} value 视图中心
* */
setCenter(value) {
if (!this._innerView) return
if (Array.isArray(value) && value.length > 1) {
this._center = new Point({
coordinates: [value[0], value[1]],
spatialReference: new SpatialReference(this.crs.code)
})
this.flyTo({ zoom: this._zoom, center: this._center })
} else if (value instanceof Point) {
this._center = value
this.flyTo({ zoom: this._zoom, center: this._center })
}
}
/**
* 获取当前缩放级数<a id='getZoom'></a>
* @return {Number} 当前缩放级数
* */
getZoom() {
this._zoom = this._innerView.getZoom()
return this._zoom
}
/**
* <a id='setZoom'></a>
* 设置缩放级数
* @private
* @param {Number} value 视图层级
* */
setZoom(value) {
if (!this._innerView) return
this._zoom = value
this.flyTo({ zoom: value, center: this._center })
}
/**
* 获取最小缩放级数<a id='getMinZoom'></a>
* @return {Number} 最小缩放级数
* */
getMinZoom() {
return this._innerView.getMinZoom()
}
/**
* @description 获取当前视图容器的宽高，单位像素<a id='getSize'></a>
* @return {Object} 当前视图容器的宽高对象
* */
getSize() {
return this._innerView.getSize()
}
/**
* 获取最大缩放级数<a id='getMaxZoom'></a>
* @return {Number} 最大缩放级数
* */
getMaxZoom() {
return this._innerView.getMaxZoom()
}
/**
* 获取当前视图的宽高范围，单位像素<a id='getPixelExtent'></a>
* @return {Object} 视图宽高对象
* */
getPixelExtent() {
return this._innerView.getPixelBounds()
}
/**
* 获取当前视图的像素中心点<a id='getPixelCenter'></a>
* @return {Object} 像素中心点对象
* */
getPixelCenter() {
return this._innerView.getPixelOrigin()
}
/**
* 获取当前视图的像素范围<a id='getPixelWorldExtent'></a>
* @return {Object} 当前视图的像素范围
* */
getPixelWorldExtent() {
return this._innerView.getPixelWorldBounds()
}
/**
* 导出场景视图的配置文件<a id='toJSON'></a>
* @return {Object} 导出的配置文件
* */
toJSON() {
const _json = {}
_json.extent = toJSON(this._extent, Extent)
_json.center = toJSON(this._center, Point)
_json.map = toJSON(this._map, Map)
_json.viewId = this._viewId
_json.animation = this.animation
_json.width = this.width
_json.height = this.height
_json.zoom = this._zoom
_json.scale = this._scale
_json.maxScale = this.maxScale
_json.minScale = this.minScale
_json.preferCanvas = this.preferCanvas
_json.spatialReferenceLocked = this.spatialReferenceLocked
return _json
}
/**
* 克隆并返回一个新的场景视图对象<a id='clone'></a>
* @return {MapView} 一个新的场景视图对象
* */
clone() {
return cloneObject(this)
}
/**
* 通过json构造并返回一个新的场景视图对象<a id='fromJSON'></a>
* @param {Object} json json对象
* @return {MapView} 一个新的场景视图对象
* */
static fromJSON(json) {
return new MapView(json)
}
/**
* <a id='toMap'></a>
* 屏幕像素坐标点转地理坐标点
* @param {Object} screenPoint 屏幕像素坐标点，例如{ x: 900, y: 500 }
* @return {Point} 地理坐标点
* @example <caption><h5>屏幕像素坐标点转地理坐标示例</h5></caption>
* // ES6引入方式
* import { MapView } from "@mapgis/webclient-leaflet-plugin"
* import { Map, Point, Extent } from "@mapgis/webclient-common"
* // 初始化图层管理容器
* const map = new Map();
* // 初始化地图视图对象
* const mapView = new MapView({
* // 视图id
* viewId: "mapgis-2d-viewer",
* // 图层管理容器
* map: map
* });
* const screenPoint = { x: 900, y: 500 }
* mapView.toMap(screenPoint)
* */
toMap(screenPoint) {
const latLngPoint = this._innerView.containerPointToLatLng(screenPoint)
let geoPoint = new Point({
coordinates: [latLngPoint.lng, latLngPoint.lat]
})
const spatialReference = new SpatialReference(this.crs.code)
if (!spatialReference.isGeographic) {
geoPoint = Projection.project(geoPoint, spatialReference)
}
return geoPoint
}
/**
* <a id='toScreen'></a>
* 地理坐标点转屏幕像素坐标点
* @param {Point}point 地理坐标点
* @return {Object} 屏幕像素坐标点
* @example <caption><h5>地理坐标点转屏幕像素坐标示例</h5></caption>
* // ES6引入方式
* import { MapView } from "@mapgis/webclient-leaflet-plugin"
* import { Map, Point, Extent } from "@mapgis/webclient-common"
* // 初始化图层管理容器
* const map = new Map();
* // 初始化地图视图对象
* const mapView = new MapView({
* // 视图id
* viewId: "mapgis-2d-viewer",
* // 图层管理容器
* map: map
* });
* const geoPoint = new Point({ coordinates: [123, 23, 0] })
* mapView.toScreen(geoPoint)
* */
toScreen(point) {
let _point = Geometry.fromJSON(point)
if (!_point.spatialReference.isGeographic) {
_point = Projection.project(
_point,
new SpatialReference({
wkid: 4326
})
)
}
const screenPoint = this._innerView.latLngToContainerPoint([
_point.coordinates[1],
_point.coordinates[0]
])
return screenPoint
}
/**
* <a id='takeScreenshot'></a>
* @description 屏幕快照
* @param {Object} [options = {}] 屏幕快照配置配置
* @param {PictureFormat} [options.format = PictureFormat.png] 照片格式，支持png，jpeg格式
* @param {String} [options.filename = 'screenshotFile'] 下载文件名
* @param {Number} [options.width = undefined] 图片宽度
* @param {Number} [options.height = undefined] 图片高度
* @param {Number} [options.x = undefined] 图片原点x
* @param {Number} [options.y = undefined] 图片原点y
* @param {Boolean} [options.isDownload = true] 是否下载图片
* @return {Object} 屏幕快照 {dataUrl String }，且浏览器会下载图片
* @example <caption><h7>屏幕快照</h7></caption>
* // ES5引入方式
* const { Map, MapView } = Zondy
* const { PictureFormat } = Zondy.Enum
* // ES6引入方式
* import { Map, MapView } from "@mapgis/webclient-leaflet-plugin"
* import { PictureFormat } from "@mapgis/webclient-common"
* // 初始化图层管理容器
* const map = new Map();
* // 初始化地图视图对象
* const mapView = new MapView({
* // 二维场景视图的容器(html的div标签)ID
* viewId: "二维场景视图的容器的id",
* // 图层管理容器
* map: map
* })
* // 设置屏幕快照参数
* const screenshotOptions: {
* format: PictureFormat.png
* }
* // 开始屏幕快照
* mapView.takeScreenshot(screenshotOptions).then((result) => {
* // 获取base64格式的url字符串
* console.log("dataUrl:", result.dataUrl)
* })
* */
takeScreenshot(options) {
options.view = this
let screenshotResult = null
if (!this._screenshot) {
this._screenshot = new Screenshot(options)
screenshotResult = this._screenshot._addView()
} else {
screenshotResult = this._screenshot._addView()
}
return screenshotResult
}
/**
* 获取当前视图的地理范围<a id='getExtent'></a>
* @return {Extent} 获取当前视图的地理范围
* */
getExtent() {
if (!this._innerView) return
const latLngBounds = this._innerView.getBounds()
let extent = new Extent({
xmin: latLngBounds._southWest.lng,
ymin: latLngBounds._southWest.lat,
xmax: latLngBounds._northEast.lng,
ymax: latLngBounds._northEast.lat
})
const spatialReference = new SpatialReference(this.crs.code)
if (!spatialReference.isGeographic) {
extent = Projection.project(extent, spatialReference)
}
this._extent = extent
return extent
}
/**
* <a id='setExtent'></a>
* 设置视野范围
* @private
* @param {Extent} value 范围对象
* */
setExtent(value) {
if (!this._innerView) return
this._extent = value
this.flyTo({ extent: value })
}
/**
* zoom end事件处理器
* @private
* */
_zoomEndHandler() {
// 更新地图视野范围
this.getExtent()
// 更新地图层级
this.getZoom()
// 更新地图比例尺
this.getScale()
this.getResolution()
}
/**
* move end事件处理器
* @private
* */
_moveEndHandler() {
// 更新地图视野中心
this.getCenter()
// 更新地图视野范围
this.getExtent()
}
/**
* 初始化最大比例尺和最小比例尺
* @private
* */
_initScaleLimit() {
if (this.minScale) {
const result = this._getScaleZoom(this.minScale)
if (result.zoom) {
this.maxZoom = result.zoom
this._innerView.setMaxZoom(this.maxZoom)
}
}
if (this.maxScale) {
const result = this._getScaleZoom(this.maxScale)
if (result.zoom) {
this.minZoom = result.zoom
this._innerView.setMinZoom(this.minZoom)
}
}
if (
!this._scale ||
this._scale <= this.minScale ||
this._scale >= this.minScale
) {
this._scale = this.maxScale || this.minScale
this.setScale(this._scale)
}
}
/**
* 初始化弹窗
* @private
* */
_initPopup() {
this.popup = new Popup({ view: this })
}
/**
* <a id='hitTest'></a>
* @description 穿透检测，图元拾取。目前支持graphic类型拾取结果，支持图层类型GraphicLayer，FeatureLayer。
* @param {Object} screenPoint 屏幕像素坐标点，例如{ x: 900, y: 500 }
* @return {Array} 图元检测结果
* @example <caption><h7>根据基础图层对象或者图层id查询并返回实际图层</h7></caption>
* // ES6引入方式
* import { MapView } from "@mapgis/webclient-leaflet-plugin";
* import { Map, Point, Polygon, MultiPolygon ,Extent, GraphicsLayer, Feature, Circle, IGSFeatureLayer, IGSTileLayer } from "@mapgis/webclient-common";
* // 初始化图层管理容器
* const map = new Map();
* // 初始化地图视图对象
* this.mapView = new MapView({
* // 视图id
* viewId: "mapgis-2d-viewer",
* // 图层管理容器
* map: map,
* })
* // 创建一个要素
* const feature = [
* new Feature({
* id: '11113',
* geometry: new Circle({
* center: [113, 35],
* radius: 10000,
* radiusUnit: 'kilometers',
* })
* }),
* new Feature({
* id: '11114',
* geometry: new Polygon({
* coordinates: [
* // 外圈
* [
* [113.0, 29.0],
* [116.0, 29.0],
* [116.0, 35.0],
* [113.0, 35.0],
* [113.0, 29.0]
* ]
* ]
* })
* }),
* new Feature({
* id: '11115',
* geometry:new MultiPolygon({
* coordinates: [
* [
* // 外圈
* [
* [112.0, 28.0],
* [115.0, 28.0],
* [115.0, 30.0],
* [112.0, 30.0],
* [112.0, 28.0]
* ],
* // 第一个内圈
* [
* [112.2, 28.2],
* [112.2, 29.8],
* [114.8, 29.8],
* [114.8, 28.2],
* [112.2, 28.2]
* ]
* ]
* ]
* })
* })
* ]
* // 初始化几何图层
* const graphicsLayer = new GraphicsLayer({
* graphics:feature
* })
* map.add(this.graphicsLayer)
* const result = this.mapView.hitTest({x:1100,y:600})
* */
hitTest(screenPoint) {
let hitTestResult = []
if (this.preferCanvas) {
hitTestResult = this._hitTestCanvas(screenPoint)
} else {
hitTestResult = this._hitTestSVG(screenPoint)
}
return hitTestResult
}
/**
* SVG渲染方式下图元拾取
* @private
* @param {Object} screenPoint 屏幕像素坐标点，例如{ x: 900, y: 500 }
* @return {Array} SVG渲染方式下图元检测结果
* */
_hitTestSVG(screenPoint) {
const self = this
const pickedInnerLayer = []
const clientRect = this._innerView._container.getBoundingClientRect()
const elements = document.elementsFromPoint(
clientRect.x + screenPoint.x,
clientRect.y + screenPoint.y
)
elements.forEach((el) => {
if (el.classList.contains('leaflet-interactive') && el._leaflet_id) {
pickedInnerLayer.push(self._innerView._targets[el._leaflet_id])
}
})
const hitTestResult = []
pickedInnerLayer.forEach((innerLayer) => {
const layer = this.getLayer(innerLayer.commonLayerId)
let features = null
if (layer.type === LayerType.igsFeature) {
const layerView = this._getLayerView(layer)
features = layerView._featureSetCache.filter((item) => {
if (item.id === innerLayer.commonFeatureId) {
return item
}
})
} else if (layer.type === LayerType.graphics) {
features = layer.graphics.filter((item) => {
if (item.id === innerLayer.commonFeatureId) {
return item
}
})
}
const feature =
features && features.items.length > 0 ? features.items[0] : null
const graphicHit = {
graphic: feature,
layer,
mapPoint: this.toMap(screenPoint),
type: 'graphic'
}
hitTestResult.push(graphicHit)
})
return hitTestResult
}
/**
* Canvas渲染方式下图元拾取
* @private
* @param {Object} screenPoint 屏幕像素坐标点，例如{ x: 900, y: 500 }
* @return {Array} Canvas渲染方式下图元检测结果
* */
_hitTestCanvas(screenPoint) {
const pickedInnerLayer = []
const renderer = this._innerView._renderer
const e = { clientX: screenPoint.x, clientY: screenPoint.y }
const point = renderer._map.mouseEventToContainerPoint(e)
for (let order = renderer._dragFirst; order; order = order.next) {
const layer = order.layer
if (layer.options.interactive && layer._containsPoint(point)) {
if (
!(e.type === 'click' || e.type === 'preclick') ||
!renderer._map._draggableMoved(layer)
) {
if (layer.feature) {
pickedInnerLayer.push(layer)
}
}
}
}
const hitTestResult = []
pickedInnerLayer.forEach((innerLayer) => {
const layer = this.getLayer(innerLayer.commonLayerId)
let features = null
if (layer.type === 'igs-feature') {
const layerView = this.getLayerView(layer)
features = layerView._featureSetCache.filter((item) => {
if (item.id === innerLayer.commonFeatureId) {
return item
}
})
} else {
features = layer.graphics.filter((item) => {
if (item.id === innerLayer.commonFeatureId) {
return item
}
})
}
const feature = features.items.length > 0 ? features.items[0] : null
const graphicHit = {
graphic: feature,
layer,
mapPoint: this.toMap(screenPoint),
type: 'graphic'
}
hitTestResult.push(graphicHit)
})
return hitTestResult
}
/**
* 初始化地图视图比例尺
* @private
* */
_initScale() {
if (this._scale) {
if (this.minScale && this._scale > this.minScale) {
this.setScale()
}
if (this.maxScale && this._scale < this.maxScale) {
this.setScale()
}
}
}
_getScaleZoom(value) {
let zoom = undefined
let scale = undefined
if (this.crs && this.crs.options && this.crs.options.lods) {
for (let i = 0; i < this.crs.options.lods.length; i++) {
const item = this.crs.options.lods[i]
const lastItem = this.crs.options.lods[i - 1]
if (i === 0) {
if (value >= item.scale) {
zoom = item.level
scale = item.scale
break
}
} else if (i === this.crs.options.lods.length - 1) {
if (value <= item.scale) {
zoom = item.level
scale = item.scale
break
}
} else if (value >= item.scale && value <= lastItem.scale) {
zoom = item.level
scale = item.scale
break
}
}
}
return { zoom, scale }
}
/**
* 地图比例尺转视野范围
* @private
* @param {Number} scale 比例尺
* @return {Extent} 视野范围
* */
_getScaleExtent(scale) {
const extent = this._getScaleDefaultExtent(scale)
return extent
}
/**
* 地图比例尺转默认坐标系的视野范围
* @private
* @param {Number} scale 比例尺
* @return {Extent} 视野范围
* */
_getScaleDefaultExtent(scale) {
const ppi = 96 // 1 inch=2.54 厘米(cm)
const size = this.getSize()
const lengthX = (size.x / ppi) * 0.0254 * scale // 米
const lengthY = (size.y / ppi) * 0.0254 * scale
const length = Math.sqrt(lengthX * lengthX + lengthY * lengthY)
const absAngle = (180 / Math.PI) * Math.atan2(lengthX, lengthY)
const center = this._center.coordinates
const getTargetPoint = (point, distance, bearing) => {
point = T.point(point)
const options = { units: 'kilometers' }
const destination = T.destination(point, distance, bearing, options)
return destination.geometry.coordinates
}
const leftTopPoint = getTargetPoint(center, length / 2000, -absAngle)
const rightBottomPoint = getTargetPoint(
center,
length / 2000,
180 - absAngle
)
const extent = new Extent({
xmin: leftTopPoint[0],
xmax: rightBottomPoint[0],
ymin: rightBottomPoint[1],
ymax: leftTopPoint[1]
})
return extent
}
/**
* <a id='getScale'></a>
* 获取当前比例尺
* @return {Number} 比例尺 实际10000米:地图1米
* */
getScale0() {
const ppi = 96 // 1 inch=2.54 厘米(cm)
const size = this.getSize()
const screenX = (size.x / ppi) * 0.0254
const screenY = (size.y / ppi) * 0.0254
const length = Math.sqrt(screenX * screenX + screenY * screenY)
const latLngBounds = this._innerView.getBounds()
const southWestPoint = T.point([
latLngBounds._southWest.lng,
latLngBounds._southWest.lat
])
const northEastPoint = T.point([
latLngBounds._northEast.lng,
latLngBounds._northEast.lat
])
const options = { units: 'kilometers' }
const distance = T.distance(southWestPoint, northEastPoint, options)
const scale = (distance * 1000) / length
this._scale = scale
return scale
}
getScale() {
let scale = 0
if (this.crs && this.crs.options && this.crs.options.lods) {
if (!isNull(this._zoom)) {
const lod = this.crs.options.lods[this._zoom]
scale = lod.scale
}
}
this._scale = scale
return scale
}
/**
* 通过视野范围参数 获取当前比例尺
* @param {Extent} extent 比例尺
* @return {Number} 比例尺 实际10000米:地图1米
* @private
* */
_getScaleByExtent(extent) {
const ppi = 96 // 1 inch=2.54 厘米(cm)
const size = this.getSize()
const screenX = (size.x / ppi) * 0.0254
const screenY = (size.y / ppi) * 0.0254
const length = Math.sqrt(screenX * screenX + screenY * screenY)
const latLngBounds = this._getLatLngFromExtent(extent)
const southWestPoint = T.point([
latLngBounds.southWestLatlng.lng,
latLngBounds.southWestLatlng.lat
])
const northEastPoint = T.point([
latLngBounds.northEastLatlng.lng,
latLngBounds.northEastLatlng.lat
])
const options = { units: 'kilometers' }
const distance = T.distance(southWestPoint, northEastPoint, options)
const scale = (distance * 1000) / length
this._scale = scale
return scale
}
/**
* <a id='setScale'></a>
* 设置当前比例尺
* @private
* @param {Number} value 比例尺 实际10000米:地图1米
* */
setScale(value) {
if (!this._innerView) return
const result = this._getScaleZoom(value)
// 视图定位
if (result.zoom) {
this.flyTo({ center: this._center, zoom: result.zoom + 1 })
}
}
/**
* 获取视图范围的比例尺
* @private
* @param {Extent} extent 范围对象
* @return {Object} 比例尺
* */
getExtentScale(extent) {
const ppi = 96 // 1 inch=2.54 厘米(cm)
const size = this.getSize()
const screenX = (size.x / ppi) * 0.0254
const screenY = (size.y / ppi) * 0.0254
const length = Math.sqrt(screenX * screenX + screenY * screenY)
const leftTopPoint = T.point([extent.xmin, extent.ymax])
const rightBottomPoint = T.point([extent.xmax, extent.ymin])
const options = { units: 'kilometers' }
const distance = T.distance(leftTopPoint, rightBottomPoint, options)
const scale = (distance * 1000) / length
this._scale = scale
return scale
}
getResolutionByScale(scale) {
const ppi = 96
this._resolution = (0.0254 / ppi) * scale
return this._resolution
}
getResolution() {
const size = this.getSize()
const length = Math.sqrt(size.x * size.x + size.y * size.y)
const latLngBounds = this._innerView.getBounds()
const southWestPoint = T.point([
latLngBounds._southWest.lng,
latLngBounds._southWest.lat
])
const northEastPoint = T.point([
latLngBounds._northEast.lng,
latLngBounds._northEast.lat
])
const options = { units: 'kilometers' }
const distance = T.distance(southWestPoint, northEastPoint, options)
this._resolution = (distance * 1000) / length
return this._resolution
}
}
/**
* 通过一个配置生成一个场景视图对象
* @param {Object} json 场景视图配置
* @return {MapView}
* */
MapView.fromJSON = function (json) {
json = defaultValue(json, {})
return new MapView(json)
}
Object.defineProperties(MapView.prototype, {
scale: {
get() {
return this._scale
},
set(value) {
this.setScale(value)
}
},
zoom: {
get() {
return this._zoom
},
set(value) {
this.setZoom(value)
}
},
extent: {
get() {
return this._extent
},
set(value) {
this.setExtent(value)
}
},
center: {
get() {
let center = this._center
if (this.crs) {
const spatialReference = new SpatialReference(this.crs.code)
if (!spatialReference.isGeographic) {
center = Projection.project(this._center, spatialReference)
}
}
return center
},
set(value) {
this.setCenter(value)
}
},
spatialReference: {
get() {
return this._spatialReference
},
set(value) {
this._spatialReference = value
}
},
rotation: {
get() {
return this._rotation
},
set(value) {
this._rotation = value
if (this._innerView) {
this._innerView.setBearing(value)
}
}
}
})
Zondy.PluginVersion = '16.5.2'
Zondy.MapView = MapView
export default MapView
</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>