1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 如何使用Openlayers 3加载谷歌离线地图

如何使用Openlayers 3加载谷歌离线地图

时间:2019-02-21 14:28:23

相关推荐

如何使用Openlayers 3加载谷歌离线地图

谷歌地图部署

说明:使用地图下载工具下载的谷歌离线地图大致如下结构,使用合适的WEB服务器发布地图服务。

使用Openlayers 3调用地图服务

说明:这里使用ol.source.XYZ(更多语法请参考 这儿.)来调用地图服务。

//定义一个地图调用函数var BaseMapLayer = function(options) {var mapExtent = [179.92574, 74.87274, -77.24223, -45.44708];var layer = new ol.layer.Tile({extent: ol.proj.transformExtent(mapExtent, "EPSG:4326", "EPSG:3857"),source: new ol.source.XYZ({url: options.url,tilePixelRatio: 1,minZoom:2,maxZoom:12})});return layer;};

说明:使用ol. View创建负责地图的中心点,放大,投影之类的设置。

//定义视图var view = new ol.View({center: ol.proj.fromLonLat([95.23, 35.33]),zoom: 4,minZoom: 2,maxZoom: 12});

说明:此处定义影响地图以及地形地图的服务地址,lebel为地图上的文字。

//定义地图服务URLvar sateliteopt = {url: defautopt.maphost + 'sate/satellite_en/{z}/{x}/{y}.jpg'},satelitelebel = {url: defautopt.maphost + 'sate/overlay_s/{z}/{x}/{y}.png'},roadmapopt = {url: defautopt.maphost + 'terrain/terrain/{z}/{x}/{y}.jpg'},roadlebel = {url: defautopt.maphost + 'terrain/overlay/{z}/{x}/{y}.png'};

说明:此处使用ol.layer.Group创建图层组。

//影像地图组var sate = new ol.layer.Group({layers: [new BaseMapLayer(sateliteopt),new BaseMapLayer(satelitelebel)]});//地形图层组var road = new ol.layer.Group({layers: [new BaseMapLayer(roadmapopt),new BaseMapLayer(roadlebel)]});

说明:此处使用ol.Map创建地图。

//创建地图var map = new ol.Map({view: view,layers: [sate, road],target: 'map'});

HTML页面结构

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>openlayers3调用谷歌离线地图</title><link rel="stylesheet" href="libs/openlayers3/ol.css" /><script type="text/javascript" src="libs/openlayers3/ol.js"></script></head><body><div id="map"></div><script>/* 此处为上面分开所述的javascript相关内容。*/</script></body></html>

说明:访问页面效果图如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。