Vue+Proj4Leaflet实现地图瓦片(Nginx代理本地地图瓦片为网络url)加载并实现CRS投影转换(附资源下载)

场景

Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)：

Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)_offline map maker-CSDN博客

Leaflet快速入门与加载OSM显示地图：

Leaflet快速入门与加载OSM显示地图_leaflet osm-CSDN博客

Vue+Openlayers+proj4实现坐标系转换：

Vue+Openlayers+proj4实现坐标系转换_openlayer proj4-CSDN博客

结合上面的文章，如果要在Vue中使用leaflet加proj4实现加载瓦片地图并且可以设置/转换投影。

并且这个瓦片地图文件不再是本地磁盘路径的url，而是使用Nginx将图片png代理成网络url的形式。

切割的OSM的地图瓦片文件为EPSG3857,文件路径如下

将地图瓦片png文件使用nginx代理成网络服务

Proj4Leaflet插件

文档、API、示例地址：

Proj4Leaflet - Support all projections and CRS in Leaflet

https://github.com/kartena/Proj4Leaflet

当然Proj4Leaflet的功能不仅是加在瓦片tile并设置投影，下面只演示加载瓦片tile的示例。

注：

博客：
霸道流氓气质-CSDN博客

实现

Vue中Proj4Leaflet插件的安装与使用

确保项目中已经安装proj4并且版本与官网说明的一致。

npm install proj4 --save

然后安装Proj4Leaflet

npm install --save proj4leaflet

页面引入依赖

import "proj4leaflet";

下面是官方提供的使用示例：

构造crs投影

var crs = new L.Proj.CRS('EPSG:3006','+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',{resolutions: [8192, 4096, 2048, 1024, 512, 256, 128],origin: [0, 0]})

然后创建地图并设置crs

var map = new L.Map('map', {crs: crs});L.tileLayer('http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png', {maxZoom: crs.options.resolutions.length,minZoom: 0,continuousWorld: true,attribution: 'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>, Imagery © 2013 <a href="http://www.kartena.se/">Kartena</a>'
}).addTo(map);

Vue中使用Proj4Leaflet实现加载OSM在线url并设置CRS

参考官网的示例以及上面加载OSM的博客，实现加载OSM的在线瓦片url并设置crs为epsg:4626

新建地图容器

<template><div id="map" class="map"></div>
</template>

引入所需依赖

import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "proj4leaflet";

然后在mounted中执行初始化地图方法

  mounted() {this.initMap();},

方法具体实现

initMap() {// 设置地图视图var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{maxZoom: 19,attribution: "© OpenStreetMap contributors",});// 初始化地图并添加图层var map = L.map("map").setView([51.505, -0.09], 13);osm.addTo(map);// 定义一个从EPSG:3857到EPSG:4326的转换var wgs84 = new L.Proj.CRS("EPSG:4326","+title=Long/lat WGS 84 +ellps=WGS84 +datum=WGS84 +units=degrees +no_defs",{origin: [0, 0],resolutions: [],});var wgs84Bounds = L.bounds([-180, -90], [180, 90]);// 设置地图的CRS为EPSG:4326map.options.crs = wgs84;// 如果有必要，可以设置地图的边界map.setMaxBounds(wgs84Bounds);},

这里EPSG:4326的proj4的text可以从如下网站获取

https://epsg.io/4326

运行并测试效果

因为网络原因，这里部分图片请求不到。

Nginx实现代理地图瓦片png目录文件为网络url

上面加载的在线osm的url，加载受网络限制。

如果本地已经拿到osm的png瓦片目录文件，如何使用nginx代理成可通过网络请求的url

修改nginx的配置文件，添加如下配置

 server {listen       19001;    #后台访问端口server_name  localhost_19001;location / {root   D:/SoftWare/Nginx/nginx-1.12.2-gis/osm/;index  index.html index.htm;add_header Access-Control-Allow-Origin *;}error_page   404  http://自己的ip:19001/default.png;}

这里的端口自己指定，root后面的路径对应自己瓦片png的目录，下面error_page为瓦片请求不到时的默认图片。

将其放在上面root配置的路径的根目录下。

然后在浏览器中访问任意目录下的png文件测试

http://127.0.0.1:19001/9/419/197.png

显示成功则配置通过。

Vue中使用Proj4Leaflet加载Nginx代理的地图瓦片png服务

那么上面加载osm在线服务url的就可以修改为如下

initMap() {// 设置地图视图var osm = L.tileLayer("http://127.0.0.1:19001/{z}/{x}/{y}.png",{maxZoom: 12,minZoom: 9,attribution: "公众号:霸道的程序猿",});// 初始化地图并添加图层var map = L.map("map").setView([35.5, 120.5], 10);osm.addTo(map);// 定义一个从EPSG:3857到EPSG:4326的转换var wgs84 = new L.Proj.CRS("EPSG:4326","+title=Long/lat WGS 84 +ellps=WGS84 +datum=WGS84 +units=degrees +no_defs",{origin: [0, 0],resolutions: [],});// 设置地图的CRS为EPSG:4326map.options.crs = wgs84;},

测试加载效果