场景
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;
},
测试加载效果
完整代码、png瓦片资源、nginx、nginx配置文件打包下载
https://download.csdn.net/download/BADAO_LIUMANG_QIZHI/89491681
