使用 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 指定宽、高；
相关推荐
这个示例专注于使用OpenLayers 3调用离线谷歌切片地图，这是一个非常实用的功能，特别是对于那些无法连接到互联网或者希望在本地环境中运行地图应用的用户。 首先，我们需要了解OpenLayers 3的基本概念。OpenLayers...
在本文中，我们将深入探讨如何使用OpenLayers调用ArcGIS Server提供的WMS（Web Map Service）服务。WMS是一种开放标准，允许用户请求地理空间数据并以图像的形式返回，这在构建交互式地图应用时非常有用。ArcGIS ...
3. **创建OpenLayers地图**: 初始化一个OpenLayers Map实例，设置视图、投影等属性。 4. **添加ArcGIS图层**: 创建一个OpenLayers的TileLayer，设置其源为ArcGIS REST服务URL，并在URL中附带token参数。 5. **监听...
OpenLayers 是一个流行的开源JavaScript库，用于在网页上创建交互式的地图应用。WMS（Web Map Service）是一种标准的OGC（Open Geospatial Consortium）协议，它允许客户端请求地图图像，而服务器则根据请求参数生成...
### OpenLayers与ArcGIS Server REST API的集成及应用 #### OpenLayers简介 OpenLayers是一款开源的JavaScript库，用于显示地理图层和矢量数据。它无需服务器端支持即可运行，并且是免费软件，由开放源代码社区开发...
var map = new OpenLayers.Map('mapDiv'); var layer = new OpenLayers.Layer.WMS("名字", "URL", {layers: '图层名'}, {maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)}); map.addLayer(layer); map....
此外，为了提供良好的用户体验，还需要考虑性能优化，例如使用切片技术预加载地图数据，或者利用OpenLayers的缓存机制。 总之，OpenLayers 3和GeoServer的结合为我们提供了强大的地图展示和交互能力。通过深入理解...
然后，OpenLayers的请求指向你的代理服务地址，如`/proxy/your_mapservice_url`。 4. **测试**: 完成上述配置后，重新加载你的OpenLayers应用，检查地图是否正常显示。如果仍然有问题，检查浏览器的开发者工具中的...
下面将详细解释如何使用OpenLayers调用GeoServer发布的地图以及实现地图的基本功能。 首先，GeoServer是OGC（开放地理空间联盟）标准的服务器实现，它支持WMS（Web Map Service）和WFS（Web Feature Service）等...
以上就是关于"WMS协议下，OpenLayers调用GIS"的相关知识，通过OpenLayers与WMS的结合，可以方便地在Web应用中集成和展示地理信息。在实际项目中，还需要考虑性能优化、图层叠加、样式定制、权限控制等多个方面，以...
OpenLayers 是一个流行的开源JavaScript库，用于在Web浏览器中创建交互式地图。它支持多种地图服务，如WMS、WMTS等，并且能够处理多种地理空间数据格式。在本文中，我们将深入探讨如何使用OpenLayers实现地图测距和...
2. **地图容器**: 创建地图容器是OpenLayers的基本步骤，通过`new ol.Map()`初始化一个地图对象，并指定容器ID。 3. **图层添加**: 地图由多个图层组成，例如瓦片图层（TileLayer）、图像图层（ImageLayer）等。...
接着，使用proj4定义新的坐标系，这通常涉及EPSG代码，例如EPSG:4326代表WGS84坐标系，而EPSG:3857是Web Mercator坐标系，常用于在线地图服务如Google Maps和OpenStreetMap。然后，通过iClient for OpenLayers的API...
在实际操作过程中可能会遇到一些问题，比如OpenLayers调用WMTS服务时出现的问题。根据描述，当TileMatrix参数不是“EPSG:4326:1”的格式时，可能会出现问题。解决方法是在配置时明确指定该格式，以避免因解析错误...
5. **集成到Web应用**：最后，开发人员可以在WebGIS应用中集成这些瓦片，通过JavaScript库（如OpenLayers、Leaflet等）进行调用，实现动态加载和缩放地图功能。 通过理解地图图片切片工具的工作原理和使用方法，...
以下是一段典型的使用ASP.NET结合OpenLayers调用TileCache服务的示例代码： ```html <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MapServer.aspx.cs" Inherits="ASPNETAJAXDemo.OpenLayersWebGIS....
这个“WMTS.rar_arcgis_wmts”压缩包显然是一个与ArcGIS和WMTS相关的项目，其中包含了利用HTML来调用天地图WMTS切片服务的代码示例。现在，我们将深入探讨这些主题及其相关知识点。 **1. Web Map Tile Service ...
8. **地图库**：如果项目对地图操作有更复杂的需求，如缩放、平移等，可以考虑使用开源的地图库，如OpenLayers、Mapbox GL JS或Google Maps API，它们提供了丰富的地图操作和自定义选项。 通过上述步骤，我们可以...
天地图通常包含多层图像切片，通过Canvas，开发者可以动态地加载和渲染这些切片，实现平移、缩放等交互效果。 再者，HTML5的Web Storage（包括localStorage和sessionStorage）允许网页存储大量数据，这对于缓存地图...
适用于Mapbox GL JS，Android，iOS，Leaflet，OpenLayers，通过WMTS的GIS等的地图图块服务器。开始使用确保已安装Node.js版本10 （运行node -v它应该输出类似v10.17.0 ）。 使用npm安装矢量图块的服务器端栅格渲染...