This demo integrates leaflet with ESRI with PROJ4JS and adds support for Clusteredfeaturelayer.
Download
<HTML><Head> <MetaCharSet=utf-8/> <title>Esri leaflet Quickstart</title> <Metaname= ' viewport 'content= ' Initial-scale=1,maximum-scale=1,user-scalable=no '/> <Linkrel= "stylesheet"href= "Leaflet/leaflet.css" /> <Linkrel= "stylesheet"type= "Text/css"href= "Leaflet/markercluster.css" /> <Scripttype= "Text/javascript"src= "Leaflet/leaflet-src.js"></Script> <Scripttype= "Text/javascript"src= "Leaflet/proj4.js"></Script> <Scripttype= "Text/javascript"src= "Leaflet/proj4leaflet.js"></Script> <Scripttype= "Text/javascript"src= "Leaflet/esri-leaflet-src.js"></Script> <Scripttype= "Text/javascript"src= "Leaflet/leaflet.markercluster-src.js"></Script> <Scripttype= "Text/javascript"src= "Leaflet/leaflet.esri.clusteredfeaturelayer.js"></Script> <style>Body{margin:0;padding:0; }#map{position:Absolute;Top:0;Bottom:0; Right:0; Left:0; } </style></Head><Body><DivID= "Map"></Div><Script> varCenterPoint= NewL.LATLNG (39.40, 117.30); varService_path= "http://192.168.1.111/ArcGIS/" //CRS settings refer to the previous article varCRS= NewL.proj.crs ("epsg:2384", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs", {origin: [0, 0], Resolutions: [264.583862501058, 132.291931250529, 66.1459656252646, 33.0729828126323, 16.9333672000677, 8.46668360003387, 4.23334180001693, 2.11667090000847, 1.05833545000423, 0.529167725002117, 0.264583862501058, 0.132291931250529 ] }); varmapoptions={center:centerpoint, zoom:0, Crs:crs, Attributioncontrol:true, }; varMap=L.map ('Map', mapoptions); varTilelayer=L.esri.tiledmaplayer ({url:service_path+ '/rest/services/[tile map name]/mapserver', Maxzoom: One, Minzoom:0, Continuousworld:true }); Map.addlayer (Tilelayer); varFeaturemap= { "SDE LAYER": L.esri.clusteredfeaturelayer ({url:service_path+ '/REST/SERVICES/[SDE or Feature map name]/MAPSERVER/1', opacity:0.5, Usecors:false }) }; L.control.layers (NULL, Featuremap). AddTo (map);</Script></Body></HTML>
The previous article used the leaflet itself Tilelayer directly loaded tiles, this demo through the Esri-leaflet in the L.esri.tiledmaplayer loading more convenient, but it should be noted that in this way must be set maxzoom and Minzoom.
CenterPoint must use latitude and longitude coordinates, 80 coordinates can not yo.
With demo, you must replace the projection string in CRS, origin, and the URL of the map service.
The Esri-leaflet and ArcGIS JavaScript APIs are positioned differently and more for data visualization, so it's easier to maintain the SDE data or use ArcGIS Jsapi.
Leaflet Integrating ESRI
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
