Leaflet 是一个非常小巧灵活的 Geo js 库，esri 本身也在 Github 上有 leaflet 的相关项目。但是 leaflet 本身支持&Web Mercator Auxiliary Sphere tiling scheme，无法直接加载 arcgis server 发布的图层缓存，需要通过 Proj4 这个库进行转换，这里涉及了投影的相关转换配置，可是没有相关专业知识怎么配置呀，不过只要会搜，一切都是可以的。
以下是具体的步骤：
1.&打开 ArcGIS 的 MapServer，例如&http://[arcgisserver]/ArcGIS/rest/services/TileMAP/MapServer，查看 "Tile info"：记下来所有的 Levels 中的 Resolution
以及下面的 Origin，备用。
2. 继续往下看，记住&Spatial Reference 后的数字。
然后到 "http://spatialreference.org/ref/epsg/[刚刚的数字]/proj4/"
复制内容：&+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +a=6378140 +b=157528 +units=m +no_defs&，备用
2. 下载 ,&,
3. 运行以下代码，注意资源引用位置
&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" /&
&script src="leaflet/leaflet-src.js"&&/script&
&script src="leaflet/proj4.js"&&/script&
&script src="leaflet/proj4leaflet.js"&&/script&
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
&div id="map"&&/div&
var centerPoint = new L.LatLng(39.13, 117.20); // 设置地图中心
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=157528 +units=m +no_defs",
origin: [ [精度偏移], [维度偏移] ],
// 将刚刚的 Origin 复制到这里
resolutions: [
// 所有的分辨率复制到这里
var mapOptions = {
center: centerPoint,
attributionControl: true,
var map = L.map('map', mapOptions);
var tileLayer = new L.TileLayer('http://[arcgisserver]/ArcGIS/rest/services/TileMAP/MapServer/tile/{z}/{y}/{x}');
map.addLayer(tileLayer);
4. 完工~~~，之后还可以引用 ，添加 FeatureLayer 等等，这些有机会再说啦。
阅读(...) 评论()使用Leaflet创建map拓扑图 - Web前端当前位置:& &&&使用Leaflet创建map拓扑图使用Leaflet创建map拓扑图&&网友分享于：&&浏览：1次使用Leaflet创建地图拓扑图
之前我们采用过 Openlayers+Qunee的方案，实现地图拓扑图，鉴于Openlayers是一种古老项目，略显臃肿，面向更新的前端地图方案，在客户的介绍下，我们找到了leaflet - 基于HTML5的轻量地图客户端方案，结合Qunee使用，以及第三方插件，实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件，作者在乌克兰，在移动设备上的有良好的体验，比较新和现代的地图客户端，类库压缩后只有33k，非常小巧，这一点让qunee都相形见绌，先看一个leaflet的入门示例
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.
Easily customizable.')
.openPopup();
运行效果如下：
结合Qunee拓扑图
Leaflet地图上可以添加点线面基本图形，如果需要展示更复杂的图形或者链接关系，显得力不足，可以结合Qunee组件使用，下面我们让地图和拓扑图叠加起来，在地图上显示拓扑元素，并整合两者的交互
在地图的DIV容器中添加一个孩子div，作为拓扑图的画布，并设置相应的css，然后调用超类的构造函数，取消默认的双击和滚轮操作，已被后面地图与拓扑图的交互同步
var MapGraph = function (map) {
var container = map._
var canvas = document.createElement("div");
canvas.style.width = "100%";
canvas.style.height = "100%";
container.appendChild(canvas);
Q.doSuperConstructor(this, MapGraph, [canvas]);
this.enableWheelZoom =
this.enableDoubleClickToOverview =
this.originAtCenter =
this.setMap(map);
下面实现拓扑图与地图的绑定，在#setMap(map)函数中，监听了地图的zoomstart和zoomend事件，根据经纬度动态的调整图元的屏幕位置，同样在节点被拖动后，也需要设置新的经纬度
MapGraph.prototype = {
map: null,
mapShowing: true,
enableInertia: false,
createNodeByLonLat: function (name, lon, lat) {
var l = this.toLonLat(lon, lat);
var p = this.getPixelFromLonLat(l);
var node = graph.createNode(name, p.x, p.y);
node.lonLat =
toLonLat: function (lon, lat) {
return new L.latLng(lat, lon);
getPixelFromLonLat: function (lonLat) {
return this.map.latLngToContainerPoint(lonLat, this.map._zoom);
getLonLatFromPixel: function (x, y) {
return this.map.containerPointToLatLng([x, y]);
setMap: function (map) {
this.map =
this.map.on("zoomstart", this.hideGraph, this);
this.map.on("zoomend", this.updateNodes, this);
this.html.ondblclick = createEventFunction(this, function (evt) {
if (this.getElementByMouseEvent(evt)) {
Q.stopEvent(evt);
this.interactionDispatcher.addListener(function (evt) {
if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END) {
var datas = evt.
Q.forEach(datas, function (data) {
var pixel = this.toCanvas(data.location.x, data.location.y);
data.lonLat = this.getLonLatFromPixel(pixel.x, pixel.y);
hideGraph: function(){
this.html.style.visibility = "hidden";
showGraph: function(){
this.html.style.visibility = "";
translate: function (tx, ty) {
Q.doSuper(this, MapGraph, "translate", arguments);
this.map.panBy([-tx, -ty], {animate: false});
resetVisibility: function () {
this.forEach(function (e) {
if (e.invalidateVisibility) {
e.invalidateVisibility(true);
updateNodes: function () {
this.translateTo(0, 0, 1, true);
this.resetVisibility();
this.forEach(function (d) {
if (d instanceof Q.Node) {
var l = d.lonL
var p = this.getPixelFromLonLat(l);
d.location =
this.showGraph();
Q.extend(MapGraph, Q.Graph);
此外还可以通过可见过滤器实现，不同比例尺显示不同的节点
在线示例： /map/mapByLeafLet.html
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有leaflet可以加载离线地图吗 - 开源中国社区
当前访客身份：游客 [
当前位置：
leaflet可以加载离线地图吗
共有3个答案
<span class="a_vote_num" id="a_vote_num_
可以的，只有知道了瓦片规则，随便怎么搞
<span class="a_vote_num" id="a_vote_num_
示例代码中把L.tileLayer的http改了就行
--- 共有 1 条评论 ---
好的，我试试，谢谢哈
(3个月前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
当然可以。
--- 共有 1 条评论 ---
可以加载百度地图吗？
(3个月前)&nbsp&
更多开发者职位上
有什么技术问题吗？
xilouyo...的其它问题
类似的话题&&国之画&&&&&&
&& &&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！leaflet怎么在地图上加html_百度知道}