leaflet：入门基础（三）之加载数据

前言

    上一篇 leaflet：入门基础（二）  讲了如何加载底图

    这一篇将讲解如何加载自己已有的数据，包括本地数据、地图服务（通过网络，给用户提供地图信息的一种数据服务方式）

1：加载Geojson数据

    注：如果手上有shp数据，可以通过mapshaper转换得到geojson数据（使用说明[链接]）

    👉 arcgis（10.4以下的版本）工具箱中的要素转json工具导出的是EsriJson格式（openlayers可以加载该格式），arcgis pro、arcgis desktop10.5及以上支持导出geojson格式

    👉 [区分EsriJson与标准Geojson]

var map = new L.Map('map', {
    center: new L.LatLng(39.86, 116.45),
    zoom: 10
});

var baseLayers = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

var geoJSON = { // 填入此处 };

var layerGeo = L.geoJSON(geoJSON, {}).addTo(map);

    2020年9月更新：如果json文件数据量过大，不方便填入的话，可以用 ajax读取本地json的方法 [链接]，但发现会遇到跨域问题（👉 AJAX 是不能跨域的） ，解决方法一是改用 jsonp（json with padding） [教程]，不过因为要对json文件进行小小修改，所以觉得还不是最理想的方法...

  📍 在页面上有三种资源是可以与页面本身不同源的：1️⃣ js脚本 2️⃣ css样式文件 3️⃣ 图片

    jsonp 由两部分组成：回调函数和数据，回调函数是当响应数据到达时调用的函数，在URL中指定；数据就是请求返回的数据。

    而 jsonp 就是利用了script标签的src属性是没有跨域的限制的，从而达到跨域访问的目的，因此它的最基本原理就是：动态添加一个<script>标签来实现 [来源]

    2020年11月更新：解决方法二是将html页面和geojson文件部署到web服务器上（注意文件存放在同一web路径下）[链接]  [IIS服务器 教程] [IIS跨域配置]

  📍 geojson格式的文件还得在服务器中添加对应消息内容类型MIME（有些服务器要通过添加扩展支持某些格式）。IIS是在MIME类型中，添加application/geojson [教程]。node.js直接在创建服务器代码中添加这个类型映射。

    链接：🧰 ajax读取geojson  🧰 async读取geojson

    2022年10月更新：解决办法三是将geojson文件内的数据作为一个JS对象导入，具体参见 [链接] 

    如果对数据渲染样式有要求也可以进行修改

var myStyle = {
    "color": "green",
    "weight": 3,
    "opacity": 0.5,
};

var layerGeo = L.geoJSON(geoJSON, {style: myStyle}).addTo(map);

数据来源： 地图选择器 

    注：leaflet 加载 GeoJSON 统一默认使用 WGS84（有的说法是只能读取经纬度），若要使用投影坐标系要借助Proj4Leaflet  [链接]，或设置L.geoJson的coordsToLatLng属性

async function load_geojson() {
    let url = './json/3857广州.geojson';
    const response = await fetch(url);
    const json_obj = await response.json();
    // console.log(json_obj);
    return json_obj;
}

load_geojson().then(function(geojsonData){
    L.geoJson(geojsonData, {
        coordsToLatLng: function (coords) {
            return L.CRS.EPSG3857.unproject(L.point(coords[0], coords[1]));
        }
    }).addTo(map);
});

    Projection：project地理转平面坐标，unproject平面转地理坐标

2：加载TMS服务

    安装 geoserver [链接]，写该篇博客时geoserver最新版本为 2.17.1，但并没有找到以Windows安装程序下载，而在 2.15.1 找到了可执行程序版[链接]。GeoServer项目丢失了用于构建安装程序的Windows构建服务器，所以 2.15.1 是目前最后一个拥有windows installer的版本，为了避免与Tomcat端口号冲突要修改GeoServer的端口号 [链接]。另一种安装方式：基于Tomcat的GeoServer安装 （链接：如何启动Tomcat

    同时为了geoserver支持发布TMS服务还要下载一个同版本的 geoserver-2.15.1-vectortiles-plugin.zip， 如果用的是windows installer，则插件解压出来放入geoserver安装目录/webapps/geoserver/WEB-INF/lib；如果用的是war，则放入tomcat安装目录/webapps/geoserver/WEB-INF/lib

    官方说明文档：Vector Tiles — GeoServer 2.21.x User Manual

    教程案例：TMS in Leaflet 

    geoserver 发布TMS切片 [链接] 。 这里用了一个广州天河区路网 选用的坐标系 EPSG：900913 

    遇到的问题：发布好后，用 leaflet 调用却没有显示，最后了解到是跨域问题。详见另一篇文章 [点击跳转] 

    导入其它需要的js文件

<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>

    加载底图

var map = new L.Map('map', {
    center: new L.LatLng(23.16,113.35),
    zoom: 12,
    crs: L.CRS.EPSG900913
});

var baseLayers = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    maxZoom: 20 
}).addTo(map);

    获得 geoserver 发布的数据地址（GeoServer首页右侧点击TMS，进去后查询），加载矢量切片

var url = "http://localhost:8081/geoserver/gwc/service/tms/1.0.0/cite%3Atianhe@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf";
    
var vectorTileOptions = {
    layerURL: url,
    rendererFactory: L.canvas.tile,           
    tms: true, // 如果是 TMS 切片，则需要开启，或是构建url时使用/{z}/{x}/{-y}
}; 

var vectorTile = new L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);

    💡 必须设置tms:true的原因是：若为tms切片，则会进行y翻转，使得瓦片编号时是以左下角为原点，因而y的编号会不同于以左上角为原点的切片编号。 

    还可以设置显示样式，比如这里我希望把 车陂路 凸显出来

var vectorTileOptions = {
    '...', // 与上面一致，这里不重复写了
    vectorTileLayerStyles: {      
        'tianhe': function (properties, zoom) { // tianhe 为切片图层名称          
            var name = properties.Name; // 获取图层的 Name 属性
            if( name == "车陂路-道路"){
                return {            
                    weight: 5,            
                    color: 'red',       
                }      
            }else{
                return {            
                    weight: 1,            
                    color: 'green',       
                }      
            }
        }    
    },
}; 

    还可以添加一个鼠标事件

var vectorTileOptions = {
    '...', // 与上面一致，这里不重复写了
    interactive: true,	//开启VectorGrid触发mouse/pointer事件
}; 

vectorTile.on('mouseover', function (e) {    
    var properties = e.layer.properties;    
    L.popup()
     .setContent(properties.Name)
     .setLatLng(e.latlng)
     .openOn(map);  
});

3：加载WMS服务

    参数详情：Documentation - Leaflet - a JavaScript library for interactive maps 

    教程案例：WMS in Leaflet

// 网上资源
var topographyAndPlaces = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    layers: 'TOPO-WMS'
}).addTo(map);

// 加载GeoServer发布的WMS
var url = 'http://localhost:8081/geoserver/工作区/wms'
var wmsLayer = L.tileLayer.wms(url,{
    layers: '图层名',
    //crs: L.CRS.EPSG3857, // 坐标系
    //transparent: true,
    //opacity: 0.7, // 透明度
}).addTo(map);

    示例链接：leaflet加载高德地图和Geoserver的WMS服务_HPUGIS的博客-CSDN博客_leaflet加载高德地图

1. If a WMS service has defined several layers, then a request for a map image can refer to more than one layer.

var topographyAndPlaces = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    layers: 'TOPO-WMS,OSM-Overlay-WMS'
}).addTo(map);

2. Leaflet supports very few coordinate systems: CRS:3857, CRS:3395 和 CRS:4326 (See the documentation for L.CRS). If your WMS service doesn’t serve images in those coordinate systems, you might need to use Proj4Leaflet to use a different coordinate system in Leaflet. 

    Pro4j 插件：GitHub - kartena/Proj4Leaflet: Smooth Proj4js integration with Leaflet.

    Proj 参数查询：EPSG.io: Coordinate Systems Worldwide

<script src="./proj4.js"></script>
<script src="./proj4leaflet.js"></script>

    

4：加载WMTS服务

    leaflet本身并不支持WMTS服务，需要借助 leaflet-tilelayer-wmts 插件实现

    插件地址：https://github.com/alexandre-melard/leaflet.TileLayer.WMTS

<script src="./leaflet-tilelayer-wmts.js"></script>

// 加载GeoServer发布的WMTS
var url = 'http://localhost:8081/geoserver/gwc/service/wmts'
var wmtsLayer= new L.TileLayer.WMTS( url ,{
    layer: '工作区:图层名',
    tilematrixSet: "EPSG:4326",
    format: "image/png",
});

    参考链接：Leaflet加载GeoServer发布的WMTS地图服务(附源码下载) － 小专栏

    其他：leaflet加载ArcGISServer的WMTS服务

总结

    TMS：L.tileLayer 或者 添加插件使用 L.vectorGrid

    WMS：L.tileLayer.wms

    WMTS：L.tileLayer 或者 添加插件使用 L.TileLayer.WMTS

系列

    leaflet：入门基础（一）

    leaflet：入门基础（二）之加载图层

    leaflet：入门基础（四）之加载图标

    leaflet：入门基础（五）之结束篇

参考

    矢量切片(Vector tile)

    LeaFlet加载矢量切片

    GeoServer发布矢量切片及其调用方式(mapbox/leaflet)

    Leaflet 加载Mapbox studio pbf格式矢量切片（一）

---