Leaflet

yb305小白

已于 2023-07-13 15:22:58 修改

阅读量342

点赞数

文章标签： leaflet

于 2023-07-13 10:53:02 首次发布

原文链接：https://leafletjs.cn/examples/quick-start/

版权

一、简介

Leaflet是一个开源并且对移动端友好的交互式地地图Javascript库，它的大小仅仅只有42kB of JS,并且拥有绝大部分开发者所需要的地图特性。

Leaflet简单、高效易用。可高效运行在桌面和移动平台，拥有大量的扩展插件、简单易用的API和测试案例。

二、leaflet 引入方式

1.引用在线资源库

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
     crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
     integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
     crossorigin="">
	</script>

2.通过npm安装

npm install leaflet --save
或
yarn add leaflet --save

三、应用

1.创建地图，初始化地图并设置其视图坐标和缩放级别

var map = L.map('map').setView([27.249374,117.624815],15);

2.添加标记点

var marker = L.marker([27.249374,117.624815]).addTo(map)

3.添加折线

var polyline = L.polyline([
		[27.249374,117.624815],
		[27.268002,117.60406]
	], {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());

· 4.添加多边形

var polygon = L.polygon([27.249374,117.624815],
	[27.255871,117.62054],
    [27.253658,117.615733]
]).addTo(map);

5.添加圆形

var circle = L.circle([27.249374,117.646815], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);

6.添加弹出窗口

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

var popup = L.popup()
    .setLatLng([27.255871,117.62054])
    .setContent("I am a standalone popup.")
    .openOn(map);

7.绑定事件

地图点击事件

function onMapClick(e){
    alert("点击地图"+e.latlng);
}
map.on('click',onMapClick);

标记点、多边形点击事件

marker.on('click', function () {alert("点击吧");}
polygon.on('click', () => { alert("点击吧");});

四、源码

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <style>
      #map {
        height: 800px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.map('map').setView([27.249374, 117.624815], 15);
      var marker = L.marker([27.249374, 117.624815]).addTo(map);
      marker.bindPopup('<b>Hello world!</b><br>I am a popup.').openPopup();
      var polyline = L.polyline(
        [
          [27.249374, 117.624815],
          [27.268002, 117.60406]
        ],
        { color: 'red' }
      ).addTo(map);
      var polygon = L.polygon([
        [27.249374, 117.624815],
        [27.255871, 117.62054],
        [27.253658, 117.615733]
      ]).addTo(map);
      polygon.on('click', () => {
        onPolygonClick();
      });
      var circle = L.circle([27.249374, 117.646815], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
      }).addTo(map);
      circle.bindPopup('I am a circle.');
      function onPolygonClick(e) {
        var popup = L.popup()
          .setLatLng([27.255871, 117.62054])
          .setContent('<h3>我是弹出窗口</h3><div>你好</div>')
          .openOn(map);
      }
    </script>
  </body>
</html>

五、效果