使用 OpenLayers.Layer.TMS 直接调用本地google map 下载下来的地图切片
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Local Tiles</title>
<link rel="StyleSheet" href="OpenLayers-2.12/theme/default/style.css" type="text/css"/>
<script src="OpenLayers-2.12/OpenLayers.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
<script type="text/javascript">
var map, layer; //complex object of type OpenLayers.Map
//Initialise the 'map' object
function init() {
map = new OpenLayers.Map("map", {
maxExtent: new OpenLayers.Bounds(-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892),
numZoomLevels:18,
maxResolution:156543.0339,
units:'m',
projection: "EPSG:900913",
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
layer = new OpenLayers.Layer.TMS("china",
"http://localhost:9080/nankaiBW/", {
'type' : 'png',
'getURL' : get_my_url
});
map.addLayer(layer);
layer_street = new OpenLayers.Layer.Google(
"Google Streets", // the default
{
numZoomLevels: 18 ,
isBaseLayer:true,
projection: "EPSG:900913",
}
);
map.addLayer(layer_street);
map.addControl(new OpenLayers.Control.Scale());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.LayerSwitcher());
var lonLat = new OpenLayers.LonLat(119.62519, 30.32329);
lonLat.transform(map.displayProjection, map.getProjectionObject());
map.setCenter(lonLat, 5);
//添加标注
var laolat_v=new OpenLayers.LonLat(119.62519, 30.32329);
if (map.displayProjection) {
laolat_v.transform(map.displayProjection,map.getProjectionObject());
}
var markers = new OpenLayers.Layer.Markers( "Markers" );
markers.addMarker(GetMark(laolat_v));
markers.events.register('click', markers, function(){
var popup = new OpenLayers.Popup("marking",
laolat_v,
new OpenLayers.Size(20,20),
"定位!!!",
true);
popup.autoSize=true;
map.addPopup(popup);
});
map.addLayers([markers]);
}
function GetMark(laolat_v){
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('OpenLayers-2.12/img/marker.png',size,offset);
var mk=new OpenLayers.Marker(laolat_v,icon);
//mk.visible=false;
return mk;
}
function get_my_url(bounds) {
var res = this.map.getResolution();
var tileOriginY = this.map.getMaxExtent().top;
var tileOriginX = this.map.getMaxExtent().left;
var x = Math.round((bounds.left - tileOriginX) / (res * this.tileSize.w));
var y = Math.round((tileOriginY - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var path = "" + z + "/" + x + "/" + y + "." + this.type;
var url = this.url;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
</script>
</head>
<body onload="init();">
<div style="width: 800px; height: 500px;border:1px;" id="map"></div>
</body>
</html>
注意 给div 指定宽、高;
相关推荐
openlayers3 调用离线谷歌切片地图 示例
openlayers 调用 arcgis server wms服务简单图解 java net
花费了很久整理的ol2的代码直接可用附带3级切片
openlayers 调用百度地图
arcgis server wms openlayers 调用入门简单入门图解
基于Openlayers和GoogleMap技术的边检Web地理信息系统研究.pdf
利用下载好得离线google地图瓦片数据 结合openlayers接口进行加载显示 纯本地离线好得瓦片数据 运行没问题 当然把瓦片放在服务器上发布出来也是可以的 代码中修改url即可
openlayers-map openlayers-map openlayers-map openlayers-map
OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290
openlayers自定义规则切片浏览实例 包括openlayers.js,Config.js,img,TMS.html
有朋友反应上一次代码无法运行,我看了一下 是html里的路径写死了 然后把ol.js 与 ol.css也放上来了。。。保证能运行!!!
openLayers集成google map ,点标注错位 30 openlayers可以做出谷歌效果的地图吗? 31 用OpenLayers API和类来画点、线、面 32 OGC标准术语介绍WMS、WFS、WCS 35 如何控制地图的放缩 37 openLayers链接WMS的代码探讨 ...
接天地图影像、地形等基础地理信息服务;各类数据的服务器地址,瓦片下载url拼接方法等等
使用openLayers调用geoServer发布的地图数据,并实现放大、缩小、移动、测距、测面积、弹出信息等功能; 需要修改geoServer路径,我的是安装在本地的; 还有部分功能未完成;
map map openlayers例子
利用openlayers加载geoserver wfs服务发布的矢量图层。
此代码为结合openlayers5和谷歌在线地图,可供初学者参考。谷歌影像图需要更改url即可。
OpenLayer调用arcserver的rest服务的pdf讲解,里面有调用的代码以及进行查询、简单分析等;包括一些demo的地址
openlayers3-切换WMSsupermap服务底图 openlayers3-切换WMSsupermap服务底图 openlayers3-切换WMSsupermap服务底图