• Imprimeix

API d'ArcGis

Per a utilitzar l'API d'ArcGis són necessaris uns mínims coneixements d'HTML i javascript.

A continuació, es mostra el codi d'un visor d'exemple que utilitza els servidors ICGC en caché per a ArcGis javascript 4.13 en el sistema de referència 3857 i projecció UTM fus 31. Las capes disponibles són topo (mapa topogràfic) i orto (ortofotos).

 

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Visor bàsic. JS_1.4 API ArcGis</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</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/Basemap",
"esri/layers/WMSLayer",
"esri/widgets/BasemapToggle",
"esri/views/MapView"
], function(Map, Basemap, WMSLayer, BasemapToggle, MapView) {

var layer_orto = new WMSLayer({
url: "https://geoserveis.icgc.cat/icc_mapesmultibase/noutm/wms/service",
spatialReference: 3857,
sublayers: [
{
name: "orto"
}
]
});

var layer_topo = new WMSLayer({
url: "https://geoserveis.icgc.cat/icc_mapesmultibase/noutm/wms/service",
spatialReference: 3857,
sublayers: [
{
name: "topo"
}
]
});

var ortofoto = new Basemap({
baseLayers: [layer_orto],
title: "Ortofoto",
id: "ortofoto",
thumbnailUrl: "https://geoserveis.icgc.cat/icc_mapesmultibase/noutm/wms/service?width=100&height=70&bbox=244427,5140358,263584,5153946&format=image%2Fpng&request=GetMap&service=WMS&
styles=&transparent=true&version=1.3.0&crs=EPSG%3A3857&layers=orto"
});

var map = new Map({
basemap: {
baseLayers: [layer_topo],
title: "topografic",
id: "topografic",
thumbnailUrl: "https://geoserveis.icgc.cat/icc_mapesmultibase/noutm/wms/service?width=100&height=70&bbox=244427,5140358,263584,5153946&format=image%2Fpng&request=GetMap&service=WMS&
styles=&transparent=true&version=1.3.0&crs=EPSG%3A3857&layers=topo"
}

});

var view = new MapView({
container: "viewDiv",
map: map,
center: [1.82,41.70],
scale: 50000
});

view.when(function () {
var toggle = new BasemapToggle({
visibleElements: {
title: true
},
view: view,
nextBasemap: ortofoto
});

view.ui.add(toggle, "top-right");
});

});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>