千寻位置 开发demo_入门 Leaflet 之小 Demo

入门 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

Leaflet 常用 API

Demo 用到的库

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

---

PART 1：地图加载(底图类型、切换) Demo 1 ^[4]

1.库引用

 rel="stylesheet" type="text/css" href="./lib/Flat-UI-master/dist/css/vendor/bootstrap/css/bootstrap.min.css"/> rel="stylesheet" href="./lib/Flat-UI-master/dist/css/flat-ui.min.css"> rel="stylesheet" href="./lib/leaflet/leaflet.css">

2.地图加载与切换

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  © leaflet-demo',}).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 ^[5]

gif

1.库引用 如上 Demo 1

 rel="stylesheet" href="./lib/leaflet.marker.highlight/leaflet.marker.highlight.css">

2.判断浏览器是否支持

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″}

3.定位成功或失败处理方法

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]); //指定一个数据 定位在成都