vue3-mapboxgl-antv-L7开发（一）项目的搭建

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

一、mapboxgl介绍？

1、mapbox简介

Mapbox 是一个可以创建各种自定义地图的网站，如 Pinterest、Evernote、Github、500px 等大牌都使用 Mapbox 创建自己的地图，Mapbox 宣称要构建世界上最漂亮的地图。
已为 Foursquare、Pinterest、Evernote、金融时报、天气频道、优步科技 等公司的网站提供了订制在线地图服务。

Mapbox 针对不同平台均开发了相应的 GIS 引擎以满足开发者或相关用户的需要，如：iOS SDK（用于iOS端开发）、Android SDK（用于Andriod端开发）、Navigation SDK（用于Navigation端开发）、Unity SDK（用于Unity端开发）、GL JS（用于web端开发）。不同平台的SDK，除使用方式不同外，功能特性上也多多少少存在不同。此外，Uber还针对react开发了 react-map-gl。

总的来说，Mapbox的开源技术栈是非常全面的。
官网：https://www.mapbox.com/

2、mapbox的特点

我理解的 Mapbox 地图有4个特点：全、炫、快、美。

全：
Mapbox 有长达8年的地图数据积累和专业的测绘团队，
它是 OSM 最大的贡献者。
地图数据覆盖全球，
并提供全球多语言地图，
包括中文。
这给国内出海企业提供了很大便利，
不用去各国找不同的地图数据提供商。

炫：
Mapbox 将在游戏开发中使用的OpenGL染技术用到了地图渲染，
精确控制到每个像素，
从而可以提供最生动的地图相关数据可视化工具。

快：
Mapbox 支持使用矢量地图切片，
同样的地图消耗的流量只需要传统技术的1/3左右，
还能对切片无限分割，
支持更灵活的设计；
多层合并，
更进一步节省流量。

美：
由于CTO是美国顶尖院校的设计专业毕业（王力宏校友），
在成为工程师之前有过一段设计经历，
我们的地图都做的很精美，
从来没有哪个地图公司这么花心思在
「如何把地图做的更漂亮上」。
这还不够，
他们还研发了 Map Studio，
让其它公司也能自助设计地图，
做品牌专属地图。

说起Mapbox，
如果你没使用过OpenStreetMap（简称OSM），
没做过地图相关应用的话，
或许你没听过这家公司。
但这不影响软银对 Mapbox 的1.64亿美元投资，
使其成为硅谷独角兽企业。
由于做的是专业领域的2B业务，
Mapbox估计是最不为大众熟知的独角兽企业

二、搭建项目

1、创建vue3项目

使用的是vite构建工具（已安装 16.0 或更高版本的 Node.js）

2.在项目中安装依赖

代码如下（示例）：

npm install --save mapbox-gl
// 安装L7 依赖
npm install --save @antv/l7
// 安装第三方底图依赖
npm install --save @antv/l7-maps

三、编码显示地图

1、在APP组件中挂在地图

引入依赖

import { app } from './main'
import mapboxgl from 'mapbox-gl';
import { Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { onMounted } from 'vue';

创建Mapboxgl地图，需要有token（自行解决）

mapboxgl.accessToken = "user-token"
const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL dark-v10
    center: [114, 35], // starting position [lng, lat]
    zoom: 9, // starting zoom
    projection:'globe'
  });

创建Scene场景。

const scene = new Scene({
    id: 'map',
    map: new Mapbox({
      mapInstance: map,
    }),

    logoVisible: false // 不显示antv-l7的logo
  });

由于mapbox是国外的，中国的领土不完整，所以我们要捍卫我们自己的领土，添加一些南海边界。

map.setFilter("admin-0-boundary-disputed", [
      "all",
      ["==", ["get", "disputed"], "true"],
      ["==", ["get", "admin_level"], 0],
      ["==", ["get", "maritime"], "false"],
      ["match", ["get", "worldview"], ["all", "CN"], true, false],
    ]);
    map.setFilter("admin-0-boundary", [
      "all",
      ["==", ["get", "admin_level"], 0],
      ["==", ["get", "disputed"], "false"],
      ["==", ["get", "maritime"], "false"],
      ["match", ["get", "worldview"], ["all", "CN"], true, false],
    ]);
    map.setFilter("admin-0-boundary-bg", [
      "all",
      ["==", ["get", "admin_level"], 0],
      ["==", ["get", "maritime"], "false"],
      ["match", ["get", "worldview"], ["all", "CN"], true, false],
    ]);

四、显示成果（附带源码）

1、效果图

2、源码

<template>
  <div id="map">
  </div>
  <!-- 路由组件 -->
  <router-view v-slot="{ Component }">
    <!-- 缓存路由组件 -->
    <keep-alive>
      <component :is=Component></component>
    </keep-alive>
  </router-view>
</template>

<script setup>
import { app } from './main'
import mapboxgl from 'mapbox-gl';
import { Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { onMounted } from 'vue';
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA';
//在组件挂载后初始化地图
onMounted(() => {
  const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL dark-v10
    center: [114, 35], // starting position [lng, lat]
    zoom: 9, // starting zoom
    projection:'globe'
  });
  const scene = new Scene({
    id: 'map',
    map: new Mapbox({
      mapInstance: map,
    }),

    logoVisible: false // 不显示antv-l7的logo
  });
  //地图样式加载完后
  map.on('style.load', () => {
    //添加中国的南海领域边界
    map.setFog({});
    // 消除边界
    map.setFilter("admin-0-boundary-disputed", [
      "all",
      ["==", ["get", "disputed"], "true"],
      ["==", ["get", "admin_level"], 0],
      ["==", ["get", "maritime"], "false"],
      ["match", ["get", "worldview"], ["all", "CN"], true, false],
    ]);
    map.setFilter("admin-0-boundary", [
      "all",
      ["==", ["get", "admin_level"], 0],
      ["==", ["get", "disputed"], "false"],
      ["==", ["get", "maritime"], "false"],
      ["match", ["get", "worldview"], ["all", "CN"], true, false],
    ]);
    map.setFilter("admin-0-boundary-bg", [
      "all",
      ["==", ["get", "admin_level"], 0],
      ["==", ["get", "maritime"], "false"],
      ["match", ["get", "worldview"], ["all", "CN"], true, false],
    ]);
  });
})

</script>

<style>
#map {
  width: 100vw;
  height: 100vh;
}
</style>

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。