openlayers发布离线地图
wysjwh 2015-12-03
最近的一个项目需要在局域网内做到地图效果，在网上搜素以后，决定使用openlayers加离线瓦片地图来做。
下面代码是摸索了几天以后做出的例子，当然因为了解不深，只是简单做了一个效果，没用到太多的组件和方法，还希望精通的大神不要笑话。
代码：
<?xml version="1.0" encoding="gbk"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<style>
html,body {
height: 99%;
width: 99%;
}
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
/* General settings */
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
/* Toolbar styles */
#toolbar {
position: relative;
padding-bottom: 0.5em;
}
</style>
<script src="OpenLayers.js"></script>
<script type="text/javascript">
//地图基础配置
var options = {
controls : [
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.MousePosition({"displayProjection":"EPSG:4326"})
],
//地图的范围，通过投影方式和经纬度计算
restrictedExtent: new OpenLayers.Bounds(12522438.610693185, 4382976.287599767, 13464142.503343074, 5010371.265871971) ,
//地图上的1-12的分辨率，1像素=？米
resolutions: [78271.516953125,
39135.7584765625,
19567.87923828125,
9783.939619140625,
4891.9698095703125,
2445.9849047851562,
1222.9924523925781,
611.4962261962891,
305.74811309814453,
152.87405654907226,
76.43702827453613,
38.218514137268066],
maxResolution : 'auto',
//坐标投影方式
projection: "EPSG:900913",
displayProjection: new OpenLayers.Projection("EPSG:4326"),
//单位，米，另外还有度
units : 'm',
//缩放级别
numZoomLevels:11
};
var map;
var markers;
function init(){
//新建地图对象
map = new OpenLayers.Map('map',options);
//新建图层
var tmsoverlay = new OpenLayers.Layer.TMS( "test", "",{ type: 'png',getURL: get_my_url,alpha:true,isBaseLayer: true});
map.addLayer(tmsoverlay);
map.addControl(new OpenLayers.Control.Navigation());
var lonLat = new OpenLayers.LonLat(117.21716, 39.12793);
lonLat.transform(map.displayProjection, map.getProjectionObject());
map.setCenter(lonLat, 7);
markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
//设置地图最小缩放级别为7级，小于7时放大为7
map.events.register("zoomend", this, function (e) {
if (map.getZoom() < 7){
map.setCenter(map.getCenter(),7);
}
});
//通过经纬度的范围和投影方式计算出restrictedExtent的值
var lonLat1 = new OpenLayers.LonLat(112.49579,41.50446);
lonLat1.transform(map.displayProjection, map.getProjectionObject());
var lonLat2 = new OpenLayers.LonLat(121.63367,36.59568);
lonLat2.transform(map.displayProjection, map.getProjectionObject());
var bounds = new OpenLayers.Bounds();
bounds.extend(lonLat1);
bounds.extend(lonLat2);
console.log(bounds);
}
//20037508.3427892是最大的显示范围
function get_my_url (bounds) {
var res = this.map.getResolution();
var x = Math.round ((bounds.left + 20037508.3427892) / (res * this.tileSize.w));
var y = Math.round ((20037508.3427892 - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom() + 1;
var path = "data/" + z + "/" + x + "/" + y + "." + this.type;
return this.url + path;
}
//添加标注
var marker1;
function addMarker(){
var url = 'Z6.png';
var sz = new OpenLayers.Size(10, 10); //尺寸大小
var calculateOffset = function(size) {
return new OpenLayers.Pixel(-(size.w/2), -size.h);
};
var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
var markerLonlat = new OpenLayers.LonLat(117.18843,39.12154);
//坐标的投影变换
markerLonlat.transform(map.displayProjection, map.getProjectionObject());
marker1 = new OpenLayers.Marker(markerLonlat, icon);
markers.addMarker(marker1);
}
function removeMarker() {
//移除单个标注
//markers.removeMarker(marker1);
//移除全部标注，即删掉标注图层，并重新初始化
map.removeLayer(markers);
markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
}
</script>
</head>
<body onload="init()">
<input type="button" value="显示标注" onclick="addMarker()"/>
<input type="button" value="移除标注" onclick="removeMarker()"/>
<div id='map'></div>
</body>
</html>附件是一个简单的离线地图下载器，当然也可以去网上找，有很多。
然后可以用经纬度的范围推算出实际的restrictedExtent的值，bounds参数为（left,bottom,right,top）。
最后修改相应路径即可。
相关推荐
nutian 0喜欢 / 0评论 2014-01-13
老菜鸟自习室 0喜欢 / 0评论 2012-04-07
pipimob 0喜欢 / 0评论 2015-03-31
semjinghua 0喜欢 / 0评论 2014-01-13
xixixi 0喜欢 / 0评论 2013-11-28
pipimob 0喜欢 / 0评论 2013-02-22
89387046 0喜欢 / 0评论 2013-01-22