Как изменить цвет точки на картах ESRI? - PullRequest
Новая
       55

Как изменить цвет точки на картах ESRI?

1 голос
/ 26 февраля 2020

У меня есть 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>

В этом коде вы заметите, что я добавил символ и его свойства. Я добавил символ в константу эскиза. Но идентификатор цвета все тот же. Пожалуйста, помогите.

Ответы [ 2 ]

3 голосов
/ 27 февраля 2020

Вы можете установить символ графика c после его создания. 

  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);
  });
3 голосов
/ 26 февраля 2020

Эскиз не имеет свойства с именем символа. Но вы можете

Вы можете сделать это в событии создания следующим образом.

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>
...