带有 graphicsLayer 的 UniqueValueRenderer

Question

graphicsLayer 有一个方法：setRenderer(renderer)

如何使用 UniqueValueRenderer 设置 graphicsLayer 的某些图形元素？在 Google 上没有找到类似的东西，因此在这里打开了这个问题。

有可用的示例吗？

使用：js arcgis 3.23

js arcgis 版本 3.x 是否支持此功能？

据我所知it is not supported in js arcgis version 4.x

Answer 1

网上没找到解决方法，只好自己查了下。主要问题是：如何使用 UniqueValueRenderer 与属于某个 graphicsLayer 的每个图形元素对话。无法从 ESRI js arcgis 3.23 API 和示例中找出正确的界面和语法。在对代码进行大量试验后得出以下结论：

在图形层定义的符号总是覆盖符号在渲染器中定义。因此，我使用 no 实例化了每个图形符号.
为了分别与每个 Graphic 通信，UniqueValueRenderer 需要在每个 Graphic 上找到一些属性，因此我为每个 Graphic 添加了一个属性。
现在我尝试在 UniqueValueRenderer 中使用 Graphic 属性 name，同时使用 Graphic 属性 value 让 UniqueValueRenderer select每个图形的自定义符号。
UniqueValueRenderer 与 graphicsLayer 集成的语法在可用的文档和 ESRI 示例中并不清楚，但我凭直觉尝试了各种选项和可能性，并设法让它发挥作用！

您可以在随附的 代码段中查看解决方案。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Renderer</title>
  <style>
    html,
    body,
    #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
  <script src="https://js.arcgis.com/3.23/"></script>
  <script>
    var map;

    require([
        "esri/map",
        "esri/renderers/Renderer",
        "esri/renderers/SimpleRenderer",
        "esri/renderers/UniqueValueRenderer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/graphic",
        "esri/layers/GraphicsLayer",
        "esri/geometry/Point",
        "esri/Color",
        "esri/SpatialReference",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/PictureMarkerSymbol",
        "esri/InfoTemplate",
        "dojo/domReady!"
      ],
      function(Map, Renderer, SimpleRenderer, UniqueValueRenderer, ArcGISTiledMapServiceLayer, Graphic, GraphicsLayer, Point, Color, SpatialReference, SimpleLineSymbol, SimpleMarkerSymbol, PictureMarkerSymbol, InfoTemplate) {

        map = new Map("map", {
          basemap: "topo",
          center: [34.9891877, 31.712805039],
          zoom: 13,
          logo: false
        });

        var locationGraphicsLayer = new GraphicsLayer();

        var symbol1 = new SimpleMarkerSymbol().
        setOffset(0, 0).
        setColor([0, 255, 55, 0.33]).
        setSize(40).
        setStyle(SimpleMarkerSymbol.STYLE_PATH).
        setPath("M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z");
        var symbol2 = new SimpleMarkerSymbol().
        setOffset(0, 0).
        setColor([55, 0, 255, 0.33]).
        setSize(40).
        setStyle(SimpleMarkerSymbol.STYLE_PATH).
        setPath("M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z");
        var symbol3 = new SimpleMarkerSymbol().
        setOffset(0, 0).
        setColor([255, 0, 55, 0.33]).
        setSize(40).
        setStyle(SimpleMarkerSymbol.STYLE_PATH).
        setPath("M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z");

        var attr1 = {
          "MY_VALUE": 1
        };
        var attr2 = {
          "MY_VALUE": 2
        };
        var attr3 = {
          "MY_VALUE": 3
        };
        var attr4 = {
          "MY_VALUE": 4
        };
        var attr5 = {
          "MY_VALUE": 5
        };
        var attr6 = {
          "MY_VALUE": 6
        };
        var attr7 = {
          "MY_VALUE": 7
        };
        var attr8 = {
          "MY_VALUE": 8
        };

        var point1 = new Point(34.9891417, 31.712785039);
        var point2 = new Point(34.9863217, 31.712911039);
        var point3 = new Point(34.95059216533203, 31.740442520689456);
        var point4 = new Point(34.958138448443606, 31.719220882963626);
        var point5 = new Point(34.993487748107846, 31.728375175600405);
        var point6 = new Point(34.990054520568776, 31.73875923932111);
        var point7 = new Point(34.978845102038576, 31.732417351316897);
        var point8 = new Point(34.974815102038576, 31.735412351316897);

        var graphic1 = new Graphic(point1);
        var graphic2 = new Graphic(point2);
        var graphic3 = new Graphic(point3);
        var graphic4 = new Graphic(point4);
        var graphic5 = new Graphic(point5);
        var graphic6 = new Graphic(point6);
        var graphic7 = new Graphic(point7);
        var graphic8 = new Graphic(point8);

        graphic1.setAttributes(attr1);
        graphic2.setAttributes(attr2);
        graphic3.setAttributes(attr3);
        graphic4.setAttributes(attr4);
        graphic5.setAttributes(attr5);
        graphic6.setAttributes(attr6);
        graphic7.setAttributes(attr7);
        graphic8.setAttributes(attr8);

        locationGraphicsLayer.add(graphic1);
        locationGraphicsLayer.add(graphic2);
        locationGraphicsLayer.add(graphic3);
        locationGraphicsLayer.add(graphic4);
        locationGraphicsLayer.add(graphic5);
        locationGraphicsLayer.add(graphic6);
        locationGraphicsLayer.add(graphic7);
        locationGraphicsLayer.add(graphic8);

        renderer = new UniqueValueRenderer(symbol2, "MY_VALUE");
        renderer.addValue({
          value: "6",
          symbol: symbol1
        });
        renderer.addValue({
          value: "3",
          symbol: symbol3
        });

        locationGraphicsLayer.setRenderer(renderer);
        map.addLayer(locationGraphicsLayer);

      });
  </script>
  <title></title>
</head>

<body class="tundra">
  <div id="map"></div>
</body>

</html>

带有 graphicsLayer 的 UniqueValueRenderer

UniqueValueRenderer with graphicsLayer

arcgis-js-api