离线地图最终解决方案

前言

​ 能找到这个帖子的朋友应该是公司要求做离线地图，但是没了解过的吧，我前一段也是公司要求做离线地图但是我没了解过，我就去搜了很多文章，找了很多方案，最后和leader定下来了两个方案，一个是使用一张固定缩放的图片，然后将像素转化为px来做撒点的效果，另一个就是使用瓦片地图框架openlayers来实现瓦片地图，后文将一一介绍两个方法。

• 方法1:用一张固定缩放的图片将像素转化成px来做撒点的效果
• 方法2:用地图框架openlayers来实现瓦片地图

1.使用openlayers来实现瓦片地图

为什么使用 openlayers而不是使用leaflet，原因是我找到的教程很多是openlayers的，我看leaflet的很多功能都是社区做的，这样会增大我的学习量，所以我没有选

openlayers官网

首先解决地图问题

如果你要用原版地图的话，就可以直接使用地图下载工具瓦片地图下载工具，这只支持你下载原版地图，还有就是每个地图公司的坐标系可能存在不一样，本文是用腾讯地图来做的，为什要用腾讯一会儿说。

为什么要用腾讯地图？

因为腾讯地图有一个东西叫做自定义地图样式的工具，据网上帖子来说，你可以通过控制台去抓取到你自定义样式的地图的瓦片文件，然后用一些工具去批量抓取，但是实测百度地图更新了，抓不到了就很烦！

• 用上面的那个地图下载工具下载的地图格式有点问题，你需要给文件夹改成下面这样的格式

地图存放到服务器

如果给本地搞个Tomcat什么的起个服务会很麻烦，这里也是用一个非常快捷的办法直接解决

• http-server

• //首先先去下载
  npm install httpserver
  

• //上一步下载完毕后,在你瓦片的分级目录里面打开cmd直接启动服务
  http-server
  

• 下面会输出一堆东西，不用管他，你只需要知道那个是你的ip+端口就行了,将你的ip+端口复制走，等下要用

使用openlayers加载离线地图,用Vue项目为例

//小声bb : 其实到这里下面的步骤基本就是复制另一个帖子了 这个帖子也给了我很多帮助

openlayers 实战离线地图

安装openlayers

• npm install ol
  

• //或者直接用js引入
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/build/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/css/ol.css">

复制下面代码

<template><div style="width: 100%;height: 100%"><div class="map" id="map"></div><el-card id="popup" class="popup"><div class="popupContainer"></div></el-card></div>
</template><script>
import 'ol/ol.css';
import Map from 'ol/Map';
import Feature from 'ol/Feature';
import VectorSource from 'ol/source/Vector';
import Overlay from 'ol/Overlay';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import View from 'ol/View';
import {transform} from 'ol/proj';
import XYZ from 'ol/source/XYZ'
import Point from 'ol/geom/Point';
import GeoJSON from 'ol/format/GeoJSON';
import {Fill, Stroke, Icon, Style} from 'ol/style'
import markerImg from '@/assets/img/markerIcon.png'
export default {name: "openlayersMap",data () {return {mapObj: null,mapDom: null,mapPointList: [],pointLayerSource:null,pointLayer: null,markerIcon: markerImg}},mounted() {this.initMap()},methods: {// 清除地图 某些情况 地图容器会存在两个 导致地图无法正常显示 这个问题折腾了我半天。// 找了半天官方貌似也没有提供 对应的 api，自己动手了。mapClear (){if (this.mapDom) {this.mapDom.innerHTML = ''this.mapDom = null}},// 初始化地图initMap () {// 先尝试清除this.mapClear()// 获取地图容器this.mapDom = document.getElementById('map')// 初始化地图配置this.mapObj = new Map({target: this.mapDom, // 地图容器view: new View({//设置你的地图初始中心点center: [117.990969, 36.635013], // 地图中心点zoom: 10, // 缩放projection: 'EPSG:4326' // 坐标系})})// 添加一个使用离线瓦片地图的层const offlineMapLayer = new TileLayer({source: new XYZ({//这里的url就是你要改的地方url: 'http://192.168.3.6:8081' +