openlayers---加载离线谷歌地图

本文介绍了如何使用OpenLayers加载离线谷歌地图,并展示了通过KML加载边界线的方法。首先,需要获取离线地图资源并部署到服务器。接着,创建地图中心点,添加离线地图的tile,定义KML图层样式,最后将layer加载到地图上,同时添加城市边界线的tile。提供了一段包含所有步骤的代码示例。
摘要由CSDN通过智能技术生成

首先我们需要一份离线谷歌地图,可以使用太乐地图下载也可以使用bigmap下载。这里不再过多阐述。

把地图资源拷贝到服务器目录下(注:Jboss直接拷贝到war包下一层,Tomcat直接拷贝到webapp目录下,不要直接提交到SVN上,我使用的是Jboss,这样子因为地图资源图片非常多会参与编译,用起来非常不方便),然后启动服务器。

接下来就是使用openlayers加载地图了。我这里使用的jquery,当然你也可以使用其他方式。

1.首先创建地图中心点

var center = ol.proj.transform([106.24947, 37.08698],'EPSG:4326','EPSG:3857')

2.添加使用离线地图的tile

var sffLineMap = new ol.layer.Tile({	
	source:new ol.source.XYZ({
	projection:"EPSG:3857",
	url:'./tile_new/{z}/{x}/{y}.png'//我把地图命名为tile_new放在Jboss的war包下,请注意找正确图片路径以免加载不出来
	})
});

3.定义kml矢量图层的样式(为了展示边界,我选择了kml加载)

//加载宁夏省边界kml
var vector_province = new ol.layer.Vector({
	source: new ol.source.Vector({
	    url: './kml/Nxborder.kml',
	    forma
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值