leaflet经常使用功能

简介

纯JavaScript,在地图上进行操做(坐标点,路径,曲线等)的一个库,只提供操做地图API,实际加载某个地图,由开发者决定

建立地图对象

1) 页面建立div,设置div属性撑满整个屏幕,设置div中id属性
2) 使用leafletAPI初始化地图对象

// mapDiv为id名字,setView参数1: 地图中心坐标位置  参数2: 地图加载级别(数字越大,地图加载越近) 
const map = L.map('mapDiv').setView([33.6528734492,104.7626939500], 5)

3) 为地图加载瓦片图层

经常使用API

tileLayer

做用: 在页面加载瓦片地图图片

const corner1 = L.latLng(50.4838600000, 77.1125230000) // 地图左上角
  const corner2 = L.latLng(22.5557360000, 138.0866980000) // 地图右上角
  const bounds = L.latLngBounds(corner1, corner2) // 根据2个经纬度来肯定一个矩形 
  const attr = ' Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>' 
  L.tileLayer(url, {
    maxZoom: 10, // 放大最大到10
    minZoom: 1, // 缩小最小到1
    bounds: bounds, // 将地图设置成一个矩形
    attribution: attr // 地图右下角放置一些受权信息
  }).addTo(map)
  map.setMaxBounds(bounds) // 设置经纬度范围,鼠标拖动的时候,不在设置范围内,会进行回弹

marker

做用: 根据给定经纬度,在地图上加载一个标记
1) 加载默认标记

// title: 鼠标移动到标记上,会显示该信息 opacity: 设置标记透明度
// zIndexOffset: 设置标记重叠关系,场景: 在标记上插入图片,可设置该属性,让标记在图片的上层
L.marker([39.9094390677,116.3699341216], {title: 'this is title', opacity: '0.8', zIndexOffset: 9999}).addTo(map)

2) 加载自定义icon(通常是图片)

// iconUrl: 图片url地址 iconSize: 图片尺寸
 const myIcon = L.icon({
    iconUrl: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
    iconSize: [80, 30]
  });
  L.marker([40, 108], {icon: myIcon, alt: 'this is google'}).addTo(map);

popup

做用: 在地图上显示文字

/*
* closeButton: 是否有关闭按钮
* autoClose: 当使用openOn的时候,用该属性来肯定是否关闭上一个
* closeOnClick: 鼠标点击,是否会关闭该popup
* className: 自定义class的名字,若是须要调整popup的位置,可经过设置class样式来完成
* openOn(): 将弹出窗口添加到地图并关闭上一个
* addTo(): 将该popup添加到地图上
* */
L.popup({closeButton: true, autoClose: true, closeOnClick: false, className: 'my-popup'})
  .setLatLng([38, 98])
  .setContent('<p>Hello world!<br />This is a nice popup.</p>')
  .addTo(map);

L.popup({closeButton: true, autoClose: true, closeOnClick: false})
  .setLatLng([37, 98])
  .setContent('<p>Hello world!')
  .addTo(map);

polyline

做用: 将经纬度经过链接起来,在地图上造成一根线,若是要作从出发到结束动画效果,可以使用第三方库Leaflet.Polyline.SnakeAnim
参考地址: https://github.com/zettvs/Lea...

// css代码
/*stroke-dasharray: 为svg设置虚线,数字越大,虚线段越长,
  设置2个参数,参数1: 虚线的长度  参数2: 虚线和虚线之间的间隔, 若是只设置一个参数,说明两个值同样大小
  stroke: 设置svg的颜色
*/
.testSvg {
    animation: animate 0.5s linear infinite;
    stroke-dasharray: 10;
    stroke: blue;
}
// js代码
const polyline2 = L.polyline(latlngs, {weight: 6, className: 'testSvg', opacity: 0.5})
    .addTo(leafletMap);
leafletMap.fitBounds(polyline2.getBounds());

  const polyline1 = L.polyline(latlngs, {color: '#fff', weight: 6, opacity: 0.5})
.addTo(leafletMap);
leafletMap.fitBounds(polyline1.getBounds());

circle

做用: 给定经纬度位置上造成一个圆圈

/*
* radius: 圆直径
* weight: 圆最外层圈的厚度大小
* color: 圆最外层圈的颜色
* fillColor: 圆里面的颜色
* */
L.circle([38, 98], {radius: 111200, weight: 1, color: 'red', fillColor: 'blue'}).addTo(map)

geojson

做用: 相似json格式,用来表示地理数据,若是须要在地图上对某个区域进行颜色或者背景的覆盖,请使用该技术
参考地址: http://geojson.io/#map=2/20.0...
https://zh.wikipedia.org/wiki...

使用方式:

// color: 覆盖颜色 weight: 覆盖深浅度 fillColor: 外圈颜色 fillOpacity:外圈透明度
L.geoJSON(geoJson数据, {
      style: function () {
        return {
          color: '#263238',
          weight: 0.8,
          fillColor: '#002132',
          fillOpacity: 0.5
        };
      }
    })