leaflet学习笔记

雲墨知秋

已于 2023-04-02 23:46:34 修改

阅读量634

点赞数

分类专栏： Leaflet 文章标签：学习前端 javascript

于 2023-01-14 22:44:41 首次发布

本文链接：https://blog.csdn.net/m0_58175658/article/details/128690330

版权

Leaflet 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

leaflet学习笔记(一)

快速开始

安装方式

1.官网下载对应的js、css文件

2.可使用npm install leaflet安装，模块导入
在这里插入图片描述

基本入门

目前学习主要是通过文件导入的方式

  <link rel="stylesheet" href="../leaflet/leaflet.css">
  <script src="../leaflet/leaflet.js"></script>

 #map {
      height: 300px;
    }

创建实例

  var map = L.map('map').setView([30.550317, 114.309043], 13);
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { //地图瓦片链接，由于墙一般加载不出来
    maxZoom: 19, //缩放级别  最大缩放
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' //右下角版权属性部分，一个a标签展示效果
  }).addTo(map); //addTo添加到map对象

由于加载问题，建议加载国内地图源

  //高德地图加载
  let GaoDeLayer = L.tileLayer(
    "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
      attribution: '&copy; 高德地图',
      maxZoom: 13,
      minZoom: 3,
      subdomains: "1234",
      zoom: 3
    });
  map.addLayer(GaoDeLayer);

这里介绍下map的属性

映射状态选项(map下的属性)

选择	类型	违约	描述
`crs`	`CRS`	`L.CRS.EPSG3857`	要使用的坐标参考系。如果您不是，请不要更改此设置确定这意味着什么。
`center`	`LatLng`	`undefined`	地图的初始地理中心
`zoom`	`Number`	`undefined`	初始地图缩放级别
`minZoom`	`Number`	`*`	地图的最小缩放级别。如果未指定，并且地图中至少有一个`网格`图层或`切片图层`，将改用他们最低的选项。`minZoom`
`maxZoom`	`Number`	`*`	地图的最大缩放级别。如果未指定，并且地图中至少有一个`网格`图层或`切片图层`，将改用他们最高的选项。`maxZoom`
`layers`	`Layer[]`	`[]`	最初将添加到地图的图层数组
`maxBounds`	`LatLngBounds`	`null`	设置此选项后，地图会将视图限制为给定的视图地理边界，如果用户尝试平移，则会将用户弹回视野外。若要动态设置限制，请使用 `setMaxBounds` 方法。
`renderer`	`Renderer`	`*`	在地图上绘制矢量图层的默认方法。默认情况下为 L`.SVG` 或 `L.Canvas`，具体取决于浏览器支持。

添加标记、圆等图形

  //添加标记
  //图上添加一个标记
  var marker = L.marker([30.550317, 114.309043]).addTo(map);
 


  //添加矩形
  var circle = L.circle([30.570317, 114.319043], {
    color: 'red', //边框色
    fillColor: '#f03', //填充色
    fillOpacity: 0.5, //透明度
    radius: 500 //半径
  }).addTo(map);

添加弹窗

注意，当页面刷新时，会弹出最后渲染的弹窗

bindPopup（弹窗中内容，解析为html）

openPopup()打开弹窗

 //添加弹窗
  marker.bindPopup("<b>Hello world!</b><br>黄鹤楼边上.").openPopup();

有的时候，弹窗无需依附对象

但是要注意，需要最后渲染，否则渲染不出来，具体原因查看文档

页面显示弹窗位置，而不是设置的中心位置

 //弹窗
  // 弹出窗口用作图层，不依附与标记等对象
  //在这里我们使用而不是因为它在打开新弹出窗口时处理以前打开的弹出窗口的自动关闭，这对可用性有好处。openOnaddTo
  var popup = L.popup()
    .setLatLng([30.450317, 114.309043])
    .setContent("I am a standalone popup.")
    .openOn(map);

事件

 //处理事件

  //事件
   function onMapClick(e) { //e为对象，触发事件的对象
     alert("You clicked the map at " + e.latlng);
     console.log(e); //对象本身有很多可以使用的属性，如latlng是经纬度layerpoint当前点击位置等
   }

   map.on('click', onMapClick); //注册事件


  //一下代码实现在点击位置显示弹窗
  var popup = L.popup();

  function onMapClick(e) {
    popup
      .setLatLng(e.latlng) //给弹窗添加坐标
      .setContent("<b>Hello world!</b><br>You clicked the map at " + e.latlng.toString()) //弹窗内容，可以写html代码，能够渲染
      .openOn(map);
  }

  map.on('click', onMapClick);

完整实例

<body>
  <div id="map"></div>
</body>
<script>
  //报错
  //Refused to apply style from 'http://127.0.0.1:3445/leaflet/leaflet.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
  //可能是因为文件打包问题，解决方法：导入时注意文件路径，以及注意使用方式，js文件引入则无需启动服务器，若vue启动则需要
  //使用npm下载对应的模块
  //[30.550317,  114.309043], 13对应纬度、经度.经纬度位置相反

  var map = L.map('map').setView([30.550317, 114.309043], 13);
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { //地图瓦片链接，由于墙一般加载不出来
    maxZoom: 19, //缩放级别  最大缩放
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' //右下角版权属性部分，一个a标签展示效果
  }).addTo(map); //addTo添加到map对象
  //高德地图加载
  let GaoDeLayer = L.tileLayer(
    "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
      attribution: '&copy; 高德地图',
      maxZoom: 13,
      minZoom: 3,
      subdomains: "1234",
      zoom: 3
    });
  map.addLayer(GaoDeLayer);

  //添加标记
  //图上添加一个标记
  var marker = L.marker([30.550317, 114.309043]).addTo(map);
  //添加弹窗
  marker.bindPopup("<b>Hello world!</b><br>黄鹤楼边上.").openPopup();


  //添加矩形
  var circle = L.circle([30.570317, 114.319043], {
    color: 'red', //边框色
    fillColor: '#f03', //填充色
    fillOpacity: 0.5, //透明度
    radius: 500 //半径
  }).addTo(map);
  //添加弹窗
  circle.bindPopup("<b>Hello world!</b><br>圆形.").openPopup();

  //弹窗在重新渲染时显示最后一个加载上去的弹窗




  //其他的图形查看官方实例即可




  //弹窗
  // 弹出窗口用作图层，不依附与标记等对象
  //在这里我们使用而不是因为它在打开新弹出窗口时处理以前打开的弹出窗口的自动关闭，这对可用性有好处。openOnaddTo
  var popup = L.popup()
    .setLatLng([30.450317, 114.309043])
    .setContent("I am a standalone popup.")
    .openOn(map);



  //处理事件

  //事件
  // function onMapClick(e) { //e为对象，触发事件的对象
  //   alert("You clicked the map at " + e.latlng);
  //   console.log(e); //对象本身有很多可以使用的属性，如latlng是经纬度layerpoint当前点击位置等
  // }

  // map.on('click', onMapClick); //注册事件


  //一下代码实现在点击位置显示弹窗
  var popup = L.popup();

  function onMapClick(e) {
    popup
      .setLatLng(e.latlng) //给弹窗添加坐标
      .setContent("<b>Hello world!</b><br>You clicked the map at " + e.latlng.toString()) //弹窗内容，可以写html代码，能够渲染
      .openOn(map);
  }

  map.on('click', onMapClick);
</script>