vue中展示mapbox地图

最新推荐文章于 2024-10-22 02:59:12 发布

疆~

最新推荐文章于 2024-10-22 02:59:12 发布

阅读量7k

点赞数 5

本文链接：https://blog.csdn.net/qq_40323256/article/details/104457022

版权

mapbox 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

1，vue中安装mapbox

cnpm i mapbox-gl -S

2,main.js中引入

import mapBoxGl from 'mapbox-gl'
Vue.prototype.$mapboxgl = mapBoxGl

3.展示地图

<!-- mapbox -->
<template>
  <div id="map"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
  created() {},
  mounted() {
    this.initmap();
  },
  computed: {},
  methods: {
    initmap() {
      this.$mapboxgl.accessToken =
        "pk.eyJ1IjoibGlqaWFuZ2ppYW5namlhbmciLCJhIjoiY2s2b2czbmltMG14cDNkbXpldjhkd3c3ZiJ9.zBaMzJo2X2UVPyFTtd5hEQ";
      var map = new this.$mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        center: [104.07, 30.67],
        zoom: 5,
        // pitch: 60, //视野倾斜，0-60
        // bearing: -17.6,//视野旋转角度
      });

      //注册点击事件
      map.on("click", function(e) {
        console.log("点击");
      });
    }
  }
};
</script>

<style lang="scss">
#map {
  height: 500px;
  // border: 1px solid red;
}
</style>

4，效果展示

5，地图飞至某一位置（flyTo()）

注意：“load”后面的回调函数必须使用箭头函数形式，不能用function（）

map.on('load',()=>{
		  map.flyTo({
          center: [104.07, 30.67],
          zoom: 5,
          speed: 0.2,
          curve: 2,
          
        })
	  })

6,切换图层（osm和卫星图）

html

<el-radio-group v-model="currentMap" size="small" @change="handleSelect">
		<el-radio-button label="streets-v11">街道图</el-radio-button>
		<el-radio-button label="satellite-v9">卫星图</el-radio-button>
</el-radio-group>

data() {
    return {
		 currentMap: 'streets-v11'
    };
  },
methods: {
    handleSelect(item){
		map.setStyle('mapbox://styles/mapbox/' +item )
	}
}

效果展示：