Vue-CLI and Leaflet(2):地图基本操作(放大,缩小,平移,定位等)

栏目: JavaScript · 发布时间: 5年前

内容简介:​ 接着上一篇文章。地图加载成功之后,接下来要开始对对地图的常见功能的实现,一个地图的基本功能包括:​ 通常 WebGIS 中地图平移是最为基本且常用的功能,地图会默认开启平移功能。通常情况下都不需要开发者自己去实现 平移的功能。​ 放大,缩小也一样,地图通常会默认开启此项功能。而大多数情况下,WebGIS 库会提供一些如图所示的控件来实现一级一级地放大的功能。因此, 放大与缩小实现的办法有两种。

​ 接着上一篇文章。地图加载成功之后,接下来要开始对对地图的常见功能的实现,一个地图的基本功能包括: 地图显示 平移 放大 缩小 定位 等功能。

二、实现思路

1)平移

​ 通常 WebGIS 中地图平移是最为基本且常用的功能,地图会默认开启平移功能。通常情况下都不需要开发者自己去实现 平移的功能。

2)放大与缩小

​ 放大,缩小也一样,地图通常会默认开启此项功能。而大多数情况下,WebGIS 库会提供一些如图所示的控件来实现一级一级地放大的功能。因此, 放大与缩小实现的办法有两种。

  1. 自带的控件

    L.map('map', {
     zoomControl: true,
     scrollWheelZoom:true //默认开启鼠标滚轮缩放
    });
    复制代码
  2. 通过地图的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>
复制代码
Vue-CLI and Leaflet(2):地图基本操作(放大,缩小,平移,定位等)

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>
复制代码
Vue-CLI and Leaflet(2):地图基本操作(放大,缩小,平移,定位等)

这样基本上开始提到的 地图显示 平移 放大 缩小 定位 就算都完成了。最后一个定位除了使用 setView 方法之外,也可用根据具体的需求采用 panTo , flyTo 等方法获得更好的交互效果。

panTo flyTo
Vue-CLI and Leaflet(2):地图基本操作(放大,缩小,平移,定位等)
Vue-CLI and Leaflet(2):地图基本操作(放大,缩小,平移,定位等)

四)总结

以上就是第二章的全部内容,这些功能过分简单基础,显得有点无聊。可WebGIS地图中很多实际业务中的功能都是一些简单的功能组合而成。后续的博文中也会涉及到部分复杂的功能,请看到的各位不吝赐教。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

KK三部曲

KK三部曲

(美)凯文·凯利(Kevin Kelly) / 张行舟 / 中信出版社 / 2015-12-12 / 80.00元

《失控 全人类的*终命运和结局》这是《黑客帝国》主要演员的必读物之一,这本关于机器、系统、生物和社会的“大部头”,揭示了社会进化、特别是互联网发展的“先知预言”,从这本书里,人们可以窥探到SNS的今天和未来。 《失控 全人类的*终命运和结局》涉猎:天文、化学、生物、计算机、控制论、运筹学、社会学…… 同时又堪比《黑客帝国》中洞悉未来的“神谕”,正在兴起的“云计算”、“物联网”等都可以在......一起来看看 《KK三部曲》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具