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>
  • 相关阅读:
    C++之queue模板类
    Longest Valid Parentheses
    Longest Substring Without Repeating Characters
    Subsets,Subsets II
    Unique Paths
    Letter Combinations of a Phone Number
    Restore IP Addresses
    [string]Roman to Integer,Integer to Roman
    [string]Reverse Words in a String
    [string]Regular Expression Matching
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/15204618.html
Copyright © 2011-2022 走看看