Ik ontwikkel data visualisatie web mapping applicaties voor verschillende afdelingen van Cumberland County met behulp van de Leaflet JavaScript bibliotheek. Al deze apps hebben de standaard WGS84 Web Mercator Auxiliary Sphere projectie/tegelindeling gebruikt. Dit wordt gebruikt in Google Maps, ArcGIS Online en de andere grote webkaartspelers.
En hoewel dit prima werkt, vroeg ik me af of er een manier was om webkaarten te bouwen met de aangepaste projectie en tegelindeling die wij gebruiken voor onze tegelkaartdiensten. Het blijkt dat dat kan - maar het vereist een paar plugins.
De eerste is Proj4js, die 9transformeert puntcordinaten van het ene cordinaatsysteem naar het andere, inclusief datumtransformaties.
De tweede is Proj4Leaflet, die mogelijk maakt om projecties en CRS te gebruiken die niet ingebouwd zijn in Leaflet. CRS staat voor Coordinate Reference System.
Ik dacht dat ik het proces zou delen voor het gebruik van Esri REST-diensten met aangepaste projecties/tegelindelingen in een Leaflet webkaart. Je kunt het voorbeeld vinden op CodePen.
Toen ik leerde hoe ik dit moest doen, heb ik verwezen naar het voorbeeld van de Esri Leaflet documentatiesite. We zullen Cumberland County's 2015 Existing Land Use service gebruiken voor deze demo.
De service gebruikt de Pennsylvania State Plane South (ft) projectie, of EPSG 2272 zoals het ook bekend is. De ruimtelijke referentie voor jouw Esri REST-service kan worden gevonden op de endpoint-URL van de service.
Je kunt de informatie voor jouw specifieke projectie krijgen van de Spatial Reference website. Hier is een voorbeeld van wat je van deze website krijgt om de aangepaste CRS voor jouw service te construeren:
+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
We hebben ook wat informatie nodig over de service zelf. Dit omvat de oorsprong en resolutie voor elk zoomniveau. Deze kunnen ook worden gevonden op de endpoint-URL van de service. Hieronder staat een afbeelding die laat zien waar deze informatie te vinden is:
Hier is het codefragment voor het maken van de aangepaste CRS voor de Existing Land Use service:
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
]
});
Nu we onze aangepaste CRS hebben gemaakt, kunnen we de service construeren. We zullen gebruik maken van de <\/SPAN>tiledMapLayer klasse uit de Esri Leaflet bibliotheek. Het moet worden opgemerkt dat je standaard deze klasse alleen kunt gebruiken voor tegelkaartdiensten die de WGS84 Web Mercator Auxiliary Sphere projectie gebruiken. Je hebt de hierboven genoemde plugins nodig om andere projecties/tegelindelingen te gebruiken.<\/SPAN>
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);
Sommige opties die je kunt instellen zijn het minimum en maximum zoomniveau voor de service. De nummers moeten overeenkomen met de Level ID nummers die te vinden zijn op de endpoint-URL van de service. Je hebt ook opties om een afbeelding in te stellen voor plaatsen waar de tegels niet laden. Omdat de tiledMapLayer erft van Leaflet's tileLayer klasse, kunnen al zijn opties gebruikt worden met tiledMapLayer.
Hopelijk heb je dit artikel nuttig gevonden. Om dit voorbeeld in actie te zien, bezoek dan alsjeblieft de CodePen-site.
