Leaflet 基础入门教程示例
作者:摸鱼的汤姆
这篇文章主要为大家介绍了Leaflet 基础入门教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
什么是Webgis?
webGis又称之为网络地理信息系统,GIS的全名是Geographic Information System
,它是在计算机硬件,软件系统支持下,对整个或部分地球表层空间中的有关地理分布数据进行采集,储存,管理,运算,分析,显示和描述的技术系统。
地图是GIS的表现形式,但是GIS深层是空间信息的处理,简单说就是将GIS这门学科所能提供的功能,以B/S技术展现给用户,使用户只需要在浏览器上便能使用这些GIS功能的一个应用方向。
什么是Leaflet?
Leafet 作为 webGis 主流框架之一,Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有39 KB, 并且拥有绝大部分开发者所需要的所有地图特性。
在Vue中安装Leaflet,与其他依赖
// leaflet 核心库 npm install leaflet // 地图瓦片 npm install leaflet.chinatmsproviders // 动态线 npm install leaflet-ant-path // 侧边栏工具库 npm install @geoman-io/leaflet-geoman-free
在App.vue中使用
import L from "leaflet"; import "leaflet.chinatmsproviders"; // 插件可加载各种地图(如:智图地图,谷歌地图,高德地图等包含卫星地图) import "leaflet-ant-path"; //动态线条插件 import "leaflet/dist/leaflet.css"; import imgs from "@/assets/svg/logo.svg"; import "@geoman-io/leaflet-geoman-free"; import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
初始化地图
methods:{ initMap(){ let _this = this; this.map = L.map("map", { attributionControl: true, // 是否版权 closePopupOnClick: false, // 点击画布是否直接隐藏弹窗 maxZoom: 13, // 最大缩放 minZoom: 3, // 最小缩放 noWrap: false, // 该层是否包裹在逆子午线周围 worldCopyJump: true, // 拷贝当前配置 renderer: L.svg(), // 矢量渲染 }); } }
chinaProvider地图瓦片
// 设置需要引入的地图瓦片 // 其他材质包括(天地图,百度,...) git地址:https://github.com/htoooth/Leaflet.ChineseTmsProviders L.tileLayer?.chinaProvider('Geoq.Normal.PurplishBlue').addTo(this.map); // 设置中心点与缩放层级 this.map.setView([41.02999636902566, 108.984375], 3);
addControls使用工具集
this.map.pm.addControls({ position: "topleft", drawCircle: false, });
attribution创建自定义版权
const attrs = L.control.attribution({ prefix: "Leafet地图" }); attrs.addTo(this.map);
Marker创建点
- 首先在data中定义两个layers组
data(){ return{ // layerGroup 图层组主要用于添加标点与线段对象 LineGroupLayer: L.layerGroup([]), MakerGroupLayer: L.layerGroup([]), } }
- 定义点
// 定义图标 const icons = L.icon({ iconUrl: imgs, iconSize: [20, 20], iconAnchor: [5, 5], shadowSize: [0, 0], }); // 创建点实例 将经纬度传入,并在该点位显示图标 let makerStart = L.marker([50.5, 30.5],{ icon: icons }); // 添加图 this.MakerGroupLayer.addLayer(makerStart); this.map.addLayer(this.MakerGroupLayer); // 添加点
创建线
let paths = [ [35.485106, 123.078832], [26.787026, 126.104039], [22.847052, 126.281993], [18.999909, 126.578654], ]; //随便打的点 let lineLayer = L.polyline.antPath(paths, { // 线 paused: false, //暂停 初始化状态 reverse: false, //方向反转 delay: 1000, //延迟,数值越大效果越缓慢 dashArray: [10, 20], //间隔样式 weight: 2, //线宽 opacity: 0.7, //透明度 color: "red", pulseColor: "#fff", //块颜色 }); this.LineGroupLayer.addLayer(lineLayer); this.map.addLayer(this.LineGroupLayer); // 添加线
Polygon创建三角形
let multipolygon = new L.Polygon( [ [ [17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482], ], ], { color: "rgba(0,0,255,.7)", weight: 1, } ); multipolygon.addTo(this.map);
Popup弹窗&Tooltip提示
- Popup
// 自定义popup,并显示图片 var popup = L.popup() .setLatLng([e.latlng.lat, e.latlng.lng]) .setContent(`<p>Hello world!<br />This is a nice popup.</p><img src="${imgs}"/>`) .openOn(_this.map);
- Tooltip
// 定义图标 const icons = L.icon({ iconUrl: imgs, iconSize: [20, 20], iconAnchor: [5, 5], shadowSize: [0, 0], }); let popupDom = "<div class='pop-data'><ul><li class='time'><span>这是一个点:</span>" + "</li><li><span>内容...</span>" + "</li><li><span>内容...</span>" + "</li></ul></div>"; // 绑定popup let makerEnd = L.marker([17.686816, 83.218482], { icon: icons, }).bindTooltip(popupDom); this.MakerGroupLayer.addLayer(makerEnd);
Geojson区域描边
首先需要我们在(DataV)[datav.aliyun.com/portal/scho…
// 引入Geojson的json文件,这里直接将文件展开了,在项目中不应该这么做 let Geojson = { type: "FeatureCollectio", properties: { zhName: "河北省", name: "Hebei" }, geometry: { type: "MultiPolygon", coordinates: [ [ [116.365069,40.943216], [116.37641,40.939681], [116.398515,40.905999] .... ], ], }, }; L.geoJSON(Geojson, style: { weight: 2, //边框粗细 opacity: 0.4, //透明度 fillColor: 'transparent', //区域填充颜色 fillOpacity: 0.3, //区域填充颜色的透明 }).addTo(this.map);
总结
根据上面的例子总结到Leaflet框架设计简单,而且官方提供很多插件、具有高扩展性、性能良好和可用性强等特点。它可以在所有主流的桌面和移动平台上高效运行,能够利用主流浏览器中利用HTML5和CSS3的优势的同时也兼容老版本浏览器,更加适合移动端,但是只支持2D地图,不支持3d地图。
以上就是Leaflet 基础入门教程示例的详细内容,更多关于Leaflet 基础的资料请关注脚本之家其它相关文章!