LeafLet 简单使用

时间  2020-10-18 标签 javascript css html java git github web typescript json api

Leaflet 使用

最近在Angular项目中，用到了地图，因为种种缘由放弃了百度地图api使用，最后选择了leaflet，简单介绍一下。javascript

介绍：

Leaflet 是一个为移动设备设计的交互式地图的开源的 javascript库， 并只有38k，包含了大多数开发者须要的地图特色。css

准备：下载 leaflet 文件

访问： Leaflet下载官网html

在单一的HTML页面中使用Leaflet

  • 建立一个文件夹 leaflet_test
  • 文件夹下建立一个index.html
  • 将上述下载的leaflet文件放到leaflet_test文件夹下
  • 在index.html插入以下代码
<!-- 引入 文件 --> <link rel="stylesheet" href="./leaflet.css" /> <script src="./leaflet.js"> </script> <!-- 增长地图高度 --> <style> #mapDiv { height: 300px; } </style> <!-- 建立一个 地图的div id 必须有 可是自定义 --> <div id="mapDiv"></div> <script> //到 mapbox 官网注册并建立下面的access token都是免费的，不过有5w次的浏览限制 var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2FuZXdhbmciLCJhIjoiY2pwM2UxNHNkMGF1MzNwc2FtMnNhdXJsMCJ9.KZpCBtizDeltZO6JhGc6_w'; //初始化 地图 var leafletMap = L.map('mapDiv').setView([41, 123], 5); //将图层加载到地图上，并设置最大的聚焦还有map样式 L.tileLayer(url, { maxZoom: 18, id: 'mapbox.streets' }).addTo(leafletMap); //增长一个marker ，地图上的标记，并绑定了一个popup，默认打开 L.marker([41, 123]).addTo(leafletMap) .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); //增长一个圈，设置圆心、半径、样式 L.circle([41, 123], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(leafletMap).bindPopup("I am a circle."); //增长多边形 L.polygon([ [41, 123], [39, 121], [41, 126] ]).addTo(leafletMap).bindPopup("I am a polygon."); //为点击地图的事件 增长popup var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(leafletMap); } leafletMap.on('click', onMapClick); </script>
  • 上述代码可直接使用，下面先上效果图，再解释代码的含义
 
image
  • 代码解释：
    • 1.引入Leaflet css 与js 文件，官网要求，css在前 js在后。不过我简单试过没啥变化。
    • 2.增长 地图css样式，设置高度，这个官网要求必须的。**不设置会不显示地图 **
    • 建立装地图的div 记住这个div的 id
    • 开始建立地图，咱们先去准备一个 瓦片图层 本文使用的是 mapbox
    • 到 map box上注册帐号，登陆后 建立一个access token，copy到代码url accesstoken后面，使用个人也好使
    • 初始化map 使用 L.map('mapDiv').setView([51.505, -0.09], 13),其中[51.505, -0.09]地理位置，13是变焦的大小
    • 将图层加到map上。其中url是图层的资源的url，maxZoom 是最大的聚焦【mapbox官网最大的也是18了】，id 是 地图的样式并非咱们日常认识的id，本文选择了 street 的map
    • mapbox 支持的地图样式,共6个默认的（默认提供的，能够本身建立上传）
      • Mapbox Incidents V1 [id=mapbox.mapbox-incidents-v1]
      • Mapbox Statellite[mapbox.satellite]
      • ...
    • 加标记、加圆圈、加多边形，再为地图每一个位置点击增长事件
  • 至此，简单的应用就完成了。

在单一页面中使用中国各类地图

为何单独说，由于leaflet提供了一个插件 Leaflet.ChineseTmsProviders能够访问 github主页查看。下面咱们看看如何使用它。java

  • 准备去github上下载插件的js文件 github下载，下载后一样放到与leaflet包同一路径下
  • 上一下插件代码：
L.TileLayer.ChinaProvider = L.TileLayer.extend({

    initialize: function(type, options) { // (type, Object) var providers = L.TileLayer.ChinaProvider.providers; var parts = type.split('.'); var providerName = parts[0]; var mapName = parts[1]; var mapType = parts[2]; var url = providers[providerName][mapName][mapType]; options.subdomains = providers[providerName].Subdomains; L.TileLayer.prototype.initialize.call(this, url, options); } }); L.TileLayer.ChinaProvider.providers = { TianDiTu: { Normal: { Map: "http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}", Annotion: "http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}" }, Satellite: { Map: "http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}", Annotion: "http://t{s}.tianditu.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}" }, Terrain: { Map: "http://t{s}.tianditu.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}", Annotion: "http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}" }, Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }, GaoDe: { Normal: { Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' }, Satellite: { Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}' }, Subdomains: ["1", "2", "3", "4"] }, Google: { Normal: { Map: "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}" }, Satellite: { Map: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}" }, Subdomains: [] }, Geoq: { Normal: { Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}", Color: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer/tile/{z}/{y}/{x}", PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}", Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}", Cold: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer/tile/{z}/{y}/{x}" }, Subdomains: [] } }; L.tileLayer.chinaProvider = function(type, options) { return new L.TileLayer.ChinaProvider(type, options); };
  • 更改index.html文件
<script src="./leaflet.js"></script> <link rel="stylesheet" href="./leaflet.css" /> <script src="leaflet.ChineseTmsProviders.js"></script> <style> //#mapDiv { height: 300px; } .test { height: 300px; } </style> <div id="mapDiv" class='test'></div> <script> //插件把 定义了多个国内的瓦片图层，咱们只须要经过提供的方法访问到相应的图层便可 //从插件代码能够看出 须要传入 providerName.mapName.mapType 从插件代码中查找所须要的值 var test = L.tileLayer.chinaProvider('Geoq.Normal.Map', { maxZoom: 18, minZoom: 5 }); //此处能够定义多个图层，并能够再页面中进行选择 var baseLayers = {"测试地图":test} var map = L.map("mapDiv", { center: [41.80, 123.43], zoom: 7, layers: [test], zoomControl: false }); L.control.layers(baseLayers, null).addTo(map); L.control.zoom({ zoomInTitle: '放大', zoomOutTitle: '缩小' }).addTo(map); </script>
  • 上结果图，此次只是使用插件没有其余功能。中心点是沈阳市。
 
image

Leaflet 画线装饰插件

本次开发使用了另外一个插件polylineDecorator.jsgit

  • index.html
//以下代码须要上一节的代码 var arrow = L.polyline([[41.80, 123.43], [41.07, 123.00]], {opacity: 1,color: 'firebrick'}).bindPopup('I am red:').addTo(map);// var arrow2 = L.polyline([[41.80, 123.43], [40.13, 124.37]], {opacity: 1,color: 'lightgreen'}).bindPopup('I am green:').addTo(map); var arrow3 = L.polyline([[41.07, 123.00], [40.13, 124.37]], {opacity: 1,color: 'lightgreen'}).bindPopup('I am green:').addTo(map); var arrowHead = L.polylineDecorator(arrow, { patterns: [ {offset: '30%' ,endOffset:'90%',repeat: 1000, symbol: L.Symbol.arrowHead({pixelSize: 10, polygon: false,pathOptions: {stroke: true,weight:2,color: 'firebrick'}})} ] }).addTo(map);
  • 上图：在一条线上增长了一个箭头，还有不少的装饰，可访问github主页查看example 的代码
 
image

在 angular中使用 leaflet.js

因为leaflet是 javascript库，而angular 使用的typescript 语言，这就存在一个问题。通过查询，发现了ts的一个功能。.d.ts文件的使用。github

**注：以下内容，仅作介绍了，在咱们的项目中是成功的引入了leaflet了，若是很差使，请你们自行查询一下吧。推荐一个介绍文章 **JavaScript 和 TypeScript 交叉口web

在项目的根目录下建立文件【angular框架中是 src下】 index.d.tstypescript

文件内容：json

declare var L:any; //leaflet

固然在angular.json须要引入相关的 leaflet的js文件api

在projects->architect->build->options->scripts中加入leaflet.js的路径

相关的内容请查阅angular相关的介绍 Angular Cli Stories

做者：WangKane 连接：https://www.jianshu.com/p/40094c2ab109 来源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。
联系我们 沪ICP备13005482号-10