vue中，应用mapbox地图（二）02-mapbox-gl 地图实例——vue之基础版、加点

vue中，应用mapbox地图（二）02-mapbox-gl 地图实例——vue之基础版、加点

1、基础版

第一种方式：需main.js导入

import mapBoxGl from 'mapbox-gl'
Vue.prototype.mbgl = mapBoxGl

map/index.vue

<!-- 组件页面 -->
<template>
    <div id="map"></div>
</template>

<script>



import MapboxLanguage from '@mapbox/mapbox-gl-language';
 export default {
    name: "mapbox_test",
    mounted(){
      this.init()
    },
    methods: {
      init(){
        this.mbgl.accessToken = 'pk.eyJ1IjoiZmFuZ2xhbmsiLCJhIjoiY2lpcjc1YzQxMDA5NHZra3NpaDAyODB4eSJ9.z6uZHccXvtyVqA5zmalfGg';
        this.mbgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
        let map = new this.mbgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v11',
        //   center: [-87.61694, 41.86625],
          center: [116.3902480,39.9096045],
          zoom: 15.99,
          pitch: 40,
          bearing: 1
        })
        map.on('load', function() {
          map.addLayer({
            'id': 'room-extrusion',
            'type': 'fill-extrusion',
            'source': {
              'type': 'geojson',
              'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
            },
            'paint': {
              'fill-extrusion-color': ['get', 'color'],
              'fill-extrusion-height': ['get', 'height'],
              'fill-extrusion-base': ['get', 'base_height'],
              'fill-extrusion-opacity': 0.6
            }
          })
        })
        //中文设置
        //   map.addControl(new MapboxLanguage({defaultLanguage: "zh-Hans"}));  // 写法一
        // 写法二
        var language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
        map.addControl(language);
      }
    }
  }
</script>
<style>
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#map {
  position: absolute;
  left: 0;
  top: 0;
  text-align: left;
  width: 100%;
  height: 100%;
}
</style>

第二种方式：无需main.js导入

map/index.vue

<template>
  <div style="height:100%;width:100%;">
    <div ref="basicMapbox" :style="mapSize"></div>
  </div>
</template>
<script>
import mapboxgl from "mapbox-gl";
import MapboxLanguage  from '@mapbox/mapbox-gl-language'
export default {
  props: {
    mapWidth: {
      type: String
    },
    mapHeight: {
      type: String
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiZmFuZ2xhbmsiLCJhIjoiY2lpcjc1YzQxMDA5NHZra3NpaDAyODB4eSJ9.z6uZHccXvtyVqA5zmalfGg";
      // 英文标注转换为中文   
      mapboxgl.setRTLTextPlugin(
        "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
      );
      const map = new mapboxgl.Map({
        container: this.$refs.basicMapbox,
        // style: "mapbox://styles/mapbox/streets-v9",  // streets-v9 版本错误应为  streets-v11
        style: "mapbox://styles/mapbox/streets-v11",
        center: [114, 38.54],
        zoom: 6
      });
      // 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
      map.addControl(language);

      // 地图导航
      var nav = new mapboxgl.NavigationControl();
      map.addControl(nav, "top-left");
      // 比例尺
      var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: "imperial"
      });
      map.addControl(scale);
      scale.setUnit("metric");
      // 全图
      map.addControl(new mapboxgl.FullscreenControl());
      // 定位
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );
      // console.log(map)
      
    }
  },
  computed: {
    mapSize() {
      let styleObj = {
        width: this.mapWidth,
        height: this.mapHeight
      };
      return styleObj;
    }
  }
};
</script>
<style>
@import url("https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css");
.mapboxgl-map {
  height: 100%;
  width: 100%;
}
</style>

2、加点版

<template>
  <div style="height:100%;width:100%;">
    <div ref="basicMapbox" :style="mapSize"></div>
  </div>
</template>
<script>
import mapboxgl from "mapbox-gl";
import MapboxLanguage  from '@mapbox/mapbox-gl-language'
export default {
  props: {
    mapWidth: {
      type: String
    },
    mapHeight: {
      type: String
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiZmFuZ2xhbmsiLCJhIjoiY2lpcjc1YzQxMDA5NHZra3NpaDAyODB4eSJ9.z6uZHccXvtyVqA5zmalfGg";
      // 英文标注转换为中文   
      mapboxgl.setRTLTextPlugin(
        "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
      );
      const map = new mapboxgl.Map({
        container: this.$refs.basicMapbox,
        // style: "mapbox://styles/mapbox/streets-v9",  // streets-v9 版本错误应为  streets-v11
        style: "mapbox://styles/mapbox/streets-v11",
        center: [114, 38.54],
        zoom: 6
      });
      // 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
      map.addControl(language);

      // 地图导航
      var nav = new mapboxgl.NavigationControl();
      map.addControl(nav, "top-left");
      // 比例尺
      var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: "imperial"
      });
      map.addControl(scale);
      scale.setUnit("metric");
      // 全图
      map.addControl(new mapboxgl.FullscreenControl());
      // 定位
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );
      // console.log(map)
    //   加点版如下
    map.on('load', e => {
    　　　　for (var i = 0; i <= 1000; i++) {
　　　　　　　　　var point = {}
       　　　　　point.lng = 119.48030359931585 + math();
       　　　　　point.lat = 24.412768259791847 + math();
      　　　　　 // 创建Marker
       　　　　　createMarkerByHTMLNode(point)
   　　　　　}
　　　　});
        function math() {
            var flag = Math.floor(Math.random() * 2)
            if (flag == 1) {
                return -(Math.random(14) + Math.random(14))
            } else {
                return Math.random(14) + Math.random(14)
            }
        }
　　　　　// 创建Marker需要设置经纬度坐标
        function createMarkerByHTMLNode(value) {
　　　　　　　// new mapboxgl.Marker(里面可以放marker的属性比如rotation,color,scale)
            new mapboxgl.Marker()
                .setLngLat([value.lng, value.lat])
                .addTo(map);
        }
        map.on('click', e => {
            console.log(e)
        });
        map.addControl(new mapboxgl.NavigationControl());
        // 比例尺
        var scale = new mapboxgl.ScaleControl({
            maxWidth: 100,
            unit: 'metric'
        });
        map.addControl(scale, "bottom-left");   
      
    }
  },
  computed: {
    mapSize() {
      let styleObj = {
        width: this.mapWidth,
        height: this.mapHeight
      };
      return styleObj;
    }
  }
};
</script>
<style>
@import url("https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css");
.mapboxgl-map {
  height: 100%;
  width: 100%;
}
</style>

效果