zoukankan      html  css  js  c++  java
  • arcgis api绘制多个点

    从网上找了好多教程,大多数都是实现点击一次按钮绘制一个点,无法实现一次性绘制多个点的功能。最后还是官方文档靠谱提供了现成的方法。

    首先需要定义一个按钮用于触发绘制事件

    <button id="btn_multipoint">绘制多个点</button>
    const btn_multipoint = document.getElementById("btn_multipoint");

    通过事件调用绘制方法

     btn_multipoint.addEventListener("click",function(){
            enableCreateMultipoint(drawTool,mapView);
          })

    需要创建绘图工具

     //创建绘图工具
          var drawTool = new Draw({
            view: mapView,
          });

    绘制点调用方法:

     // 绘制多个点
          function enableCreateMultipoint(drawTool) {
            let action = drawTool.create("multipoint");
    
            // Give a visual feedback to users as they move the pointer over the view
            action.on("cursor-update", function (evt) {
              createMultipointGraphic(evt.vertices);
            });
    
            // Fires when the user clicks, or presses the "F" key on the view
            // Can also fire when the "R" key is pressed to redo.
            action.on("vertex-add", function (evt) {
              createMultipointGraphic(evt.vertices);
            });
    
            // Fires when the "Z" key is pressed to undo the last added point
            action.on("vertex-remove", function (evt) {
              createMultipointGraphic(evt.vertices);
            });
    
            // Create a point when user clicks on the view or presses "C" key.
            action.on("draw-complete", function (evt) {
              createMultipointGraphic(evt.vertices);
            });
          }
    
          function createMultipointGraphic(vertices) {
            mapView.graphics.removeAll();
    
            let multipoint = new Multipoint({
              points: vertices,
              spatialReference: mapView.spatialReference,
            });
    
            const graphic = new Graphic({
              geometry: multipoint,
              symbol: {
                type: "simple-marker",
                style: "square",
                color: "red",
                size: "16px",
                outline: {
                  color: [255, 255, 0],
                   3,
                },
              },
            });
            mapView.graphics.add(graphic);
          }
    <button id="btn_multipoint">绘制多个点</button>
  • 相关阅读:
    winform访问https webservice
    rabbitMQ访问失败
    Redis断线测试
    微信消息推送
    线程控制
    Oracle.ManagedDataAccess.dll折腾了我两天
    IPC网络摄像机rtsp视频流web上H5播放方法
    微软补丁下载网站(备忘)
    ABP vnext 种子文件更新
    ABP vnext 使用Swagger账号登录时Chrome浏览器提示【The cookie 'XSRF-TOKEN' has set 'SameSite=None' and must also set 'Secure'.】错误,不能跳转登录
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15204618.html
Copyright © 2011-2022 走看看