leaflet本地加载arcgis切片&(转)
&& var origin = [-,
];//图层起点坐标
var resolutions = [
& &338681, //
& &16934, //
& &08467, //
& &042335, //
& &529.75 //
var crs = new L.Proj.CRS(
'+proj=cea +lon_0=0 +lat_ts=0 +x_0=0 +y_0=0 +datum=WGS84
+units=m +no_defs' , {
origin: &origin,
resolutions: resolutions
& var map = L.map('map',{
continuousWorld: true,
worldCopyJump: false
}).setView([23.38189], 0);
var tileLayer = new
L.TileLayer.TileLoad('http://localhost:8080/resources/china',
& & maxZoom: resolutions.length -
& & minZoom: 0,
& & continuousWorld: true
tileLayer.addTo(map);
L.TileLayer.TileLoad = L.TileLayer.extend({
initialize: function (url, options) {
options = L.setOptions(this, options);
this.url = url + "/Layers/_alllayers/{z}/{x}/{y}.png";
L.TileLayer.prototype.initialize.call(this, this.url,
L.TileLayer.prototype.getTileUrl = function(tilePoint) {
return L.Util.template(this._url, L.extend({
s: this._getSubdomain(tilePoint),
z: function() {
var value = tilePoint.z.toString(16);
return "L" + pad(value, 2);
x: function() {
var value = tilePoint.y.toString(16);
return "R" + pad(value, 8);
y: function() {
var value = tilePoint.x.toString(16);
return "C" + pad(value, 8);
L.tileLayer.tileLoad = function(url, options){
& return new L.TileLayer.TileLoad(url,
var pad = function(numStr, n) {
& & var len =
& & while(len & n)
& numStr = "0" + numS
& len++; &
& & return numS
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。开源轻量级移动端友好的JS地图库——leaflet学习教程 - ThinkGIS
分享GIS技术、传播GIS知识！
发布于 3 年前
24773 次浏览
Leaflet 是一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB，但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务，数据提供，数据格式，地理编码，路线和路线搜索，地图控件和交互等类型的插件共有140多个。这些控件 丰富leaflet的功能，同时也可以十分方便的实现自定义的控件具有良好的可扩展性。
###LeafLet快速入门教程
本教程将一步一步的指导你如何使用Leaflet加载地图、使用标记,折线和弹出窗口,处理事件。
####如何用leaflet快速加载地图
引入CSS文件
&link rel=&stylesheet& href=&http:///leaflet-0.7.3/leaflet.css& /&
引用JavaScript
&script src=&http:///leaflet-0.7.3/leaflet.js&&&/script&
页面添加一个div作为地图的容器
&div id=&map&&&/div&
确定map容器的高度
#map { height: 180 }
####设置地图
设置地图中心和缩放级别
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}./v3/MapID/{z}/{x}/{y}.png', {
attribution: 'Map data & &a href=&http://openstreetmap.org&&OpenStreetMap&/a& contributors, &a href=&http://creativecommons.org/licenses/by-sa/2.0/&&CC-BY-
SA&/a&, Imagery (C) &a href=&http:/&#&&Mapbox&/a&',
maxZoom: 18
}).addTo(map);`
####添加标注、圆形、多边形
#####添加标注
var marker = L.marker([51.5, -0.09]).addTo(map);
#####添加圆形
var circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
#####添加多边形
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map);
#####为覆盖物标注、圆、多边形添加弹出气泡
marker.bindPopup(&&b&Hello world!&/b&&br&I am a popup.&).openPopup();
circle.bindPopup(&I am a circle.&);
polygon.bindPopup(&I am a polygon.&);
#####处理事件
function onMapClick(e) {
alert(&You clicked the map at & + e.latlng);
map.on('click', onMapClick);Access denied |
used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website () has banned your access based on your browser's signature (37c2aa-ua98).查看: 19573|回复: 15
注册时间最后登录阅读权限10积分97精华0帖子
新手上路, 积分 97, 距离下一级还需 103 积分
扫一扫，手机访问本帖
请问大家，谁知道openlayer中怎么加载天地图的wmts服务，小弟跪求
注册时间最后登录阅读权限20积分483精华0帖子
注册会员, 积分 483, 距离下一级还需 17 积分
答案就在本网站上。。。。自己找。。。& & 只知道问，不知道搜索吗
注册时间最后登录阅读权限10积分97精华0帖子
新手上路, 积分 97, 距离下一级还需 103 积分
renren 发表于
答案就在本网站上。。。。自己找。。。& & 只知道问，不知道搜索吗
这个文章也好，
他的回复“var pRaster = new OpenLayers.Layer.WMTS({
& && && && && & name: &影像&,
& && && && && & url: &/img_c/wmts/&,
& && && && && & layer: &img&,
& && && && && & matrixSet: &c&,
& && && && && & matrixIds: matrixIds,
& && && && && & format: &tiles&,
& && && && && & style: &default&,
& && && && && & opacity: 1,
& && && && && & maxZoomLevel: 18,
& && && && && & isBaseLayer: true
& && && && &});” 也好，我用的话都加载不到地图。。。所以我才问其他人，看还有其他写法没。
注册时间最后登录阅读权限20积分483精华0帖子
注册会员, 积分 483, 距离下一级还需 17 积分
banya 发表于
/portal.php?mod=view&aid=29 这个文章也好，
接着找，&&你还没找正确@！
注册时间最后登录阅读权限20积分369精华0帖子
注册会员, 积分 369, 距离下一级还需 131 积分
哥们，咱网站上的例子可能不好用了
给你这个参考，我就是照它做的
注册时间最后登录阅读权限200积分1360精华0帖子
注册时间最后登录阅读权限10积分97精华0帖子
新手上路, 积分 97, 距离下一级还需 103 积分
admin 发表于
版主你好，你的例子我之前也试过了，但问题是用的时候天地图许多瓦片加载不上。。。没法用。还有，例子代码中的天地图服务貌似现在官网上都没啊，现在官网都是这样的：，我现在想加载个天地图的影像图，怎么加，就现在的官网提供的wmts服务，谢谢啊。
注册时间最后登录阅读权限10积分193精华0帖子
新手上路, 积分 193, 距离下一级还需 7 积分
同问这个问题，Openlayers加载天地图，
可以加载，单独道路图层或者卫星影像可用，
但是当道路图层和标注叠加时候，由于标注许多切片为空白，叠加起来缺少许多块，设置图层的透明等都没用。
注册时间最后登录阅读权限10积分18精华0帖子
新手上路, 积分 18, 距离下一级还需 182 积分
官方的失效了
注册时间最后登录阅读权限10积分89精华0帖子
新手上路, 积分 89, 距离下一级还需 111 积分
哥们，咱网站上的例子可能不好用了
给你这个参考，我就是照它做的
积极宣传本站，为本站带来更多的用户访问量
经常在论坛发帖，且发帖量较大
号外号外！！！
OpenLayers中文官方站奖励政策
赚积分啦！！！！
积分越多，可查询更多优质帖子。还有很多奖励哦！！还不快来参加！！！！
Powered by