mapbox+基础应用+动画实例

最新推荐文章于 2025-03-15 16:06:27 发布

放逐者-保持本心，方可放逐

最新推荐文章于 2025-03-15 16:06:27 发布

阅读量1.7k

点赞数 32

分类专栏：地图类文章标签： javascript vue.js 前端 reactjs

本文链接：https://blog.csdn.net/m0_51244077/article/details/143493960

版权

地图类专栏收录该内容

5 篇文章

订阅专栏

文章目录

mapbox 基础介绍

一、Mapbox概述

定义与用途
- Mapbox是一个强大的地图平台，提供了一系列用于创建自定义地图的工具和服务。它可以用于构建各种类型的地图应用，包括但不限于地理信息系统（GIS）应用、移动地图应用、数据可视化等。例如，物流企业可以利用Mapbox构建地图来跟踪货物运输路线；旅游公司可以制作旅游景点地图来帮助游客规划行程。
核心优势
- 高度自定义：Mapbox允许开发者对地图的样式进行深度定制。可以修改地图的颜色、字体、图标等各种元素，甚至可以创建全新的地图主题。比如，你可以制作一个具有复古风格的地图，将街道颜色设置为棕褐色，建筑物图标设计成古老的样式。
- 数据驱动：它能够很好地整合各种地理数据。无论是矢量数据（如道路网络、行政边界等）还是栅格数据（如卫星图像），都可以方便地加载到Mapbox地图中。而且，通过与其他数据源（如实时交通数据、气象数据等）的集成，可以创建动态的地图应用。例如，在交通地图中实时显示路况信息。
- 跨平台支持：Mapbox支持多种平台，包括Web浏览器、iOS和Android移动设备等。这意味着你可以使用相同的代码库和地图数据来开发不同平台上的地图应用，提高开发效率。

二、Mapbox基本概念

地图样式（Styles）
- 地图样式决定了地图的外观。Mapbox提供了多种预设的地图样式，如街道地图（streets）、卫星地图（satellite）、户外地图（outdoors）等。同时，也可以通过Mapbox Studio（一个在线地图设计工具）来创建自己的地图样式。在Mapbox Studio中，你可以调整地图的各个图层（Layers）的属性，如颜色、透明度、显示顺序等。例如，在一个城市地图中，可以将公园图层的颜色设置为绿色，将水系图层的颜色设置为蓝色，并且可以控制这些图层的显示优先级。
地图图层（Layers）
- 地图是由多个图层组成的。每个图层可以包含不同类型的地理数据，如点（例如，地标建筑的位置）、线（例如，道路、河流）和多边形（例如，城市区域、湖泊）。这些图层可以叠加在一起，形成完整的地图视图。例如，在一个旅游地图中，可能有一个图层显示旅游景点的位置（点图层），另一个图层显示连接景点的道路（线图层），还有一个图层显示景点所在的区域范围（多边形图层）。
地理坐标（Coordinates）
- Mapbox使用地理坐标来定位地图上的元素。地理坐标通常采用经度（longitude）和纬度（latitude）来表示。经度表示东西方向的位置，纬度表示南北方向的位置。例如，北京的中心位置大约是北纬39.9°、东经116.4°。在Mapbox地图中，所有的地理数据（如地图标记、地理区域等）都是基于这些坐标来定位的。

三、Mapbox入门使用步骤（以Web开发为例）

获取访问令牌（Access Token）
- 要使用Mapbox的服务，首先需要注册一个Mapbox账号并获取访问令牌。访问令牌用于验证你的身份并授权你使用Mapbox的地图资源。在Mapbox官网（https://www.mapbox.com/）注册账号后，可以在账户设置中找到访问令牌。这个令牌需要妥善保管，类似于密码，并且在将Mapbox地图嵌入到网页或应用中时需要使用它。
在HTML页面中引入Mapbox GL - JS库
- Mapbox GL - JS是一个用于在Web浏览器中创建交互式地图的JavaScript库。可以通过在HTML页面的<head>标签中添加以下代码来引入该库：
```
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
```
- 这里的版本号（v2.0.0）可能会随着时间更新，你可以根据实际情况使用最新版本。
创建基本地图容器（Div）
- 在HTML的<body>标签中创建一个<div>元素，用于容纳地图。例如：
```
<div id="map"></div>
```
- 同时，可以通过CSS来设置这个<div>元素的大小和样式，如：
```
#map {
    width: 100%;
    height: 400px;
}
```
初始化地图（JavaScript）
- 在JavaScript代码中，使用获取到的访问令牌来初始化地图。以下是一个简单的示例：
```
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [116.4, 39.9],
    zoom: 10
});
```
- 在这个示例中，container指定了地图容器的ID（前面创建的<div>元素的ID），style选择了一个预设的地图样式（这里是街道地图streets - v11），center设置了地图的初始中心位置（经度为116.4，纬度为39.9），zoom设置了地图的初始缩放级别。

mapbox 基础应用

前端集成Mapbox GL - JS库
- 安装方式：
  - 对于Web项目，最常见的是通过CDN（内容分发网络）引入Mapbox GL - JS库。如在HTML文件的<head>部分添加以下代码来引入CSS和JavaScript文件：
```
<link href="https://api.mapbox.com/mapbox - gl - js/v2.8.2/mapbox - gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox - gl - js/v2.8.2/mapbox - gl.js"></script>
```
    - 注意上面的版本号（v2.8.2）可以根据实际情况替换为最新版本。另外，也可以使用包管理器（如npm）安装，通过命令npm install mapbox - gl将库安装到本地项目中，这样更便于管理依赖和进行构建工具集成。
- 初始化地图容器：
  - 在HTML的<body>标签内创建一个<div>元素作为地图容器。例如：
```
<div id="map - container"></div>
```
  - 并且可以通过CSS来设置这个容器的样式，比如大小、背景颜色等。以下是设置宽度和高度的CSS示例：
```
#map - container {
    width: 800px;
    height: 600px;
}
```
- 初始化地图对象：
  - 在JavaScript文件中，首先要设置Mapbox的访问令牌（access token）。访问令牌是使用Mapbox服务的凭证，可以在Mapbox官网注册账号后获取。然后，使用mapboxgl.Map构造函数来初始化地图。例如：
```
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
    container: 'map - container',
    style: 'mapbox://styles/mapbox/streets - v11',
    center: [- 74.5, 40],
    zoom: 9
});
```
    - 这里container参数指定了地图容器的ID，style参数选择了地图的样式（这个样式是Mapbox提供的预设样式之一，格式为mapbox://styles/...），center参数设置地图的中心坐标（以经度和纬度表示），zoom参数确定地图的初始缩放级别。
地图样式和图层操作
- 地图样式基础：
  - Mapbox的地图样式决定了地图的外观，包括颜色、字体、图标等元素。除了使用预设的地图样式（如streets - v11、satellite - v9等），还可以通过Mapbox Studio在线工具自定义样式。在前端代码中，可以通过map.setStyle()方法来动态切换地图样式。例如：
```
const newStyle = 'mapbox://styles/mapbox/light - v10';
map.setStyle(newStyle);
```
- 图层管理：
  - 地图是由多个图层（Layers）组成的，每个图层可以包含不同类型的地理数据，如点（代表地标等）、线（如道路、河流）和多边形（如城市区域、湖泊）。可以使用map.addLayer()方法添加新图层。假设我们有一个包含地理数据（以GeoJSON格式为例）的变量newLayerData，要添加一个点图层，可以这样做：
```
const newLayer = {
    id: 'new - point - layer',
    type: 'circle',
    source: {
        type: 'geojson',
        data: newLayerData
    },
    paint: {
        'circle - radius': 5,
        'circle - color': 'red'
    }
};
map.addLayer(newLayer);
```
    - 在这个示例中，定义了一个新图层的配置对象newLayer，包括图层的ID、类型（这里是circle表示点图层）、数据源（以GeoJSON格式）和绘制属性（如点的半径和颜色）。然后使用map.addLayer()将这个图层添加到地图中。
  - 也可以使用map.removeLayer()方法移除指定的图层。例如，如果要移除刚才添加的new - point - layer图层，可以使用map.removeLayer('new - point - layer');。
添加地图交互功能
- 鼠标交互：
  - 可以为地图添加鼠标事件监听器，实现诸如鼠标点击、移动等交互功能。例如，添加一个鼠标点击事件监听器来获取点击位置的坐标：
```
map.on('click', (e) => {
    console.log('Clicked at:', e.lngLat);
});
```
    - 这里map.on()方法用于监听地图的click事件，当用户在地图上点击时，会在控制台输出点击位置的经度和纬度（存储在e.lngLat对象中）。
- 缩放和平移功能：
  - Mapbox地图默认提供了缩放和平移的交互功能。可以通过设置map.dragPan.enabled和map.zoom. enabled属性来控制这些功能是否启用。例如，要禁用地图的平移功能，可以使用map.dragPan.enabled = false;。
  - 还可以通过代码控制地图的缩放和平移。例如，使用map.flyTo()方法可以实现平滑地将地图移动到指定位置并设置缩放级别。假设要将地图移动到新的中心坐标[-73, 41]并且缩放级别设置为12，可以这样做：
```
map.flyTo({
    center: [-73, 41],
    zoom: 12
});
```
添加地图标记（Markers）和信息窗口（Pop - ups）
- 添加标记：
  - 可以使用mapboxgl.Marker类来添加地图标记。例如，要在指定坐标位置添加一个标记，可以这样做：
```
const marker = new mapboxgl.Marker()
   .setLngLat([-74, 40.7])
   .addTo(map);
```
    - 这里创建了一个mapboxgl.Marker对象，通过setLngLat()方法设置标记的位置（经度和纬度），然后使用addTo()方法将标记添加到地图上。
- 添加信息窗口：
  - 信息窗口用于在用户点击标记时显示相关的信息。可以结合标记来添加信息窗口。例如：
```
const popup = new mapboxgl.Popup()
   .setHTML('<h3>Example Location</h3><p>Some description here.</p>')
   .addTo(map);
marker.setPopup(popup);
```
    - 首先创建一个mapboxgl.Popup对象，通过setHTML()方法设置信息窗口的内容（这里是简单的HTML代码），然后将信息窗口添加到地图上。最后，通过标记的setPopup()方法将信息窗口与标记关联起来，这样当用户点击标记时，就会显示信息窗口。

框架集成

在 React 中集成 Mapbox

安装和配置
首先，使用npm或yarn安装mapbox - gl和react - mapbox - gl库。例如，通过
npm install mapbox-gl react-mapbox-gl命令安装。
在项目中，需要获取 Mapbox 的访问令牌（access token），可以在 Mapbox 官网注册账号后得到。然后在index.js（或main.js）文件中，将访问令牌设置为全局变量，如下：
```
import React from 'react';
import ReactDOM from 'react - dom';
import App from './App';
import'mapbox - gl/dist/mapbox - gl.css';
// 设置Mapbox访问令牌
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
ReactDOM.render(
    <App />,
    document.getElementById('root')
);
```

创建基础地图组件
创建一个 React 组件来显示 Mapbox 地图。例如：

import React, { useEffect, useRef } from 'react';
import ReactMapboxGl, { Layer, Source } from 'react - mapbox - gl';
const MapboxMap = () => {
    const mapContainer = useRef(null);
    useEffect(() => {
        const map = new mapboxgl.Map({
            container: mapContainer.current,
            style: 'mapbox://styles/mapbox/streets - v11',
            center: [-74.5, 40],
            zoom: 9
        });
        return () => map.remove();
    }, []);
    return (
        <div ref={mapContainer} style={{ width: '100%', height: '400px' }} />
    );
};
export default MapboxMap;

在这个组件中，使用useEffect钩子在组件挂载时初始化地图。useRef用于创建一个对地图容器（div元素）的引用。当组件卸载时，通过返回的清除函数map.remove()来清理地图资源。

添加图层和交互功能
可以在地图组件中添加图层。例如，添加一个简单的点图层：

const MapboxMap = () => {
    // 其他代码...
    useEffect(() => {
        const map = new mapboxgl.Map({...});
        const data = {
            type: 'FeatureCollection',
            features: [
                {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [-74.4, 40.7]
                    },
                    properties: {
                        title: 'Example Point'
                    }
                }
            ]
        };
        // 添加数据源
        map.addSource('point - source', {
            type: 'geojson',
            data: data
        });
        // 添加图层
        map.addLayer({
            id: 'point - layer',
            type: 'circle',
            source: 'point - source',
            paint: {
                'circle - radius': 5,
                'circle - color': 'red'
            }
        });
        return () => map.remove();
    }, []);
    // 其他代码...
};

这里创建了一个包含一个点的地理数据（GeoJSON 格式），添加了数据源和图层来在地图上显示这个点。对于交互功能，可以添加鼠标点击事件来处理图层点击。例如：

useEffect(() => {
    const map = new mapboxgl.Map({...});
    // 添加图层和数据源的代码...
    map.on('click', 'point - layer', (e) => {
        console.log('Clicked on point:', e.features[0].properties.title);
    });
    return () => map.remove();
}, []);

在 Vue3 中集成 Mapbox

安装和配置
同样，先使用npm或yarn安装mapbox-gl和vue3-mapbox（假设使用这个 Vue3 兼容的库）。例如，npm install mapbox-gl vue3-mapbox。
在main.js文件中，设置 Mapbox 访问令牌并注册vue3-mapbox组件。例如：

import { createApp } from 'vue';
import App from './App.vue';
import'mapbox - gl/dist/mapbox - gl.css';
import Vue3Mapbox from 'vue3 - mapbox';
// 设置Mapbox访问令牌
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const app = createApp(App);
app.use(Vue3Mapbox);
app.mount('root');

创建基础地图组件
在 Vue3 组件中创建地图。例如：

 <template>
     <div class="map - container">
         <mapbox - map
             ref="map"
             :style - object="{ width: '100%', height: '400px' }"
             :access - token="accessToken"
             :map - style="mapStyle"
             :center="center"
             :zoom="zoom"
         >
         </mapbox - map>
     </div>
 </template>
 <script setup>
 import { ref } from 'vue';
 const accessToken = 'YOUR_ACCESS_TOKEN';
 const mapStyle = 'mapbox://styles/mapbox/streets - v11';
 const center = [-74.5, 40];
 const zoom = 9;
 const map = ref(null);
 </script>
 <style scoped>
.map - container {
     width: 100%;
     height: 100%;
 }
 </style>

这里使用vue3 - mapbox库中的mapbox - map组件创建地图，通过ref获取地图组件的引用，并且传递了地图的样式、中心位置、缩放级别等参数。

添加图层和交互功能
添加图层的方式与 React 类似，在 Vue3 组件中可以通过mounted生命周期钩子来添加图层。例如：

<script setup>
import { ref, onMounted } from 'vue';
const accessToken = 'YOUR_ACCESS_TOKEN';
const mapStyle = 'mapbox://styles/mapbox/streets - v11';
const center = [-74.5, 40];
const zoom = 9;
const map = ref(null);
onMounted(() => {
    const data = {
        type: 'FeatureCollection',
        features: [
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [-74.4, 40.7]
                },
                properties: {
                    title: 'Example Point'
                }
            }
        ]
    };
    // 添加数据源
    map.value.map.addSource('point - source', {
        type: 'geojson',
        data: data
    });
    // 添加图层
    map.value.map.addLayer({
        id: 'point - layer',
        type: 'circle',
        source: 'point - source',
        paint: {
            'circle - radius': 5,
            'circle - color': 'red'
        }
    });
});
</script>

对于交互功能，例如添加鼠标点击事件，可以这样做：

onMounted(() => {
    // 添加图层和数据源的代码...
    map.value.map.on('click', 'point - layer', (e) => {
        console.log('Clicked on point:', e.features[0].properties.title);
    });
});

动画实例

沿路径移动的标记动画：

数据准备：

首先要有路径的地理数据，通常以 GeoJSON 格式表示。例如一个简单的两点之间的路径数据可能如下：

var origin = [-122.414, 37.776]; // 起始点经纬度
var destination = [-77.032, 38.913]; // 终点经纬度
var route = {
    "type": "featurecollection",
    "features": [{
        "type": "feature",
        "geometry": {
            "type": "linestring",
            "coordinates": [origin, destination]
        }
    }]
};

然后准备一个表示移动标记的初始点数据，起始位置通常在路径的起点：

var point = {
    "type": "featurecollection",
    "features": [{
        "type": "feature",
        "properties": {},
        "geometry": {
            "type": "point",
            "coordinates": origin
        }
    }]
};

代码实现：

mapboxgl.accessToken = 'your_mapbox_access_token';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: origin, // 以起始点为中心
    zoom: 10 // 设置初始缩放级别
});

// 计算线段长度和插点
var lineDistance = turf.lineDistance(route.features[0], 'kilometers');
var steps = 500;
var arc = [];
for (var i = 0; i < lineDistance; i += lineDistance / steps) {
    var segment = turf.along(route.features[0], i, 'kilometers');
    arc.push(segment.geometry.coordinates);
}
route.features[0].geometry.coordinates = arc;

var counter = 0;
function animate() {
    // 更新点的坐标
    point.features[0].geometry.coordinates = route.features[0].geometry.coordinates(counter);
    // 更新地图上的数据源
    map.getSource('pointSource').setData(point);
    // 计算标记的方向角度
    var start = route.features[0].geometry.coordinates(counter >= steps? counter - 1 : counter);
    var end = route.features[0].geometry.coordinates(counter >= steps? counter : counter + 1);
    if (start && end) {
        point.features[0].properties.bearing = turf.bearing(turf.point(start), turf.point(end));
    }
    // 继续下一帧动画
    if (counter < steps) {
        requestAnimationFrame(animate);
    }
    counter++;
}
// 添加路径和点的图层
map.addSource('routeSource', {
    'type': 'geojson',
    'data': route
});
map.addSource('pointSource', {
    'type': 'geojson',
    'data': point
});
map.addLayer({
    'id': 'routeLayer',
    'type': 'line',
    'source': 'routeSource',
    'layout': {},
    'paint': {
        'line-width': 3,
        'line-color': '#007cbf'
    }
});
map.addLayer({
    'id': 'pointLayer',
    'type': 'symbol',
    'source': 'pointSource',
    'layout': {
        'icon-image': 'airplane-icon', // 使用自定义的飞机图标
        'icon-rotate': ['get', 'bearing'],
        'icon-anchor': 'bottom'
    }
});
// 开始动画
animate();

在上述代码中，首先创建了 Mapbox 地图实例，然后通过计算路径上的插点来模拟一个平滑的弧线。使用 requestAnimationFrame 不断更新标记的位置和方向，并在地图上添加了路径和标记的图层。注意，你需要准备一个飞机图标或其他自定义的图标，并将 icon-image 的值设置为该图标的名称。

相机视角移动动画：

数据准备：
- 定义相机移动的路径，可以是一系列的经纬度坐标点组成的数组。例如：
```
var cameraPath = [
    [-120, 30],
    [-110, 35],
    [-100, 40]
];
```

代码实现：

mapboxgl.accessToken = 'your_mapbox_access_token';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: cameraPath[0], // 初始中心为路径的第一个点
    zoom: 8 // 初始缩放级别
});

var animationDuration = 5000; // 动画持续时间（毫秒）
var startTime = null;
function frame(time) {
    if (!startTime) startTime = time;
    var phase = (time - startTime) / animationDuration;
    if (phase > 1) {
        // 动画结束后重新开始
        startTime = null;
    }
    // 获取当前阶段的相机位置
    var currentPosition = cameraPath[Math.floor(phase * cameraPath.length)];
    // 设置相机位置
    map.easeTo({
        center: currentPosition,
        zoom: 8,
        bearing: 0,
        pitch: 0
    });
    // 继续下一帧
    requestAnimationFrame(frame);
}
// 开始动画
requestAnimationFrame(frame);