@mapgis/webclient-leaflet-plugin
Version:
2,603 lines • 140 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> common/sketchEditor/base/SketchPolygonDrawTool.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">common/sketchEditor/base/SketchPolygonDrawTool.js</span>
</header>
<section>
<article>
<pre class="prettyprint source linenums"><code>import { Feature, ViewEventType } from '../../base'
import { Polygon, Point, LineString } from '../../base/geometry'
import SketchBaseDrawTool from './SketchBaseDrawTool'
import Color from '../../base/Color'
import SketchPointDrawTool from './SketchPointDrawTool'
import SketchPolylineDrawTool from './SketchPolylineDrawTool'
import SketchStyle from './SketchStyle'
import { SimpleLineSymbol } from '../../base/symbol'
/**
* 面绘图工具类
* @class SketchPolygonDrawTool
* @moduleEX SketchEditorModule
* @extends SketchBaseDrawTool
* @param {Object} options 构造参数
* @param {MapView|SceneView} [options.view] 地图视图对象
* @param {GraphicsLayer} [options.layer] 草图图层管对象
* @param {SketchStyle} [options.sketchStyle] 草图符号
*/
class SketchPolygonDrawTool extends SketchBaseDrawTool {
constructor(options) {
super(options)
// 初始化事件
this._initEvent()
this._drawTools = [this]
this._otherDrawTools = []
}
/**
* @description 初始化事件
* @private
*/
_initEvent() {
this._processEvent = this._processEvent.bind(this)
this.on('pan', this._processEvent)
this.on('vertexScale', this._processEvent)
this.on('midVertexScale', this._processEvent)
this.on('vertexMove', this._processEvent)
this.on('midVertexAdd', this._processEvent)
}
/**
* @description 鼠标绘制图形：鼠标单击绘制区的一个顶点；鼠标移动，区图形随鼠标位置变动；鼠标双击，完成区图形绘制。
*/
drawFeature() {
// 屏蔽地图默认双击事件
this.view._mapActionControl('double-click-zoom', false)
// 控制鼠标移动事件频率
const timer = null
// 鼠标点击两次以上，即有两个以上的点构成区时，触发鼠标移动时逻辑
let isStartDrawing = false
// 鼠标移动过程中，控制鼠标移动逻辑触发次数
let moving = false
// 当前正在绘制的图形对象
let feature = null
let pixelCoords = []
// 绘制过程中所有的端点
let polygonSpots = []
// 绘制过程中所有所有线段的斜率
const polygonSpotSlopes = []
// timer判断是单击事件、双击事件
const clickTimer = null
// 区分单击、双击事件，若为双击事件，则阻止单击事件逻辑触发
// let preventClick = false
// 获取两点斜率
const getSlope = function (point1, point2) {
return (point1[1] - point2[1]) / (point1[0] - point2[0])
}
let lastMouseEvent = null
// 捕获到的坐标点
let snapPoint = null
// 处理鼠标点击事件。点击后渲染端点图形，渲染区图形
const handlerClick = (options) => {
// clickTimer = setTimeout(() => {
// preventClick = false
// }, 300)
// // 判断是否为单击事件
// if (preventClick) return
if (!options || !options.x || !options.y) return
clearTimeout(timer)
this._editMode = 3
const pixelCoord = { x: options.x, y: options.y }
let geoCoord = null
if (!snapPoint) {
// 如果没有捕获结果，则此时坐标点为屏幕地理坐标
geoCoord = this.view.toMap({ x: pixelCoord.x, y: pixelCoord.y })
// if (this._hight) {
// geoCoord = new Point({
// coordinates: [
// geoCoord.coordinates[0],
// geoCoord.coordinates[1],
// this._hight
// ],
// spatialReference: this._spatialReference
// })
// } else {
// geoCoord = new Point({
// coordinates: [geoCoord.coordinates[0], geoCoord.coordinates[1]],
// spatialReference: this._spatialReference
// })
// }
} else {
// 如果有捕获结果，则纠正此时鼠标坐标为捕获坐标点
geoCoord = snapPoint
}
pixelCoords.push(pixelCoord)
polygonSpots.push(geoCoord.coordinates)
if (!feature) {
if (polygonSpots.length > 2) {
feature = this._getFeature()
feature.geometry._pixelCoords = [...pixelCoords, pixelCoords[0]]
feature.geometry.coordinates = [[...polygonSpots, polygonSpots[0]]]
// 保存当前编辑中的geometry
this._polygonGeometry = feature
} else if (polygonSpots.length === 2) {
pixelCoords.push(pixelCoords[0])
polygonSpots.push(polygonSpots[0])
feature = this._getFeature()
feature.geometry._pixelCoords = [...pixelCoords, pixelCoords[0]]
feature.geometry.coordinates = [[...polygonSpots, polygonSpots[0]]]
} else {
isStartDrawing = false
}
}
const pointDrawTool = new SketchPointDrawTool({
view: this.view,
layer: this.layer,
_parent: this,
sketchStyle: this.sketchStyle
})
pointDrawTool.addFeature(geoCoord)
const vertexGraphic = pointDrawTool.sketchStage.entityGraphic
this.sketchStage.entityGraphic = feature
this.sketchStage.vertexGraphics.push(vertexGraphic)
if (feature) {
isStartDrawing = true
}
// preventClick = true
// 计算线段斜率
if (polygonSpots.length > 3) {
polygonSpotSlopes.push(
getSlope(
polygonSpots[polygonSpots.length - 2],
polygonSpots[polygonSpots.length - 3]
)
)
} else if (polygonSpots.length > 2) {
polygonSpotSlopes.push(getSlope(polygonSpots[0], polygonSpots[1]))
}
lastMouseEvent = 'click'
// 发送绘制一个顶点完成事件
this.fire(
'drawn-vertex',
{ geometry: pointDrawTool.sketchStage.entityGraphic },
self
)
}
let isFirstAdd = true
// 处理平移时，鼠标移动时逻辑。鼠标移动时根据鼠标坐标实时更新区图形。
const handlerMove = (options) => {
if (!options || !options.x || !options.y) return
if (!isStartDrawing || moving) return
clearTimeout(timer)
moving = true
// 清除捕获效果（上一次）
if (this.sketchStage.snapGraphics.length > 0) {
this.sketchStage.snapGraphics.forEach((feature) => {
this._removeFeatureFromMap(feature)
})
this.sketchStage.snapGraphics = []
}
const pixelCoord = { x: options.x, y: options.y }
pixelCoords[pixelCoords.length - 1] = pixelCoord
const geoCoord = this.view.toMap({ x: pixelCoord.x, y: pixelCoord.y })
// if (this._hight) {
// geoCoord = new Point({
// coordinates: [
// geoCoord.coordinates[0],
// geoCoord.coordinates[1],
// this._hight
// ],
// spatialReference: this._spatialReference
// })
// }
polygonSpots[polygonSpots.length - 1] = geoCoord.coordinates
this.sketchStage.entityGraphic = feature
// 鼠标移动时，去捕获重合点、点在线上、平行线、垂直线
snapPoint = this.getSnapGraphics(
geoCoord,
polygonSpots,
polygonSpotSlopes
)
if (snapPoint) {
polygonSpots[polygonSpots.length - 1] = snapPoint.coordinates // geoCoord.coordinates
}
// 更新草图图层
feature.geometry._pixelCoords = JSON.parse(JSON.stringify(pixelCoords))
feature.geometry._pixelCoords.push(pixelCoords[0])
const newCoor = JSON.parse(JSON.stringify(polygonSpots))
newCoor.push(polygonSpots[0])
feature.geometry.coordinates = [newCoor]
if (isFirstAdd) {
this._addFeaturesToMap(feature)
isFirstAdd = false
}
moving = false
lastMouseEvent = 'move'
}
// 处理鼠标双击时，处理逻辑
const handlerDoubleClick = () => {
clearTimeout(clickTimer)
clearTimeout(timer)
// preventClick = true
if (!isStartDrawing) {
feature = null
polygonSpots = []
pixelCoords = []
return
}
// 最后一次双击触发两次点击事件，去掉最后一个重复点
pixelCoords.splice(-2, 1)
polygonSpots.splice(-2, 1)
// 临时解决，move事件有可能发生在两个click事件之间，导致多绘制一个点
if (
lastMouseEvent === 'move' &&
polygonSpots.length > 2 &&
polygonSpots[polygonSpots.length - 2][0] ===
polygonSpots[polygonSpots.length - 3][0] &&
polygonSpots[polygonSpots.length - 2][1] ===
polygonSpots[polygonSpots.length - 3][1]
) {
pixelCoords.splice(-2, 1)
polygonSpots.splice(-2, 1)
feature.geometry._pixelCoords.splice(-2, 1)
feature.geometry.coordinates[0].splice(-2, 1)
}
polygonSpots = []
pixelCoords = []
isStartDrawing = false
// 停止绘制
this.stop()
// 清除捕获效果
if (this.sketchStage.snapGraphics.length > 0) {
this.sketchStage.snapGraphics.forEach((feature) => {
this._removeFeatureFromMap(feature)
})
this.sketchStage.snapGraphics = []
}
this._editMode = 0
lastMouseEvent = 'doubleClick'
// 发送绘制完成事件
this.fire('drawn', { geometry: feature.geometry }, self)
// 绘制完成后，移除顶点
this.sketchStage.vertexGraphics.forEach((feature) => {
this._removeFeatureFromMap(feature)
})
this.sketchStage.vertexGraphics = []
// this.sketchStage.editMode = this._editMode
// 恢复地图默认双击事件
this.view._mapActionControl('double-click-zoom', true)
}
// 注册绘制事件
this._drawEventHandlers.push(handlerClick, handlerMove, handlerDoubleClick)
this.view.on(ViewEventType.immediateClick, handlerClick)
this.view.on(ViewEventType.pointerMove, handlerMove)
this.view.on(ViewEventType.doubleClick, handlerDoubleClick)
}
/**
* @description 添加图形
* @param {Array} points 生成面的点地理坐标集
* @param {SketchStyle} sketchStyle 面的符号样式
*/
addFeature(points, sketchStyle, attributes) {
let fillStyle = null
if (!sketchStyle || !sketchStyle.fillStyle) {
fillStyle = this.sketchStyle._fillStyle
} else {
fillStyle = sketchStyle.fillStyle
}
const feature = this._getFeature(points, fillStyle)
if (attributes) {
feature.attributes = attributes
}
this.sketchStage.entityGraphic = feature
// 更新图层图形
this._addFeaturesToMap(feature)
}
addFeatureByGeometry(geometry, sketchStyle, attributes) {
let symbol = null
if (!sketchStyle || !sketchStyle.fillStyle) {
symbol = this.sketchStyle._fillStyle
} else {
symbol = sketchStyle.fillStyle
}
const feature = new Feature({
geometry,
symbol
})
if (attributes) {
feature.attributes = attributes
}
this.sketchStage.entityGraphic = feature
// 更新图层图形
this._addFeaturesToMap(feature)
}
/**
* @description 获取feature实例
* @private
* @param {Array} points 生成面的点地理坐标集
* @param {Symbol} symbol 点的符号样式
*/
_getFeature(points) {
if (!points) {
points = [
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
}
const geometry = new Polygon({
coordinates: [points],
spatialReference: this._spatialReference
})
const symbol = this.sketchStyle.fillStyle
const polygonGeometry = new Feature({
geometry,
symbol
})
polygonGeometry.isShowArea = this.sketchStyle.isShowArea
if (polygonGeometry.isShowArea) {
polygonGeometry._textStyle = this.sketchStyle.textStyle
}
return polygonGeometry
}
/**
* @description 捕获草图
* @private
* @param {Feature} feature 被选中feature对象
*/
hitTestFeature(feature, event) {
// this._sketchEditor._drawTool = this
if (!this._parent && this.editOption.showSelectBox) {
if (this._editMode === 0) {
this._editMode = 1
} else if (this._editMode === 2) {
// 临时，把clickMap的事件删掉，否则在图形都被删掉时会被触发
this.view.off(ViewEventType.immediateClick, this._mapClickEvent)
this._mapClickEvent = null
this._editMode = 1
}
// 进入图形编辑状态，高亮点元素,用新图形代替高亮，展示选中图形时的辅助图形
this.selectFeature(feature)
}
if (this._parent && this._parent._editMode === 1) {
// 注册图形编辑时的事件，平移图形
this.startPanGraphics(feature, event)
} else if (this._parent && this._parent._editMode === 2) {
// 进入顶点编辑状态，添加顶点+中点辅助图形
// 调用辅助图形的父级图形的selectFeatureVertex，
// 1.添加顶点编辑状态的辅助图形
// 2.删除当前编辑图形状态的辅助图形
// this._parent.selectFeatureVertex(this._parent.entityGraphic)
}
}
/**
* @description 选中草图feature
* @param {Feature} feature 被选中草图feature对象
*/
selectFeature(feature) {
if (!this.editOption.showSelectBox) return
// 1.删除当前编辑图形状态的辅助图形
// 2.添加顶点编辑状态的辅助图形
this._clearEditGraphics(2)
// 加载选时的辅助图形，外包盒
const extent = feature.geometry.extent
const polygonDrawTool = new SketchPolygonDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
fillStyle: this.sketchStyle._selectBoxStyle,
isShowSegmentLength: true,
isShowArea: true
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this // 或者只传父级相应pan的事件
})
// 注册hitTest事件移动图形
// this._hitTestDrawToolStack.push(polygonDrawTool)
this._drawTools.push(polygonDrawTool)
// if (this._hight) {
// polygonDrawTool.addFeature([
// [extent.xmax, extent.ymax, this._hight],
// [extent.xmax, extent.ymin, this._hight],
// [extent.xmin, extent.ymin, this._hight],
// [extent.xmin, extent.ymax, this._hight],
// [extent.xmax, extent.ymax, this._hight]
// ])
// } else {
// polygonDrawTool.addFeature([
// [extent.xmax, extent.ymax],
// [extent.xmax, extent.ymin],
// [extent.xmin, extent.ymin],
// [extent.xmin, extent.ymax],
// [extent.xmax, extent.ymax]
// ])
// }
polygonDrawTool.addFeature([
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin],
[extent.xmin, extent.ymin],
[extent.xmin, extent.ymax],
[extent.xmax, extent.ymax]
])
this.sketchStage.selectBoxGraphics = [
polygonDrawTool.sketchStage.entityGraphic
]
// 外包盒顶点和中点
let boxVertexPoints = []
boxVertexPoints = [
{
point: new Point({
coordinates: [extent.xmax, extent.ymax],
spatialReference: this._spatialReference
}),
direction: 'ne'
},
{
point: new Point({
coordinates: [extent.xmax, extent.ymin],
spatialReference: this._spatialReference
}),
direction: 'se'
},
{
point: new Point({
coordinates: [extent.xmin, extent.ymin],
spatialReference: this._spatialReference
}),
direction: 'sw'
},
{
point: new Point({
coordinates: [extent.xmin, extent.ymax],
spatialReference: this._spatialReference
}),
direction: 'nw'
}
]
if (this._sketchEditor && this._sketchEditor._getCenterCoordinate) {
const midVertexPoints = [
// midPoint
{
point: new Point({
coordinates: this._sketchEditor._getCenterCoordinate(
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin]
),
spatialReference: this._spatialReference
}),
direction: 'e',
type: 'midVertex'
},
{
point: new Point({
coordinates: this._sketchEditor._getCenterCoordinate(
[extent.xmax, extent.ymin],
[extent.xmin, extent.ymin]
),
spatialReference: this._spatialReference
}),
direction: 's',
type: 'midVertex'
},
{
point: new Point({
coordinates: this._sketchEditor._getCenterCoordinate(
[extent.xmin, extent.ymin],
[extent.xmin, extent.ymax]
),
spatialReference: this._spatialReference
}),
direction: 'w',
type: 'midVertex'
},
{
point: new Point({
coordinates: this._sketchEditor._getCenterCoordinate(
[extent.xmin, extent.ymax],
[extent.xmax, extent.ymax]
),
spatialReference: this._spatialReference
}),
direction: 'n',
type: 'midVertex'
}
]
boxVertexPoints = boxVertexPoints.concat(midVertexPoints)
}
const pointDrawTools = []
const boxVertexGraphics = []
boxVertexPoints.forEach((item) => {
const pointDrawTool = new SketchPointDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
vertexStyle: this.sketchStyle._selectBoxVertexStyle
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this // 或者只传父级相应pan的事件
})
// 注册hitTest事件移动图形
// this._hitTestDrawToolStack.push(pointDrawTool)
this._drawTools.push(pointDrawTool)
pointDrawTool.addFeature(item.point, this.sketchStage, {
direction: item.direction,
type: item.type
})
pointDrawTools.push(pointDrawTool)
boxVertexGraphics.push(pointDrawTool.sketchStage.entityGraphic)
})
this.sketchStage.selectBoxVertexGraphics = boxVertexGraphics
if (this._otherDrawTools) {
this._otherDrawTools.push(polygonDrawTool)
} else {
this._otherDrawTools = [polygonDrawTool]
}
this._otherDrawTools = this._otherDrawTools.concat(pointDrawTools)
// this.sketchStage.editMode = this._editMode
// 添加到undoRedoManager中
if (this.undoRedoManager) {
this.undoRedoManager.addProcess('add', this.sketchStage)
}
// 点击到地图没有feature图形区域，退出编辑
if (
!this._mapClickEvent &&
(!this._parent || (this._parent && !this._parent._mapClickEvent))
) {
this._mapClickEvent = () => {
if (this._preventFirstCall) {
this._preventFirstCall = undefined
return
}
const removedFeatures = this.sketchStage.selectBoxGraphics
.concat(this.sketchStage.selectBoxVertexGraphics)
.concat(this.sketchStage.vertexGraphics)
.concat(this.sketchStage.midVertexGraphics)
removedFeatures.forEach((feature) => {
this._removeFeatureFromMap(feature)
})
this.view.off(ViewEventType.immediateClick, this._mapClickEvent)
this.view._mapActionControl('drag-pan', true)
this._mapClickEvent = null
// 发送草图没有被选中状态
this.fire('selected', { isSelected: false }, self)
this.sketchStage.selectBoxGraphics = []
this.sketchStage.selectBoxVertexGraphics = []
this.sketchStage.vertexGraphics = []
this.sketchStage.midVertexGraphics = []
}
this._hitTestEventHandlers.push(this._mapClickEvent)
this._preventFirstCall = true
this.view.on(ViewEventType.immediateClick, this._mapClickEvent)
}
}
/**
* @description 选中feature图形顶点
* @param {Feature} feature 被选中feature对象
*/
selectFeatureVertex(feature) {
// 1.删除当前编辑图形状态的辅助图形
// 2.添加顶点编辑状态的辅助图形
this._clearEditGraphics(1)
const pointDrawTools = []
const midPointDrawTools = []
feature.geometry.coordinates[0].forEach((coordinate, i) => {
// 区集合坐标集比区顶点多（最后）一个坐标，添加顶点时读取到倒数第二个坐标
if (i < feature.geometry.coordinates[0].length - 1) {
// 渲染区的每一个顶点
const pointDrawTool = new SketchPointDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
vertexStyle: this.sketchStyle._selectVertexStyle
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this // 或者只传父级相应pan的事件
})
const point = new Point({
coordinates: coordinate,
spatialReference: this._spatialReference
})
// 注册hitTest事件移动图形
// this._hitTestDrawToolStack.push(pointDrawTool)
this._drawTools.push(pointDrawTool)
pointDrawTool.addFeature(point, undefined, {
vertexIndex: i
})
pointDrawTools.push(pointDrawTool)
this.sketchStage.vertexGraphics.push(
pointDrawTool.sketchStage.entityGraphic
)
}
// 渲染顶点之间的每一个中点
if (i > 0) {
const midPointDrawTool = new SketchPointDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
vertexStyle: this.sketchStyle._selectMidVertexStyle
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this // 或者只传父级相应pan的事件
})
midPointDrawTools.push(midPointDrawTool)
const lastCoordinate = feature.geometry.coordinates[0][i - 1]
let point = null
if (coordinate.length > 2) {
point = new Point({
coordinates: [
(coordinate[0] + lastCoordinate[0]) / 2,
(coordinate[1] + lastCoordinate[1]) / 2,
(coordinate[2] + lastCoordinate[2]) / 2
],
spatialReference: this._spatialReference
})
} else {
point = new Point({
coordinates: [
(coordinate[0] + lastCoordinate[0]) / 2,
(coordinate[1] + lastCoordinate[1]) / 2
],
spatialReference: this._spatialReference
})
}
this._drawTools.push(midPointDrawTool)
midPointDrawTool.addFeature(point, undefined, {
vertexIndex: i - 1,
type: 'midVertex'
})
this.sketchStage.midVertexGraphics.push(
midPointDrawTool.sketchStage.entityGraphic
)
}
})
const drawTools = pointDrawTools.concat(midPointDrawTools)
this._otherDrawTools = this._otherDrawTools
? this._otherDrawTools.concat(drawTools)
: drawTools
// this.sketchStage.editMode = this._editMode
// 添加到undoRedoManager中
if (this.undoRedoManager) {
this.undoRedoManager.addProcess('add', this.sketchStage)
}
}
/**
* @description 平移图形
* @param {Feature} feature 被选中feature对象
* @param {Object} event 拾取事件
*/
startPanGraphics(feature, event) {
this.view._mapActionControl('drag-pan', false)
const timer = null
let moving = false
this._startPan = true
let startPoint = null
// if (this._hight) {
// startPoint = new Point({
// coordinates: [
// event.mapPoint.coordinates[0],
// event.mapPoint.coordinates[1],
// this._hight
// ],
// spatialReference: this._spatialReference
// })
// } else {
// startPoint = event.mapPoint
// }
startPoint = event.mapPoint
// 区分点击事件和鼠标按下（并保持）事件。
// 如果是点击事件，则进入顶点编辑状态。如果是鼠标按下（并保持）事件，则平移图形
let isClickEvent = true
const isClickTimer = setTimeout(() => {
isClickEvent = false
}, 200)
// 移除父级草图地图点击事件。点图形仍然会触发mapClick事件。
if (this._parent && this._parent._mapClickEvent) {
this.view.off(ViewEventType.immediateClick, this._parent._mapClickEvent)
}
// 处理平移时，鼠标移动时逻辑。
const handlerMove = (options) => {
if (!options || !options.x || !options.y) return
if (moving || !this._startPan || !this._editMode === 1) return
if (isClickEvent) return
clearTimeout(timer)
moving = true
const pixelCoord = { x: options.x, y: options.y }
const movePoint = this.view.toMap({
x: pixelCoord.x,
y: pixelCoord.y
})
// if (this._hight) {
// movePoint = new Point({
// coordinates: [
// movePoint.coordinates[0],
// movePoint.coordinates[1],
// this._hight
// ],
// spatialReference: this._spatialReference
// })
// }
const deltaX = movePoint.coordinates[0] - startPoint.coordinates[0]
const deltaY = movePoint.coordinates[1] - startPoint.coordinates[1]
if (deltaX === 0 && deltaY === 0) {
moving = false
return
}
const coordinates = []
feature.geometry.coordinates[0].forEach((coordinate) => {
coordinates.push(this.getPanCoordinates(coordinate, deltaX, deltaY))
})
// 临时，三维geometry extent有bug，暂时用先创建二维geometry，再赋值三维坐标
// const newGeometry = new Polygon({
// coordinates: [coordinates],
// spatialReference: this._spatialReference
// })
const newGeometry = new Polygon({
coordinates: [
[
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
],
spatialReference: this._spatialReference
})
newGeometry.coordinates = [coordinates]
startPoint = movePoint
// 发送平移事件给父级草图
this._dispatchEvent(
'pan',
{ deltaPosition: { x: deltaX, y: deltaY } },
this
)
this.updateFeature(newGeometry, feature)
moving = false
}
// 处理平移时，鼠标按下后抬起逻辑。
const handlerUp = () => {
if (!this._editMode === 1) {
return
}
if (!this._startPan) {
return
}
if (
isClickEvent &&
this._parent &&
this._parent._editMode === 1 &&
(this._parent instanceof SketchPolygonDrawTool ||
this._parent instanceof SketchPolylineDrawTool)
) {
this._parent._editMode = 2
clearTimeout(isClickTimer)
// 在图形编辑状态时，当鼠标单击时，进入顶点编辑状态，添加顶点+中点辅助图形，调用辅助图形的父级图形的selectFeatureVertex。
// 当鼠标移动时，则是平移事件
this._parent.selectFeatureVertex(this._parent.sketchStage.entityGraphic)
if (this._parent && this._parent._mapClickEvent) {
this.view.on(
ViewEventType.immediateClick,
this._parent._mapClickEvent
)
}
this._startPan = false
// pan事件移除
this.view.off(ViewEventType.pointerMove, handlerMove)
this.view.off(ViewEventType.pointerUp, handlerUp)
return
}
// this._stopHitTest()
this._editMode = 0
this._startPan = false
this.view.off(ViewEventType.pointerMove, handlerMove)
this.view.off(ViewEventType.pointerUp, handlerUp)
// 添加到undoRedoManager中
if (this._parent && this._parent.undoRedoManager) {
this._parent.undoRedoManager.addProcess(
'update',
this._parent.sketchStage
)
}
// 重新注册父级草图地图点击事件
if (this._parent && this._parent._mapClickEvent) {
this._parent._preventFirstCall = true
this.view.on(ViewEventType.immediateClick, this._parent._mapClickEvent)
}
this.view._mapActionControl('drag-pan', true)
}
// 注册平移时鼠标相关事件
this._hitTestEventHandlers.push(handlerMove)
this._hitTestEventHandlers.push(handlerUp)
this.view.on(ViewEventType.pointerUp, handlerUp)
this.view.on(ViewEventType.pointerMove, handlerMove)
}
/**
* @description 响应图形平移事件
* @private
* @param {Object} event 拾取事件参数
*/
_processEvent(event) {
if (event.type === 'pan') {
// 处理平移逻辑
this._handlerPanEvent(event)
} else if (event.type === 'vertexScale') {
// 处理顶点缩放逻辑
this._handlerVertexScaleEvent(event)
} else if (event.type === 'midVertexScale') {
// 处理中点缩放逻辑
this._handlerMidVertexScaleEvent(event)
} else if (event.type === 'circleVertexScale') {
// 处理顶点缩放逻辑
this._handlerCircleVertexScaleEvent(event)
} else if (event.type === 'vertexMove') {
// 处理移动顶点逻辑
this._handlerVertexMoveEvent(event)
} else if (event.type === 'midVertexAdd') {
// 处理中点位置增加顶点逻辑
this._handlerMidVertexAddEvent(event)
}
}
/**
* @description 响应平移事件
* @private
* @param {Object} event 拾取事件参数
*/
_handlerPanEvent(event) {
// 更新当前草图的图形位置
const newCoordinates = []
this.sketchStage.entityGraphic.geometry.coordinates[0].forEach(
(coordinate) => {
newCoordinates.push(
this.getPanCoordinates(
coordinate,
event.deltaPosition.x,
event.deltaPosition.y
)
)
}
)
// 临时，三维geometry extent有bug，暂时用先创建二维geometry，再赋值三维坐标
// const newGeometry = new Polygon({
// coordinates: [newCoordinates],
// spatialReference: this._spatialReference
// })
const newGeometry = new Polygon({
coordinates: [
[
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
],
spatialReference: this._spatialReference
})
newGeometry.coordinates = [newCoordinates]
this.sketchStage.entityGraphic.geometry = newGeometry
// 更新同级的辅助草图的图形位置
if (this._otherDrawTools) {
this._otherDrawTools.forEach((drawTool) => {
drawTool._processEvent(event)
})
}
}
/**
* @description 响应顶点缩放事件
* @private
* @param {Object} event 传入事件参数
*/
_handlerVertexScaleEvent(event) {
if (event.action === 'scale') {
// 更新当前草图的图形位置
let newGeometry = null
if (!this.sketchStage.entityGraphic.attributes.lastCoordinates) {
const oriCoordinates = JSON.parse(
JSON.stringify(this.sketchStage.entityGraphic.geometry.coordinates[0])
)
this.sketchStage.entityGraphic.attributes.lastCoordinates =
oriCoordinates
}
const newCoordinates = this.getScaleCoordinates(
this.sketchStage.entityGraphic.geometry.coordinates[0],
event.direction,
event.extent,
// this.sketchStage.entityGraphic.geometry.extent,
event.startPoint,
event.movePoint,
this.sketchStage.entityGraphic.attributes.lastCoordinates
)
// 临时，三维geometry extent有bug，暂时用先创建二维geometry，再赋值三维坐标
// newGeometry = new Polygon({
// coordinates: [newCoordinates],
// spatialReference: this._spatialReference
// })
newGeometry = new Polygon({
coordinates: [
[
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
],
spatialReference: this._spatialReference
})
newGeometry.coordinates = [newCoordinates]
this.sketchStage.entityGraphic.geometry = newGeometry
// extent = item.geometry.extent
// 更新同级的辅助草图的图形位置
if (this._otherDrawTools) {
this._otherDrawTools.forEach((drawTool) => {
// 传给子草图的extent应该是草图改变前的，不是草图改变后的extent
// event.extent = extent
// if (drawTool.sketchStage.entityGraphic.id !== event.feature.id) {
drawTool._processEvent(event)
// }
})
}
}
if (event.action === 'stop') {
if (this.sketchStage.entityGraphic.attributes.lastCoordinates) {
this.sketchStage.entityGraphic.attributes.lastCoordinates = undefined
}
if (this._otherDrawTools) {
this._otherDrawTools.forEach((drawTool) => {
// if (drawTool.sketchStage.entityGraphic.id !== event.feature.id) {
drawTool._processEvent(event)
// }
})
}
}
}
/**
* @description 响应中点缩放事件
* @private
* @param {Object} event 传入事件参数
*/
_handlerMidVertexScaleEvent(event) {
// 更新当前草图的图形位置
let newGeometry = null
if (!this.sketchStage.entityGraphic.attributes.lastCoordinates) {
const oriCoordinates = JSON.parse(
JSON.stringify(this.sketchStage.entityGraphic.geometry.coordinates[0])
)
this.sketchStage.entityGraphic.attributes.lastCoordinates = oriCoordinates
}
const newCoordinates = this.getMidScaleCoordinates(
this.sketchStage.entityGraphic.geometry.coordinates[0],
event.direction,
event.extent,
// item.geometry.extent,
event.startPoint,
event.movePoint,
this.sketchStage.entityGraphic.attributes.lastCoordinates
)
// 临时，三维geometry extent有bug，暂时用先创建二维geometry，再赋值三维坐标
// newGeometry = new Polygon({
// coordinates: [newCoordinates],
// spatialReference: this._spatialReference
// })
newGeometry = new Polygon({
coordinates: [
[
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
],
spatialReference: this._spatialReference
})
newGeometry.coordinates = [newCoordinates]
this.sketchStage.entityGraphic.geometry = newGeometry
// extent = item.geometry.extent
// newEntityGraphic = this.sketchStage.entityGraphic
// this.sketchStage.entityGraphic = newEntityGraphic
// 更新同级的辅助草图的图形位置
if (this._otherDrawTools) {
this._otherDrawTools.forEach((drawTool) => {
// 传给子草图的extent应该是草图改变前的，不是草图改变后的extent
// event.extent = extent
drawTool._processEvent(event)
})
}
if (event.action === 'stop') {
if (this.sketchStage.entityGraphic.attributes.lastCoordinates) {
this.sketchStage.entityGraphic.attributes.lastCoordinates = undefined
}
if (this._otherDrawTools) {
this._otherDrawTools.forEach((drawTool) => {
// if (drawTool.sketchStage.entityGraphic.id !== event.feature.id) {
drawTool._processEvent(event)
// }
})
}
}
}
_handlerCircleVertexScaleEvent(event) {
if (!this._parent || !this._parent.sketchStage.entityGraphic) return
// 更新当前草图的图形位置
let newGeometry = null
const extent = this._parent.sketchStage.entityGraphic.geometry.extent
const newCoordinates = [
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin],
[extent.xmin, extent.ymin],
[extent.xmin, extent.ymax],
[extent.xmax, extent.ymax]
]
newGeometry = new Polygon({
coordinates: [
[
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
],
spatialReference: this._spatialReference
})
newGeometry.coordinates = [newCoordinates]
this.sketchStage.entityGraphic.geometry = newGeometry
// 更新同级的辅助草图的图形位置
if (this._otherDrawTools) {
this._otherDrawTools.forEach((drawTool) => {
// 传给子草图的extent应该是草图改变前的，不是草图改变后的extent
// event.extent = extent
drawTool._processEvent(event)
})
}
if (event.action === 'stop') {
if (this.sketchStage.entityGraphic.attributes.lastCoordinates) {
this.sketchStage.entityGraphic.attributes.lastCoordinates = undefined
}
if (this._otherDrawTools) {
this._otherDrawTools.forEach((drawTool) => {
// if (drawTool.sketchStage.entityGraphic.id !== event.feature.id) {
drawTool._processEvent(event)
// }
})
}
}
}
/**
* @description 响应移动顶点事件
* @private
* @param {Object} event 传入事件参数
*/
_handlerVertexMoveEvent(event) {
// 更新当前草图的图形位置
this.sketchStage.currentVertexIndex = event.vertexIndex
const entityGraphic = this.sketchStage.entityGraphic
const originCoordinates = entityGraphic.geometry.coordinates[0]
entityGraphic.geometry.coordinates[0][event.vertexIndex] =
event.movePoint.coordinates
// 当被移动的顶点是区的最后一个点，则需同步改变区的第一个顶点坐标。
// 当被移动的顶点是区的第一个点，则需同步改变区的最后一个顶点坐标。
if (
entityGraphic.geometry.coordinates[0].length - 1 ===
event.vertexIndex
) {
entityGraphic.geometry.coordinates[0][0] = event.movePoint.coordinates
} else if (event.vertexIndex === 0) {
entityGraphic.geometry.coordinates[0][
entityGraphic.geometry.coordinates[0].length - 1
] = event.movePoint.coordinates
}
// 临时，三维geometry extent有bug，暂时用先创建二维geometry，再赋值三维坐标
// entityGraphic.geometry = new Polygon({
// coordinates: entityGraphic.geometry.coordinates,
// spatialReference: this._spatialReference
// })
const newCoordinates = JSON.parse(
JSON.stringify(entityGraphic.geometry.coordinates)
)
entityGraphic.geometry = new Polygon({
coordinates: [
[
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
],
spatialReference: this._spatialReference
})
entityGraphic.geometry.coordinates = newCoordinates
// 更新同级的辅助草图的图形位置
if (this._otherDrawTools) {
const curIndex = event.vertexIndex
const lastIndex =
curIndex === 0
? curIndex - 1 + this.sketchStage.midVertexGraphics.length
: curIndex - 1
const nextIndex =
curIndex === this.sketchStage.midVertexGraphics.length - 1
? 0
: curIndex + 1
const feature = this.sketchStage.midVertexGraphics[curIndex]
const featureLast = this.sketchStage.midVertexGraphics[lastIndex]
const pLast = originCoordinates[lastIndex]
const p = originCoordinates[curIndex]
const pNext = originCoordinates[nextIndex]
feature.geometry.coordinates = [
(pNext[0] + p[0]) / 2,
(pNext[1] + p[1]) / 2
]
feature.geometry = new Point({
coordinates: feature.geometry.coordinates,
spatialReference: this._spatialReference
})
featureLast.geometry.coordinates = [
(pLast[0] + p[0]) / 2,
(pLast[1] + p[1]) / 2
]
featureLast.geometry = new Point({
coordinates: featureLast.geometry.coordinates,
spatialReference: this._spatialReference
})
}
}
/**
* @description 响应中点位置增加顶点事件
* @private
* @param {Object} event 传入事件参数
*/
_handlerMidVertexAddEvent(event) {
if (event.action === 'changeFeature') {
// 向当前草图几何对象中插入一个顶点
this.sketchStage.entityGraphic.geometry.coordinates[0].splice(
event.vertexIndex + 1,
0,
event.point.coordinates
)
// 临时，三维geometry extent有bug，暂时用先创建二维geometry，再赋值三维坐标
// this.sketchStage.entityGraphic.geometry = new Polygon({
// coordinates: [this.sketchStage.entityGraphic.geometry.coordinates[0]],
// spatialReference: this._spatialReference
// })
const newCoordinates = JSON.parse(
JSON.stringify([this.sketchStage.entityGraphic.geometry.coordinates[0]])
)
this.sketchStage.entityGraphic.geometry = new Polygon({
coordinates: [
[
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
],
spatialReference: this._spatialReference
})
this.sketchStage.entityGraphic.geometry.coordinates = newCoordinates
}
if (event.action === 'moveMidVertex') {
// 根据移动的顶点实时位置，更新当前草图图形顶点坐标
this.sketchStage.currentVertexIndex = event.vertexIndex
this.sketchStage.entityGraphic.geometry.coordinates[0][
event.vertexIndex + 1
] = event.movePoint.coordinates
// 临时，三维geometry extent有bug，暂时用先创建二维geometry，再赋值三维坐标
// this.sketchStage.entityGraphic.geometry = new Polygon({
// coordinates: this.sketchStage.entityGraphic.geometry.coordinates,
// spatialReference: this._spatialReference
// })
const newCoordinates = JSON.parse(
JSON.stringify(this.sketchStage.entityGraphic.geometry.coordinates)
)
this.sketchStage.entityGraphic.geometry = new Polygon({
coordinates: [
[
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
],
spatialReference: this._spatialReference
})
this.sketchStage.entityGraphic.geometry.coordinates = newCoordinates
}
if (event.action === 'addVertex') {
// 更新同级的辅助草图的图形顶点
// 增加一个新的顶点和两个中点图形
const oldMidId =
this.sketchStage.midVertexGraphics[event.vertexIndex].id.toString()
const pointDrawTool = new SketchPointDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
vertexStyle: this.sketchStyle._selectVertexStyle
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this // 或者只传父级相应pan的事件
})
// this._hitTestDrawToolStack.push(pointDrawTool)
this._drawTools.push(pointDrawTool)
pointDrawTool.addFeature(event.point)
this.sketchStage.vertexGraphics.splice(
event.vertexIndex + 1,
0,
pointDrawTool.sketchStage.entityGraphic
)
// 添加第一个中点
const p =
this.sketchStage.entityGraphic.geometry.coordinates[0][
event.vertexIndex
]
let newMidPoint1 = null
// if (this._hight) {
// newMidPoint1 = new Point({
// coordinates: [
// (p[0] + event.point.coordinates[0]) / 2,
// (p[1] + event.point.coordinates[1]) / 2,
// this._hight
// ],
// spatialReference: this._spatialReference
// })
// } else {
// newMidPoint1 = new Point({
// coordinates: [
// (p[0] + event.point.coordinates[0]) / 2,
// (p[1] + event.point.coordinates[1]) / 2
// ],
// spatialReference: this._spatialReference
// })
// }
// if (this._getHight) {
// this._getHight.then(() => {})
// }
let hight1 = null
if (this._getHight) {
hight1 = 0
}
if (hight1) {
newMidPoint1 = new Point({
coordinates: [
(p[0] + event.point.coordinates[0]) / 2,
(p[1] + event.point.coordinates[1]) / 2,
hight1
],
spatialReference: this._spatialReference
})
} else {
newMidPoint1 = new Point({
coordinates: [
(p[0] + event.point.coordinates[0]) / 2,
(p[1] + event.point.coordinates[1]) / 2
],
spatialReference: this._spatialReference
})
}
const midPointDrawTool1 = new SketchPointDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
vertexStyle: this.sketchStyle._selectMidVertexStyle
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this // 或者只传父级相应pan的事件
})
// this._hitTestDrawToolStack.push(midPointDrawTool1)
this._drawTools.push(midPointDrawTool1)
midPointDrawTool1.addFeature(newMidPoint1, undefined, {
type: 'midVertex'
})
// 下标为vertexIndex的元素被替换掉
this.sketchStage.midVertexGraphics.splice(
event.vertexIndex,
1,
midPointDrawTool1.sketchStage.entityGraphic
)
// 添加第二个中点
const pNext =
this.sketchStage.entityGraphic.geometry.coordinates[0][
event.vertexIndex + 2
]
let newMidPoint2 = null
// if (this._hight) {
// newMidPoint2 = new Point({
// coordinates: [
// (pNext[0] + event.point.coordinates[0]) / 2,
// (pNext[1] + event.point.coordinates[1]) / 2,
// this._hight
// ],
// spatialReference: this._spatialReference
// })
// } else {
// newMidPoint2 = new Point({
// coordinates: [
// (pNext[0] + event.point.coordinates[0]) / 2,
// (pNext[1] + event.point.coordinates[1]) / 2
// ],
// spatialReference: this._spatialReference
// })
// }
let hight2 = null
if (this._getHight) {
hight2 = 0
}
if (hight2) {
newMidPoint2 = new Point({
coordinates: [
(pNext[0] + event.point.coordinates[0]) / 2,
(pNext[1] + event.point.coordinates[1]) / 2,
hight2
],
spatialReference: this._spatialReference
})
} else {
newMidPoint2 = new Point({
coordinates: [
(pNext[0] + event.point.coordinates[0]) / 2,
(pNext[1] + event.point.coordinates[1]) / 2
],
spatialReference: this._spatialReference
})
}
const midPointDrawTool2 = new SketchPointDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
vertexStyle: this.sketchStyle._selectMidVertexStyle
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this // 或者只传父级相应pan的事件
})
// this._hitTestDrawToolStack.push(midPointDrawTool2)
this._drawTools.push(midPointDrawTool2)
midPointDrawTool2.addFeature(newMidPoint2, undefined, {
type: 'midVertex'
})
// 下标为vertexIndex的元素后面添加一个新元素
this.sketchStage.midVertexGraphics.splice(
event.vertexIndex + 1,
0,
midPointDrawTool2.sketchStage.entityGraphic
)
// 更新每个feature的VertexIndex
this.sketchStage.vertexGraphics.forEach((feature, i) => {
if (feature.attributes) {
feature.attributes.vertexIndex = i
} else {
feature.attributes = {
vertexIndex: i
}
}
})
this.sketchStage.midVertexGraphics.forEach((feature, i) => {
if (feature.attributes) {
feature.attributes.vertexIndex = i
} else {
feature.attributes = {
vertexIndex: i
}
}
})
// 移除被选中的中点（中点被新增的顶点替代）
// let existIndex = -1
this._otherDrawTools.forEach((drawTool, i) => {
if (drawTool.sketchStage.entityGraphic.id === oldMidId) {
// existIndex = i
this._removeFeatureFromMap(drawTool.sketchStage.entityGraphic)
}
})
// if (existIndex > -1) {
// this._otherDrawTools.splice(existIndex, 1)
// }
this._otherDrawTools.push(pointDrawTool)
this._otherDrawTools.push(midPointDrawTool1)
this._otherDrawTools.push(midPointDrawTool2)
}
}
/**
* 图形捕获，捕获重合点、点在线上、平行线、垂直线
* @private
* @param {Point} geoCoord 当前坐标点
* @param {Array} polygonSpots 被捕获的顶点数据组
* @param {Array} polygonSpotSlopes 被捕获的直线斜率数据组
*/
getSnapGraphics(targetPoint, polygonSpots) {
let realPoint = null
const tolerance = this.getDistanceByPixel
? this.getDistanceByPixel(this.sketchSnappingTool.pixelTolerance)
: 200
const moveLine = new LineString({
coordinates: polygonSpots.slice(polygonSpots.length - 2),
spatialReference: this._spatialReference
})
let geometries
if (this.sketchSnappingTool.snapSketchGeometry && polygonSpots.length > 3) {
const entityPolyline = new LineString({
coordinates: polygonSpots.slice(0, polygonSpots.length - 2),
spatialReference: this._spatialReference
})
geometries = this.snapAndReferGeometries.concat([entityPolyline])
} else {
geometries = this.snapAndReferGeometries
}
// 获取捕获结果
const snapResult = this.sketchSnappingTool.snapGeometries(
targetPoint,
moveLine,
geometries,
tolerance
)
if (snapResult.coincidentPoint) {
// 端点重合
const pointFeature = new Feature({
geometry: snapResult.coincidentPoint.realPoint,
symbol: this.sketchStyle._coincidentPointStyle
})
this.sketchStage.snapGraphics.push(pointFeature)
realPoint = snapResult.coincidentPoint.realPoint
} else if (snapResult.inLineAndParallel) {
snapResult.inLineAndParallel.lines.forEach((line) => {
const lineFeature = new Feature({
geometry: line,
symbol: new SimpleLineSymbol({
color: new Color(255, 255, 0, 1),
width: 3
})
})
this.sketchStage.snapGraphics.push(lineFeature)
})
const pointFeature = new Feature({
geometry: snapResult.inLineAndParallel.realPoint,
symbol: this.sketchStyle._selectVertexStyle
})
this.sketchStage.snapGraphics.push(pointFeature)
if (snapResult.inLineAndParallel.symbolGeometry) {
const symbolFeature = new Feature({
geometry: snapResult.inLineAndParallel.symbolGeometry,
symbol: new SimpleLineSymbol({
color: new Color(255, 255, 0, 1),
width: 3
})
})
this.sketchStage.snapGraphics.push(symbolFeature)
}
realPoint = snapResult.inLineAndParallel.realPoint
} else if (snapResult.inLineAndPerpendicular) {
snapResult.inLineAndPerpendicular.lines.forEach((line) => {
const lineFeature = new Feature({
geometry: line,
symbol: new SimpleLineSymbol({
color: new Color(255, 255, 0, 1),
width: 3
})
})
this.sketchStage.snapGraphics.push(lineFeature)
})
const pointFeature = new Feature({
geometry: snapResult.inLineAndPerpendicular.realPoint,
symbol: this.sketchStyle._selectVertexStyle
})
this.sketchStage.snapGraphics.push(pointFeature)
if (snapResult.inLineAndPerpendicular.symbolGeometry) {
const symbolFeature = new Feature({
geometry: snapResult.inLineAndPerpendicular.symbolGeometry,
symbol: new SimpleLineSymbol({
color: new Color(255, 255, 0, 1),
width: 3
})
})
this.sketchStage.snapGraphics.push(symbolFeature)
}
realPoint = snapResult.inLineAndPerpendicular.realPoint
} else if (snapResult.pointInLine) {
// 点在线上捕获上图
const lineFeature = new Feature({
geometry: snapResult.pointInLine.line,
symbol: new SimpleLineSymbol({
color: new Color(255, 255, 0, 1),
width: 3
})
})
this.sketchStage.snapGraphics.push(lineFeature)
const pointFeature = new Feature({
geometry: snapResult.pointInLine.realPoint,
symbol: this.sketchStyle._selectVertexStyle
})
this.sketchStage.snapGraphics.push(pointFeature)
realPoint = snapResult.pointInLine.realPoint
} else if (snapResult.parallelLine) {
// 平行捕获结果上图
const lineFeature = new Feature({
geometry: snapResult.parallelLine.line,
symbol: new SimpleLineSymbol({
color: new Color(255, 255, 0, 1),
width: 3
})
})
this.sketchStage.snapGraphics.push(lineFeature)
const pointFeature = new Feature({
geometry: snapResult.parallelLine.realPoint,
symbol: this.sketchStyle._selectVertexStyle
})
this.sketchStage.snapGraphics.push(pointFeature)
// 渲染高亮平行
if (snapResult.parallelLine.symbolGeometry) {
const symbolFeature = new Feature({
geometry: snapResult.parallelLine.symbolGeometry,
symbol: new SimpleLineSymbol({
color: new Color(255, 255, 0, 1),
width: 3
})
})
this.sketchStage.snapGraphics.push(symbolFeature)
}
realPoint = snapResult.parallelLine.realPoint
} else if (snapResult.perpendicularLine) {
// 渲染高亮垂直，坐标点
const lineFeature = new Feature({
geometry: snapResult.perpendicularLine.line,
symbol: new SimpleLineSymbol({
color: new Color(255, 255, 0, 1),
width: 3
})
})
this.sketchStage.snapGraphics.push(lineFeature)
const pointFeature = new Feature({
geometry: snapResult.perpendicularLine.realPoint,
symbol: this.sketchStyle._selectVertexStyle
})
this.sketchStage.snapGraphics.push(pointFeature)
// 渲染高亮垂足
if (snapResult.perpendicularLine.symbolGeometry) {
const symbolFeature = new Feature({
geometry: snapResult.perpendicularLine.symbolGeometry,
symbol: new SimpleLineSymbol({
color: new Color(255, 255, 0, 1),
width: 3
})
})
this.sketchStage.snapGraphics.push(symbolFeature)
}
realPoint = snapResult.perpendicularLine.realPoint
}
this.sketchStage.snapGraphics.forEach((feature) => {
this._addFeaturesToMap(feature)
})
return realPoint
}
/**
* @description 选中图形顶点
* @private
*/
selectVertex() {}
/**
* @description 选中图形中点点
*/
addMidVertex(index, point) {
const midPointDrawTool = new SketchPointDrawTool()
midPointDrawTool.addPoint(point)
this.sketchStage.midVertexGraphics = midPointDrawTool
}
/**
* 当前草图图形中插入新的顶点
* @private
* @param {Point} point 新增/插入顶点
* @param {Number} index 新增/新增点的序号,从1开始
*/
addVertex(point, index) {
index--
let newGeometry = null
if (index > -1) {
let vertexCount = 0
let newCoordinates = []
vertexCount =
this.sketchStage.entityGraphic.geometry.coordinates[0].length - 1
if (index < vertexCount) {
// 向当前草图几何对象中插入一个顶点
newCoordinates = this.sketchStage.entityGraphic.geometry.coordinates[0]
newCoordinates.splice(index, 0, point.coordinates)
if (index === 0) {
newCoordinates[newCoordinates.length - 1] = point.coordinates
} else if (index === newCoordinates.length - 1) {
newCoordinates.splice(0, 0, point.coordinates)
}
this.sketchStage.entityGraphic.geometry.coordinates = [newCoordinates]
newGeometry = this.sketchStage.entityGraphic.geometry
// 更新同级的辅助草图的图形顶点
let pointDrawTool = undefined
let midPointDrawTool2 = undefined
const extent = this.sketchStage.entityGraphic.geometry.extent
if (this.sketchStage.selectBoxGraphics.length > 0) {
this.sketchStage.selectBoxGraphics.forEach((feature) => {
feature.geometry.coordinates = [
[
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin],
[extent.xmin, extent.ymin],
[extent.xmin, extent.ymax],
[extent.xmax, extent.ymax]
]
]
})
}
if (this.sketchStage.selectBoxVertexGraphics.length > 0) {
const points = [
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin],
[extent.xmin, extent.ymin],
[extent.xmin, extent.ymax],
[(extent.xmax + extent.xmin) / 2, extent.ymax],
[(extent.xmax + extent.xmin) / 2, extent.ymin],
[extent.xmax, (extent.ymax + extent.ymin) / 2],
[extent.xmin, (extent.ymax + extent.ymin) / 2]
]
this.sketchStage.selectBoxVertexGraphics.forEach((feature, i) => {
feature.geometry.coordinates = points[i]
})
}
// 增加一个新的顶点
if (this.sketchStage.vertexGraphics.length > 0) {
pointDrawTool = new SketchPointDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
vertexStyle: this.sketchStyle._selectVertexStyle
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this // 或者只传父级相应pan的事件
})
// this._hitTestDrawToolStack.push(pointDrawTool)
this._drawTools.push(pointDrawTool)
pointDrawTool.addFeatureByGeometry(point)
this.sketchStage.vertexGraphics.splice(
index,
0,
pointDrawTool.sketchStage.entityGraphic
)
// 更新每个feature的VertexIndex
this.sketchStage.vertexGraphics.forEach((feature, i) => {
if (feature.attributes) {
feature.attributes.vertexIndex = i
} else {
feature.attributes = {
vertexIndex: i
}
}
})
}
// 修改第一个中点坐标，增加第二个新的中点
if (this.sketchStage.midVertexGraphics.length > 0) {
let replaceIndex = -1
let addIndex = -1
let pLast = null
let pNext = null
if (index === 0) {
addIndex = 0
replaceIndex = this.sketchStage.midVertexGraphics.length - 1
pLast =
this.sketchStage.entityGraphic.geometry.coordinates[0][
this.sketchStage.entityGraphic.geometry.coordinates[0].length -
2
]
pNext = this.sketchStage.entityGraphic.geometry.coordinates[0][1]
}
// else if (index === this.sketchStage.midVertexGraphics.length - 2) {
// nextIndex = 0
// }
else {
replaceIndex = index - 1
addIndex = index + 1
pLast =
this.sketchStage.entityGraphic.geometry.coordinates[0][
replaceIndex
]
pNext =
this.sketchStage.entityGraphic.geometry.coordinates[0][addIndex]
}
// 修改第一个中点
const newMidPoint1 = new Point({
coordinates: [
(pLast[0] + point.coordinates[0]) / 2,
(pLast[1] + point.coordinates[1]) / 2
],
spatialReference: this._spatialReference
})
// 下标为Index的上一个点坐标被替换掉新坐标
this.sketchStage.midVertexGraphics[
replaceIndex
].geometry.coordinates = newMidPoint1.coordinates
// 添加第二个中点
const newMidPoint2 = new Point({
coordinates: [
(pNext[0] + point.coordinates[0]) / 2,
(pNext[1] + point.coordinates[1]) / 2
],
spatialReference: this._spatialReference
})
midPointDrawTool2 = new SketchPointDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
vertexStyle: this.sketchStyle._selectMidVertexStyle
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this // 或者只传父级相应pan的事件
})
// this._hitTestDrawToolStack.push(midPointDrawTool2)
this._drawTools.push(midPointDrawTool2)
midPointDrawTool2.addFeatureByGeometry(newMidPoint2, undefined, {
type: 'midVertex'
})
// 下标为Index的元素后面添加一个新元素
this.sketchStage.midVertexGraphics.splice(
index,
0,
midPointDrawTool2.sketchStage.entityGraphic
)
this.sketchStage.midVertexGraphics.forEach((feature, i) => {
if (feature.attributes) {
feature.attributes.vertexIndex = i
} else {
feature.attributes = {
vertexIndex: i
}
}
})
}
// 修改drawTool集合中增加一个顶点两个中点
if (pointDrawTool) {
this._otherDrawTools.push(pointDrawTool)
}
if (midPointDrawTool2) {
this._otherDrawTools.push(midPointDrawTool2)
}
this.undoRedoManager.addProcess('update', this.sketchStage)
}
return newGeometry
}
}
/**
* 更新当前草图图形的某个顶点
* @param {Point} point 新的顶点
* @param {Number} index 需更新的顶点的序号
*/
updateVertex(point, index) {
index--
let newGeometry = null
if (index > -1) {
const vertexCount =
this.sketchStage.entityGraphic.geometry.coordinates[0].length - 1
if (index < vertexCount) {
// 当前草图几何对象中更新顶点，更新草图实体图形
const entityGraphic = this.sketchStage.entityGraphic
const newCoordinates = entityGraphic.geometry.coordinates[0]
entityGraphic.geometry.coordinates = [newCoordinates]
this.currentVertexIndex = index
newCoordinates[index] = point.coordinates
if (newCoordinates.length - 1 === index) {
newCoordinates[0] = point.coordinates
} else if (index === 0) {
newCoordinates[newCoordinates.length - 1] = point.coordinates
}
// 临时，三维geometry extent有bug，暂时用先创建二维geometry，再赋值三维坐标
// entityGraphic.geometry = new Polygon({
// coordinates: entityGraphic.geometry.coordinates,
// spatialReference: this._spatialReference
// })
const newGeometryCoordinates = JSON.parse(
JSON.stringify(entityGraphic.geometry.coordinates)
)
entityGraphic.geometry = new Polygon({
coordinates: [
[
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
],
spatialReference: this._spatialReference
})
entityGraphic.geometry.coordinates = newGeometryCoordinates
newGeometry = entityGraphic.geometry
const extent = entityGraphic.geometry.extent
if (this.sketchStage.selectBoxGraphics.length > 0) {
this.sketchStage.selectBoxGraphics.forEach((feature) => {
feature.geometry.coordinates = [
[
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin],
[extent.xmin, extent.ymin],
[extent.xmin, extent.ymax],
[extent.xmax, extent.ymax]
]
]
})
}
if (this.sketchStage.selectBoxVertexGraphics.length > 0) {
const points = [
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin],
[extent.xmin, extent.ymin],
[extent.xmin, extent.ymax],
[(extent.xmax + extent.xmin) / 2, extent.ymax],
[(extent.xmax + extent.xmin) / 2, extent.ymin],
[extent.xmax, (extent.ymax + extent.ymin) / 2],
[extent.xmin, (extent.ymax + extent.ymin) / 2]
]
this.sketchStage.selectBoxVertexGraphics.forEach((feature, i) => {
feature.geometry.coordinates = points[i]
})
}
// 更新顶点图形
if (this.sketchStage.vertexGraphics.length > 0) {
this.sketchStage.vertexGraphics[index].geometry.coordinates =
point.coordinates
}
// 更新中点图形
if (this.sketchStage.midVertexGraphics.length > 0) {
const curIndex = index
const lastIndex =
curIndex === 0
? curIndex - 1 + this.sketchStage.midVertexGraphics.length
: curIndex - 1
const nextIndex =
curIndex === this.sketchStage.midVertexGraphics.length - 1
? 0
: curIndex + 1
const feature = this.sketchStage.midVertexGraphics[curIndex]
const featureLast = this.sketchStage.midVertexGraphics[lastIndex]
const pLast = newCoordinates[lastIndex]
const p = newCoordinates[curIndex]
const pNext = newCoordinates[nextIndex]
feature.geometry.coordinates = [
(pNext[0] + p[0]) / 2,
(pNext[1] + p[1]) / 2
]
feature.geometry = new Point({
coordinates: feature.geometry.coordinates,
spatialReference: this._spatialReference
})
featureLast.geometry.coordinates = [
(pLast[0] + p[0]) / 2,
(pLast[1] + p[1]) / 2
]
featureLast.geometry = new Point({
coordinates: featureLast.geometry.coordinates,
spatialReference: this._spatialReference
})
}
}
this.undoRedoManager.addProcess('update', this.sketchStage)
}
return newGeometry
}
/**
* 移除草图图形的某个顶点
* @param {Number} index 需更新的顶点的序号
*/
removeVertex(index) {
index--
let newGeometry = null
if (index > -1) {
const vertexCount =
this.sketchStage.entityGraphic.geometry.coordinates[0].length - 1
if (vertexCount > 3 && index < vertexCount) {
const newCoordinates =
this.sketchStage.entityGraphic.geometry.coordinates[0]
// 更新草图实体图形
newCoordinates.splice(index, 1)
if (index === 0) {
newCoordinates.splice(newCoordinates.length - 1, 1, newCoordinates[0])
}
// else if (index === vertexCount - 1) {
// newCoordinates.splice(index - 1, 1)
// newCoordinates.splice(0, 1)
// }
// 临时，三维geometry extent有bug，暂时用先创建二维geometry，再赋值三维坐标
// newGeometry = new Polygon({
// coordinates: [newCoordinates],
// spatialReference: this._spatialReference
// })
newGeometry = new Polygon({
coordinates: [
[
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
],
spatialReference: this._spatialReference
})
newGeometry.coordinates = [newCoordinates]
this.sketchStage.entityGraphic.geometry = newGeometry
// 更新草图辅助图形
const extent = this.sketchStage.entityGraphic.geometry.extent
if (this.sketchStage.selectBoxGraphics.length > 0) {
this.sketchStage.selectBoxGraphics.forEach((feature) => {
feature.geometry.coordinates = [
[
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin],
[extent.xmin, extent.ymin],
[extent.xmin, extent.ymax],
[extent.xmax, extent.ymax]
]
]
})
}
if (this.sketchStage.selectBoxVertexGraphics.length > 0) {
const points = [
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin],
[extent.xmin, extent.ymin],
[extent.xmin, extent.ymax],
[(extent.xmax + extent.xmin) / 2, extent.ymax],
[(extent.xmax + extent.xmin) / 2, extent.ymin],
[extent.xmax, (extent.ymax + extent.ymin) / 2],
[extent.xmin, (extent.ymax + extent.ymin) / 2]
]
this.sketchStage.selectBoxVertexGraphics.forEach((feature, i) => {
feature.geometry.coordinates = points[i]
})
}
if (this.sketchStage.vertexGraphics.length > 0) {
const oriFeatureId =
this.sketchStage.vertexGraphics[index].id.toString()
this._removeFeatureFromMap(this.sketchStage.vertexGraphics[index])
this.sketchStage.vertexGraphics.splice(index, 1)
this.sketchStage.vertexGraphics.forEach((feature, i) => {
if (feature.attributes) {
feature.attributes.vertexIndex = i
} else {
feature.attributes = {
vertexIndex: i
}
}
})
this._otherDrawTools = this._otherDrawTools.filter((drawTool) => {
if (drawTool.sketchStage.entityGraphic.id !== oriFeatureId) {
return drawTool
}
})
}
if (this.sketchStage.midVertexGraphics.length > 0) {
let newMidCoordinates = []
let updateIndex = -1
if (index === 0) {
// newMidCoordinates = [
// (newGeometry[newGeometry.length - 1][0] + newGeometry[index][0]) /
// 2,
// (newGeometry[newGeometry.length - 1 - 1][1] +
// newGeometry[index][1]) /
// 2
// ]
newMidCoordinates = [
(newGeometry.coordinates[0][
newGeometry.coordinates[0].length - 2
][0] +
newGeometry.coordinates[0][index][0]) /
2,
(newGeometry.coordinates[0][
newGeometry.coordinates[0].length - 2
][1] +
newGeometry.coordinates[0][index][1]) /
2
]
updateIndex = this.sketchStage.midVertexGraphics.length - 1
}
// else if (index === vertexCount - 1) {
// newMidCoordinates = [
// (newGeometry[newGeometry.length - 1][0] + newGeometry[index][0]) /
// 2,
// (newGeometry[newGeometry.length - 1 - 1][1] +
// newGeometry[index][1]) /
// 2
// ]
// }
else {
newMidCoordinates = [
(newGeometry.coordinates[0][index - 1][0] +
newGeometry.coordinates[0][index][0]) /
2,
(newGeometry.coordinates[0][index - 1][1] +
newGeometry.coordinates[0][index][1]) /
2
]
updateIndex = index - 1
}
this.sketchStage.midVertexGraphics[updateIndex].geometry = new Point({
coordinates: newMidCoordinates,
spatialReference: this._spatialReference
})
const oriFeatureId =
this.sketchStage.vertexGraphics[index].id.toString()
this._removeFeatureFromMap(this.sketchStage.midVertexGraphics[index])
this.sketchStage.midVertexGraphics.splice(index, 1)
// this._otherDrawTools.filter(drawTool => drawTool.sketchStage.entityGraphic.id!= )
this.sketchStage.midVertexGraphics.forEach((feature, i) => {
if (feature.attributes) {
feature.attributes.vertexIndex = i
} else {
feature.attributes = {
vertexIndex: i
}
}
})
this._otherDrawTools = this._otherDrawTools.filter((drawTool) => {
if (drawTool.sketchStage.entityGraphic.id !== oriFeatureId) {
return drawTool
}
})
}
}
this.undoRedoManager.addProcess('update', this.sketchStage)
}
return newGeometry
}
}
export default SketchPolygonDrawTool
</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>