快速上手mapbox

阳光男孩~Taner

于 2024-09-23 11:15:39 发布

阅读量970

点赞数 17

分类专栏： mapbox教程文章标签：前端

本文链接：https://blog.csdn.net/qq_37750030/article/details/142449683

版权

mapbox教程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

mapbox以开源的形式构建了矢量瓦片技术生态，基于矢量瓦片规格和瓦片渲染规格，开发了矢量切片工具、瓦片服务传输框架、瓦片在各种终端下渲染使用的全套工具包、样式编辑等等。Mapbox 的成立为制图人员和开发人员提供工具来创建他们想要的地图。值得一提的是，目前 Mapbox 提供的制图工具几乎都是开源的。Mapbox 目前主要提供地理数据、渲染客户端和其他与地图相关的服务。Mapbox GL JS 是他们的一个开源客户端库，用于渲染 Web 端的可交互地图。作为 Mapbox 生态系统的一部分，它通常与 Mapbox 提供的其他服务集成在一起，统一对外使用。目前 Mapbox 公司的主营业务除了地图相关产品，还包括 LBS(Location Based Services)服务、自动驾驶、自有数据(Boundaries, Traffic Data, Movement)以及车机服务。Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL 技术，以vector tiles方式数据组织，以Mapbox styles来配置地图样式规则，最终渲染得到交互式地图。

一、Mapbox注册

可参照该方式
麻烦的是要准备好一个有效的国际信用卡，如visa卡。以前注册是不需要信用卡的，现在需要，有点麻烦。注意每月5万次调用
在这里插入图片描述

二、使用

参考文档

1.CDN

在HTML文件的中包含JavaScript和CSS文件。CSS文件是显示地图和使弹出窗口和标记等元素工作所必需的。

<script src='https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css' rel='stylesheet' />

在HTML文件的中包含以下代码

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
	container: 'map', // container ID
	style: 'mapbox://styles/mapbox/streets-v12', // style URL
	center: [117.1,31], // starting position [lng, lat]
	zoom: 9, // starting zoom
});
</script>

2.Module bundler

npm install --save mapbox-gl

将CSS文件包含在HTML文件的中。CSS文件是显示地图和使弹出窗口和标记等元素工作所必需的。

<link href='https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css' rel='stylesheet' />

如果你使用的是像webpack-CSS-loader这样的CSS加载器，你可以直接在JavaScript中导入CSS。

import 'mapbox-gl/dist/mapbox-gl.css';

在JavaScript文件中包含以下代码。

import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"

// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
	container: 'map', // container ID
	style: 'mapbox://styles/mapbox/streets-v12', // style URL
	center: [-74.5, 40], // starting position [lng, lat]
	zoom: 9, // starting zoom
});

3.完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add markers to a web map with a symbol layer</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	// 注意该token随时可以会取消，请换成自己的token
	mapboxgl.accessToken = 'pk.eyJ1IjoiaG91bGFpZGVsdWEiLCJhIjoiY2w4bHIwcW4zMGNwejN6cWppMW9yMWE4dSJ9.L-n07Vi12n9-Qh5108b4qg'; 
    const map = new mapboxgl.Map({
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/streets-v12',
        center:[117.1,31],
        zoom: 3
    });

    map.on('load', () => {
        // Add an image to use as a custom marker
        map.loadImage(
            'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
            (error, image) => {
                if (error) throw error;
                map.addImage('custom-marker', image);
                // Add a GeoJSON source with 2 points
                map.addSource('points', {
                    'type': 'geojson',
                    'data': {
                        'type': 'FeatureCollection',
                        'features': [
                            {
                                // feature for Mapbox DC
                                'type': 'Feature',
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [
                                        117.31, 31
                                    ]
                                },
                                'properties': {
                                    'title': 'Mapbox DC'
                                }
                            },
                            {
                                // feature for Mapbox SF
                                'type': 'Feature',
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [116.2, 39.8]
                                },
                                'properties': {
                                    'title': 'Mapbox SF'
                                }
                            }
                        ]
                    }
                });

                // Add a symbol layer
                map.addLayer({
                    'id': 'points',
                    'type': 'symbol',
                    'source': 'points',
                    'layout': {
                        'icon-image': 'custom-marker',
                        // get the title name from the source's "title" property
                        'text-field': ['get', 'title'],
                        'text-font': [
                            'Open Sans Semibold',
                            'Arial Unicode MS Bold'
                        ],
                        'text-offset': [0, 1.25],
                        'text-anchor': 'top'
                    }
                });
            }
        );
    });
</script>

</body>
</html>