leaflet 整合 esri
此 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的更多相关文章
- Leaflet(Esri)初识
加载本地地图 <html> <head> <metacharset=utf-8/> <title>IdentifyingFeatures</tit ...
- R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图(遍地代码图)
好久没有学习R的新包了,甚是想念啊! 昨天.今天看到两个极好.不得不学的packages+早上被AWS的服务器整得郁闷ing-于是就来点颜色看看~ 本篇受Lchiffon老师的github启发,对两个 ...
- 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 ...
- OpenLayers典型部分概述
中文学习:http://www.openlayers.cn/portal.php 原文地址:https://www.jianshu.com/p/e693711a7008 一 OpenLayers核心职 ...
- 【GIS】Vue esri-leaflet
1.npm install esri-leaflet --save 2.引入包 import Leaflet from "leaflet"; var esri = require( ...
- VectorMap.js 矢量地图库 – 快速入门
VectorMap.js是一个开源地图渲染JavaScript库, 可以使用WebGL或者HTML5两种方式进行交互式矢量地图 (包括“矢量瓦片地图”,一般性矢量数据地图)和 栅格瓦片地图的渲染. W ...
- WebGIS中快速整合管理多源矢量服务以及服务权限控制的一种设计思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在真实项目中,往往GIS服务数据源被其他多个信息中心或者第三方 ...
- Esri的开源JS项目杂谈
一提到Esri大家首先想到的是庞大的ArcGIS产品大家族,其产品包含从桌面端,到服务器/云端,再到web/移动端.作为一名极客,不聊开源逼格似乎上不去啊.其实,Esri作为一个开放的平台,不仅有稳定 ...
- leaflet地图库
an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...
随机推荐
- php5数组与php7数组区别
http://ju.outofmemory.cn/entry/197064 http://www.fzb.me/2015-9-16-php7-implementation-hashtable.html ...
- css之IE hack 方法[ IE6 - IE9]
ps: 由于近来需要研究IE下兼容问题,今天又再次翻起起这些针对IE的hack,于是决定写下这篇笔记,记录下这些本该献祭级浏览器下的处理方法,用于备忘 一.IE10以及以下版本均会生效(ie edge ...
- Java之Spring Boot学习
1.如何配置pdf.xls页面解析器.2.如何整合SpringBoot+JPA+Session+Redis配置.3.SpringBoot整合Mybatis之事务用法.4.JUnit Test单元测试用 ...
- html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图
之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...
- Kafka消息队列
转自:http://blog.csdn.net/yfkiss/article/details/17348693 代码案例 http://blog.csdn.net/ganglia/article/de ...
- centos 7 nginx 安装
1.下载nginx rpm包 下载地址:http://nginx.org/packages/mainline/centos/7/x86_64/RPMS/ ,可查看所有安装包 从中如下载: wget h ...
- 【Express系列】第4篇——使用session
session 在 web 应用中使用很普遍,不过在 node 上面,要用 session 还真得折腾一番才行. 从加入中间件,到 session 的写入.清除,当时是遇到了不少坑的. 当然也可能是我 ...
- pandas数据分析
本篇主要介绍如何用pandas来分析一份刚拿到的数据集,即做数据挖掘或清洗的工作. 这里以贷款申请预测的数据来作为例子 一.查看基本信息 拿到数据首先看看大致结构,查看行列数,dataframe数据结 ...
- php里的二进制安全
二进制安全功能(binary-safe function)是指在一个二进制文件上所执行的不更改文件内容的功能或者操作.这能够保证文件不会因为某些操作而遭到损坏.二进制数据是按照一串0和 1的形式编码的 ...
- 说说java
先说什么是java java是一种面向对象语言,真正的面向对象,任何函数和变量都以类(class)封装起来 至于什么是对象什么是类,我就不废话了 关于这两个概念的解释任何一本面向对象语言的教材里面都有 ...