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 ...
随机推荐
- 【9】JMicro微服务-发布订阅消息服务
如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 1. JMicro消息服务目前实现特性 a. JMicro只支持发布订阅消息服务,不支持队列式消息服务: b. 不支持消息持 ...
- django第一课 简单的网页视图
注意本人django版本2.0 python3.6 第一步:创建自己的django项目 django-admin.py startproject ** 第二步:进入**创建app pytho ...
- java文件上传-原始的Servlet方式
前言: 干了这几个项目,也做过几次文件上传下载,要么是copy项目以前的代码,要么是百度的,虽然做出来了,但学习一下原理弄透彻还是很有必要的.刚出去转了一圈看周围有没有租房的,在北京出去找房子是心里感 ...
- Redis-cli命令总结
连接操作相关的命令 默认直接连接 远程连接-h 192.168.1.20 -p 6379 ping:测试连接是否存活如果正常会返回pong echo:打印 select:切换到指定的数据库,数据库索 ...
- 【字符串】Simplify Path(栈)
题目: Given an absolute path for a file (Unix-style), simplify it. For example,path = "/home/&quo ...
- Picasso加载网络图片失败,提示decodestream时返回null
最近遇到一个问题,项目用的图片加载框架是Picasso,网络加载框架是okhttp,项目在加载轮播图时有时可以正常加载,有时,会加载失败,提示decodestream时返回null. 首先,需要确定是 ...
- 带你了解数据库中group by的用法
前言 本章主要介绍数据库中group by的用法,也是我们在使用数据库时非常基础的一个知识点.并且也会涉及Join的使用,关于Join的用法,可以看我写的上一篇文章:带你了解数据库中JOIN的用法如有 ...
- maven tomcat插件上传项目到tomcat服务器报错SEVERE: One or more listeners failed to start.
以前觉了maven依赖设置很简单,就是将手动导入jar包转化为自动下载导入 但发现的一个问题, 在使用maven插件tomcat打包上传工具时 tomcat-maven-plugin <buil ...
- Excel文件上传存储到数据库
- 学习ThinkPHP笔记
学习ThinkPHP笔记 TP的模块化设计 名称 描述 应用 基于同一个入口文件访问的项目我们称之为一个应用. 模块 一个应用下面可以包含多个模块,每个模块在应用目录下面都是一个独立的子目录. 控制器 ...