文章目錄

• • • 概述：
    • 一、地圖服務器配置
    • • 1、地圖數據下載
      • 2、nginx地圖服務器配置
    • 二、地圖調用
    • 附：
    • • 1、nginx離線地圖服務器：
      • 2、項目碼云地址：

概述：

在內網離線環境內，如何進行離線地圖開發呢？本文講述一種基于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) {debuggervar 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

總結

以上是生活随笔為你收集整理的离线地图开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。