Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten<\/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>ArcGIS JavaScriptで始める - ラベルのオン・オフ切り替え</title><\/>
<<\/>link rel=\"stylesheet\" href=\"https:\/\/js.arcgis.com\/4.14/esri/css/main.css\"><\/>
<<\/>script src=\"https:\/\/js.arcgis.com/4.14/\"><\/>
</script><\/>
<style><\/>
html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }
.esri-basemap-gallery__item-thumbnail { width: auto; }
</style>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/layers/WMTSLayer",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList",
"esri/widgets/Search",
"esri/tasks/Locator",
"esri/Basemap",
"esri/widgets/BasemapGallery",
"esri/widgets/BasemapGallery/support/LocalBasemapsSource",
"esri/widgets/Expand"
], function(Map, Point, MapView, WMTSLayer, FeatureLayer, LayerList, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand) {
// PDOKのBRT背景地図を背景地図として使用
var brtachtergrondkaart = new Basemap({
baseLayers: [
new WMTSLayer({
url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS"
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"
});
// Basiskaarten Esr Nederland
var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); // Lichtgrijze Canvas RD
var darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); // Donkergrijze Canvas 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 </ Span > stratenkaart_RD_EsriNL = </ Span > New </ Span > Basemap </ Span >( { </ Span > portalItem : </ Span > { </ Span > id : </ Span > "9fe1a753955f418fa1cbaf1c47610a47" </ Span >} </ Span >} ) </ Span >; </ Span > // Stratenkaart RD </ Span >
Var </ Span > luchtfoto_RD_EsriNL = </ Span > New </ Span > Basemap </ Span >( { </ Span > portalItem : </ Span > { </ Span > id : </ Span > "38e1a1c6ee2c421290622400d22ecf57" </ Span >} </ Span >} ) </ Span >; </ Span > // Luchtfoto RD </ Span >
Var </ Span > dutchBasemaps = </ Span > New </ Span > LocalBasemapsSource </ Span >( { </ Span >
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 </ Span > labelClassProv = </ Span > { </ Span > symbol : </ Span > { </ Span > type : </ Span > "text" </ Span > , color : </ Span > "#8B4513" </ Span > , haloColor : </ Span > "white" </ Span > , haloSize : </ Span > "4px" </ Span > , font : </ Span > { </ Span > size : </ Span > 12 </ Span > , weight : </ Span > "bold" </ Span > } </ Span > } , labelExpressionInfo : </ Span > { </ Span > expression : </ Span > "$feature.Provincienaam" </ Span > } </ Span > } ;
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: "ラベルをオンにする",
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 = "ラベルをオフにする";
} else {
event.item.layer.labelsVisible = false;
event.action.title = "ラベルをオンにする";
}
}
});
layerListExpand = new Expand({
expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: layerList.label,
view: view,
content: layerList,
expanded: true,
group: "top-right"
} ) ;
var basemapGallery = new BasemapGallery( {
view: view,
source: dutchBasemaps
} ) ;
basemapGalleryExpand = new Expand( {
expandIconClass: "esri-icon-basemap" , // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip : basemapGallery . label ,
view : view ,
content : basemapGallery ,
group : "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><\/SPAN>
