离线地图开发

概述：

在内网离线环境内，如何进行离线地图开发呢？本文讲述一种基于nginx作为地图服务器，再结合openlayers实现离线地图数据访问的一种可行方案。

一、地图服务器配置

1、地图数据下载

​ 要想实现离线地图开发，得先获得地图数据。可以通过**全能电子地图下载器、太乐地图下载器** 等地图现在软件，下载png格式的瓦片数据。例如，以太乐地图下载器为例。

​ 首先下载并安装下载器，下载地址：https://pan.baidu.com/s/1-_4_b-pX5UqD6kcuXjnk4w （提取码：4nkj ），安装并获得企业版许可。然后，按以下步骤进行下载离线地图数据。

图层类型选择

​

创建任务，并下载

​

下载结果

2、nginx地图服务器配置

​ 准备nginx环境，可以在任意平台下，本文以windows环境为例，下载并解压nginx。将上述步骤中下载的瓦片数据拷贝到数据存放目录中去（可以任意路径），如 D:\nginx-1.18.0\roadmap

瓦片数据存储

​ 准备好地图瓦片数据后，修改nginx配置文件（D:\nginx-1.18.0\conf\nginx.conf），实现图片访问：

#监听9089端口，访问路径：localhost:9089/roadmap/xxx.png
server {
		listen   9089;
		server_name 127.0.0.1;

		location ^~/roadmap{
			alias D:/nginx-1.18.0/roadmap/;
			autoindex on;
			charset utf-8,utf-8;
		}
}

添加完以上配置文件后，启动nginx，在浏览器输入：localhost:9089/roadmap 进行测试。得到各个层级的数据，说明nginx服务器配置成功。

访问测试

二、地图调用

基于vue+openlayers6，实现离线地图调用

<template>
  <div class="demo01">
    <div id='map'></div>
    <Row>
      <Col span="24" type="flex" align="center">
        <Button type="primary" @click="setScale('max')">放大</Button>
        <Button type="primary" @click="setScale('min')">缩小</Button>
      </Col>
    </Row>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

import OSM from 'ol/source/OSM';

import Overlay from 'ol/Overlay';
import {toStringHDMS} from 'ol/coordinate';
import {toLonLat} from 'ol/proj';
import TileJSON from 'ol/source/TileJSON';

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      map: null,
      overlay:null,
      hdms:null
    }
  },
  mounted(){
    this.initMap();
  },
  methods:{
    //初始化地图
    initMap(){
      var gaodeMapLayer = new TileLayer({
        source: new XYZ({
          url: 'http://localhost:9089/roadmap/{z}/{x}/{y}.png'
        })
      });

      this.map = new Map({
        layers: [gaodeMapLayer],
        view: new View({
          center: [103.83405759641674,36.060709432547604],
          projection: 'EPSG:4326',
          zoom: 13
        }),
        target: 'map'
      });

      this.map.on('singleclick', function(evt) {debugger
        var coordinate = evt.coordinate;
        var hdms = toStringHDMS(toLonLat(coordinate));

        this.hdms = hdms;
        alert(coordinate);
        //this.overlay.setPosition(coordinate);
      });
    },
    //手动缩放
    setScale(type){
      let view = this.map.getView();
      let zoom = view.getZoom();
      let scale = type === 'max' ? zoom + 1 : zoom -1;
      view.setZoom(scale);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
  .map {
    height: 100%;
    width: 100%;
  }
  body{
    margin:0 !important;
  }
  #app{
    margin:0 !important;
  }

  #map{
    width: 100%;
    height: 80vh;
    margin-bottom: 10px;
  }
  .demo01 button{
      margin: 0px 5px;
  }
</style>

效果图

附：

1、nginx离线地图服务器：

链接：https://pan.baidu.com/s/17DGUYTfG7BjarXF4RAzC6w
提取码：8dt4
内部包含甘肃省1-13级离线瓦片地图，解压即可运行。

2、项目码云地址：

https://gitee.com/lifuping_net/openlayers-offline-map