API de ArcGis

Para utilizar la API de ArcGis son necesarios unos conocimientos mínimos de HTML y javascript.

A continuación, se muestra el código de un visor de ejemplo que utiliza los servidores ICGC en caché para ArcGis javascript 4.13 en el sistema de referencia 3857 y projección UTM huso 31. Las capas disponibles son topo (mapa topográfico) y 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>

Ejemplo ArcGis(2.59 KB)