ArcGIS JSAPI 高级教程 - 自由绘制线段、多边形

- 完整代码
- 在线示例

介绍一下标绘功能，主要是自由标绘，即鼠标拖动随意画线段或者多边形。

本文包括完整代码以及在线示例。

完整代码

主要利用 Sketch 实现，通过 freehandPolygon、freehandPolyline 开启自由绘制功能，标绘完成后添加高亮效果。

javascript 复制代码

<!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 在线示例：自由绘制线段、多边形