最近在Angular项目中,用到了地图,由于种种原因放弃了百度地图api使用,最后选择了leaflet,简单介绍一下。
Leaflet 是一个为移动设备设计的交互式地图的开源的 javascript库, 并只有38k,包含了大多数开发者需要的地图特点。
访问: Leaflet下载官网
为什么单独说,因为leaflet提供了一个插件 Leaflet.ChineseTmsProviders可以访问 github主页查看。下面我们看看如何使用它。
准备去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> 上结果图,这次只是使用插件没有其他功能。中心点是沈阳市。本次开发使用了另一个插件polylineDecorator.js
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 的代码由于leaflet是 javascript库,而angular 使用的typescript 语言,这就存在一个问题。经过查询,发现了ts的一个功能。.d.ts文件的使用。
注:如下内容,仅做介绍了,在我们的项目中是成功的引入了leaflet了,如果不好使,请大家自行查询一下吧。推荐一个介绍文章 JavaScript 和 TypeScript 交叉口
在项目的根目录下创建文件【angular框架中是 src下】 index.d.ts
文件内容:
declare var L:any; //leaflet当然在angular.json需要引入相关的 leaflet的js文件
在projects->architect->build->options->scripts中加入leaflet.js的路径相关的内容请查阅angular相关的介绍 Angular Cli Stories
转载于:https://www.cnblogs.com/primadonna/p/10058627.html
相关资源:Angular+Leaflet地图