ArcGIS JSAPI 高级教程 - 自由绘制线段、多边形
ArcGIS JSAPI 高级教程 - 自由绘制线段、多边形
- 完整代码
- 在线示例
介绍一下标绘功能，主要是自由标绘，即鼠标拖动随意画线段或者多边形。
本文包括 完整代码以及在线示例。
完整代码
主要利用 Sketch 实现，通过 freehandPolygon、freehandPolyline 开启自由绘制功能，标绘完成后添加高亮效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"/><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/><title> freehandPolyline freehandPolygon | Sample | ArcGIS Maps SDK for JavaScript 4.33</title><link rel="stylesheet" href="https://openlayers.vip/arcgis_api/4.33/esri/themes/light/main.css"/><script src="https://openlayers.vip/arcgis_api/4.33/init.js"></script><script src="https://openlayers.vip/examples/resources/renderCommon.js"></script><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><script>var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script><script>require(["esri/Map","esri/views/SceneView","esri/layers/GraphicsLayer","esri/widgets/Sketch","esri/layers/WebTileLayer",'esri/layers/support/TileInfo',"esri/widgets/Home",], (Map,SceneView,GraphicsLayer,Sketch,WebTileLayer,TileInfo,Home,) => {const graphicsLayer = new GraphicsLayer();// 初始化地图，这里使用天地图资源const {map, view} = initMap({Map, SceneView, Home, tianditu: true, WebTileLayer,TileInfo,ground: false}, undefined, {x: 116.20926165518152,y: 39.96813090329214,z: 3000,});map.add(graphicsLayer);// 用于高亮图形let graphicsLayerView;view.when(() => {view.whenLayerView(graphicsLayer).then((graphicsLayerView_) => {graphicsLayerView = graphicsLayerView_;})// 创建标绘工具const sketch = new Sketch({layer: graphicsLayer,view: view,// 激活自由标绘availableCreateTools: ['freehandPolyline','freehandPolygon'],visibleElements: {// 工具添加自由标绘createTools: {freehandPolygon: true,freehandPolyline: true},}});sketch.on("create", function (event) {// 监听事件if (event.state === "complete") {graphicsLayerView?.highlight(graphicsLayer.graphics);}});// 添加标绘工具到场景view.ui.add(sketch, "top-right");});});</script>
</head><body>
<div id="viewDiv"></div>
</body>
</html>
在线示例
ArcGIS Maps SDK for JavaScript 在线示例：自由绘制线段、多边形