Leaflet 简单学习笔记

网页渲染地图：

栅格数据 jpg png tiff -- img canvas

矢量数据-- svg canvas

1、webgis 主流框架：

Leaflet - a JavaScript library for interactive maps

Leaflet — 移动端友好轻量  --图片img 图形svg标签渲染

https://openlayers.org/

openlayers — 国内用户多 api丰富 灵活  --canvas

Mapbox | Maps, Navigation, Search, and Data

Mapbox — 多端 pc  ios 安卓等  渲染精美 api较丰富 --canvas的webGL模式 3d 2.5d

Cesium: The Platform for 3D Geospatial

cesium — 纯3d  建筑信息模型 BIM 适用 --webGL

2、 简单页面

2.1、 引入js和css    项目中用npm  import

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

// 直接安装
npm install --save leaflet@1.7.1

// package.json 添加安装
"dependencies": {
  "leaflet": "^1.7.1"
}
npm install 

// 引入
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

2.2、地图容器 和样式

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

2.3、 实例化

cosnt map = L.map('map').setView([28.873465,120.83762], 13); // 先纬度后经度 13-缩放层级
// 添加{attributionControl: false}去掉版权控件
var map = L.map('map', {attributionControl: false}).setView([28.873465,120.83762], 13);
// 另一种写法
cosnt map = L.map('map',{
    center:[28.873465,120.83762], 
    zoom: 13, 
    crs:L.CRS.EPSG4326
});

2.4 加载天地图

国家地理信息公共服务平台 天地图

天地图API

天地图是我国地理信息公共平台所提供的包含矢量 ， 影像，地形等在内的多种地图服务，国内webgis使用最广泛的基础底图。

申请token 调用服务

cosnt map = L.map('map',{
    center:[28.873465,120.83762], 
    zoom: 13, 
    crs:L.CRS.EPSG4326 // 坐标系 L.CRS.EPSG4326--wgs84 使用天地图需要
});
// 申请的密钥
const tdt_token = ''
// xyz方式
const tdt_url = "https://t0.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk="
// wmts方式
const wmts_url = "http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk="
cosnt layer = L.tileLayer(tdt_url + tdt_token,{
    zoomOffset: 1, // 缩放层级偏移量
    tileSize: 256, // 切片尺寸大小 像素
    maxZoom: 18, // 最大缩放层级
})
// wmts方式 注意纬度在前经度在后 所以wmts_url 对应的TILEROW={y}&TILECOL={x} 是反过来 
// 球面墨卡托投影 经纬度投影--4326 将TILEMATRIXSET=w 改为TILEMATRIXSET=c img_w改为img_c
cosnt layer = L.tileLayer(wmts_url + tdt_token,{
    zoomOffset: 1, // 缩放层级偏移量
    tileSize: 256, // 切片尺寸大小 像素
    maxZoom: 18, // 最大缩放层级
})
layer.addTo(map)

加载poi

const myicon = L.icon({
    iconUrl: "",
    iconSize: [30, 30] // 宽高
})
poi.forEach(p => {
    L.marker([p.lat , p.lon],{icon: myicon})
        .bindPopup(
            "<div>"+p.name+"</div>"
        )
        .addTo(map)
})

加载行政区数据 geojson

const xzqLayer = L.geoJson( jinhua,{
    fillColor:"", // 填充样式
    color:"", // 边线颜色
    fillOpacity: 1,  // 填充透明度
    onEachFeature: onEachFeature ,//回调 每一个Feature
})
xzqLayer.addTo(map)
// 获取边界 定位
const bound = xzqLayer.getBounds()
map.fitBounds(bound)
function onEachFeature(e){
    const icon = L.divIcon({
        className: "",
        html: "<div>" + e.properties.name + "<div>",
    })
    L.marker(e.properties.center.reverse(),{icon:icon }).addTo(map)
}