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:4326
      map.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:4326
      map.options.crs = wgs84;
    },

测试加载效果