Commencer avec ArcGIS JavaScript - Activer ou désactiver les Labels<\/A> <\/P><\/P>
<!DOCTYPE html><\/><<\/>html<\/>><\/><\/><<\/>head<\/>><\/><\/><<\/>meta<\/> charset<\/>=<\/>"<\/>utf-8"<\/><\/>><\/><\/><<\/>meta<\/> name<\/>=<\/>"<\/>viewport"<\/><\/> content<\/>=<\/>"<\/>initial-scale=<\/>1, maximum-scale=<\/>1, user-scalable=<\/>no"<\/><\/>><\/><\/><<\/>title<\/>><\/>Commencer avec ArcGIS JavaScript - Activer ou désactiver les Labels<<\/>title<\/>><\/><\/><<\/>link<\/> rel<\/>=<\/>"<\/>stylesheet"<\/><\/> href<\/>=<\/>"<\/>https:\/\/js.arcgis.com\/4.14/esri/css/main.css"<\/><\/>><\/><\/>,
copyright:
"<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>",
activeLayer: {
id: "brtachtergrondkaart"
}
})
],
title: "BRT Achtergrondkaart (PDOK)",
id: "brtachtergrondkaart_pdok",
thumbnailUrl: "images/map.jpg"
});
// Cartes de base Esr Nederland
var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); // Toile gris clair RD
var darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); // Toile gris foncé RD
var topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); // Topo RD
var open_Topo_RD_EsriNL = new Basemap({portalItem{id: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", </ SPAnstyle= " punctuationtoken "> style< SPAnclass= " stringtoken ">: "none" </ SPAnstyle= " punctuationtoken ">, outline< SPAnclass= " punctuationtoken ">: { width: 2.5, color: "#8B4513" } }</ SPAnstyle= " punctuationtoken ">}</ SPAnstyle= " punctuationtoken ">;
< SPAnclass= " keywordtoken ">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: "Activer les étiquettes",
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 = "Désactiver les étiquettes";
} else {
event.item.layer.labelsVisible = false;
event.action.title = "Activer les étiquettes";
}
}
});
layerListExpand = new Expand ( {
expandIconClass: "esri-icon-layer-list" , // voir https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: layerList. label,
view: view,
content: layerList,
expanded: true ,
group: "top-right"
} < SPAN cla ss= "p un ct uat ion t ok en " >( </ SPAN >< SPAN cla ss= "p un ct uat ion t ok en " ) ;
var basemapGallery = new BasemapGallery({
view: view,
source: dutchBasemaps
});
basemapGalleryExpand = new Expand({
expandIconClass: "esri-icon-basemap", // voir https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: basemapGallery.label,
view: view,
content: basemapGallery,
group: "top-right"
});
var searchWidget = new Search({
view: view,
includeDefaultSources: false
});
searchWidget.sources = [{
locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer" }), // GeocodeServer de Esri Nederland
singleLineFieldName: "SingleLine", // Cette option permet de rechercher par combinaison code postal/numéro de maison, par exemple : 4181 AE 38
placeholder: searchWidget.allPlaceholder // "Find address or place" pour la locale anglaise, "Adres of plaats zoeken" pour la locale néerlandaise
}];
searchWidgetExpand = new Expand({
expandIconClass: "esri-icon-search",
expandTooltip: searchWidget.label,
view: view,
content: searchWidget,
group: "top-right"
});
view.ui.add([searchWidgetExpand, layerListExpand, basemapGalleryExpand], "top-right");
});
});
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>< < EM O J I _ 3 0 > > < \/ S P A N > < S P A N > < < E M O J I _ 3 1 > > < \/ S P A N > < S P A N > < < E M O J I _ 3 2 > > < \/ S P A N > < S P A N > < < E M 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 > ... (continues with the same pattern of emoji placeholders) ...
