Mapbox入门知识

标签： Mapbox 分类： Javascript 创建时间：2019-12-12 06:50:46 更新时间：2025-01-17 10:39:22

1.前言

参考文章：
1.mapbox.gl源码解析——基本架构与数据渲染流程
2.mapbox 本地切片的制作和访问
3.四步走，Mapbox 雷达数据可视化指南
4.Mapbox矢量瓦片标准
5.Mapbox轨迹回放
6.从零开始搭建开源智慧城市项目（七）场景导入到地图中。 主要思路就是mapbox的customLayer图层，可以把three的3d场景通过场景和控制器的重叠进行导入，这样本质上mapbox和three还是两个互不干扰的场景。
【7】.好看的地图

2.坐标系问题

早期的 mapbox 是不支持其他坐标系的，只支持 3857 坐标系数据，像主流的gis厂商， 中地数码，超图，浙江天地图都基于Mapbox实现了部分其他坐标系的。自从在2021年11月更新版本v2.6.0后，开始支持自定义投影了。我看了官方的介绍，这个 Projections 似乎和我所常见的坐标系不同，支持以下7中投影方式：

  • Albers (‘albers’) Albers投影
  • Equal Earth (‘equalEarth’)平等地球投影,
  • Equirectangular/Plate Carrée/WGS84 (‘equirectangular’)[经纬度直投],
  • Lambert (‘lambertConformalConic’)兰勃特等角圆锥投影,
  • Mercator (‘mercator’)墨卡托,
  • Natural Earth (‘naturalEarth’)自然地球投影,
  • Winkel Tripel (‘winkelTripel’)温克尔三重投影.
参考文章:
1.mapbox 支持国家2000 坐标系的数据 只是一种研究，但是没有给出最终的结果。
2.mapbox能支持其他坐标系吗？ 这里公瑾说 暂时不支持。mapbox定位就是酷炫的地图。而不是传统内网gis一整套什么数据处理，一堆格式不同数据，不同坐标系数据，不同wms wfs wmts等等，这些是内网gis常见的事情。mapbox可以说直接扔掉所谓gis的外衣，以纯it的形式，定义数据类型，显示效果，不追求所谓专业的gis，那么他简单选择4326而把精力放在可视化上就很容易理解了
3.CGCS2000 开发适用于CGCS2000的地图工具集,这里的 mapbox-gl.js 对4326坐标系进行了适配
4.WGS84坐标与Web墨卡托坐标互转
5.MapboxGL 开发 — 总结
6.喜大普奔——Mapbox GL JS支持多种投影了
7.mapbox地图-对接gis图层时坐标系不一致?
8.Projections Starting from v2.6, Mapbox GL JS supports multiple map projections. This feature allows you to create more accurate visualizations at every zoom level and tell a better story with your data.

3.在Vue3+Typescript中使用

(1) 创建项目

1
pnpm create vite

(2) 安装依赖

1
pnpm add mapbox-gl

(3) 定义模块
在 env.d.ts 文件中声明模块

1
2
3
4
5
/**
 * 声明 mapbox-gl
 */
declare module 'mapbox-gl';

(3) 引入样式
在 main.ts 文件中编写引入样式。

1
2
3
4
5
6
import { createApp } from 'vue'
import App from './App.vue'
import 'mapbox-gl/dist/mapbox-gl.css';
import "./assets/style/base.scss"

createApp(App).mount('#app')

(4) 创建地图
在App.vue 文件中引入mapbox并创建地图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div id="mainmap" class="mainmap"></div>
</template>

<script setup lang="ts">
import mapboxgl from 'mapbox-gl';
import { onMounted } from 'vue';

onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoiYmliaWNodWFuIiwiYSI6ImNrNDJld2RsZDAwMnkzZXBnNHE4cWJqMXAifQ.mcygARsV-Q0RhZGOCHiHnw';
  const map = new mapboxgl.Map({
    container: "mainmap", // container ID
    style: 'mapbox://styles/mapbox/streets-v12', // style URL
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9, // starting zoom
  });
  console.log(map)
})
</script>

<style lang="scss" scoped>
.mainmap{
  width:100%;
  height: 100%;
}
</style>
参考文章:
1.Installation

4.deck.gl

在使用mapbox进行可视化的时候，可真是不知道到底是什么情况的。

参考文章:
1.Layers

5.图标图层

可以使用 symbol 图层，通过配置图标属性，给每一个不同的点位配置不同的图标。这里有一个属性 { sdf: true } 这个应该是一种数据格式，但是为什么这么写，不太清楚。这个sdf应该是 Signed Distance Field 这么个东西。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
let map = window.glMap
//给地图添加图片
map.loadImage(require('./assets/img/drone.png'), (error, image) => {
    map.addImage('map-drone', image)
})
map.loadImage(require('./assets/img/dock.png'), (error, image) => {
    map.addImage('map-dock', image)
})
map.loadImage(require('./assets/img/rc.png'), (error, image) => {
    map.addImage('map-rc', image)
})

// 给地图添加点坐标数据
map.addSource('drone-point', {
    type: 'geojson',
    data: {
        type: 'FeatureCollection',
        features: [
            {
                type: 'Feature',
                properties: {
                    icon: 'drone',
                    description:
                        "<strong>Seersucker Bike Ride and Social</strong><p>Feeling dandy? Get fancy, grab your bike, and take part in this year's Seersucker Social bike ride from Dandies and Quaintrelles. After the ride enjoy a lawn party at Hillwood with jazz, cocktails, paper hat-making, and more. 11:00-7:00 p.m.</p>"
                },
                geometry: {
                    type: 'Point',
                    coordinates: [0, 0] // icon position [lng, lat]
                }
            },
            {
                type: 'Feature',
                properties: {
                    icon: 'drone',
                    description:
                        "<strong>Seersucker Bike Ride and Social</strong><p>Feeling dandy? Get fancy, grab your bike, and take part in this year's Seersucker Social bike ride from Dandies and Quaintrelles. After the ride enjoy a lawn party at Hillwood with jazz, cocktails, paper hat-making, and more. 11:00-7:00 p.m.</p>"
                },
                geometry: {
                    type: 'Point',
                    coordinates: [120.14834116918742, 30.254049032495487] // icon position [lng, lat]
                }
            }
        ]
    }
})
// 给地图添加图层
map.addLayer({
    id: 'places',
    type: 'symbol',
    source: 'drone-point',
    layout: {
        'icon-image': 'map-{icon}'
    }
})
参考文章:
1.Mapbox 自定义点标记图标 不同的图标使用属性进行区分，这里有一个实际的例子,增加图片，是通过使用document.createElement创建 canvas 图标的方式进行的。
2.mapbox-gl自定义点符号图标
3.Using recolorable images in Mapbox maps 官方的例子。
4.mapbox-gl实战教程：单图层POI图标多样性 mapbox-gl使用图标之前，需要以精灵图或者map.addImage的方式加载进来，如果图标多的情况，建议使用精灵图的方式进行加载，使用图标时，根据图标的唯一key进行赋值。mapbox-gl加载POI的方式，是以symbol的形式进行加载
5.二.mapbox使用loadImage和addLayer添加图片和文字 map.loadImage 和 map.addImage 加载图片
6.整理一份完整的Mapbox Style 规范
7.【WebGIS实例】（7）MapboxGL绘制不同颜色的Symbol图标 配置图像实际渲染的颜色 paint，这里也用了 sdf:true 这个属性加载图片。
8.Mapbox使用sdf图片 这里安装了一个 image-sdf 插件进行的配置。

6.动画轨迹

参考文章:
1.轨迹 行车过程的轨迹动画通过不断修改数据源（source.setData()），来达到动画的效果，同时根据两点坐标计算 bearing，来设置“出租车”的姿态。
2.Animate a point along a route
3.mapboxgl实现带箭头轨迹线 这里实现了一个动态的轨迹线的效果,这篇文章其实还是挺有用的，可以进行的尝试和修改。

7.Marker

参考文章:
1.Add custom icons with Markers 这是官方的例子，增加了一个图标Marker

8.maputnik

样式编辑网站

**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.前言
  2. 2. 2.坐标系问题
  3. 3. 3.在Vue3+Typescript中使用
  4. 4. 4.deck.gl
  5. 5. 5.图标图层
    1. 5.1. 6.动画轨迹
    2. 5.2. 7.Marker
    3. 5.3. 8.maputnik
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文