I use simpleLineSymbol for graphicsLayer.
Help me please.
And if you can tell me how to unselect feature i do not need after selection.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>GWP - მილი და სამისამართო ერთეული</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#info {
background-color: black;
opacity: 0.75;
color: orange;
font-size: 18pt;
padding: 8px;
visibility: hidden;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/css/main.css">
<script src="https://js.arcgis.com/4.13"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleLineSymbol",
"dojo/dom",
"dojo/domReady!"
], function(
Map,
MapView,
FeatureLayer,
UniqueValueRenderer,
SimpleLineSymbol,
dom
) {
const labelClass = {
// autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "black",
haloColor: "black",
font: {
// autocast as new Font()
family: "Playfair Display",
size: 12,
weight: "bold"
}
},
labelPlacement: "always-horizontal",
labelExpressionInfo: {
expression: "$feature.g_dasaxeleba_ka"
}
};
var renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
outline: {
// makes the outlines of all features consistently light gray
color: "red",
width: 0.5
}
}
};
var linefeatureLayer = new FeatureLayer({ url:"http://xx.xx.xx.xx:6080/arcgis/rest/services/test/Tbilisi_wyalmomarageba_keti/MapServer/16",
select: false
});
var layer = new FeatureLayer({
url: "http://xx.xx.xx.xx:6080/arcgis/rest/services/test/samisamarTo/FeatureServer/0",
outFields: ["*"],
labelingInfo: [labelClass],
renderer: renderer
});
var map = new Map({
basemap: "dark-gray",
layers: [layer, /*linefeatureLayer*/]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [44.7502, 41.725524],
zoom: 12
});
view.ui.add("info", "top-right");
// Set up a click event handler and retrieve the screen x, y coordinates
view.on("click", function(event) {
// the hitTest() checks to see if any graphics in the view
// intersect the given screen x, y coordinates
view.hitTest(event)
.then(getGraphics);
});
function getGraphics(response) {
// the topmost graphic from the click location
// and display select attribute values from the
// graphic to the user
var graphic = response.results[0].graphic;
var attributes = graphic.attributes;
var category = attributes.g_dasaxeleba_ka;
var wind = attributes.kodi;
var name = attributes.SE_ID_new;
dom.byId("info").style.visibility = "visible";
dom.byId("name").innerHTML = name;
dom.byId("category").innerHTML = "დასახელება: " + category;
// symbolize all line segments with the given
// storm name with the same symbol
var renderer = new UniqueValueRenderer({
field: "SE_ID_new",
defaultSymbol: layer.renderer.symbol || layer.renderer.defaultSymbol,
uniqueValueInfos: [{
value: name,
symbol: new SimpleLineSymbol({
color: "orange",
width: 5,
cap: "round",
})
}]
});
layer.renderer = renderer;
}
view.graphics.removeAll();
if (graphic) {
var selectionGraphic = graphic.clone();
selectionGraphic.symbol = renderer;
view.graphics.add(selectionGraphic);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="info">
<span id="name"></span><br>
<span id="category"></span><br>
<span id="wind"></span>
</div>
</body>
</html>
