leaflet入门

import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'

创建地图

const map = L.map('map', { attributionControl: false }).setView([29.04656, 112.86254], 8)

加载底图

L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}').addTo(map)

marker标记

L.marker([29.04656, 112.86254]).addTo(map)

Tooltip 工具提示

marker.bindTooltip("my tooltip text").openTooltip()

Popup 弹出窗口

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup()

Polyline 折线

const latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
]
const polyline = L.polyline(latlngs, {color: 'red'}).addTo(map)
// zoom the map to the polyline
map.fitBounds(polyline.getBounds())

Polygon 多边形

const latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]]
const polygon = L.polygon(latlngs, {color: 'red'}).addTo(map)
map.fitBounds(polygon.getBounds())

Circle 圆形

const circle = L.circle([50.5, 30.5], {radius: 200}).addTo(map)
map.fitBounds(circle.getBounds())