%20(2).svg)
项目简介
本项目是基于 Vue3 和 TypeScript 构建的天地图陕西地图扩展系统。结合天地图陕西的 mapbox-gl api，对 mapboxgl 地图对象进行了功能扩展，能帮助开发者更便捷地开发地图相关应用，提供了丰富的地图配置与管理功能。
项目的主要特性和功能
- 多坐标系支持：提供 CGCS2000 和 web 墨卡托两种地图坐标系的 api，可按需选择调用。
- 灵活的引入方式：支持在线引用和下载离线引入地图开发包资源。
- 地图对象扩展：对 mapboxgl 的 Map 对象进行扩展，实现底图与非底图分组，重新实现 addLayer 方法，方便图层管理。
- 内置常用地图配置：内置多种常用地图配置，使用地图 id 标识，支持矢量瓦片服务和影像服务。
- 便捷的底图切换：通过 createMap 方法初始化 Map 对象后，可结合 switchBaseMap 实现便捷的底图切换功能。
- 灵活的地图配置：基于 mapboxgl 的 MapOptions 进行扩展，支持使用默认地图 id 或对象配置 basemap，且可自定义地图样式。
安装使用步骤
前提条件
假设用户已经下载了本项目的源码文件，并且已经安装了 Node.js 和 npm。
安装依赖
bash
npm install @jindin/mapboxgl-mapex
引入地图开发包资源
在线引用
打开 index.html，文件内直接引入以下 js、css 地址：
```html
```
下载离线引入
- 在 vite 项目中，将
mapbox-gl-cgcs2000.js、mapbox-gl.css两个文件包放置在根目录下的public文件（项目中没有则自己创建）下，比如public/libs/mapbox-gl文件夹下。 - 引入到
index.html中： ```htmlVite + Vue + TS
```
使用地图对象
在 vue 代码中需要使用的地方使用 window 解构：
javascript
//获得 mapboxgl
const { mapboxgl } = window; //结构获得mapboxgl
mapboxgl.accessToken = "你自己申请的key";
//初始化创建map对象
const map = new mapboxgl.Map(option);
使用 mapboxgl-mapex
```javascript import { Map, createMap, ISMapConfig } from "@jindin/mapboxgl-mapex";
const { mapboxgl } = window; mapboxgl.accessToken = "申请token";
//方法一：new 地图对象 const map = new mapboxgl.Map(option); //方法二【推荐】：配合ISMapconfig，使用createMap初始化map对象 //const map = createMap(mapconfig, basemapId);
map.on("load", () => { //do something }); ```
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】