👨⚕️ 主页: gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏:mapbox 从入门到精通
文章目录
- 一、🍀前言
- 1.1 ☘️mapboxgl.Map 地图对象
- 二、🍀加载mapbox官方地图
- 1. ☘️实现思路
- 2. ☘️代码样例
一、🍀前言
本文详细介绍如何基于mapbox-gl v3.8.0版本中加载mapbox官网地图,亲测可用。希望能帮助到您。一起学习,加油!加油!
1.1 ☘️mapboxgl.Map 地图对象
HREE.PlaneGeometry 用于生成平面几何体的类。
构造函数:
new Map class(options: Object)
本例使用属性:
二、🍀加载mapbox官方地图
1. ☘️实现思路
- 1、创建html文件,引入mapbox-gl v3.8.0的样式和js库文件。
- 2、添加"<div id=“map”>"html要素,作为mapboxgl.Map的地图容器。
- 3、创建"<script>“标签,在”<script>"内,实现加载mapbox官方地图的方法。
具体方法:设置mapbox的accessToken,作为访问官方资源的token依据。创建mapboxgl.Map地图对象map,构造函数中,传入container的值为‘map’作为渲染的容器(此处为2步骤div标签的id)。zoom设置为12,表示初始化地图缩放级别。minZoom设置为0,表示最小缩放级别。center为[116.4, 39.9],表示初始化坐标位置。style设置为‘mapbox://styles/mapbox/standard’,为官网标准地图样式地址。具体代码参考代码样例。
2. ☘️代码样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mapbox基础,加载mapbox地图</title>
<script src="lib/jquery-3.4.1.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
</head>
<style>
html, body {
height: 100%;
margin: 0px;
}
#map {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="map">
</div>
</body>
<script type="text/javascript">
// 需要maobox官网注册账户,获取accessToken,否则无法访问官网服务
mapboxgl.accessToken = 'your token';
var map = new mapboxgl.Map({
container: 'map',
zoom: 12,
minZoom: 0,
center: [116.4, 39.9],
style: 'mapbox://styles/mapbox/standard'
})
map.on('load', () => {
})
</script>
</html>
效果如下:
地图初始化状态,定位到北京。
缩小到能看到地球全貌