Arcgis for javascript 4.20绘制点、线、面、矩形、圆

1、使用Arcgis for javascript 4.20Sketch方法的小工具进行创建和更新点、折现、多边形、圆几何图形的图形

<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>绘制小部件 ArcGIS API for JavaScript 4.20</title>

    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.20/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        require([
            "esri/widgets/Sketch",
            "esri/Map",
            "esri/layers/GraphicsLayer",
            "esri/views/MapView"
        ], (Sketch, Map, GraphicsLayer, MapView) => {
            const graphicsLayer = new GraphicsLayer();

            const map = new Map({
                basemap: "dark-gray",
                layers: [graphicsLayer]
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 5,
                center: [90, 45]
            });

            view.when(() => {
                const sketch = new Sketch({
                    layer: graphicsLayer,
                    view: view,
                    // graphic will be selected as soon as it is created
                    creationMode: "update"
                });

                view.ui.add(sketch, "top-right");
            });
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>

2、使用ArcGIS API for JS4.20 Draw手动绘制绘制点(Point)、线(Polyline)、面(Polygon)、矩形(Rectangle)、圆(Circle)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>ArcGIS demo</title>
    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.20/"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="viewDiv">
    <div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="画线">
        <span class="esri-icon-polyline"></span>
    </div>
    <div id="area-button" class="esri-widget esri-widget--button esri-interactive" title="画面">
        <span class="esri-icon-polygon"></span>
    </div>
    <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="画点">
        <span class="esri-icon-radio-checked"></span>
    </div>
    <div id="circle-button" class="esri-widget esri-widget--button esri-interactive" title="画圆">
        <span class="esri-icon-radio-unchecked"></span>
    </div>
    <div id="rectangle-button" class="esri-widget esri-widget--button esri-interactive" title="画矩形">
        <span class="esri-icon-checkbox-unchecked"></span>
    </div>
</div>
<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/views/2d/draw/Draw",
        "esri/Graphic",
        "esri/geometry/Polyline",
        "esri/geometry/Polygon",
        "esri/geometry/Point",
        "esri/geometry/Circle",
        "dojo/domReady!"
    ], function (
        Map, MapView,
        Draw, Graphic,
        Polyline, Polygon,Point,Circle
    ) {
        var map = new Map({
            basemap: "dark-gray"
        });

        //二维视图
        var view = new MapView({
            map: map,
            zoom: 5,
            center: [90, 45],
            container: "viewDiv"
        });
        view.ui.add("line-button", "top-left");//添加绘制线按钮,自定义UI
        view.ui.add("area-button", "top-left");//添加绘制面按钮,自定义UI
        view.ui.add("point-button", "top-left");//添加绘制面按钮,自定义UI
        view.ui.add("circle-button", "top-left");//添加绘制面按钮,自定义UI
        view.ui.add("rectangle-button", "top-left");//添加绘制面按钮,自定义UI
        // view.ui.remove("attribution");//移除底部ESRI logo

        view.when(function () {
            var draw = new Draw({
                view: view
            });
            //绑定线按钮绘制事件
            var drawLineButton = document.getElementById("line-button");
            drawLineButton.onclick = function() {
                view.graphics.removeAll();//清楚之前的绘制
                enableCreateLine(draw, view);
            };
            //绑定面按钮绘制事件
            var drawAreaButton = document.getElementById("area-button");
            drawAreaButton.onclick = function() {
                view.graphics.removeAll();//清楚之前的绘制
                enableCreateArea(draw, view);
            };
            //绑定面按钮绘制事件
            var drawPointButton = document.getElementById("point-button");
            drawPointButton.onclick = function() {
                enableCreatePoint(draw, view);
            };
            //绑定面按钮绘制事件
            var drawCircleButton = document.getElementById("circle-button");
            drawCircleButton.onclick = function() {
                enableCreateCircle(draw, view);
            };
            //绑定面按钮绘制事件
            var drawRectangleButton = document.getElementById("rectangle-button");
            drawRectangleButton.onclick = function() {
                enableCreateRectangle(draw, view);
            };
        });
        //开始监听画线
        function enableCreateLine(draw, view) {
            var action = draw.create("polyline", {
                mode: "click"
            });
            // 获取焦点
            view.focus();

            // 顶点添加事件
            action.on("vertex-add", createPolyline);


            //顶点移除事件
            action.on("vertex-remove", createPolyline);


            // 鼠标移动事件
            action.on("cursor-update", createPolyline);


            // 绘制完成事件
            action.on("draw-complete", createPolyline);


        }
        //开始监听画面
        function enableCreateArea(draw, view) {
            var action = draw.create("polygon", {
                mode: "click"//点击方式加点
            });
            // 获取焦点
            view.focus();

            // 顶点添加事件
            action.on("vertex-add", createPolygon);


            //顶点移除事件
            action.on("vertex-remove", createPolygon);


            // 鼠标移动事件
            action.on("cursor-update", createPolygon);


            // 绘制完成事件
            action.on("draw-complete", createPolygon);


        }
        //开始监听画点
        function enableCreatePoint(draw, view) {
            var action = draw.create("point", {
                mode: "click"//点击方式加点
            });
            // 获取焦点
            view.focus();

            // 顶点添加事件
            action.on("vertex-add", createPoint);


            //顶点移除事件
            action.on("vertex-remove", createPoint);


            // 绘制完成事件
            action.on("draw-complete", createPoint);


        }
        //开始监听画圆
        function enableCreateCircle(draw, view) {
            var action = draw.create("circle", {
                mode: "click"//点击方式加点
            });
            // 获取焦点
            view.focus();
            //顶点移除事件
            action.on("vertex-remove", createCircle);
            // 鼠标移动事件
            action.on("cursor-update", createCircle);
            // 绘制完成事件
            action.on("draw-complete", createCircle);
        }
        //开始监听画矩形
        function enableCreateRectangle(draw, view) {
            var action = draw.create("rectangle", {
                mode: "click"//点击方式加点
            });
            // 获取焦点
            view.focus();

            //顶点移除事件
            action.on("vertex-remove", createRectangle);
            // 鼠标移动事件
            action.on("cursor-update", createRectangle);
            // 绘制完成事件
            action.on("draw-complete", createRectangle);

        }
        //根据点坐标生成新的线
        function createPolyline(event) {
            //获取所有顶点
            var vertices = event.vertices;
            //清除之前绘制
            view.graphics.removeAll();
            // 生成绘制的图形
            var graphic = new Graphic({
                geometry: new Polyline({
                    paths: vertices,
                    spatialReference: view.spatialReference
                }),
                symbol: {
                    type: "simple-line", // autocasts as new SimpleFillSymbol
                    color: [4, 90, 141],
                    width: 4,
                    cap: "round",
                    join: "round"
                }
            });
            // 将绘制的图形添加到view
            view.graphics.add(graphic);
        };
        //根据点坐标生成新的线
        function createPolygon(event) {
            //获取所有顶点
            var vertices = event.vertices;
            //清除之前绘制
            view.graphics.removeAll();

            // 生成绘制的图形
            var graphic = new Graphic({
                geometry: new Polygon({
                    hasZ: false,
                    hasM: false,
                    rings: [vertices],
                    spatialReference: view.spatialReference
                }),
                symbol: {
                    type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                    color: [ 51,51, 204, 0.9 ],
                    style: "solid",
                    outline: {  // autocasts as new SimpleLineSymbol()
                        color: "red",
                        width: 1
                    }
                }
            });
            // 将绘制的图形添加到view
            view.graphics.add(graphic);
        }

        //根据点坐标生成新的线
        function createPoint(event) {
            //获取所有顶点
            var coordinates = event.coordinates;

            //生成绘制的图形
            var graphic = new Graphic({
                geometry: new Point({
                    hasZ: false,
                    hasM: false,
                    x:coordinates[0],
                    y:coordinates[1],
                    spatialReference: view.spatialReference
                }),
                symbol: {
                    type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                    style: "square",
                    color: "blue",
                    size: "8px",  // pixels
                    outline: {  // autocasts as new SimpleLineSymbol()
                        color: [ 255, 255, 0 ],
                        width: 3  // points
                    }
                }
            });
            // 将绘制的图形添加到view
            view.graphics.add(graphic);
        }
        //根据点坐标生成新的线
        function createCircle(event) {
            //获取所有顶点
            var vertices = event.vertices;
            //少于一个点无法展示圆
            if(vertices.length<2){
                return
            }
            //清除之前绘制
            view.graphics.removeAll();
            //生成绘制的图形,两点画圆
            var center=new Point({
                hasZ: false,
                hasM: false,
                x:vertices[0][0],
                y:vertices[0][1],
                spatialReference: view.spatialReference
            });
            var dis=center.distance(new Point({
                hasZ: false,
                hasM: false,
                x:vertices[1][0],
                y:vertices[1][1],
                spatialReference: view.spatialReference
            }));
            var graphic = new Graphic({
                geometry: new Circle({
                    hasZ: false,
                    hasM: false,
                    center:center,
                    radius:dis,
                    spatialReference: view.spatialReference
                }),
                symbol: {
                    type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                    color: [ 51,51, 204, 0.9 ],
                    style: "solid",
                    outline: {  // autocasts as new SimpleLineSymbol()
                        color: "white",
                        width: 1
                    }
                }
            });
            // 将绘制的图形添加到view
            view.graphics.add(graphic);
        }
        function createRectangle(event) {
            //获取所有顶点
            var vertices = event.vertices;

            //两点画矩形
            if(vertices.length<2){
                return
            }
            var rings=[vertices[0],[vertices[0][0],vertices[1][1]],vertices[1],[vertices[1][0],vertices[0][1]]];
            //清除之前绘制
            view.graphics.removeAll();

            // 生成绘制的图形
            var graphic = new Graphic({
                geometry: new Polygon({
                    hasZ: false,
                    hasM: false,
                    rings: [rings],
                    spatialReference: view.spatialReference
                }),
                symbol: {
                    type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                    color: [ 51,51, 204, 0.9 ],
                    style: "solid",
                    outline: {  // autocasts as new SimpleLineSymbol()
                        color: "white",
                        width: 1
                    }
                }
            });
            // 将绘制的图形添加到view
            view.graphics.add(graphic);
        }
    })
</script>
</body>

</html>

参考博主:https://hanbo.blog.csdn.net/article/details/81383287?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-11.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-11.control

3、使用GraphicsLayer和SketchViewModel绘制点、矩形、多边形。这里是vue中的写法

 vue中使用arcgis for javaScript的基本使用在 vue中使用 Arcgis for javascript

<div id="viewDiv">
    <div @click="shapeClick('point')">点</div>
    <div @click="shapeClick('rectangle')">矩形</div>
    <div @click="shapeClick('polygon')">多边形</div>
</div>
#viewDiv {
   padding: 0;
   margin: 0;
   height: 100%;
   width: 100vh;
}
  import {loadModules} from "esri-loader";
shapeClick(type){
    loadModules([
      "esri/layers/GraphicsLayer",
      "esri/widgets/Sketch/SketchViewModel",
    ], {
    url: 'https://js.arcgis.com/4.20/init.js',
    css: 'https://js.arcgis.com/4.20/esri/themes/light/main.css',
   }).then(([GraphicsLayer, SketchViewModel]) => {
       let map = new Map({
            basemap: "dark-gray"
        });
        let view = new MapView({
            map: map,
            zoom: 5,
            center: [90, 45],
            container: "viewDiv"
        });
       let sketchLayer = new GraphicsLayer();
       map.addMany([sketchLayer]);
       let sketchViewModel = new SketchViewModel({
         layer: this.sketchLayer,
         view: view,
         updateOnGraphicClick: false,
       });
       sketchViewModel.create(type);
       sketchViewModel.on(["create"],(event)=> {
          if (event.state === "complete") {
            sketchGeometry = event.graphic.geometry;
          }
       });
 })
}

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: ArcGIS API for JS是一款向Web开发者的地图API,它提供了丰富的API,帮助开发者构建自定义交互式地图应用程序。其中包括绘制线等功能。 绘制 使用ArcGIS API for JS绘制十分简单,在地图上击鼠标左键即可绘制一个。每个都具有独立的坐标和属性信息,可以随时编辑修改。另外,开发者还可以通过API设置的图标、大小、颜色等样式,使得在地图上更加醒目。 绘制线 绘制线ArcGIS API for JS的另一个常见功能,它可以通过鼠标在地图上击左键进行绘制。开发者可以通过API设置线的颜色、宽度、描述信息等属性,从而将其与其他地图要素区分开来。此外,ArcGIS API for JS还支持绘制多段线,使得地图上的路线更加真实。 绘制 绘制ArcGIS API for JS最强大的功能之一,它可以让开发者创建自己的多边形、形、矩形等形状。开发者可以自定义的颜色、透明度、边框、填充等属性,从而轻松创建专业级别的地图要素。此外,API还支持多个的合并、分割和编辑,使得地图要素更加丰富、灵活。 总之,ArcGIS API for JS提供了丰富的绘图功能,不仅可以帮助开发者快速创建自定义地图应用程序,还可以让地图更加真实、互动。感谢你的提问。 ### 回答2: ArcGIS API for JS是一款广泛使用的地理信息系统软件开发工具,它提供了许多用于绘制地图元素的功能和工具。其中,绘制线是GIS应用程序中不可或缺的功能之一。 绘制线的方法都可以通过使用ArcGIS API for JS中提供的绘制工具实现。绘图工具可以通过调用API中提供的函数来启用并配置,然后就可以使用鼠标在地图中绘制所需图形。同时,API还提供了一系列函数用于处理网格、吸附、编辑和交互等操作,使绘制过程更加灵活、高效。 在ArcGIS API for JS绘制非常简单,首先需要创建一个图形对象,然后指定该的坐标和样式。接着,将该对象添加到地图中即可。绘制线的方法与绘制类似,但需要传入更多的参数来指定线的形状、样式和颜色等属性。 总之,ArcGIS API for JS提供了丰富的图形绘制功能,能够轻松地绘制出各种类型的线,以满足GIS应用开发者的需求。具体实现方法可以参考API文档中提供的详细指南和示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值