nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Začínáme s ArcGIS JavaScript - Zapnout/vypnout štítky

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A><\/P>

<\/P>

Widget LayerList s akcí<\/H1><\/P>V dřívější lekci v tomto kurzu<\/A> jsme přidali widget LayerList<\/STRONG>, aby bylo možné zapínat a vypínat FeatureLayer<\/STRONG> na mapě.<\/P><\/P>Nyní rozšíříme tento LayerList o tlačítko, na které lze kliknout pro zapnutí nebo vypnutí popisků vrstev mapy.<\/P><\/P>Jak je vidět v kódu níže, ke každé vrstvě v LayerList<\/STRONG> je přidáno tlačítko s ikonou štítku. Následně je zde funkce, která čeká na kliknutí na toto tlačítko, aby zapnula (nebo vypnula) popisky u příslušné vrstvy.<\/P><\/P>Pro více informací o tom, jak to funguje, je k dispozici také příklad od Esri: Widget LayerList s akcemi | ArcGIS API for JavaScript 4.14<\/A><\/P>

<\/P>

Následujte odkaz níže pro zobrazení konečného výsledku:<\/P>

Začínáme s ArcGIS JavaScript - Zapnutí nebo vypnutí popisků<\/A> <\/P>

<\/P>

<SPAN class="doctype token"><!DOCTYPE html><\/><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>html<\/><SPAN class="punctuation token">><\/><\/><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>head<\/><SPAN class="punctuation token">><\/><\/><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>meta<\/> <SPAN class="attr-name token">charset<\/><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/><SPAN class="punctuation token">"<\/>utf-8<SPAN class="punctuation token">"<\/><\/><SPAN class="punctuation token">><\/><\/><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>meta<\/> <SPAN class="attr-name token">name<\/><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/><SPAN class="punctuation token">"<\/>viewport<SPAN class="punctuation token">"<\/><\/> <SPAN class="attr-name token">content<\/><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/><SPAN class="punctuation token">"<\/>initial-scale<SPAN class="punctuation token">=<\/>1, maximum-scale<SPAN class="punctuation token">=<\/>1, user-scalable<SPAN class="punctuation token">=<\/>no<SPAN class="punctuation token">"<\/><\/><SPAN class="punctuation token">><\/><\/><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>title<\/><SPAN class="punctuation token">><\/>Začínáme s ArcGIS JavaScript - Zapnutí nebo vypnutí popisků<SPANTagClose></SPANTagClose></span>

class="punctuation token">,
copyright:
"<a target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Achtergrondkaart</a> van <a target='_top' href='https://www.pdok.nl/'>PDOK</a>",
activeLayer: {
id: "brtachtergrondkaart"
}
})
],
title: "BRT Achtergrondkaart (PDOK)",
id: "brtachtergrondkaart_pdok",
thumbnailUrl: "images/map.jpg"
});

// Základní mapy Esr Nederland
var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); // Světle šedé plátno RD
var darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); // Tmavě šedé plátno RD
var topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); // Topo RD
var open_Topo_RD_EsriNL = new Basemap({portalItem: {id: "0698b71eb7cf47898086d072e574ac32"}}); // Open Topo RD
Var stratenkaart_RD_EsriNL = New Basemap ( { portalItem : { id : "9fe1a753955f418fa1cbaf1c47610a47" } } ) ; // Stratenkaart RD 
Var luchtfoto_RD_EsriNL = New Basemap ( { portalItem : { id : "38e1a1c6ee2c421290622400d22ecf57" } } ) ; // Luchtfoto RD 

Var dutchBasemaps = New LocalBasemapsSource ( { 
basemaps : [ brtachtergrondkaart , topo_RD_EsriNL , open_Topo_RD_EsriNL , stratenkaart_RD_EsriNL , luchtfoto_RD_EsriNL , lightGrayCanvas_RD_EsriNL , darkGrayCanvas_RD_EsriNL ]
} ) ;

var map = new Map({
basemap: lightGrayCanvas_RD_EsriNL
});

var popupTemplateMun = {title: "Gemeente {Gemeentenaam}", content: "CBS Code: {GM_Code}"};
var rendererMun = {type: "simple", symbol: {type: "simple-fill", style: "none", outline: {width: 1.5, color: "#F5B041"}}};
var labelClassMun = {symbol: {type: "text", color: "#F5B041", haloColor: "white", haloSize: "4px", font: { size: 10}}, labelExpressionInfo: {expression: "$feature.Gemeentenaam"}};

var dutchMunicipalitiesLayer = { class="keyword token">new FeatureLayer({
url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0",
title: "Gemeenten (2019)",
popupTemplate: popupTemplateMun,
renderer: rendererMun,
labelingInfo: [labelClassMun],
labelsVisible: false
});

var popupTemplateProv = {title: "Provincie {Provincienaam}", content: ""};
var rendererProv = {type: "simple", symbol: {type: "simple-fill", style: "none", outline: {width: 2.5, color: "#8B4513"}}};
Var labelClassProv = { symbol : { type : "text" , color : "#8B4513" , haloColor : "white" , haloSize : "4px" , font : { size : 12 , weight : "bold" } } , labelExpressionInfo : { expression : "$feature.Provincienaam" } } ;

var dutchProvincesLayer = new FeatureLayer({
url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/ArcGIS/rest/services/Bestuurlijke_Grenzen_Provincies_2019/FeatureServer/0",
title: "Provincies (2019)",
popupTemplate: popupTemplateProv,
renderer: rendererProv,
labelingInfo: [labelClassProv],
labelsVisible: false
});

map.addMany([dutchMunicipalitiesLayer, dutchProvincesLayer]);

var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: new Point({x: 155000, y: 463000, spatialReference: 28992}),
zoom: 3
});

var layerList = new LayerList({
view: view,
listItemCreatedFunction: function(event){
const item = event.item;
item.actionsSections = [
[
{
title: "Zapnout štítky",
className: "esri-icon-labels",
id: "labels"
}
]
];
}
});

layerList.on("trigger-action", function(event) {
if (event.action.id === "labels") token">{
if (event.item.layer.labelsVisible === false) {
event.item.layer.labelsVisible = true;
event.action.title = "Vypnout popisky";
} else {
event.item.layer.labelsVisible = false;
event.action.title = "Zapnout popisky";
}
}
});

layerListExpand = new Expand({
expandIconClass:"esri-icon-layer-list"// see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: layerList.label,

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ class="line-numbers-rows">‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍

Najděte více příspěvků označených jako

Komentáře

There are no comments yet

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Nový zde? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.