此 demo 通过 proj4js 将 leaflet 与 esri 整合起来，同时添加了 ClusteredFeatureLayer 的支持。

下载

<html>

<head>

  <meta charset=utf-8 />

  <title>Esri Leaflet Quickstart</title>

  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <link rel="stylesheet" href="leaflet/leaflet.css" />

    <link rel="stylesheet" type="text/css" href="leaflet/MarkerCluster.css" />

    <script type="text/javascript" src="leaflet/leaflet-src.js"></script>

    <script type="text/javascript" src="leaflet/proj4.js"></script>

    <script type="text/javascript" src="leaflet/proj4leaflet.js"></script>

    <script type="text/javascript" src="leaflet/esri-leaflet-src.js"></script>

    <script type="text/javascript" src="leaflet/leaflet.markercluster-src.js"></script>

    <script type="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>

<div id="map"></div>

<script>

    var centerPoint = new L.LatLng(39.40, 117.30);

    var SERVICE_PATH = "http://192.168.1.111/ArcGIS/"

    // crs 的设置参考上一篇文章

    var crs = new L.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

        ]

    });

    var mapOptions = {

        center: centerPoint,

        zoom: 0,

        crs: crs,

        attributionControl: true,

    };

    var map = L.map('map', mapOptions);

    var tileLayer = L.esri.tiledMapLayer({

      url:SERVICE_PATH + '/rest/services/[Tile 地图名称]/MapServer',

      maxZoom: 11,

      minZoom: 0,

      continuousWorld: true

    });

    map.addLayer(tileLayer);

    var featureMap = {

      "SDE LAYER": L.esri.clusteredFeatureLayer({

        url: SERVICE_PATH + '/rest/services/[SDE 或 Feature 地图名称]/MapServer/1',

        opacity: 0.5,

        useCors: false

      })

    };

    L.control.layers(null, featureMap).addTo(map);

</script>

</body>

</html>

上一篇文章中使用了 leaflet 自身的 TileLayer 直接加载瓦片，此 demo 中通过 esri-leaflet 中的 L.esri.tiledMapLayer 加载更加方便，但是需要注意的是，以此方式必须设置 maxZoom 及 minZoom。

centerPoint 必须使用经纬度坐标，80坐标不可以呦。

使用 demo，必须替换 crs 中的投影字符串、 origin，以及地图服务的网址。

esri-leaflet 和 arcgis javascript api 的定位是不同的，更多的是用来进行数据可视化，所以对于SDE数据的维护还是使用 arcgis jsapi 更方便一些。

leaflet 整合 esri的更多相关文章

  1. Leaflet(Esri)初识

    加载本地地图 <html> <head> <metacharset=utf-8/> <title>IdentifyingFeatures</tit ...

  2. R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图（遍地代码图）

    好久没有学习R的新包了,甚是想念啊! 昨天.今天看到两个极好.不得不学的packages+早上被AWS的服务器整得郁闷ing-于是就来点颜色看看~ 本篇受Lchiffon老师的github启发,对两个 ...

  3. openlayers渲染mapbox gl的vector tile

    准备条件 https://openlayers.org/en/v4.6.5/build/ol.js https://cdn.polyfill.io/v2/polyfill.min.js DEMO &l ...

  4. OpenLayers典型部分概述

    中文学习:http://www.openlayers.cn/portal.php 原文地址:https://www.jianshu.com/p/e693711a7008 一 OpenLayers核心职 ...

  5. 【GIS】Vue esri-leaflet

    1.npm install esri-leaflet --save 2.引入包 import Leaflet from "leaflet"; var esri = require( ...

  6. VectorMap.js 矢量地图库 – 快速入门

    VectorMap.js是一个开源地图渲染JavaScript库, 可以使用WebGL或者HTML5两种方式进行交互式矢量地图 (包括“矢量瓦片地图”,一般性矢量数据地图)和 栅格瓦片地图的渲染. W ...

  7. WebGIS中快速整合管理多源矢量服务以及服务权限控制的一种设计思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在真实项目中,往往GIS服务数据源被其他多个信息中心或者第三方 ...

  8. Esri的开源JS项目杂谈

    一提到Esri大家首先想到的是庞大的ArcGIS产品大家族,其产品包含从桌面端,到服务器/云端,再到web/移动端.作为一名极客,不聊开源逼格似乎上不去啊.其实,Esri作为一个开放的平台,不仅有稳定 ...

  9. leaflet地图库

    an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...

随机推荐

  1. iOS----线程之间的通信

    当线程的数量大于一个的时候,线程之间可能会产生通信,既一个线程产生的结果要被另一个线程用到. 比如常用的图片的加载就是这个样子.图片的加载是在子线程进行的,当图片加载完毕,就会回到主线程中刷新UI,展 ...

  2. （原创）确保JAVA线程安全的4种常用方法

    在Java中可以有很多方法来保证线程安全,比如使用同步方法.同步块,使用原子类(atomic concurrent classes),实现并发锁,使用volatile关键字,使用不变类和线程安全类. ...

  3. C++ 定时器Timer在项目中的使用

    目录 1.情况说明 2.空循环实现 3.定时器实现 1.情况说明 由于最近要在项目里做弹出弹幕,要求是弹出1秒后消失,一开始我使用空循环进行计时,发现执行到这段代码CPU占用率上升十几个百分点,后来改 ...

  4. 【SQL查询】树结构查询

    格式:SELECT ... FROM + 表名 WHERE + 条件3 START WITH + 条件1 CONNECT BY PRIOR + 条件2条件1: 表示从哪个节点开始查找, 也就是通过条件 ...

  5. android图片压缩总结

    一.bitmap 图片格式介绍 android中图片是以bitmap形式存在的,那么bitmap所占内存,直接影响到了应用所占内存大小,首先要知道bitmap所占内存大小计算方式: bitmap内存大 ...

  6. Failed to instantiate CLSID_VirtualBox w/ IVirtualBox, but CLSID_VirtualBox w/ IUnknown works.

    我是 win7 64位 解决办法: 1, win+r 快捷键打开 “运行”,输入regedit 打开注册表 2,找到 HKEY_CLASSES_ROOT\CLSID\{00020420-0000-00 ...

  7. MongoDB运行状态、性能监控，分析

    转载自这位仁兄:地址 mongostat详解 mongostat是mongdb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态,并输出.如果你发现数据库突然变慢或者 ...

  8. postman—集成到jenkins

    前言 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 将postman导出的脚本,持续集成到 ...

  9. 《Android应用性能优化》1——代码

    1.Java代码优化 1.1 代码执行 通常情况下,不必看应用的字节码.在平台是Android2.2(Froyo)和更高版本的情况下尤其如此,因在Android2.2中引入了实时(JIT)的编译器.D ...

  10. Names and Identifiers

    JLS:https://docs.oracle.com/javase/specs/jls/se7/html/jls-6.html#jls-6.2 Not all identifiers in a pr ...