文档章节

Angular 个人深究(五)【外部包引用 Leaflet 简单实用】

SEOwhywhy
 SEOwhywhy
发布于 2018/12/03 15:46
字数 1717
阅读 49
收藏 0

  Leaflet 使用
  
  最近在Angular项目中,用到了地图,由于种种原因放弃了百度地图api使用,最后选择了leaflet,简单介绍一下。
  
  介绍:
  
  Leaflet 是一个为移动设备设计的交互式地图的开源的 javascript库, 并只有38k,包含了大多数开发者需要的地图特点。
  
  准备:下载 leaflet 文件
  
  访问: Leaflet下载官网
  
  在单一的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>
  
  上述代码可直接使用,下面先上效果图,再解释代码的含义
  
  代码解释:
  
  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主页查看。下面我们看看如何使用它。
  
  准备去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 =www.michenggw.com 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://www.yigouyule2.cn   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: [www.mhylpt.com]
  
  },
  
  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: [www.feifanyule.cn/]
  
  }
  
  };
  
  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>
  
  上结果图,这次只是使用插件没有其他功能。中心点是沈阳市。
  
  Leaflet 画线装饰插件
  
  本次开发使用了另一个插件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 的代码
  
  在 angular中使用 leaflet.js
  
  由于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

© 著作权归作者所有

SEOwhywhy
粉丝 9
博文 155
码字总数 342404
作品 0
私信 提问
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
7.1K
22
使用 ng-packagr 打包 Angular

写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的...

卡色
2018/09/29
0
0
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名
2011/01/20
356.9K
46
Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh
2018/05/05
0
0
Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区
2018/05/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Sqoop之导入Mysql数据到Hive出现ASCII

问题是这样的,从Mysql中导入数据到Hive中,Mysql中数据是"T2",到Hive中后,发现变为"54 32",咦,怎么乱码了,感觉这像ASCII编码。 现象有了,之前都没遇到过这样,觉得很奇怪,迅速找了下...

克虏伯
14分钟前
2
0
深度科技受邀参加鲲鹏计算产业峰会·海南

10月22日,华为及生态伙伴共同举办了以“鲲鹏展翅,力算未来 共赢多样性计算时代”为主题的“鲲鹏计算产业峰会•海南”,来自各领域的300多名行业客户、专家及生态伙伴齐聚一堂,共同分享计算...

后浪涛涛
16分钟前
3
0
【Android JetPack系列】LifeCycles

一、简介 Lifecycles 是一个持有组件生命周期状态(如活动或片段)信息的类,并允许其他对象观察此状态。 生命周期使用两个主要枚举来跟踪其关联组件的生命周期状态: Event:从 框架 和 Li...

Agnes2017
17分钟前
2
0
配置码云git自动更新的webhook

配置项目提交到git的时候自动同步服务器代码 一、在服务器项目跟目录新建文件hook.php 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php $json = file_get_contents("php://input"); $data ......

dragon_tech
23分钟前
2
0
一道题深度剖析this指向

< script > var num = 1 ; var myObject = { num : 2 , add : function (){ this . num = 3 ; ( function (){ // 这里的 this 是 window,因为自调用函数的调用者是windo,使用箭头函数则指向......

李超明
27分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部