vue中展示mapbox地图

妖狐艹你老母 2021-07-25 13:48 1140阅读 0赞

1，vue中安装mapbox

cnpm i mapbox-gl -S

2,main.js中引入

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

3.展示地图

<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，效果展示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

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 )
    	}
    }

效果展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]![20200224114948837.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/c275e61bbe954cd2869b105a9a53d108.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200224114939856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20200224114948837.png]: /images/20210725/bf88129ec45d47628c110b5d4b587d71.png