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

谷歌地图部署

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

如何使用Openlayers 3加载谷歌离线地图_第1张图片

使用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为地图上的文字。

//定义地图服务URL
var 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页面结构


<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>

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

如何使用Openlayers 3加载谷歌离线地图_第2张图片


你可能感兴趣的:(GIS,OpenLayers3)