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())
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值