Не нашел решения в сети, поэтому у меня не было выбора, кроме как исследовать его самостоятельно.Основной вопрос был: как общаться с каждым графическим элементом, который принадлежит определенному графическому слою, используя UniqueValueRendererНе удалось понять из API-интерфейса ESRI js arcgis 3.23 и примеров, какой интерфейс и синтаксис можно использовать.После долгих экспериментов с кодом пришли к следующим выводам:
- Символы, определенные на графическом уровне, всегда имеют приоритет над символами, определенными в рендере.Поэтому я создал каждый Графический объект, используя no Symbol.
- Чтобы взаимодействовать с каждым Графическим элементом отдельно, UniqueValueRenderer должен найти какой-либо атрибут в каждом Графическом объекте, поэтому я добавил атрибут для каждого Графического объекта.
- Теперь я попытался использовать графический атрибут name в UniqueValueRenderer при использовании графического атрибута значение , чтобы UniqueValueRenderer мог выбирать собственный символ для каждого графического объекта.
- СинтаксисИнтеграция с 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>