Leaflet.js常见问题

 

Leaflet官方API：https://leafletjs.com/reference-1.3.2.html#map-example

 

1、Leaflet使用自定义底图

npm install leaflet.chinatmsproviders
或者引入静态js包：leaflet.ChineseTmsProviders.js

在代码中使用：

var map = L.map('map', {
    center: [31.59, 120.29],
    zoom: 12
});

L.tileLayer.chinaProvider('TianDiTu.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map);
L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion',{maxZoom:18,minZoom:5}).addTo(map);

支持多种底图

插件下载地址：https://github.com/htoooth/Leaflet.ChineseTmsProviders

 

2、Leaflet标记Marker旋转

npm install leaflet-rotatedmarker
或者引入静态js包：leaflet.rotatedMarker.js

在代码中使用：

L.marker([48.8631169, 2.3708919], {
    rotationAngle: 45,
    rotationOrigin:'center center'
}).addTo(map);

 

插件下载地址：https://github.com/bbecquet/Leaflet.RotatedMarker

 

3、leaflet添加文字标注、自定义图形

//文字标注
let textIcon = L.divIcon({
  html: '我是文字标注',
  className: "map-text",
  iconAnchor: [43, -4],
  iconSize: [86, 22]
});

//动态文字标注
let name = '我是文字标注';
let colorClass = 'error';
let textIcon = L.divIcon({
  html: name,
  className: "map-text map-text-" + colorClass,
  iconAnchor: [6 * (name.length + 1) + 1, -4],
  iconSize: [12 * (name.length + 1) + 2, 22]
});

//自定义图形标注，通过css绘制出图形
let angleIcon = L.divIcon({
  html: "",
  className: "map-angle",
  iconAnchor: [0, 9],
  iconSize: [6, 5]
});