小白请教如何用openlayers画出百度地图
[问题点数：20分，无满意结帖，结帖人qq_]
本版专家分：0
结帖率 100%
CSDN今日推荐
匿名用户不能发表回复！
其他相关推荐
关于openlayers加载离线百度地图的东东好几年前就做过了，不过当时做的是2.0版本的。
自从好久没有去做可视化分析之后，也很少接触这些前端的JS的东西了。最近想实现一个东西的时候，才想起需要用到一些比较干净的底图。
于是刚好选用了百度迁徙后面的底图。
由于百度的JS包东西太多，需要的东西太复杂，于是就选用openlayers来进行测试。果然还是非常流畅。
本文主要介绍使用openlayers3加载百度在线或者离线地图后，对坐标进行纠偏
本文展示使用openlayer3调用百度在线地图
转自：http://www.bkjia.com/webzh/1003573.html
地图交互功能和上一篇讲的地图控件有些混淆，它们都控制着用户与地图的交互，区别是地图控件的触发都是一些可见的 HTML 元素触发，如按钮、链接等；而交互功能都是一些设备行为触发，都是不可见的，如鼠标双击、滚轮滑动等，手机设备的手指缩放等。
地图的交互功能包含很多，如地图双击放大，
--16:02地图基本元素已经完成，各部分都有demo供参考。接下来准备完成一个地图系统页面，包含图层管理，poi静态点，静态点事件（hover,click），图形绘制，范围查询等。计划先模拟900个点，分为3个类别（图层）。预计一周完成。...
openlayers 调用百度地图
html代码一map.html：
html代码二test.html：
function init(){
var subframe = document.getElementById(&subframe&);
subframe.contentWindow.initM
&Content-Type& content=&text/ charset=utf-8& /&
&viewport& content=&initial-scale=1.0, user-scalable=no& /&
&text/css&&
body, html{width: 100%;height: 100%;overflow:
获取某行政区域边界经纬度的集合
上边这个html文件用浏览器打开，输入地名就可以获取该地的经纬度的集合。
将经纬度字符串转换成json数据
获取的经纬度集合可以算作一个字符串，想办法把这个字符串变成json数据方便我们获取，这个工作要有编辑工具实现，每组经纬度是由“;”分开的，为了方便编辑，我们先在xcode工程中把“;”替换成“],[”,
打印输出的字符串复制备
(openalers地图简称o地图，百度地图简称b地图，wmap地图简称w地图)openlayers逻辑关系： omap -& olayer -& ofeaturebaidu逻辑关系: bmap -& bfeaturewmap（融合地图）, 要考虑对不同类别的feature的控制，所以wmap的逻辑关系： wmap -& wlayer -& wfeature区别：o地...搭建开源地图服务(三)－使用OpenLayers呈现地图 - 为程序员服务
搭建开源地图服务(三)－使用OpenLayers呈现地图
Share the post "搭建开源地图服务(三)－使用OpenLayers呈现地图"
按之前的设想，现在应该用
来搭建WMS服务了，但TileMill本身就提供了一个看起来还不错的地图瓦片服务（XYZ模式的），而且OpenLayers本身也支持这种模式，于是打算直接用OpenLayers访问TileMill的瓦片服务接口，先看看效果再说。
OpenLayers是一个开源的为WEB GIS客户端提供的JS库，可以方便的对地图做各种处理。目前已发布3.0版本了，官网：
，上面的文档也算丰富，其中还包含了各种
，对初学者帮助很大！另外再推荐一下
相对来说算是轻量级的，但也非常的好用！
1. 简单的地图呈现
本次，我们只是简单的展现一下地图，通过官方的Example稍作修改，代码很简单，示例如下：
其中，ol.source.XYZ.url 中的IP请替换成你自己的即可。 ol.View.center/zoom 指定地图的中心点以及默认缩放级别，我们把焦点移到之前的台湾宝岛上看看！
&!doctype html&
&html lang="en"&
&link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css"&
height: 600
width: 100%;
&script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"&&/script&
&title&OpenLayers 3 example&/title&
&h2&My Map&/h2&
&div id="map" class="map"&&/div&
&script type="text/javascript"&
var map = new ol.Map({
target: 'map',
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xxx.xxx.xxx.xxx:20008/tile/OSMBright/{z}/{x}/{y}.png'
view: new ol.View({
center: ol.proj.transform([121.11, 23.82], 'EPSG:4326', 'EPSG:3857'),
如果没有问题的话，访问该html变可看到自己的地图了:-)
OpenLayers台湾地图示例
2. 通过GeoJson实现地图矢量要素层
有了地图的底图，我们还需要在此之上呈现一些交互，例如POI打点，绘制线，多边形等相关的应用，甚至是动态数据的呈现。
GeoJson是基于Json的数据格式为基础，专门为地理数据编码的一种载体，其中支持的几何类型有：点、线、面、多点、多线、多面以及几何数据的集合。GeoJson里包含了这些几何对象基本的特征属性。以下代码是参考
的例子生成的，简单的实现了GeoJson作为载体的地图向量数据呈现的一个测试：
&!doctype html&
&html lang="en"&
&link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css"&
height: 600
width: 100%;
&script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"&&/script&
&title&OpenLayers 3 example&/title&
&h2&My Map&/h2&
&div id="map" class="map"&&/div&
&script type="text/javascript"&
var image = new ol.style.Circle({
radius: 5,
fill: new ol.style.Stroke({color: 'red'}),
stroke: new ol.style.Stroke({color: 'red', width: 1})
var styles = {
'Point': [new ol.style.Style({
image: image
'LineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
'Polygon': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [4],
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
'Circle': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
var vectorSource = new ol.source.GeoJSON(
/** @type {olx.source.GeoJSONOptions} */
'type': 'FeatureCollection',
'type': 'name',
'properties': {
'name': 'EPSG:3857'
'features': [
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': ol.proj.transform([121.11, 23.82], 'EPSG:4326', 'EPSG:3857')
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [
[3e1, 1e5],
[4e6, 3e1]
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[-5e6, 2e1],
[-4e6, 1e6],
[-3e6, -1e6]
var styleFunction = function (feature, resolution) {
return styles[feature.getGeometry().getType()];
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
var map = new ol.Map({
target: 'map',
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xxx.xxx.xxx.xxx:20008/tile/OSMBright/{z}/{x}/{y}.png'
vectorLayer
view: new ol.View({
center: ol.proj.transform([121.11, 23.82], 'EPSG:4326', 'EPSG:3857'),
效果应该是这样的：
OpenLayers GeoJson Example
到此为止，我们已经可以通过OpenLayers作一些简单的WebGIS应用了，搭建开源地图服务的话题暂且告一段落。当然我们还缺失一些关键性的服务器，例如地图瓦片的缓存，以及一些接口的标准化的处理，包括之前预想使用的MapProxy和
， 或许本次的主题称之为借助TileMill实现地图服务更合适，呵呵。以上内容仅仅是记录了我个人对地图服务搭建学习过程中的一些点滴。随着以后不断深入学习，我尽量逐步完善和公布一些我对开源地图服务细节上的认知。
做喜爱的事，遇有趣的人。
原文地址：, 感谢原作者分享。
您可能感兴趣的代码　　最近因为工作原因很少撸博客，感觉自己堕落了。公司有个项目整个都是我写，所以想写一些标准的东西出来，以后其他项目也可以拿来用，所以很多东西需要细琢磨。这一琢磨不要紧，时间哗哗的过。目前虽然项目可正常运行，但感觉还是有一些东西需要优化改进。最近也是觉得自己还是太菜了，很多东西真的拿不准，一个细小的问题都要思考很长时间，google半天甚至一天看n篇文章综合比较才制定套路，都是自己见识少知识不足导致。最近手头又多几个活，需要设计好才能稳定使用，所以还是需要花费大量时间的。加油吧，菜鸡。
function getTdtLayer(t = 'vec_c') {
let url = 'http://t0.tianditu.com/DataServer?T=' + t + '&X={x}&Y={y}&L={z}'
let projection = ol.proj.get('EPSG:4326')
let projectionExtent = [-180, -90, 180, 90]
let maxResolution = (ol.extent.getWidth(projectionExtent) / (256 * 2))
let resolutions = new Array(16)
for (let z = 0; z & 16; ++z) {
resolutions[z] = maxResolution / Math.pow(2, z)
var tileOrigin = ol.extent.getTopLeft(projectionExtent)
var layer = new ol.layer.Tile({
extent: [-180, -90, 180, 90],
source: new ol.source.TileImage({
tileUrlFunction: function (tileCoord) {
var z = tileCoord[0] + 1
var x = tileCoord[1]
var y = -tileCoord[2] - 1
var n = Math.pow(2, z + 1)
if (x * n & 0) {
return url.replace('{z}', z.toString())
.replace('{y}', y.toString())
.replace('{x}', x.toString())
projection: projection,
tileGrid: new ol.tilegrid.TileGrid({
origin: tileOrigin,
resolutions: resolutions,
tileSize: 256
return layer
module.exports.getTdtLayer = getTdtLayer
Openlayers3加载天地图
OpenLayers调用天地图在线服务
openlayers 3扩展，调用百度地图、高德地图、天地图服务
使用Openlayers调用天地图在线服务数据
OpenLayers 3 加载WMTS天地图
OpenLayer学习之加载天地图
openlayer4加载ArcGIS离线瓦片地图
没有更多推荐了，openlayers中设置地图缩放级别
openlayers中设置地图缩放级别
在实际项目中，好多地图不需要从第0级开始缩放，因为第0级地图太小了，没有实际意义。那么就需要设置从中间某个级别开始缩放。该如何做呢。由于openlayrs2中没有直接属性进行控制，也因此需要自己注册事件通过监听事件来控制地图的最小缩放级别。
在实际项目中，好多地图不需要从第0级开始缩放，因为第0级地图太小了，没有实际意义。那么就需要设置从中间某个级别开始缩放。该如何做呢。由于openlayrs2中没有直接属性进行控制，也因此需要自己注册事件通过监听事件来控制地图的最小缩放级别。对于openlayers3来说，直接通过view的属性进行控制即可。
openlayers中需要注册缩放事件来解决，在该事件中监听缩放后地图的级别，当地图级别小于设定的最小级别时放大地图来解决。代码为：
//设置地图最小缩放级别为17级
map.events.register("zoomend", this, function (e) {
if (map.getZoom() & 17)
//map.zoomTo(17);
map.setCenter(map.getCenter(),17);
openlayers3中,直接通过view的minZoom和maxZoom属性来控制即可。
map.setView(new ol.View({
extent: mapExtent,
projection: this.projection,
minZoom: 16,
maxZoom: 23
用云栖社区APP，舒服~
【云栖快讯】Apache旗下顶级开源盛会 HBasecon Asia 2018将于8月17日在京举行，现场仅600席，免费赠票领取入口&&
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效...
RDS是一种稳定可靠、可弹性伸缩的在线数据库服务。支持MySQL、SQL Server、Po...
数据库云大使当前位置： →
→ OpenLayers中map缩放级别的设置方法
OpenLayers中map缩放级别的设置方法
& 作者：佚名 & 来源： 互联网 & 热度：
&收藏到→_→：
摘要: OpenLayers中地图缩放级别的设置方法 http://www.cnblogs.com/sailheart
OpenLayers中地图缩放级别的设置方法 一、概述 在...
"OpenLayers中map缩放级别的设置方法"：：
openlayers中地图缩放级别的设置方法
http://www.马开东/sailheart
openlayers中地图缩放级别的设置方法
在openlayers中，地图必须具有一个缩放级别的范围，缩放级别可以用比例尺（scale）或者分辨率（resolution）表示。
比例尺——屏幕上1米代表多少地图坐标单位；分辨率——屏幕上一个像素代表多少地图坐标单位。两者的转换关系是：scale = resolution * 72 * 39.3701（1米=39.3701英寸，1英寸=72像素）
地图具有一个总的缩放级别，每个图层可以有各自的缩放级别，这样可以控制图层只在合适的级别上显示。
二、缩放级别范围的确定方法
1、比例尺数组或者分辨率数组来确定（相邻两级之间不一定是2倍的关系，可以是任意值）。示例：
resolutions: [1.40625,0.703125,0.3515625,0.,0.,0.]scales: [, , , 5000000]
2、用最大分辨率（maxresolution）和缩放级别总数（numzoomlevels）确定，相邻两级是2倍关系
2.1最大分辨率的确定方法：
a. 直接指定maxresolution，例如：
maxresolution: 0.
b. 直接指定minscale，例如：
c. 由maxextent确定（maxresolution需设置为‘auto’），例如：
maxextent: new openlayers.bounds(-180, -90, 180, 90),maxresolution: "auto"
2.2 缩放级别总数的确定方法：
直接指定numzoomlevels，例如：numzoomlevels: 5b.
由最大分辨率和最小分辨率的比值确定，最小分辨率同2.1有三种方法可以确定：
b.1 直接指定minresolution
b.2 直接指定maxscale
b.3 由minextent确定（minresolution需设置为‘auto’）
如果指定的参数过多，导致缩放级别范围不一致时，上述方法顺序决定了openlayers确定缩放级别范围的优先级。
openlayers中的球面墨卡托投影
最近看openlayers，研究到地图投影时找到官方的文档，就翻译了一下，由于英文能力差，翻译不好的地方，请看原文
原文地址：http://docs.openlayers.org/library/spherical_mercator.html
球面墨卡托投影
该文档说明了什么是球面墨卡托投影以及何时使用该投影。文档中包含一些必要的背景知识、商用图层的代码演示、添加wms图层以及使用openlayers进行投影变换的内容。要求读者对投影变换和openlayers有一个基本的了解。
什么是球面墨卡托投影？
球面墨卡托投影在openlayers community版本和其他osg community版本中都有使用。google maps，微软virtual earth，yahoo maps和其他商业地图api的提供者都使用该投影。
该投影是将地球当作一个球体而不是椭球体，然后应用墨卡托投影的方法，将地图投影到一个地图平面上。
为了正确的在商业地图api上叠加地图数据，就必须使用该投影。最基本的是在商业地图api上显示栅格瓦片地图——例如tms，wms以及其他类似的瓦片。
为了更好的使用商业地图api，基于google maps的数据生成人员也需要使用该投影。最基本的例如openstreetmap，栅格地图瓦片都是使用的“球面墨卡托投影”。
gis中，通常用“epsg”的代码来表示一种地图投影。最常用的“epsg：4326”，在地图上将经纬度直接当作x /y对待。球面墨卡托投影在官方指定的代码为epsg：3785。但是在官方发布之前，很多软件已经使用了epsg：900931代码来表示该投影，openlayers仍然使用这个非官方的代码。看到“epsg：4326”字符，就是经纬度坐标的描述，看到“epsg：900931”则是用“米”做单位的x/y坐标的描述。
首先我们创建一个使用球此文来自: 马开东博客
转载请注明出处 网址：
面墨卡托投影的地图。在这里我们使用基于微软virtual earth api的地图。以下的html代码将在地图中用到。
1 &html& 2 &head& 3
&title&openlayers example&/title& 4
&script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'&&/script& 5
&script src="http://openlayers.org/api/openlayers.js%22%3e%3c/script& 6
&div style="width:100%; height:100%" id="map"&&/div& 9
&script defer='defer' type='text/javascript'&10
// code goes here11
&/script&12
&/body&13 &/html&
就下来添加virtual earth图层作为地图的基础图层
1 var map = new openlayers.map('map');2 var layer = new openlayers.layer.virtualearth("virtual earth",3
sphericalmercator: true,5
maxextent: new openlayers.bounds(-,-,,)6
});7 map.addlayer(layer);8 map.zoomtomaxextent();
这样就创建了一副地图。像这样的地图，应该着重注意：setcenter不能再使用经纬度坐标，而应该是投影以后以“米”为单位的坐标。你可以拖动该地图，但是如果你不理解球面墨卡托投影，接下来做任何功能都将非常困难。
该地图的maxresolution根据一些默认值进行计算，通常球面墨卡托投影的地图范围是经度-180~180，纬度-85.1，这是因为墨卡托投影两极将变形到无穷远处，必须排除掉北极和南极区域，剩下的区域投影后正好是一个正方形，投影后的范围是从 -到。
地图的maxresolution默认值的计算方法是：将该范围匹配在边长为256像素的图片上，结果maxresolution的值就是9。在图层中默认的就是该值，不需要通过图层options来设置了。
如果将球面墨卡托投影的wms或者tms图层作为一个单独的图层，需要指定图层的maxresolution属性，另外还需要定义该图层的maxextent。
使用投影坐标
openlayers提供了在客户端进行投影变换的工具，可以将经纬度坐标转换为球面墨卡托坐标。文档中首先在setcenter或者其他函数中需要使用坐标转换，接着演示如何通过使用map的displayprojection选项来将地图的坐标系显示为其他的投影坐标。
points,bounds投影变换
首先创建一个投影对象作为默认的投影，标准的经纬度投影的字符串是“epsg：4326”——基于wgs84的参考椭球面（如果你的数据和google maps匹配很准，就是这种投影）。
接着创建一个对象保存你的坐标，然后转换
var proj = new openlayers.projection("epsg:4326");var point = new openlayers.lonlat(-71, 42);point.transform(proj, map.getprojectionobject());
该点已经转换为球面墨卡托投影坐标，你可以传递给map的setcenter方法：
map.setcenter(point);
也可以直接在setcenter中调用：
var proj = new openlayers.projection("epsg:4326");var point = new openlayers.lonlat(-71, 42);map.setcenter(point.transform(proj, map.getprojectionobject()));
通过这种方法，可以使用经纬度坐标来设置地图中心。
还可以使用相同的方法来投影变换openlayers.bounds对象：同样用bounds对象的transfrom方法：
var bounds = new openlayers.bounds(-74.047185, 40.679648, -73.907005, 40.882078)bounds.transform(proj, map.getprojectionobject());
坐标变换后替换掉原来的此文来自: 马开东博客
转载请注明出处 网址：
对象，因此不需要重新定义一个变量。
geometries的投影变换
geometry对象和lonlat与bounds对象一样拥有坐标转换方法。在你的代码中创建的geometry对象添加到图层上之前，应该先进行坐标转换，同样从图层获取得到的geometry对象在别的地方使用，也需要坐标转换。由于所有的坐标转换都是更新对象自身，所以想添加一个geometry到图层上，不应该直接调用转换方法，而是克隆一个geometry对象后再调用：
var feature = vector_layer.features[0];var geometry = feature.geometry.clone();geometry.transform(layerproj, targetproj);
矢量数据的投影变换
创建一副带投影的地图后，很可能需要将矢量数据进行投影变换然后添加到基础地图上，完成这个工作，只需要简单的设置好矢量数据的投影，并确定地图的投影就可以了。
var map = new openlayers.map("map", {
projection: new openlayers.projection("epsg:900913")});var mybaselayer = new openlayers.layer.google("google",
{'sphericalmercator': true,
'maxextent': new openlayers.bounds(-,-,,)
});map.addlayer(mybaselayer);var mygml = new openlayers.layer.gml("gml", "mygml.gml", {
projection: new openlayers.projection("epsg:4326")});map.addlayer(mygml);
可以使用该方法加载任何openlayers支持格式的矢量数据，包括wkt，geo,kml和其他一些格式，在gml图层上指定format选项。
var geo = new openlayers.layer.gml("geo", "geo.", {
projection: new openlayers.projection("epsg:4326"),
format: openlayers.format.geo});map.addlayer(geo);
设置了图层的投影属性后，如果手动添加features到图层上（比如调用layer.addfeatures）,在添加到图层上之前必须进行坐标转换。
投影变换后的数据的序列化
openlayers中矢量数据序列化的方法是将矢量图层上获取传递给格式化类写数据。在一个具有投影的地图中，我们获取到的数据是已经投影变换过的，为了进行数据转换，需要使用内部投影和外部投影两个参数给格式化类，然后再用格式化类序列化数据。
var format = new openlayers.format.geo({
'internalprojection': new openlayers.projection("epsg:900913"),
'externalprojection': new openlayers.projection("epsg:4326")});var string = format.write(vector_layer.features);
在控件中显示投影坐标
有些控件可以将地图坐标显示给用户，有的直接显示，有的包含在中。mouseposition和permalink控件（包括argparser控件）都是用地图所使用地图投影坐标——也就是球面墨卡托坐标。为了避免用户混淆不清，openlayers可以通过displayprojection设置控件的坐标系，将地图坐标系转换为显示坐标系。要使用这一功能，在创建地图时需要指定projection和displayprojection选项，控件将自动选择这些选项的设置。
var map = new openlayers.map("map", {
projection: new openlayers.projection("epsg:900913"),
displayprojection: new openlayers.projection("epsg:4326")});map.addcontrol(new openlayers.control.permalink());map.addcontrol(new openlayers.control.mouseposition());
这样你就可以正常加载地图了。
创建球面墨卡托投影栅格图片
球面墨卡托投影如此重要的一个原因是只有这种投影能让你将图片地图正确的叠加到类似于google maps这样的商业图层上。在浏览器是使用栅格地图，在一个瘦gis客户端是不可能对图片进行重新投影，只能是所有的图片使用同样的投影。如何生成球面墨卡托投影的瓦片地图取决于你使用什么软件来创建地图图片。mapserver的使用包含在此文档中。
mapserver采用proj.4来支持地图投影。为了转换为球面墨卡托投影，需要在proj.4的data目录下添加投影定义。linux环境下，打开/usr/share/proj/epsg文件，在文件尾部添加一行：&900913& +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs然后在地图文件中添加投影在wms_srs元数据中：
wms_srs "epsg:4326 epsg:900913"
# layers go hereend
这样就可以通过mapserver的wms服务请求使用球面墨卡托投影的瓦片地图，通过openlayers很好的和商业数据匹配。
var options = {
projection: new openlayers.projection("epsg:900913"),
units: "m",
maxresolution: 9,
maxextent: new openlayers.bounds(-, -,
, )};map = new openlayers.map('map', options);// create google mercator layersvar gmap = new openlayers.layer.google(
"google streets",
{'sphericalmercator': true,
'maxextent': new openlayers.bounds(-,-,,)
});// create wms layervar wms = new openlayers.layer.wms(
"world map",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{'layers': 'basic', 'transparent': true});map.addlayers(gmap, wms);
wms图层自动继承地图基础图层的投影，所以不需要在图层中设置投影选项。
最新版的geoserver已经支持epsg：900913，因此不需要额外添加投影。把geoserver的图层作为wms添加到地图上即可。
自定义瓦片地图
另一个使用球面墨卡托投影的场合是加载自定义的瓦片地图。很多瓦片使用和google maps一样的投影，而且是使用同样的z/x/y语法来访问瓦片。如果你的瓦片是依照google的瓦片编码规则（从世界的左上角开始，按照x,y,z编码），通过简单的修改get_url函数，就可以用tms图层来加载这些瓦片。首先定义geturl函数：允许接受bounds作为参数，然后按照以下方法编写：
function get_my_url (bounds) {
var res = this.map.getresolution();
var x = math.round ((bounds.left - this.maxextent.left) / (res * this.tilesize.w));
var y = math.round ((this.maxextent.top - bounds.top) / (res * this.tilesize.h));
var z = this.map.getzoom();
var path = z + "/" + x + "/" + y + "." + this.
var url = this.
if (url instanceof array) {
url = this.selecturl(path, url);
return url +}
然后，创建tms图层，传入一个选项告诉图层自定义瓦片的加载函数是什么：
new openlayers.layer.tms("name",
"http://example.com/",
{ 'type':'png', 'geturl':get_my_url });
自己编写的函数将覆盖geturl函数，请求自己的瓦片来代替标准的tms瓦片。这样做，你的地图选项还需要包含和google maps一样的maxextent和maxresolution。
new openlayers.map("map", {
maxextent: new openlayers.bounds(-,-,,),
numzoomlevels:18,
maxresolution:9,
units:'m',
projection: "epsg:900913",
displayprojection: new openlayers.projection("epsg:4326")});
球面墨卡托投影和epsg的其他命名
球面墨卡托投影在openlayers中使用代码epsg:900913，很多其他的服务比如openstreetmap, bing和yahoo也用同样的投影，但并不一定要用epsg:900913代码，一些其他的代码比如epsg:3857 和epsg:102113也在使用。现在官方统一规定了代码epsg：3857来代替epsg:900913（http://www.epsg-registry.org/export.htm?gml=urn:ogc:def:crs:epsg::3857）。因此，如果你想合并openlayers球面墨卡托投影的叠加图层，不管该图层使用的是其他代码还是官方的代码，你必须确保openlayers请求的是epsg：3857或者别的代码而不是epsg:900913。在加载一个图层到地图上之前，重写图层的投影来完成这些工作。代码如下：
// set transformation functions from/to alias projectionopenlayers.projection.addtransform("epsg:4326", "epsg:3857", openlayers.layer.sphericalmercator.projectforward);openlayers.projection.addtransform("epsg:3857", "epsg:4326", openlayers.layer.sphericalmercator.projectinverse);// create sphericalmercator layersvar googlelayer = new openlayers.layer.google("google", {"sphericalmercator": true});var osmlayer = new openlayers.layer.osm("openstreetmap");// override default epsg codealiasproj = new openlayers.projection("epsg:3857");googlelayer.projection = osmlayer.projection =//add baselayers to mapmap.addlayers([googlelayer, osmlayer]搜索此文相关文章：此文来自: 马开东博客
网址: 站长QQ
上一篇：没有了
OpenLayers中map缩放级别的设置方法_Web前端相关文章
Web前端_总排行榜
Web前端_最新
Web前端_月排行榜
Web前端_周排行榜
Web前端_日排行榜
马开东博客专栏
企业软件/开发
硬件/嵌入开发
马开东博客专栏
应用服务器
软件工程/管理/测试
马开东博客专栏
Linux/Unix
马开东博客专栏
开发语言/框架
专题开发/技术/项目
马开东博客专栏
高性能开发
马开东博客专栏}