少小白学前端——leaflet篇(Javascript 舆图库)

打印 上一主题 下一主题

主题 1818|帖子 1818|积分 5454

废话少说,就是最近想了解一下gis开发,网上搜了一下,推荐了leaflet、OpenLayers等等,于是今天就训练了一下leaflet,并做出如下记录。
先上中文文档:https://leafletjs.cn/reference.html 。
一、安装

这里提供两种方式,npm和CDN引入。别的,还建议安装一个插件leaflet.chinesetmsproviders,利用这个插件可以将高德舆图、百度舆图等集成到leaflet中。
1、CDN引入

引入方式在中文文档中就有,代码如下:
  1. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
  2.       integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
  3.       crossorigin=""/>
  4.       
  5. <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
  6.         integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
  7.         crossorigin=""></script>
  8.         
  9. <script src="https://cdn.jsdelivr.net/npm/leaflet.chinesetmsproviders@1.0.22/src/leaflet.ChineseTmsProviders.min.js"></script>
复制代码
前两个是leaflet的CSS和JS文件,第三个则是插件的JS文件。
2、npm

  1. // leaflet
  2. npm i leaflet --save
  3. // 插件
  4. npm install leaflet.chinesetmsproviders
复制代码
二、利用

假如采用的是CDN的方式,现在在window对象中,已经可以看到leaflet的属性和方法了。若利用的是npm,则须要引入一下:
  1. // 引入leaflet
  2. import L from 'leaflet';
  3. import 'leaflet/dist/leaflet.css';
  4. // 引入插件
  5. import 'leaflet.chinesetmsproviders';
复制代码
留意:这里须要把CSS一起引入进来,否则无法正常表现。
1、创建舆图画布

想要创建舆图,须要先创建一个带有id的div标签作为舆图容器,并设置好高度。然后便可以利用其提供的map()方法,举行渲染了。
  1. <template>
  2.   <div id="map-id" style="height: 800px"></div>
  3. </template>
  4. <script setup>
  5. import {onMounted} from "vue";
  6. onMounted(() => {
  7.   // 初始化地图,并设置地理中心和缩放倍数
  8.   let map = L.map('map-id', {
  9.     center: [39.90, 116.39],
  10.     zoom: 12
  11.   });
  12.   // 添加瓦片(Tile)图层
  13.   L.tileLayer.chinaProvider('GaoDe.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map);
  14. })
  15. </script>
复制代码
须要留意的是,在VUE中,要等组件渲染完,才能举行挂载,因此相干函数要写到onMounted中。而在React框架中,则是要写在componentDidMount中,或是useEffect中。
这里,map()是leaflet的工厂函数,主要是将舆图初始化,并返回一个舆图对象。它有两个参数,第一个参数可以是容器id(string范例),也可以是容器实例(HTMLElement);第二个参数为options,可设置相干参数,其中center定义了舆图的地理中心,用的是经纬度(小数点位数越多越精准);zoom则是舆图初始的缩放倍数,其他属性可查询文档。
tileLayer会创建一个瓦片(Tile)图层,而chinaProvider则是插件提供的方法,使我们可以引用高德舆图瓦片(Tile),也可利用其他瓦片(Tile):
GaoDe


  • GaoDe.Normal.Map (include Annotion)
  • GaoDe.Satellite.Map
  • GaoDe.Satellite.Annotion
Google


  • Google.Normal.Map (include Annotion)
  • Google.Satellite.Map (exclude Annotion)
  • Google.Satellite.Map (include Annotion)
Baidu


  • Baidu.Normal.Map
  • Baidu.Satellite.Map (exclude Annotion)
  • Baidu.Satellite.Annotion
之后,我们便可以看到效果图了:

别的: 假如利用的是React框架,还须要留意是否开启了严格模式,也就是是否利用了React.StrictMode标签,由于严格模式会渲染两次,导致导致map()方法执行两次,因此会提示Map container is already initialized.
解决方法1:取消严格模式
解决方法2:在map()方法执行前,将_leaflet_id置空
  1. const container = L.DomUtil.get('map-id');
  2. if (container !== null) {
  3.   container._leaflet_id = null;
  4. }
复制代码
增补: 舆图渲染成功后,我们通过控制台可以发现,出现了很多div标签,其中还有一些空的,这是由于舆图是由很多图层构成的,不同的功能渲染在不同的图层中,以此来实现各种功能。而空的,则是由于还没有添加对应的功能。

上面的舆图画布,属于栅格图层,这一图层有很多Tile(点开后,可以看到现实就是舆图底层的各种区域图片),接下来将先容其他图层及方法。
三、leaflet的图层及方法

1、标记(UI 图层)

也就是我们常见的定位,如下图(左):

创建非常简单,跟map一样,会返回一个对象,可以为其绑定popup(上图右)、move、拖拽事件等。
  1. const marker = L.marker([38.7124, 120.6580]).addTo(map);
  2. marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
复制代码
在这里,假如用的是npm的方式安装,可能会遇到一个问题,就是marker图标没有正常表现。解决方法就是将其手动引入进来:
  1. import icon from 'leaflet/dist/images/marker-icon.png';
  2. // 解决图标不正常显示bug
  3. L.Marker.prototype.options.icon = L.icon({
  4.   iconUrl: icon,
  5.   iconAnchor: [10, 41]
  6. });
复制代码
iconAnchor为的是修正图标的位置,由于手动绑定会有一点点偏移。
既然能手动绑定icon,当然也能更改其样式了,而且marker方法还答应icon作为参数传入进去。
为此,我们准备两张图片(官方建议,一张marker,一张shadow,留意背景要透明),然后便可以创建一个icon对象了:
  1.         import leafGreen from './leaf-green.png'
  2.         import leafShadow from './leaf-shadow.png'
  3.         // 自定义icon
  4.     const customIcon = L.icon({
  5.       iconUrl: leafGreen,  // icon的url
  6.       shadowUrl: leafShadow,  // shadow的url
  7.       iconSize:     [19, 47.5],
  8.       shadowSize:   [25, 32],
  9.       iconAnchor:   [11, 47],
  10.       shadowAnchor: [2, 31],
  11.       popupAnchor:  [-1.5, -38]
  12.     });
  13.     L.marker([39.908815, 116.40667], {icon: customIcon}).addTo(map);
复制代码
效果如下(右边的树叶便是新加的marker):

除此之外,还可以用类来快速创建相似的图标,这里我就直接引用官方代码了:
  1. var LeafIcon = L.Icon.extend({
  2.     options: {
  3.         shadowUrl: 'leaf-shadow.png',
  4.         iconSize:     [38, 95],
  5.         shadowSize:   [50, 64],
  6.         iconAnchor:   [22, 94],
  7.         shadowAnchor: [4, 62],
  8.         popupAnchor:  [-3, -76]
  9.     }
  10. });
  11. var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
  12.     redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
  13.     orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
复制代码
2、圆和多边形(矢量图层)

画圆和多边形,跟标记差不多,也会返回一个对象;
  1. // 添加圆
  2. const circle = L.circle([39.881684, 116.410832], {
  3.   color: 'red',
  4.   fillColor: '#11ea11',
  5.   fillOpacity: 0.5,
  6.   radius: 800
  7. }).addTo(map);
  8. // 多边形
  9. const polygon = L.polygon([
  10.   [39.92231, 116.392078],
  11.   [39.922639, 116.401691],
  12.   [39.913555, 116.402292],
  13.   [39.913028, 116.39225]
  14. ], {color: '#48adec'}).addTo(map);
复制代码
circle()第一个参数,为中心位置,同样是经纬度,第二个参数则是圆的options,包罗描边颜色,填充颜色,填充的不透明度,重要的是radius,是圆的半径,单位是米。
polygon()第一个参数则是各个点,三个点绘制三角形,四个点则是四边形……第二个参数同样是options,除了radius外,圆的其他属性polygon同样拥有。

别的,还有折线Polyline、矩形Rectangle、圆形标记CircleMarker等。
区别主要在第一个参数上,折线坐标和多边形差不多,按点绘制即可,矩形则是标记边界(对角线的两个点,然后画一个垂直方向的矩形),圆形标记和圆相似,区别是圆形标记的radius单位为像素,且不受缩放影响。
3、GeoJSON 图层

GeoJSON是一种对各种地理数据结构举行编码的格式,一个 GeoJSON 对象可以代表一个空间区域(Geometry),一个有空间界限的实体(Feature),或者一个特性列表(FeatureCollection),且支持以下多少体范例:点、线字符串、多边形、多点、多线字符串、多多边形和多少体集合。
看到数据格式,是不是就立即想到了这是干什么用的,没错,可以吸收服务器数据了。
  1.         const geojsonFeature = {
  2.       "type": "Feature",
  3.       "properties": {
  4.         "name": "Coors Field",
  5.         "amenity": "Baseball Stadium",
  6.         "popupContent": "This is where the Rockies play!"
  7.       },
  8.       "geometry": {
  9.         "type": "Point",
  10.         "coordinates": [116.404674, 39.913324]
  11.       }
  12.     };
复制代码
这是一个简单的GeoJSON格式数据(判断格式是否精确,可以利用GeoJson格式数据在线验证工具),我们可以将其添加到舆图上,可以看到当前效果跟marker比较类似。
  1. L.geoJSON(geojsonFeature).addTo(map);
复制代码

特别留意: GeoJSON格式中,coordinates里的坐标,与leaflet利用方式的是 不同的,leaflet用的是“[纬度,经度]”,而GeoJSON格式中是“[经度,纬度]”。
为了更方便的代入数据,我们可以先创建一个空的GeoJSON图层,然后再向其添加数据。
  1.         // 创建空的geoJSON图层
  2.     const myLayer = L.geoJSON().addTo(map);
  3.     // 数据
  4.     const myLines = [{
  5.       "type": "LineString",
  6.       "coordinates": [[116.404642, 39.91376], [116.40417, 39.913332], [116.405248, 39.913328],[116.404642, 39.91376]]
  7.     }, {
  8.       "type": "LineString",
  9.       "coordinates": [[116.40439, 39.913308], [116.404363, 39.912896], [116.40506, 39.912917], [116.405087, 39.913287]]
  10.     }];
  11.    
  12.     myLayer.addData(myLines);
复制代码
效果如下:

我们还可以向GeoJSON中添加样式,方式如下:
  1.         const options = {
  2.       style: function(feature) {
  3.         console.log('feature111:', feature)
  4.         return {color: feature.geometry.color || 'yellow'}
  5.       },
  6.       filter: function(feature, layer) {
  7.         console.log('feature222:', feature)
  8.         return true;
  9.       }
  10.     }
  11.     L.geoJSON(myLines, options).addTo(map);
复制代码
这里,style控制样式,filter控制是否表现,均可写成函数形式。有一点不解的是,两个打印,先执行的竟是第二个,而且feature结构略有不同(style的函数中多了一层)。


4、添加比例尺

  1. L.control.scale({metric: true, imperial: false, position: 'bottomright'}).addTo(map);
复制代码
属性阐明:
metric:是否表现公制比例线(米/公里),默认true。
imperial:是否表现英制比例线(英里/英尺),默认true。
position:表现位置。可选值 ‘topleft’、 ‘topright’、 ‘bottomleft’ 或 ‘bottomright’,默认bottomleft。
(由于metric和imperial默认值都为true,以是两种比例默认都会表现出来。)
(未完待续……)

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

道家人

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表