如何更改 ESRI 地图中点的颜色？答案

【问题标题】：How to change the color of a point in ESRI maps?如何更改 ESRI 地图中点的颜色？
【发布时间】：2020-06-10 00:29:16
【问题描述】：

我有 JavaScript 代码，可用于在 Esri 地图上放置图钉或点。一旦我放下大头针或一个点，我还可以获得点/大头针的坐标。现在我想改变针/点的颜色。我用过这段代码，但是颜色还是白色的：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>DEA GIS APPLICATION</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.12/"></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"
    ], 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) {
        console.log("X = ", evt.graphic.geometry.x);
        console.log("Y = ", evt.graphic.geometry.y);
      });
    });
  </script>
</head>

在这段代码中，您会注意到我添加了符号及其属性。我已将符号添加到草图常量中。但是颜色id还是一样的。请帮忙。

【问题讨论】：

标签： javascript esri arcgis-js-api

【解决方案1】：

Sketch 没有带有“符号”名称的属性。但是你可以

你可以像这样在创建事件中做到这一点。

sketch.on('create', function(evt) { evt.graphic.symbol.color = "blue"; console.log("X = ", evt.graphic.geometry.x); console.log("Y = ", evt.graphic.geometry.y); });

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>DEA GIS APPLICATION</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.12/"></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"
    ], 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) {
        evt.graphic.symbol.color = "blue";
        console.log("X = ", evt.graphic.geometry.x);
        console.log("Y = ", evt.graphic.geometry.y);
      });
    });
  </script>
</head>
<body>
<div id="viewDiv" />
</body>

【讨论】：

非常感谢 Muhammet Can TONBUL
如果你觉得我的回答对你有帮助，你可以accept my answer。 @SiyabongaKubeka

【解决方案2】：

您可以在创建图形后设置其符号。

  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
    }
  };

  sketch.on('create', function(evt) {
    evt.graphic.symbol = symbol;
    console.log("X = ", evt.graphic.geometry.x);
    console.log("Y = ", evt.graphic.geometry.y);
  });

【讨论】：