如何从JavaScript中的变量中删除图钉?

问题描述 投票:0回答:1

我想使用保存在JavaScript变量x和y上的数据放置图钉。我怎样才能做到这一点?以下是放置销钉并获取坐标的代码,是否可以更改它,以便使用保存在变量上的数据来卸下销钉?

<script>
      require([
        "esri/widgets/Sketch",
        "esri/Map",
        "esri/layers/GraphicsLayer",
        "esri/views/MapView"
      ], function(Sketch, Map, GraphicsLayer, MapView) {
        const layer = new GraphicsLayer();

        const map = new Map({
          basemap: "streets",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 5,
          center: [90, 45]
        });
		
		var symbol = {
                    type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                    style: "circle",
                    color: "blue",
                    size: "8px",  // pixels
                    outline: {  // autocasts as new SimpleLineSymbol()
                    color: [ 255, 255, 0 ],
                    width: 1  // points
                    }
                };

        const sketch = new Sketch({
          layer: layer,
          view: view,
		  symbol: symbol,
          availableCreateTools: ["point"]
        });

        view.ui.add(sketch, "top-right");
        
        sketch.on('create', function (evt) {
        if (view.zoom >= 11) {
			// check if the create event's state has changed to complete indicating
            // the graphic create operation is completed.
          let gra = evt.graphic.clone();
          evt.graphic.layer.removeAll();
          gra.symbol.color = "blue";
          layer.add(gra);
          console.log("X = ", gra.geometry.x);
          console.log("Y = ", gra.geometry.y);
        } else {
          alert("please zoom in");
          evt.graphic.layer.remove(evt.graphic);
        }
      });
      });
    </script>

请协助。

javascript esri arcgis-js-api
1个回答
0
投票

如果我理解这个问题,您想使用X和Y值在地图上添加一个点。

这里有一个教程-https://developers.arcgis.com/javascript/latest/guide/display-point-line-and-polygon-graphics/

简化该教程/示例以仅显示如何基于点(带有X和y)和符号创建图形-https://codepen.io/bsvensson/pen/GRJeMeR

  // Create a point
  var point = {
    type: "point",
    longitude: -118.80657,
    latitude: 34.00059
  };
  var simpleMarkerSymbol = {
    type: "simple-marker",
    color: [226, 119, 40], // orange
    size: 30,
    style: "triangle", // default is a circle
    outline: {
      color: [255, 255, 255], // white
      width: 2
    }
  };
  var pointGraphic = new Graphic({
    geometry: point,
    symbol: simpleMarkerSymbol
  });
  graphicsLayer.add(pointGraphic);
© www.soinside.com 2019 - 2024. All rights reserved.