入门Leaflet之小Demo

写在前面

WebGIS 开发基础之 Leaflet

1. GIS Web开发基本概念：

GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates；

2. GIS Web 开发概述：

架构模式、常用平台和 SDK、二维、三维

3. 使用 Leaflet 开发常用功能：

  • 地图加载（底图类型、切换）
  • 地图操作（缩放、平移、定位/书签、动画）
  • 图层管理（加载、移除、调整顺序）
  • 要素标绘（点/聚簇、线、面，符号化/静态动态）
  • 属性标注（字段可选、样式定制）
  • 专题地图（点、线、面，渲染）
  • 查询定位（属性查询、空间查询/周边搜索/缓冲区/面查点线面/点线查面、图属互查、综合查询）
  • 信息窗口（入口、Popup、定制）
  • 坐标转换（地理与投影、不同地理坐标系）
  • 空间运算（长度面积测量、点取坐标、缓冲区、相交包含关系）
  • 动态监控（固定点状态切换、车辆监控）

4. Leaflet 常用 API

<a href="https://user-images.githubusercontent.com/26923747/60000672-41391980-9697-11e9-82b1-9297332bb589.png">
Leaflet API 0.png

]</a>

Demo 用到的库

  • Flat-UI - 基于 Bootstrap 的一个扁平化风格 web 开发框架。
  • Leaflet - 一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。
  • Esri Leaflet - 一个轻量级的工具包，基于 leaflet 利用 ArcGIS 服务。

PART 1： 地图加载（底图类型、切换） Demo 1

2018-02-25_230200.jpg
  1. 库引用
<link rel="stylesheet" type="text/css" href="./lib/Flat-UI-master/dist/css/vendor/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="./lib/Flat-UI-master/dist/css/flat-ui.min.css">
<link rel="stylesheet" href="./lib/leaflet/leaflet.css">

<script src="./lib/Flat-UI-master/dist/js/vendor/jquery.min.js"></script>
<script src="./lib/Flat-UI-master/dist/js/flat-ui.js"></script>
<script src="./lib/leaflet/leaflet.js"></script>
<script src="./js/urlTemplate.js"></script>
  1. 地图加载与切换
const map = L.map('mapDiv', {
  crs: L.CRS.EPSG3857, //要使用的坐标参考系统，默认的坐标参考系，互联网地图主流坐标系
  // crs: L.CRS.EPSG4326, //WGS 84坐标系，GPS默认坐标系
  zoomControl: true,
  // minZoom: 1,
  attributionControl: false,
}).setView([31.626866, 104.152894], 18); //定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″
let Baselayer = L.tileLayer(urlTemplate.mapbox_Image, {
  maxZoom: 17, //最大视图
  minZoom: 2, //最小视图
  attribution:
  'liuvigongzuoshi@foxmail.com  &copy; <a href="https://github.com/liuvigongzuoshi/leaflet-demo">leaflet-demo</a>',
}).addTo(map);

console.log(Baselayer);

const setLayer = (ele) => {
  map.removeLayer(Baselayer);

  if (ele == 'mapbox_Image') {
    Baselayer = L.tileLayer(urlTemplate.mapbox_Image, {
      maxZoom: 17,
      minZoom: 2,
    }).addTo(map);
  } else if (ele == 'mapbox_Vector') {
    Baselayer = L.tileLayer(urlTemplate.mapbox_Vector, {
      maxZoom: 17,
      minZoom: 1,
    }).addTo(map);
    console.log(Baselayer);
  }
};

PART 1.1：基于 Demo 1 利用 H5 Geolocation API 定位到当前位置 Demo 1.1

ezgif.com-video-to-gif 01.gif
  1. 库引用 如上 Demo 1
<!-- marker高亮显示库引用 -->
<link rel="stylesheet" href="./lib/leaflet.marker.highlight/leaflet.marker.highlight.css">
<script src="./lib/leaflet.marker.highlight/leaflet.marker.highlight.js"></script>
  1. 判断浏览器是否支持
let map;
let Baselayer;
// 使用H5 API定位 定位在当前位置
if (navigator.geolocation) {
  console.log('/* 地理位置服务可用 */');
  navigator.geolocation.getCurrentPosition(h5ApiSuccess, h5ApiError);
} else {
  console.log('/* 地理位置服务不可用 */');
  mapInit([30.626866, 104.152894]); //指定一个数据 定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″
}
  1. 定位成功或失败处理方法
const h5ApiSuccess = (position) => {
  const latitude = position.coords.latitude; //纬度
  const longitude = position.coords.longitude; //经度
  console.log('你的经度纬度分别为' + longitude + ',' + latitude + '。');
  return mapInit([latitude, longitude]);
};

const h5ApiError = () => {
  console.log('/* 地理位置请求失败 */');
  mapInit([31.626866, 104.152894]); //指定一个数据 定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″
};
  1. 成功后初始化底图
const mapInit = (LatLng) => {
  map = L.map('mapDiv', {
    crs: L.CRS.EPSG3857, //要使用的坐标参考系统，默认的坐标参考系，互联网地图主流坐标系
    // crs: L.CRS.EPSG4326, //WGS 84坐标系，GPS默认坐标系
    zoomControl: true,
    // minZoom: 1,
    attributionControl: true,
  }).setView(LatLng, 18); //定位在当前位置
  Baselayer = L.tileLayer(urlTemplate.mapbox_Image, {
    maxZoom: 17, //最大视图
    minZoom: 2, //最小视图
    attribution:
    'liuvigongzuoshi@foxmail.com  &copy; <a href="https://github.com/liuvigongzuoshi/leaflet-demo">leaflet-demo</a>',
  }).addTo(map);

  L.marker(LatLng, {
    highlight: 'permanent', //永久高亮显示
  }).addTo(map);

  console.log(Baselayer);
};
  1. 更多内容
  • 更多了解 geolocation 对象，可参考 MDN Web 文档
  • 更多了解使用 marker 高亮显示，可参考 leaflet.marker.highlight 插件
  • 基于 Demo 1 利用 leaflet 封装好的 H5 定位 API,定位到当前位置 Demo

PART 2： 地图操作（缩放、平移、定位/书签、动画） Demo 2

ezgif.com-video-to-gif 00.gif

  1. 库引用 如上 Demo 1

  2. 设置地图缩放到指定图层

const setZoom = () => {
  map.setZoom(10, {
    // animate: false
  }); //设置地图缩放到
};
  1. 图层往里进一个图层，放大
const setZoomIn = () => {
  map.zoomIn(); //图层往里进一个图层，放大
};

const setZoomOut = () => {
  map.zoomOut(); //图层往里出一个图层，缩小
};
  1. 地图平移至中心点
const panTo = () => {
  map.panTo([37.91082, 128.73583], {
    animate: true,
  }); //地图平移，默认就是true，将地图平移到给定的中心。如果新的中心点在屏幕内与现有的中心点不同则产生平移动作。
};
  1. 地图飞到中心点
const flyTo = () => {
  map.flyTo([36.52, 120.31]); // 点到点的抛物线动画，平移加缩放动画
};

注意：尽量避免 setZoom()等地图缩放方法与 flyTo、flyToBounds 一起合用，因为这两类地图操作方法都有各自的缩放值，造成动画不流畅、不能定位到目的点。

  1. 地图飞到边界的合适的位置
const flyToBounds = () => {
  map.flyToBounds(polygon.getBounds()); //getBounds（获取边界）：返回地图视图的经纬度边界。
  //飞到这个多变形区域上面，自动判断区域块的大小，合适缩放图层，将地图视图尽可能大地设定在给定的地理边界内。
};

let polygon = L.polygon(
  [
    [37, -109.05],
    [41, -109.03],
    [41, -102.05],
    [37, -102.04],
  ],
  [40.774, -74.125],
  {
    color: 'green',
    fillColor: '#f03',
    fillOpacity: 0.5,
  }
).addTo(map); //地图上绘制一个多边形
  1. 地图定位到边界的合适的位置
const fitBounds = () => {
  console.log(polygon.getBounds());
  map.fitBounds(polygon.getBounds()); //getBounds（获取边界）：返回地图视图的经纬度边界。
  //平移到一个区域上面，自动判断区域块的大小，合适缩放图层
};

let polygon = L.polygon(
  [
    [37, -109.05],
    [41, -109.03],
    [41, -102.05],
    [37, -102.04],
  ],
  [40.774, -74.125],
  {
    color: 'green',
    fillColor: '#f03',
    fillOpacity: 0.5,
  }
).addTo(map); //地图上绘制一个多边形

PART 3： 图层管理（加载、移除、调整顺序）： Demo 3

2018-02-28_223709.jpg
  1. 库引用
<link rel="stylesheet" type="text/css"  href="./lib/Flat-UI-master/dist/css/vendor/bootstrap/css/bootstrap.min.css"
    />
<link rel="stylesheet" href="./lib/Flat-UI-master/dist/css/flat-ui.min.css">
<link rel="stylesheet" href="./lib/leaflet/leaflet.css">

<script src="./lib/Flat-UI-master/dist/js/vendor/jquery.min.js"></script>
<script src="./lib/Flat-UI-master/dist/js/flat-ui.js"></script>
<script src="./lib/leaflet/leaflet.js"></script>
<!-- esri-leafleat插件 -->
<script src="./lib/esri-leaflet-v2.1.2/dist/esri-leaflet.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/proj4js/2.6.2/proj4.js"></script>
<script src="./js/urlTemplate.js"></script>
  1. 使用 esri-leaflet 插件加载 ArcGIS 底图服务
let oMap = null;
let oLayer = [];

oMap = L.map('mapDiv', {
  crs: L.CRS.EPSG4326,
  zoomControl: false,
  minZoom: 7,
  attributionControl: false
}).setView([29.59, 106.59], 12); //定位在重庆

oLayer.push(L.esri.tiledMapLayer({
  url: urlTemplate.SYS_IMG_MAPSERVER_PATH,
  maxZoom: 17,
  minZoom: 0,
  useCors: false, //是否浏览器在跨域的情况下使用GET请求。
}).addTo(oMap)); //加载第一个底图

oLayer.push(L.esri.tiledMapLayer({
  url: urlTemplate.SYS_IMG_LABEL_MAPSERVER_PATH,
  maxZoom: 17,
  minZoom: 0,
  useCors: false,
}).addTo(oMap));  //加载第二个底图
  1. 切换底图(移除及加载)
const setLayer = (layerUrls, maxZoom) => {
  for (let i = 0; i < oLayer.length; i++) {
    oMap.removeLayer(oLayer[i]); //将图层在地图上移除
  }
  oLayer = []; //制空数组
  layerUrls.map((item) => {
    oLayer.push(
      L.esri
      .tiledMapLayer({
        url: item,
        useCors: false, //是否浏览器在跨域的情况下使用GET请求。
        maxZoom: maxZoom,
      })
      .addTo(oMap)
    );
  });
};

不同的底图可能图层数不一样，就可能造成浏览器去请求不存在的图层，以及给用户展示出空白区域的不好体验，所以切换图层时候应注意设置最大及最小缩放值。

PART 4： 要素标绘（点、线、面，符号化/静态动态） Demo 4

ezgif.com-video-to-gif02.gif

  1. 库引用 如上 Demo 1

  2. 画一个圆

// 画一个circle
const circle = L.circle([36.52, 120.31], {
  color: 'green', //描边色
  fillColor: '#f03',  //填充色
  fillOpacity: 0.5, //透明度
  radius: 10000 //半径，单位米
}).addTo(map);
// 绑定一个提示标签
circle.bindTooltip('我是个圆');
  1. Maker 及自定义 Maker
// 做一个maker
const marker = L.marker([36.52, 120.31]).addTo(map);
// 绑定一个提示标签
marker.bindTooltip('这是个Marker', { direction: 'left' }).openTooltip();


//自定义一个maker
const greenIcon = L.icon({
  iconUrl: './icon/logo.png',
  iconSize: [300, 79], // size of the icon
  popupAnchor: [0, -10] // point from which the popup should open relative to the iconAnchor
});

const oMarker = L.marker([36.52, 124.31], { icon: greenIcon }).addTo(map);
// 绑定一个提示标签
oMarker.bindTooltip('这是个自定义Marker', { direction: 'left', offset: [-150, 0] });
  1. 画一根线
//画一根线
const polyline = L.polyline([[45.51, -122.68], [37.77, -122.43], [34.04, -118.2]], { color: 'red' }).addTo(map);
// 飞到这个线的位置
map.fitBounds(polyline.getBounds());
  1. 画一个多边形
// 画一个polygon
const polygon = L.polygon([
  [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]], // outer ring
  [[37.29, -108.58], [40.71, -108.58], [40.71, -102.50], [37.29, -102.50]] // hole
], {
    color: 'green',
    fillColor: '#f03',
    fillOpacity: 0.5
  }).addTo(map);
// 绑定一个提示标签
polygon.bindTooltip('this is 个多边形');
// 飞到这个多边形的位置
map.fitBounds(polygon.getBounds());

PART 5： 信息窗口（入口、Popup、定制） Demo 5

ezgif.com-video-to-gif03.gif

  1. 库引用 如上 Demo 1

  2. 画一个 circle 并绑定一个 Popup

// 画一个circle
const circle = L.circle([36.92, 121.31], {
 color: 'green', //描边色
 fillColor: '#f03',  //填充色
 fillOpacity: 0.5, //透明度
 radius: 10000 //半径，单位米
}).addTo(map);

// 绑定一个弹窗
circle.bindPopup('我是个圆');
  1. 定位一个 marker，绑定一个自定义 Popup
// 定位一个maker
const marker = L.marker([36.52, 120.31]).addTo(map);

//maker上自定义一个popup
const html = '<p>Hello world!<br />This is a nice popup.</p>';

const popup = marker.bindPopup(html, { maxHeight: 250, maxWidth: 490, className: 'content', offset: [0, 0] }).on('popupopen', function (params) {
  console.log(params)
});
  1. 实现动态改变 Popup 的内容
const mypop = L.popup();

map.on('click', function (e) {
  mypop.setLatLng(e.latlng)
    .setContent('你临幸了这个点：<br>' + e.latlng.toString())
    .openOn(map);
});

PART 6： geojson 数据绘制边界(坐标转换、渲染) Demo 6

ezgif.com-video-to-gif04.gif

  1. 库引用 如上 Demo 3

  2. 获得 geojson 并处理数据

// 请求geojson并处理数据
const population = () => {
  $.get('./js/geojson.json', function (response) {
    const poplData = response.data;
    const PolygonsCenter = response.geopoint;
    drawPolygons(poplData, PolygonsCenter);
  });
};

Mock 返回的数据 GeoJSON

  1. 绘制边界并添加图例
let oPolygon_VilPop = [];

const legend = L.control({
  position: 'bottomright'
});

// 绘制边界
const drawPolygons = (poplData, PolygonsCenter) => {
  for (const i in poplData) {
    poplData[i].geoJson = JSON.parse(poplData[i].geoJson);
    oPolygon_VilPop[i] = L.geoJSON(poplData[i].geoJson, {
      style: function () {
        return {
          color: 'white',
          fillColor: getBgColor(poplData[i].population), //获取边界的填充色
          fillOpacity: 0.6,
          weight: 3,
          dashArray: '10',
        };
      },
    })
      .bindTooltip(poplData[i].villageName + '<br><br>人口' + poplData[i].population + '人', {
      direction: 'top',
    })
      .on({
      mouseover: highlight, //鼠标移动上去高亮
      mouseout: resetHighlight, //鼠标移出恢复原样式
      click: zoomTo, //点击最大化
    })
      .addTo(oMap);
  }

  // 添加图例
  legend.onAdd = legendHtml;
  legend.addTo(oMap);

  // 定位到该界限的中心位置
  oMap.flyToBounds(PolygonsCenter);
};
  1. 返回边界的填充色及图列的样式
const getBgColor = (d) => {
  return d > 400
    ? '#800026'
  : d > 300
    ? '#BD0026'
  : d > 200
    ? '#FC4E2A'
  : d > 100
    ? '#FD8D3C'
  : d > 50
    ? '#FED976'
  : '#FFEDA0';
};

const legendHtml = (map) => {
  let div = L.DomUtil.create('div', 'legend locateVP_legend'),
        grades = [0, 50, 100, 200, 400],
        labels = [],
        from,
        to;
  for (const i = 0; i < grades.length; i++) {
    from = grades[i];
    to = grades[i + 1];
    labels.push(
      '<i style="background:' + getBgColor(from + 1) + '"></i> ' + from + (to ? ' &sim; ' + to + '人' : '以上')
    );
  }
  div.innerHTML = labels.join('<br>');
  return div;
};
  1. 鼠标移动上去的事件、鼠标移出的事件、发生点击的事件
const highlight = (e) => {
  const layer = e.target;
  layer.setStyle({
    weight: 6,
    color: '#fff',
    fillOpacity: 0.9,
    dashArray: '0',
  });
};

const resetHighlight = (e) => {
  const layer = e.target;
  layer.setStyle({
    color: 'white',
    weight: 3,
    fillOpacity: 0.6,
    dashArray: '10',
  });
};

const zoomTo = (e) => {
  oMap.fitBounds(e.target.getBounds());
};

写在后面

国内常用地图服务资源加载插件

Leaflet.ChineseTmsProviders Provider for Chinese Tms Service

  • Leaflet 调用国内各种地图的功能十分复杂，幸好有 leaflet.ChineseTmsProviders 这个插件，这四种地图直接就可以加载进来，十分方便。

  • 使用方法很简单可点击上面链接去 GitHub 看使用说明，或拉这个 demo下来来瞧一瞧代码。

优化 marker 相关的插件

Leaflet 学习资料整理

模块化开发的加载包注意的问题

  • 引 leaflet 包的时候不要忘记引用包里的 css import 'leaflet/dist/leaflet.css';

关于 Leaflet 和 esri-leaflet 一起使用 L.esri.TiledMapLayer 加载 ArcGIS 服务切片底图时，控制台打印报错 Uncaught ReferenceError: proj4 is not defined

  • 查看了下源码 if (!proj4) { warn('L.esri.TiledMapLayer is using a non-mercator spatial reference. Support may be available through Proj4Leaflet http://esri.github.io/esri-leaflet/examples/non-mercator-projection.html');} 问题就出在这里，esri-leaflet 里的一个插件 proj4leaflet 依赖 proj4，所以需要手动引入 proj4 这个包。
  • 这个 GitHub 上面的提问及回答 Github esri-leaflet Issues，原因是 leaflet 不支持该服务坐标系，需要依赖 proj4 进行坐标投影。
  • 如果你是模块化开发，需要再npm i proj4 然后再引入进来好了 import * as proj4 from 'proj4'; window['proj4'] = proj4;。
  • 如果你是常规开发，直接添加一个 script 标签引用 CDN 资源上托管的 Proj4js 就是了 <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4-src.js"></script>。

参考

本文 DEMO 地址: https://github.com/liuvigongzuoshi/leaflet-demo

原文首发地址 https://github.com/liuvigongzuoshi/blog

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 198,154评论 5赞 464
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,252评论 2赞 375
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 145,107评论 0赞 327
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,985评论 1赞 268
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,905评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 47,256评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,978评论 3赞 388
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,611评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,891评论 1赞 293
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,910评论 2赞 314
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,736评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,516评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,995评论 3赞 301
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,132评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,447评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,034评论 2赞 343
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,242评论 2赞 339