@mapgis/webclient-leaflet-plugin
Version:
1,161 lines • 87 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> leaflet/document/theme/GraphThemeLayer.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/document/theme/GraphThemeLayer.js</span>
</header>
<section>
<article>
<pre class="prettyprint source linenums"><code>import {
Zondy,
FeatureSet,
Extent,
Point,
GeometryType
} from '@mapgis/webclient-common'
import * as L from '@mapgis/leaflet'
// eslint-disable-next-line import/no-extraneous-dependencies
import { Charts } from '@mapgis/webclient-graphic-render'
import ThemeLayer from './ThemeLayer'
/**
* @class Zondy.ThemeLayer.GraphThemeLayer
* @classdesc 统计专题图图层。
* @extends Zondy.ThemeLayer.ThemeLayer
* @moduleEX RendererModule
* @description 统计专题图通过为每个要素绘制统计图表来反映其对应的专题值的大小。它可同时表示多个字段属性信息，在区域本身与各区域之间形成横向和纵向的对比。<br>统计专题图多用于具有相关数量特征的地图上，比如表示不同地区多年的粮食产量、GDP、人口等，不同时段客运量、地铁流量等。目前提供的统计图类型有：柱状图（Bar），折线图（Line），饼图（Pie），三维柱状图（Bar3D），点状图（Point），环状图（Ring）。
* @param {string} name - 专题图表名称。
* @param {string} chartsType - 图表类型。目前可用："Bar"，"Bar3D"，"Line"，"Point"，"Pie"，"Ring"。
* @param {Object} options - 待设置的参数。
* @param {boolean} [options.isOverLay=true] - 是否进行压盖处理，如果设为 true，图表绘制过程中将隐藏对已在图层中绘制的图表产生压盖的图表。
* @param {string} options.themeFields - 指定创建专题图字段。
* @param {Object} [options.cache] - 缓存。
* @param {Object} [options.charts] - 图表。
* @param {string} [options.id] - 专题图层 ID。默认使用 CommonUtil.createUniqueID("themeLayer_") 创建专题图层 ID。
* @param {number} [options.opacity=1] - 图层透明度。
* @param {Object} options.chartsSetting - 各类型图表的 chartsSetting 对象可设属性请参考具体图表模型类的注释中对 chartsSetting 对象可设属性的描述。chartsSetting 对象通常都具有以下 5 个基础可设属性:</br>
* @param {number} options.chartsSetting.width - 专题要素（图表）宽度。
* @param {number} options.chartsSetting.height - 专题要素（图表）高度。
* @param {Array.<number>} options.chartsSetting.codomain - 值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。
* @param {number} [options.chartsSetting.XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位像素。
* @param {number} [options.chartsSetting.YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位像素。
* @param {Array.<number>} [options.chartsSetting.dataViewBoxParameter] - 数据视图框 dataViewBox 参数，它是指图表框 chartBox （由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值，长度为 4 的一维数组。
* @param {number} [options.chartsSetting.decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。
*/
const GraphThemeLayer = ThemeLayer.extend({
options: {
// 是否进行压盖处理，如果设为 true，图表绘制过程中将隐藏对已在图层中绘制的图表产生压盖的图表,默认值：true。
isOverLay: true
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.initialize
* @description 初始化。
* @param {string} name - 专题图名。
* @param {string} chartsType - 图表类型。目前可用："Bar"，"Bar3D"，"Line"，"Point"，"Pie"，"Ring"。
* @param {Object} options - 需要设置的参数对象。
*/
initialize(name, chartsType, options) {
const newArgs = []
newArgs.push(name)
newArgs.push(options)
ThemeLayer.prototype.initialize.apply(this, newArgs)
this.chartsType = chartsType
this.themeFields =
options && options.themeFields ? options.themeFields : null
this.charts = options && options.charts ? options.charts : []
this.cache = options && options.cache ? options.cache : {}
this.chartsSetting =
options && options.chartsSetting ? options.chartsSetting : {}
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.setChartsType
* @description 设置图表类型，此函数可动态改变图表类型。在调用此函数前请通过 chartsSetting 为新类型的图表做相关配置。图表类型，目前支持："Bar", "Bar3D", "Line","Point","Pie","Ring"。
* @param {string} chartsType - 图表类型。目前可用："Bar", "Bar3D", "Line","Point","Pie","Ring"。
*/
setChartsType(chartsType) {
this.chartsType = chartsType
this.redraw()
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.addFeatures
* @description 向专题图图层中添加数据。
* @param {L.features} features - 待添加的要素。
*/
addFeatures(features) {
const me = this
/**
* @event Zondy.ThemeLayer.GraphThemeLayer#beforefeaturesadded
* @description 向专题图图层中添加数据之前触发。
* @property {L.features} features - 待添加的要素。
*/
me.fire('beforefeaturesadded', { features })
if (features instanceof FeatureSet) {
const featureArr = features.features
if (Array.isArray(featureArr) && featureArr.length > 0) {
for (let j = 0; j < featureArr.length; j++) {
const feature = featureArr[j]
me.features.push(feature)
}
}
}
// 绘制专题要素
if (!me.renderer) {
return
}
if (me._map) {
me.redrawThematicFeatures(me._map.getBounds())
} else {
me.redrawThematicFeatures()
}
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.redrawThematicFeatures
* @description 重绘所有专题要素 此方法包含绘制专题要素的所有步骤，包含用户数据到专题要素的转换，压盖处理，缓存等步骤。地图漫游时调用此方法进行图层刷新。
* @param {L.bounds} bounds - 重绘的范围。
*/
redrawThematicFeatures(bounds) {
const me = this
// 清除当前所有可视元素
me.renderer.clearAll()
const features = me.features
if (bounds && bounds instanceof L.LatLngBounds) {
const crs = this._map.options.crs
bounds = L.bounds(
crs.project(bounds.getSouthWest()),
crs.project(bounds.getNorthEast())
)
bounds = new Extent({
xmin: bounds.min.x,
ymin: bounds.min.y,
xmax: bounds.max.x,
ymax: bounds.max.y
})
}
for (let i = 0, len = features.length; i < len; i++) {
const feature = features[i]
if (!feature || !feature.geometry) {
continue
}
// 要素范围判断
const feaBounds = feature.geometry.extent
// 剔除当前视图（地理）范围以外的数据
if (bounds && !bounds.intersects(feaBounds)) {
continue
}
const cache = me.cache
// 用feature id 做缓存标识
const cacheField = feature.id
// 数据对应的图表是否已缓存，没缓存则重新创建图表
if (!cache[cacheField]) {
cache[cacheField] = cacheField
const chart = me.createThematicFeature(feature)
// 压盖处理权重值
const isValidOverlayWeightField =
me.overlayWeightField &&
feature.attributes[me.overlayWeightField] &&
!isNaN(feature.attributes[me.overlayWeightField])
if (chart && isValidOverlayWeightField) {
chart['__overlayWeight'] = feature.attributes[me.overlayWeightField]
}
if (chart) {
me.charts.push(chart)
}
}
}
me.drawCharts()
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.createThematicFeature
* @description 创建专题要素（图表）。
* @param {Zondy.Feature} feature - 待创建的要素。
*/
createThematicFeature(feature) {
const me = this
let thematicFeature
// 检查图表创建条件并创建图形
if (Charts[me.chartsType] && me.themeFields && me.chartsSetting) {
thematicFeature = new Charts[me.chartsType](
feature,
me,
me.themeFields,
me.chartsSetting,
null,
me.options
)
}
// thematicFeature 是否创建成功
if (!thematicFeature) {
return false
}
// 对专题要素执行图形装载
thematicFeature.assembleShapes()
return thematicFeature
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.drawCharts
* @description 绘制图表。包含压盖处理。
*/
drawCharts() {
const me = this
if (!me.renderer) {
return
}
// 图表权重值处理
if (me.overlayWeightField) {
me._sortChart()
}
if (me.options && !me.options.isOverLay) {
// 不进行避让
me._addOverlayShape()
} else {
// 进行避让
me._addNoOverlayShape()
}
// 绘制图形
me.renderer.render()
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.getShapesByFeatureID
* @description 通过 FeatureID 获取 feature 关联的所有图形。如果不传入此参数，函数将返回所有图形。
* @param {number} featureID - 要素 ID。
*/
getShapesByFeatureID(featureID) {
const me = this
const list = []
const shapeList = me.renderer.getAllShapes()
if (!featureID) {
return shapeList
}
for (let i = 0, len = shapeList.length; i < len; i++) {
const si = shapeList[i]
if (si.refDataID && featureID === si.refDataID) {
list.push(si)
}
}
return list
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.isQuadrilateralOverLap
* @description 判断两个四边形是否有压盖。
* @param {Array.<Object>} rect1 - 四边形节点数组。
* @example
* [{"x":1,"y":1},{"x":3,"y":1},{"x":6,"y":4},{"x":2,"y":10},{"x":1,"y":1}];
* @param {Array.<Object>} rect2 - 第二个四边形节点数组。
*/
isQuadrilateralOverLap(rect1, rect2) {
const quadrilateral = [
{
x: rect1.xmin,
y: rect1.ymin
},
{
x: rect1.xmax,
y: rect1.ymin
},
{
x: rect1.xmax,
y: rect1.ymax
},
{
x: rect1.xmin,
y: rect1.ymax
}
]
const quadrilateral2 = [
{
x: rect2.xmin,
y: rect2.ymin
},
{
x: rect2.xmax,
y: rect2.ymin
},
{
x: rect2.xmax,
y: rect2.ymax
},
{
x: rect2.xmin,
y: rect2.ymax
}
]
const me = this
const quadLen = quadrilateral.length
const quad2Len = quadrilateral2.length
if (quadLen !== 4 || quad2Len !== 4) {
return null
} // 不是四边形
let OverLap = false
// 如果两四边形互不包含对方的节点，则两个四边形不相交
for (let i = 0; i < quadLen; i++) {
if (me.isPointInPoly(quadrilateral[i], quadrilateral2)) {
OverLap = true
break
}
}
for (let i = 0; i < quad2Len; i++) {
if (me.isPointInPoly(quadrilateral2[i], quadrilateral)) {
OverLap = true
break
}
}
// 加上两矩形十字相交的情况
for (let i = 0; i < quadLen - 1; i++) {
if (OverLap) {
break
}
for (let j = 0; j < quad2Len - 1; j++) {
const isLineIn = me.lineIntersection(
quadrilateral[i],
quadrilateral[i + 1],
quadrilateral2[j],
quadrilateral2[j + 1]
)
if (isLineIn && isLineIn.type === GeometryType.point) {
OverLap = true
break
}
}
}
return OverLap
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.lineIntersection
* @description 判断两条线段是不是有交点。
* @param a1 - {Zondy.Geometry.Point} 第一条线段的起始节点。
* @param a2 - {Zondy.Geometry.Point} 第一条线段的结束节点。
* @param b1 - {Zondy.Geometry.Point} 第二条线段的起始节点。
* @param b2 - {Zondy.Geometry.Point} 第二条线段的结束节点。
* @return {Object} 如果相交返回交点，如果不相交返回两条线段的位置关系。
*/
lineIntersection(a1, a2, b1, b2) {
let intersectValue = null
let k1
let k2
const b = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x)
const a = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x)
const ab = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y)
// ab==0代表两条线断的斜率一样
if (ab !== 0) {
k1 = b / ab
k2 = a / ab
if (k1 >= 0 && k2 <= 1 && k1 <= 1 && k2 >= 0) {
intersectValue = new Point({
coordinates: [a1.x + k1 * (a2.x - a1.x), a1.y + k1 * (a2.y - a1.y)]
})
} else {
intersectValue = 'No Intersection'
}
} else if (b === 0 && a === 0) {
const maxy = Math.max(a1.y, a2.y)
const miny = Math.min(a1.y, a2.y)
const maxx = Math.max(a1.x, a2.x)
const minx = Math.min(a1.x, a2.x)
if (
(((b1.y >= miny && b1.y <= maxy) || (b2.y >= miny && b2.y <= maxy)) &&
b1.x >= minx &&
b1.x <= maxx) ||
(b2.x >= minx && b2.x <= maxx)
) {
intersectValue = 'Coincident' // 重合
} else {
intersectValue = 'Parallel' // 平行
}
} else {
intersectValue = 'Parallel' // 平行
}
return intersectValue
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.isPointInPoly
* @description 判断一个点是否在多边形里面。(射线法)
* @param pt - {Object} 需要判定的点对象，该对象含有属性x(横坐标)，属性y(纵坐标)。
* @param poly - {Array<Object>} 多边形节点数组。<br>
* 例如一个四边形：[{"x":1,"y":1},{"x":3,"y":1},{"x":6,"y":4},{"x":2,"y":10},{"x":1,"y":1}]
*/
isPointInPoly(pt, poly) {
for (var isIn = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) {
;((poly[i].y <= pt.y && pt.y < poly[j].y) ||
(poly[j].y <= pt.y && pt.y < poly[i].y)) &&
pt.x <
((poly[j].x - poly[i].x) * (pt.y - poly[i].y)) /
(poly[j].y - poly[i].y) +
poly[i].x &&
(isIn = !isIn)
}
return isIn
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.isChartInMap
* @description 判断图表是否在地图里。
* @param {Zondy.Bounds} mapPxBounds - 地图像素范围。
* @param {Array.<Object>} chartPxBounds - 图表范围的四边形节点数组。
* 例如：[{"x":1,"y":1},{"x":3,"y":1},{"x":6,"y":4},{"x":2,"y":10},{"x":1,"y":1}]。
*/
isChartInMap(mapPxBounds, chartPxBounds) {
const mb = mapPxBounds
let isIn = false
const cBounds = [
{
x: chartPxBounds.xmin,
y: chartPxBounds.ymin
},
{
x: chartPxBounds.xmax,
y: chartPxBounds.ymin
},
{
x: chartPxBounds.xmax,
y: chartPxBounds.ymax
},
{
x: chartPxBounds.xmin,
y: chartPxBounds.ymax
}
]
for (let i = 0, len = cBounds.length; i < len; i++) {
const cb = cBounds[i]
if (
cb.x >= mb.xmin &&
cb.x <= mb.xmax &&
cb.y >= mb.ymin &&
cb.y <= mb.ymax
) {
isIn = true
break
}
}
return isIn
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.clearCache
* @description 判断图表是否大小合适，超过地图范围的1/4的不绘制。
* @param mapPxBounds - {Zondy.Bounds} 地图像素范围。
* @param chartPxBounds - {Array<Object>} 图表范围的四边形节点数组。<br>
* 例如：[{"x":1,"y":1},{"x":3,"y":1},{"x":6,"y":4},{"x":2,"y":10},{"x":1,"y":1}]。
*/
isSuitableChart(mapPxBounds, chartPxBounds, zoomDis) {
if (Math.abs(zoomDis) <= 1) {
return true
} else {
return false
}
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.clearCache
* @description 清除缓存数据。
*/
clearCache() {
this.cache = {}
this.charts = []
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.removeFeatures
* @description 从专题图中删除 feature。这个函数删除所有传递进来的矢量要素（数据）。
* @param {Object} features - 待删除的要素。
*/
removeFeatures(features) {
// eslint-disable-line no-unused-vars
const me = this
me.clearCache()
ThemeLayer.prototype.removeFeatures.apply(me, arguments)
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.removeAllFeatures
* @description 清除当前图层所有的矢量要素。
*/
removeAllFeatures() {
const me = this
me.clearCache()
ThemeLayer.prototype.removeAllFeatures.apply(me, arguments)
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.redraw
* @description 重绘该图层，成功则返回 true，否则返回 false。
*/
redraw() {
const me = this
me.clearCache()
return ThemeLayer.prototype.redraw.apply(me, arguments)
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.clear
* @description 清除图层。清除的内容包括数据（features） 、专题要素、缓存。
*/
clear() {
const me = this
if (me.renderer) {
me.renderer.clearAll()
me.renderer.refresh()
}
me.removeAllFeatures()
me.clearCache()
},
/**
* @function Zondy.ThemeLayer.GraphThemeLayer.prototype.getWeightFieldValue
* @description 获取权重字段的值。
* @param {Zondy.Feature.Vector} feature - 矢量要素。
* @param {Array.<string>} weightField - 字段名数组。
* @param {number} defaultValue - 当通过 weightField 获取不到权重值时，使用 defaultValue 作为权重值。
*/
getWeightFieldValue(feature, weightField, defaultValue) {
if (typeof defaultValue === 'undefined' || isNaN(defaultValue)) {
defaultValue = 0
}
if (!feature.attributes) {
return defaultValue
}
let fieldValue = feature.attributes[weightField]
if (typeof fieldValue === 'undefined' || isNaN(fieldValue)) {
fieldValue = defaultValue
}
return fieldValue
},
_sortChart() {
const me = this
if (!me.charts) {
return
}
me.charts.sort(function (cs, ce) {
if (
typeof cs['__overlayWeight'] === 'undefined' &&
typeof ce['__overlayWeight'] === 'undefined'
) {
return 0
} else if (
typeof cs['__overlayWeight'] !== 'undefined' &&
typeof ce['__overlayWeight'] === 'undefined'
) {
return -1
} else if (
typeof cs['__overlayWeight'] === 'undefined' &&
typeof ce['__overlayWeight'] !== 'undefined'
) {
return 1
} else if (
typeof cs['__overlayWeight'] !== 'undefined' &&
typeof ce['__overlayWeight'] !== 'undefined'
) {
return parseFloat(cs['__overlayWeight']) <
parseFloat(ce['__overlayWeight'])
? 1
: -1
}
return 0
})
},
_addOverlayShape() {
const me = this
const charts = me.charts
for (let m = 0, len_m = charts.length; m < len_m; m++) {
const chart_m = charts[m]
// 图形参考位置 (reSetLocation 会更新 chartBounds)
const shapeROP_m = chart_m.resetLocation()
// 添加图形
const shapes_m = chart_m.shapes
for (let n = 0, slen_n = shapes_m.length; n < slen_n; n++) {
shapes_m[n].refOriginalPosition = shapeROP_m
me.renderer.addShape(shapes_m[n])
}
}
},
_addNoOverlayShape() {
const me = this
// 压盖判断所需 chartsBounds 集合
let mapBounds = me._map.getBounds()
const crs = this._map.options.crs
mapBounds = L.bounds(
crs.project(mapBounds.getSouthWest()),
crs.project(mapBounds.getNorthEast())
)
const charts = me.charts
const chartsBounds = []
// 获取地图像素 bounds
const mapPxLT = me.getLocalXY(mapBounds.min)
const mapPxRB = me.getLocalXY(mapBounds.max)
const mBounds = new Extent({
xmin: Math.min(parseFloat(mapPxLT[0]), parseFloat(mapPxRB[0])),
xmax: Math.max(parseFloat(mapPxLT[0]), parseFloat(mapPxRB[0])),
ymin: Math.min(parseFloat(mapPxLT[1]), parseFloat(mapPxRB[1])),
ymax: Math.max(parseFloat(mapPxLT[1]), parseFloat(mapPxRB[1]))
})
// 压盖处理 & 添加图形
for (let i = 0, len = charts.length; i < len; i++) {
const chart = charts[i]
// 图形参考位置 (reSetLocation 会更新 chartBounds)
const shapeROP = chart.resetLocation()
// 图表框
const cbs = chart.chartBounds
// 地图范围外不绘制
if (mBounds && !me.isChartInMap(mBounds, cbs)) {
continue
}
// 图形太大不绘制
const zoomLevel = me._map.getZoom()
const zoomD = zoomLevel - me.options.fitZoom
if (
mBounds &&
me.options.fitZoom > -1 &&
!me.isSuitableChart(mBounds, cbs, zoomD)
) {
continue
}
// 是否压盖
let isOverlay = false
for (let j = 0; j < chartsBounds.length; j++) {
// 压盖判断
if (me.isQuadrilateralOverLap(cbs, chartsBounds[j])) {
isOverlay = true
break
}
}
if (isOverlay) {
continue
} else {
chartsBounds.push(cbs)
}
// 添加图形
const shapes = chart.shapes
for (let j = 0, slen = shapes.length; j < slen; j++) {
shapes[j].refOriginalPosition = shapeROP
me.renderer.addShape(shapes[j])
}
}
}
})
Zondy.ThemeLayer.GraphThemeLayer = GraphThemeLayer
export default GraphThemeLayer
</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>