Comenzando con ArcGIS JavaScript - Activar o desactivar etiquetas<\/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">"<\/><SP... (truncated due to length)}}} class="punctuation token">,</SPAN>
copyright<SPAN class="punctuation token">:</SPAN>
<SPAN class="string token">"<a target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Achtergrondkaart</a> de <a target='_top' href='https://www.pdok.nl/'>PDOK</a>"</SPAN><SPAN class="punctuation token">,</SPAN>
activeLayer<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"brtachtergrondkaart"</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"BRT Achtergrondkaart (PDOK)"</SPAN><SPAN class="punctuation token">,</SPAN>
id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"brtachtergrondkaart_pdok"</SPAN><SPAN class="punctuation token">,</SPAN>
thumbnailUrl<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"images/map.jpg"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// Basiskaarten Esr Nederland</SPAN>
<SPAN class="keyword token">var</SPAN> lightGrayCanvas_RD_EsriNL <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemap</SPAN><SPAN class="punctuation token">({</SPAN>portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"9ff6521e85d24df1aa9cd4aebfef748b"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Lichtgrijze Canvas RD</SPAN>
<SPAN class="keyword token">var</SPAN> darkGrayCanvas_RD_EsriNL <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</span> <span class="token class-name">Basemap</span><span class="punctuation token">({</span>portalItem<span class="punctuation token">:</span> <span class="punctuation token">{</span>id<span class="punctuation token">:</span> <span class="string token">"62a3befb579e4d9f9c5c51576c8a7c25"</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//Donkergrijze Canvas RD</span>
<span class="keyword token">var</span> topo_RD_EsriNL <span class="operator token">=</span> <span class="keyword token">new</span> <span class="token class-name">Basemap</span><span class="punctuation token">({</span>portalItem<span class="punctuation token">:</span> <span class="punctuation token">{</span>id<span class="punctuation token">:</span> <span class="string token">"7aea6fa913a94176a1074edb40690318"</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//Topo RD</span>
<span class="keyword token">var</span> open_Topo_RD_EsriNL <span class="operator token">=</span> <span class="keyword token">new</span> <span class="token class-name">Basemap</span><span class="punctuation token">({</span>portalItem<span class="punctuation token">:</span> <span class="punctuation token">{</span>id<span class="punctuation token">:</span> <span class="string token">"0698b71eb7cf47898086d072e574ac32"</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//Open Topo RD</span>
<Span Class = "Keyword Token "> Var </ Span > stratenkaart_RD_EsriNL <Span Class = "Operator Token "> = </ Span > <Span Class = "Keyword Token "> New </ Span > <Span Class = "Token Class-Name "> Basemap </ Span ><Span Class = "Punctuation Token ">( { </ Span > portalItem <Span Class = "Punctuation Token ">: </ Span > <Span Class = "Punctuation Token ">{ </ Span > id <Span Class = "Punctuation Token ">: </ Span > <Span Class = "String Token "> "9fe1a753955f418fa1cbaf1c47610a47" </ Span ><Span Class = "Punctuation Token ">} </ Span ><Span Class = "Punctuation Token ">} </ Span ><Span Class = "Punctuation Token ">) </ Span ><Span Class = "Punctuation Token ">; </ Span > <Span Class = "Comment Token ">//Stratenkaart RD </ Span >
<Span Class = "Keyword Token "> Var </ Span > luchtfoto_RD_EsriNL <Span Class = "Operator Token "> = </ Span > <Span Class = "Keyword Token "> New </ Span > <Span Class = "Token Class-Name "> Basemap </ Span ><Span Class = "Punctuation Token ">( { </ Span > portalItem <Span Class = "Punctuation Token ">: </ Span > <Span Class = "Punctuation Token ">{ </ Span > id <Span Class = "Punctuation Token ">: </ Span > <Span Class = "String Token "> "38e1a1c6ee2c421290622400d22ecf57" </ Span ><Span Class = "Punctuation Token ">} </ Span ><Span Class = "Punctuation Token ">} </ Span ><Span Class = "Punctuation Token ">) </ Span ><Span Class = "Punctuation Token ">; </ Span > <Span Class = "Comment Token ">//Luchtfoto RD </ Span >
<Span Class = "Keyword Token "> Var </ Span > dutchBasemaps <Span Class = "Operator Token ">= </ Span > <Span Class = "Keyword Token "> New </ Span > <Span Class = "Token Class-Name "> LocalBasemapsSource </ Span ><Span Class = "Punctuation Token ">( { </ Span >
basemaps <Span Class = "Punctuation Token ">: [ </ Span > brtachtergrondkaart , topo_RD_EsriNL , open_Topo_RD_EsriNL , stratenkaart_RD_EsriNL , luchtfoto_RD_EsriNL , lightGrayCanvas_RD_EsriNL , darkGrayCanvas_RD_EsriNL ]
<Span Class = "Punctuation Token ">} ) ;
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</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0"</SPAN><SPAN class="punctuation token">,</SPAN>
title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Gemeenten (2019)"</SPAN><SPAN class="punctuation token">,</SPAN>
popupTemplate<SPAN class="punctuation token">:</SPAN> popupTemplateMun<SPAN class="punctuation token">,</SPAN>
renderer<SPAN class="punctuation token">:</SPAN> rendererMun<SPAN class="punctuation token">,</SPAN>
labelingInfo<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>labelClassMun<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
labelsVisible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> popupTemplateProv <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Provincia {Provincienaam}"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</span> rendererProv <span class="operator token">=</span> <span class="punctuation token">{</span>type<span class="punctuation token">:</span> <span class="string token">"simple"</span><span class="punctuation token">,</span> symbol<span class="punctuation token">:</span> <span class="punctuation token">{</span>type<span class="punctuation token">:</span> <span class="string token">"simple-fill"</span><span class="punctuation token">,</span> style<span class="punctuation token">:</span> <span class="string token">"none"</span><span class="punctuation token">,</span> outline<span class="punctuation token">:</span> <span class="punctuation token">{</span>width<span class="punctuation token">:</span> <span class="number token">2.5</span><span class="punctuation token">,</span> color<span class="punctuation token">:</span> <span class="string token">"#8B4513"</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
<Span Class = "Keyword Token "> Var </ Span > labelClassProv <Span Class = "Operator Token "> = </ Span > <Span Class = "Punctuation Token "> { </ Span > symbol <Span Class = "Punctuation Token "> : </ Span > <Span Class = "Punctuation Token "> { </ Span > type <Span Class = "Punctuation Token "> : </ Span > <Span Class = "String Token "> "text" </ Span > , color <Span Class = "Punctuation Token "> : </ Span > <Span Class = "String Token "> "#8B4513" </ Span > , haloColor <Span Class = "Punctuation Token "> : </ Span > <Span Class = "String Token "> "white" </ Span > , haloSize <Span Class = "Punctuation Token "> : </ Span > <Span Class = "String Token "> "4px" </ Span > , font <Span Class = "Punctuation Token "> : </ Span > <Span Class = "Punctuation Token "> { </ Span > size <Span Class = "Punctuation Token "> : </ Span > <Span Class = "Number Token "> 12 </ Span > , weight <Span Class = "Punctuation Token "> : </ Span > <Span Class = "String Token "> "bold" </ Span > } </ Span > } </ Span > , labelExpressionInfo <Span Class = "Punctuation Token "> : </ Span > <Span Class = "Punctuation Token "> { </ Span > expression <Span Class = "Punctuation Token "> : </ Span > <Span Class = "String Token "> "$feature.Provincienaam" </ Span > } </ Span > } </ Span > ;
var dutchProvincesLayer = new FeatureLayer({
url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/ArcGIS/rest/services/Bestuurlijke_Grenzen_Provincies_2019/FeatureServer/0",
title: "Provincias (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: "Activar etiquetas",
className: "esri-icon-labels",
id: "labels"
}
]
];
}
});
layerList.on("trigger-action", function(event) {
if (event.action.id === "labels") token">{</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>labelsVisible <SPAN class="operator token">===</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>labelsVisible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
event<SPAN class="punctuation token">.</SPAN>action<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Desactivar etiquetas"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>labelsVisible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
event<SPAN class="punctuation token">.</SPAN>action<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Activar etiquetas"</SPAN><SPAN class="punctuation token">;</SPAN>
<Span class="punctuation token">}</Span>
<Span class="punctuation token">}</Span>
<Span class="punctuation token">}</Span><Span class="punctuation token">)</Span><Span class="punctuation token">;</Span>
layerListExpand <Span class="operator token">=</Span> <Span class="keyword token">new</Span> <Span class="token class-name">Expand</Span><Span class="punctuation token">(</Span><Span class="punctuation token">{</Span>
expandIconClass<Span class="punctuation token">:</Span> <Span class="string token">"esri-icon-layer-list"</Span><Span class="punctuation token">,</Span> <Span class="comment token">// ver https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/</Span>
expandTooltip<Span class="punctuation token">:</Span> layerList<Span class="punctuation token">.</Span>label<Span class="punctuation token">,</Span>
view<Span class="punctuation token">:</Span> view<Span class="punctuation token">,</Span>
content<Span class="punctuation token">:</Span> layerList<Span class="punctuation token">,</Span>
expanded<Span class="punctuation token">:</Span> <Span class="keyword token">true</Span><Span class="punctuation token">,</Span>
group<Span class="punctuation token">:</Span> <Span class="string token">"top-right"</Span>
<span class="punctuation token">}</span><span class="punctuation token">")</span><span class="punctuation token">";
</span><span cl... (truncated) 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><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><SPAN><\/SPAN><SPAN><\/SPAN><SPAN><\/SPAN><SPAN >< < EM O J I _ 3 3 > > < \/ S P A N > < S P A N > < < E M O J I _ 3 4 > > < \/ S P A N > < S P A N > < < E M O J I _ 3 5 > > < \/ S P A N > < S P A N > < < E M O J I _ 3 6 > > < \/ S P A N > < S P A N > < < E M O J I _ 3 7 > > < \/ S P A N > < S P A N > < < E M O J I _ 3 8 > > < \/ S P A N > < S P A N > < < E M O J I _ 3 9 > > < \/ S P A N > < S P A N > < < E M O J I _ 4 0 > > < \/ S P A N > < S P A N > < < E M O J I _ 4 1 > > < \/ S P A N > < S P A N > < < E M O J I _ 4 2 > > < \/ S P A N > < S P A N > < < E M O J I _ 4 3 > > < \/ S P A N > < S P A N > < < E M O J I _ 4 4 > > < \/ S P A N > < S P A N > < < E M O J I _ 4 5 > > < \/ S P A N > < S P A N > < < E M O J I _ 4 6 > > < \/ S P A N > < S P A N > < < E M O J I _ 4 7 > > < \/ S P A N ><S PAN ><<< EMOJ I _48 >> </ SPAN >< SPAN ><<< EMOJ I _49 >> </ SPAN >< SPAN ><<< EMOJ I _50 >> </ SPAN >< SPAN ><<< EMOJ I _51 >> </ SPAN >< SPAN ><<< EMOJ I _52 >> </ SPAN >< SPAN ><<< EMOJ I _53 >> </ SPAN >< SPAN ><<< EMOJ I _54 >> </ SPAN >< SPAN ><<< EMOJ I _55 >> </ SPAN >< SPAN ><<< EMOJ I _56 >> </ SPAN >< SPAN ><<< EMOJ I _57 >> </ SPAN >< SPAN ><<< EMOJ I _58 >> </ SPAN >< SPAN ><<< EMOJ I _59 >> </ SPAN >< SPAN ><<< EMOJ I _60 >> </ SPAN >< SPAN ><<< EMOJ I _61 >> </ SPAN >< SPAN ><<< EMOJ I _62 >> </ SPAN >< SPAN ><<< EMOJ I _63 >> </ SPAN >< SPAN ><<< EMOJ I _64 >> </ SPAN >< SPAN ><<< EMOJ I _65 >> </ SPAN >< SPAN ><<< EMOJ I _66 >> </ SPAN >< SPAN ><<< EMOJ I _67 >> </ SPAN >< SPAN ><<< EMOJ I _68 >> </ SPAN >< SPAN ><<< EMOJ I _69 >> </ SPAN >< SPAN ><<< EMOJ I _70 >> </ SPAN >< SPAN ><<< EMOJ I _71 >> </ SPAN >< SPAN ><<< EMOJ I _72 >> </ SPAN >< SPAN ><<< EMOJ I _73 >> </ SPAN >< SPAN ><<< EMOJ I _74 >> </ SPAN ><SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></SP AN ></S PAN>
