最近的一个项目需要在局域网内做到地图效果，在网上搜素以后，决定使用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）。
最后修改相应路径即可。
相关推荐
本DEMO展示了如何利用OpenLayers发布离线地图，特别是针对瓦片数据的处理。 首先，理解“瓦片地图”是非常关键的。瓦片地图是一种将大型地图分割成小块（通常为256x256像素）图像的技术，这样可以有效地进行分发和...
本DEMO展示了如何利用OpenLayers来发布和展示离线地图瓦片数据。 离线地图的实现主要依赖于将在线地图数据预先下载并存储在本地，然后通过OpenLayers来读取和渲染这些存储的数据。在这个DEMO中，我们重点关注两个...
离线地图瓦片是一种将大型地图分割成许多小块图片（通常为256x256像素）的方法，这样可以更有效地存储和加载地图，尤其是在低带宽或无网络连接的环境下。 首先，我们需要了解瓦片的坐标系统。OpenLayers和Google ...
9. **更新日志和迁移指南**：如果OpenLayers有新的版本发布，更新日志会记录所有的改变，而迁移指南则指导如何将旧版本的代码平稳地迁移到新版本。 离线帮助文件的压缩包"Doc4OpenLayers"很可能包含了HTML格式的...
该示例为百度离线地图的一些实现，根据经纬度对离线地图实现标点，从后台返回数据，页面用ajax调用接口获取json数据，用OpenLayers实现离线地图的发布，里面包含了示例区域的离线地图瓦片以及网页Demo
OpenLayers 4.5.0版本的发布，意味着它可能修复了一些已知的bug，增加了新的特性，或者优化了性能。开发者应该关注这些更新，以便利用最新的功能和改进。同时，由于OpenLayers是一个活跃的开源项目，社区经常提供...
首先，"【图文】openlayers实例 第二十讲-OpenLayers离线地图快速实战(一)_百度文库.url"可能是一个关于如何使用OpenLayers构建离线地图的教程。离线地图是WebGIS中的一个重要特性，允许用户在没有网络连接时也能...
总之，OpenLayers 4.2为开发者提供了强大的工具，能够轻松地将百度地图和高德地图集成到Web应用中，无论是在线还是离线。通过理解上述代码，你可以根据自己的需求定制地图应用，比如添加标记、覆盖物，或者实现交互...
下面将详细解释如何使用OpenLayers调用GeoServer发布的地图以及实现地图的基本功能。 首先，GeoServer是OGC（开放地理空间联盟）标准的服务器实现，它支持WMS（Web Map Service）和WFS（Web Feature Service）等...
在JavaScript开发中，特别是在WebGIS应用中，离线加载GeoWebCache切片是实现离线地图浏览的重要技术。 GeoWebCache的工作原理是将地图瓦片按照特定的坐标系统和缩放级别进行划分，每个瓦片对应一个静态图像文件。当...
如何在内网(局域网)中发布OpenLayers地图平台是一项关键的技术任务，尤其是在需要离线使用WebGIS系统的情况下。本文将详细介绍这一过程，包括如何发布卫星影像以及构建基于OpenLayers的WebGIS地理信息系统站点。 ...
ol(openlayers)加载天地图/加载中xyz格式瓦片/加载Geoserver发布的WMS图层， 可以一次性加载多个图层： /** * 添加离线图层(数组) * @param {Array} optsArray 选项 * @example * var opts = [{ * url: "ol....
支持Openlayers/ArcGIS API For Javascript/Flex等多款GIS客户端离线浏览，同时支持发布TPK，发布ArcGIS缓存为WMTS地图，助您轻松构建自己的局域网离线地图应用！ 4.无缝拼接成单张大图。支持无损压缩、分块拼接，可...
（将下载地图发布为Web服务（WMTS/WMS），供ArcGIS、SuperMap、Openlayers等客户端直接远程访问，支持Openlayers的离线浏览） 04.支持无缝拼接成单张大图 （支持无损压缩、分块拼接，可在ArcMap、Erdas Imagine中...
（将下载地图发布为Web服务（WMTS/WMS），供ArcGIS、SuperMap、Openlayers等客户端直接远程访问，支持Openlayers的离线浏览） 4、支持无缝拼接成单张大图 （支持无损压缩、分块拼接，可在ArcMap、Erdas Imagine中...
- **WMS (Web Map Service)**：主要用于获取地图图像，提供地图叠加显示等功能。 - **WFS (Web Feature Service)**：用于获取地理空间特征数据，支持读取、更新、删除等操作。 - **WCS (Web Coverage Service)**：...
前端部署虽未详细展开，但在实际的WebGIS系统中，前端通常需要使用GIS库（如OpenLayers或Leaflet）与后端的Geoserver进行交互，展示地图并执行各种GIS操作。此外，PostGIS的集成对于存储和检索地理数据至关重要。...
如Mapbox SDKs支持iOS和Android平台，提供离线地图、定位、路线规划等功能。 10. **实时地图更新**：对于交通、天气等动态数据，实时地图更新是必需的。源代码可能包含流数据处理和动态渲染的实现。 11. **三维...