openlayers显示mapbox源

最新推荐文章于 2024-05-14 15:54:14 发布

Da_v_

最新推荐文章于 2024-05-14 15:54:14 发布

阅读量425

点赞数 8

分类专栏：前端学习文章标签： vue.js

本文链接：https://blog.csdn.net/qq_56341866/article/details/135060938

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面的代码acesstoken修改为自己的acesstoken后即可全屏展示地图：

使用前确保拥有openlayer依赖包的ol库npm install ol

在package.json中dependencies中加入：

"ol": "^6.15.1",后yarn install也可

<template>
  <div>
    <div ref="map" class="map"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

export default {
  name: 'MapboxMap',
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const mapboxAccessToken = '你的mapbox acesstoken';

      // Create a Mapbox layer
      const mapboxLayer = new TileLayer({
        source: new XYZ({
          url: `https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=${mapboxAccessToken}`,
        }),
      });

      // Create a map
      this.map = new Map({
        target: this.$refs.map,
        layers: [mapboxLayer],
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
    },
  },
};
</script>

<style scoped>
.map {
  height: 100vh; /* 100% of the viewport height */
  width: 100vw; /* 100% of the viewport width */
}
</style>