【mapbox基础、基于vue】初始化地图并设置中文

最新推荐文章于 2024-03-28 11:32:36 发布

xiaozhahza

最新推荐文章于 2024-03-28 11:32:36 发布

阅读量332

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaozhahza/article/details/130125110

版权

首先引入依赖

地图包

npm install --save mapbox-gl

语言包

npm install --save mapbox-gl @mapbox/mapbox-gl-language

初始化地图

<div id="map"></div>
<----这里必须用id来创建容器----->

import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"
 
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFpc3ktYmVlIiwiYSI6ImNqeHRzbDMzNTB4cGwzY3FtcTB3dzE3MXgifQ.gUTqZURLqh4DFSWN7u_8-Q'; // 这个是token可自己申请使用也可以直接用这个
const map = new mapboxgl.Map({
container: 'map', // 容器id
style: 'mapbox://styles/mapbox/streets-v12', // 设置底图
center: [-74.5, 40], // 视图中心坐标，采用 [lng, lat] 格式
zoom: 9, // 视图开始层级，设置此处可以设置初始地图层级大小
});