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]
});