Vue-CLI and Leaflet(2):地图基本操作(放大,缩小,平移,定位等)
栏目: JavaScript · 发布时间: 5年前
内容简介: 接着上一篇文章。地图加载成功之后,接下来要开始对对地图的常见功能的实现,一个地图的基本功能包括: 通常 WebGIS 中地图平移是最为基本且常用的功能,地图会默认开启平移功能。通常情况下都不需要开发者自己去实现 平移的功能。 放大,缩小也一样,地图通常会默认开启此项功能。而大多数情况下,WebGIS 库会提供一些如图所示的控件来实现一级一级地放大的功能。因此, 放大与缩小实现的办法有两种。
接着上一篇文章。地图加载成功之后,接下来要开始对对地图的常见功能的实现,一个地图的基本功能包括: 地图显示 , 平移 , 放大 , 缩小 , 定位 等功能。
二、实现思路
1)平移
通常 WebGIS 中地图平移是最为基本且常用的功能,地图会默认开启平移功能。通常情况下都不需要开发者自己去实现 平移的功能。
2)放大与缩小
放大,缩小也一样,地图通常会默认开启此项功能。而大多数情况下,WebGIS 库会提供一些如图所示的控件来实现一级一级地放大的功能。因此, 放大与缩小实现的办法有两种。
-
自带的控件
L.map('map', { zoomControl: true, scrollWheelZoom:true //默认开启鼠标滚轮缩放 }); 复制代码
-
通过地图的API实现
// 逐级放大, delta 默认 1 map.zoomIn( ?delta ) // 逐级缩小, delta 默认 1 map.zoomOut( ?delta ) 复制代码
三)代码实现
1)自带的控件
实现很简单,默认情况下 Leaflet地图对象的 zoomControl
是开启的。通常情况下时需要将 zoomControl
关闭。在我们的工程中则应该工程的这个位置去控制:
// src/views/Map.vue <template> <div class="map-container" id="map-container"></div> </template> <script> // @ is an alias to /src export default { name: "mapView", components: {}, data() { return { map: null, OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }; }, mounted() { this.map = this.$utils.map.createMap("map-container", { zoomControl: true }); this.$utils.map.createTileLayer(this.map, this.OSMUrl, {}); this.map.setView([51.505, -0.09], 13); } }; </script> <style lang="less"> .map-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } </style> 复制代码
2) 自定义放大缩小功能
大多数时候,项目中为了配合整体的UI风格,需要实现自定义控件的样式来实现缩放工。因此,这里结合Vuejs的特性,我自定义了一个缩放功能的组件。组件的功能包括,放大,缩小,以及回到初始化点。
// src/components/NavigationCtrl.vue <template> <div class="map-navigation"> <ul> <li @click="$emit('zoomIn')">+</i> <li @click="$emit('resetMap')">·</i> <li @click="$emit('zoomOut')">-</i> </ul> </div> </template> <script> export default { name: "mapNavigation" }; </script> <style lang="less"> .map-navigation { position: absolute; left: 15px; top: 15px; z-index: 999; width: 30px; box-shadow: 0px 0px 50px 2px rgba(0, 0, 0, 0.35); background-color: #fff; ul { padding: 0; margin: 0; list-style: none; li { width: 30px; height: 28px; font-size: 16px; line-height: 28px; cursor: pointer; } li:hover { background-color: rgb(212, 224, 246); } } } </style> 复制代码
然后在 map.vue
引用组件,这里需要注意 Vuejs 中父组件与子组件之间的事件绑定:
// src/views/Map.vue <template> <div class="map-container"> <div id="map-container"></div> <NavigationCtrl @zoomIn="zoomIn" @zoomOut="zoomOut" @resetMap="resetMap"></NavigationCtrl> </div> </template> <script> // @ is an alias to /src import NavigationCtrl from "@/components/NavigationCtrl.vue"; export default { name: "mapView", components: { NavigationCtrl }, data() { return { map: null, OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }; }, mounted() { this.map = this.$utils.map.createMap("map-container", { zoomControl: false }); this.$utils.map.createTileLayer(this.map, this.OSMUrl, {}); this.map.setView([51.505, -0.09], 13); }, methods: { zoomIn() { this.map.zoomIn(); }, zoomOut() { this.map.zoomOut(); }, resetMap() { // this.map.setView([51.505, -0.09], 13); } } }; </script> <style lang="less"> .map-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #map-container { width: 100%; height: 100%; } </style> 复制代码
这样基本上开始提到的 地图显示 , 平移 , 放大 , 缩小 , 定位 就算都完成了。最后一个定位除了使用 setView
方法之外,也可用根据具体的需求采用 panTo
, flyTo
等方法获得更好的交互效果。
panTo | flyTo |
---|---|
四)总结
以上就是第二章的全部内容,这些功能过分简单基础,显得有点无聊。可WebGIS地图中很多实际业务中的功能都是一些简单的功能组合而成。后续的博文中也会涉及到部分复杂的功能,请看到的各位不吝赐教。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Growth Hack 這樣做
Xdite / PCuSER電腦人文化 / 2016-5-7 / 300.00台幣
◎具體教你在預算有限的情況之下,把成長做出來的可行與必要方法! ◎帶動台灣成長駭客話題的專業講師,親授讓產品突破80分的成長秘笈 @這本書要給誰看? 1. 創業者、個人品牌經營者,想要提高自己服務轉換率的人。 2. 空有產品,但是賣不出去,花了錢投廣告卻效果低落的人。 @這本書有什麼不一樣? 1.全球最重要的趨勢,台灣最知名的 Growth Hack 講師 Xd......一起来看看 《Growth Hack 這樣做》 这本书的介绍吧!