Je développe des applications web de cartographie pour la visualisation de données pour divers départements du comté de Cumberland en utilisant la bibliothèque JavaScript Leaflet. Toutes ces applications ont utilisé la projection/schéma de tuilage standard WGS84 Web Mercator Auxiliary Sphere. Celle-ci est utilisée dans Google Maps, ArcGIS Online et les autres principaux acteurs des cartes web.<\/P>
Et bien que cela fonctionne très bien, je me suis demandé s'il était possible de créer des cartes web en utilisant la projection personnalisée et le schéma de tuilage que nous utilisons pour nos services cartographiques en tuiles. Il s'avère que oui - mais cela nécessite quelques plugins.<\/P>
Le premier est Proj4js, qui « transforme les coordonnées des points d'un système de coordonnées à un autre, y compris les transformations de datum. » <\/S><\/P>
Le second est Proj4Leaflet, qui « permet d'utiliser des projections et CRS non intégrés dans Leaflet. » CRS signifie Coordinate Reference System.<\/P>
J'ai pensé partager le processus d'utilisation des services Esri REST avec des projections/schémas de tuilage personnalisés dans une carte web Leaflet. Vous pouvez trouver l'exemple sur CodePen.<\/P>
Lorsque j'apprenais à faire cela, je me suis référé à l'exemple du site de documentation Esri Leaflet. Nous utiliserons le service 2015 Existing Land Use du comté de Cumberland pour cette démonstration.<\/P>
Le service utilise la projection Pennsylvania State Plane South (ft), ou EPSG 2272 comme elle est aussi connue. La référence spatiale pour votre service Esri REST peut être trouvée à l'URL du point de terminaison du service.<\/P>
Vous pouvez obtenir les informations pour votre projection spécifique sur le site Spatial Reference. Voici un exemple de ce que vous obtiendrez sur ce site pour construire le CRS personnalisé pour votre service :<\/P>
+proj=lcc +lat_1=40.96666666666667 +lat_2=39.93333333333333 +lat_0=39.33333333333334 +lon_0=-77.75 +x_0=600000 +y_0=0 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192 +no_defs<\/BLOCKQUOTE>
Nous avons également besoin de certaines informations sur le service lui-même. Cela inclut l'origine et la résolution pour chaque niveau de zoom. Ces informations peuvent aussi être trouvées à l'URL du point de terminaison du service. Ci-dessous une image montrant où ces informations sont situées :<\/P>
<\/P>
<\/P>
<\/P>
Voici l'extrait de code pour créer le CRS personnalisé pour le service Existing Land Use :<\/P>
<\/P>
<\/P>
var spcPACrs = new L.Proj.CRS(
'EPSG:2272',
'+proj=lcc +lat_1=40.96666666666667 +lat_2=39.93333333333333 +lat_0=39.33333333333334 +lon_0=-77.75 +x_0=600000 +y_0=0 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192 +no_defs', {
origin: [-1.192142E8, 1.461669E8],
resolutions: [
260.41666666666663,
86.80555555555556,
43.40277777777778,
20.833333333333332,
10.416666666666666,
6.944444444444444,
4.166666666666666,
2.083333333333333,
1.0416666666666665,
0.5208333333333333
]
});<\/CODE><\/PRE>
<\/P>
Maintenant que nous avons créé notre CRS personnalisé, nous pouvons construire le service. Nous utiliserons la <\/SPAN>classe tiledMapLayer de la bibliothèque Esri Leaflet. Il convient de noter qu'en mode par défaut, vous ne pouvez utiliser cette classe que pour les services cartographiques en tuiles qui utilisent la projection WGS84 Web Mercator Auxiliary Sphere. Vous avez besoin des plugins mentionnés ci-dessus pour utiliser d'autres projections/schémas de tuilage.<\/SPAN><\/P>
<\/P>
var ccpaELU = L.esri.tiledMapLayer({
url: '//gis.ccpa.net/arcgiswebadaptor/rest/services/ELU/MapServer',
maxZoom: 8,
minZoom: 0,
continuousWorld: true,
attribution: 'Cumberland County',
errorTileUrl: '//downloads2.esri.com/support/TechArticles/blank256.png'
}).addTo(map);<\/CODE><\/PRE>
<\/P>
Certaines options que vous pouvez définir sont les niveaux minimum et maximum de zoom pour le service. Les numéros doivent correspondre aux numéros d'identification des niveaux trouvés à l'URL du point de terminaison du service. Vous avez également la possibilité de définir une image pour les endroits où les tuiles ne se chargent pas. Comme la classe tiledMapLayer <\/STRONG>hérite de la classe tileLayer <\/STRONG>de Leaflet, toutes ses options peuvent être utilisées avec tiledMapLayer.<\/P>
<\/P>
J'espère que cet article vous a été utile. Pour voir cet exemple en action, veuillez visiter le site CodePen. <\/P>
