mapbox地图与天地图底图相互切换

最新推荐文章于 2024-04-25 20:51:52 发布
最新推荐文章于 2024-04-25 20:51:52 发布
阅读量614 收藏 26
点赞数 27
分类专栏： 地图 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741716/article/details/137817070
版权

添加天地图底图，是通过addLayerToGroup（）方式添加，而切换为mapbox底图(例如深色图，户外图)是使用setStyle()方法将地图样式设置为新样式。

在实践中发现这样直接切换，会使地图上原有的图层被移除，那么怎么实现mapbox地图与天地图底图相互切换，且保留地图上原有图层呢？

mapbox地图与天地图底图相互切换，且保留地图上原有图层

整体思路：

先定义图层组，在初始化底图时添加所有的图层组（占位图层），便于切换图层时，保证图层顺序。

切换地图样式(切换为mapbox底图)

使用传入的map对象和styleID参数，构建一个GET请求的URL，其中包含了访问地图样式所需的访问令牌（access token）。以此获取指定样式（例如mapbox://styles/mapbox/streets-v11）的数据。

使用axios库发送GET请求，并使用解构赋值将返回的响应数据中的data字段赋值给newStyle变量。

获取当前地图样式的配置信息，保存在currentStyle变量中。

将当前样式中的所有数据源（sources）复制到新样式的数据源中，以确保保留了原有的数据源。

查找需要保留在新样式中的图层的索引位置。

从当前样式中筛选出需要保留的应用程序图层（app layers）。这些图层是那些具有不同数据源设置的图层。
构建新的图层数组，按照以下顺序排列：将0到labelIndex之间的图层拷贝到新数组中，然后将所有图层拷贝到新数组中，最后将labelIndex到倒数第二个图层拷贝到新数组中。

使用map.setStyle(newStyle)方法将地图样式设置为新样式。

切换为天地图底图时

从当前样式中筛选出需要保留的图层，例如图层组中的图层，以及手动添加的其他图层

去除掉当前样式中不需要的属性

使用map.setStyle()方法将地图样式设置为新样式。

然后再使用addLayerToGroup（）方式添加天地图底图

具体实现

1.首先定义图层组

需要注意，在给图层命名时需要便于筛选
例如命名时，名称都是“TD_BASE_XXXXXX”格式

 const LAYERS_GROUP = {
  TD_BASE_MAP: 'TD_BASE_MAP', //底图
  TD_BASE_LABEL_MAP: 'TD_BASE_LABEL_MAP', //地图标注
};
2.初始化地图并添加所有的图层组（占位图层）

天地图图源

// 天地图影像图
const TD_IMG_URL = [
  'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'https://t1.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'https://t2.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'https://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'https://t4.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'https://t5.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'https://t6.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'https://t7.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
];
// 天地图标注图层
const TD_CIA_URL = [
  'http://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'http://t1.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'http://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'http://t3.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'http://t4.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'http://t5.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'http://t6.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
  'http://t7.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你自己的天地图token',
];

给图层组添加图层方法

/**
 * mapbox移除指定图层
 * @param {string} layerId 图层id
 */
 REMOVE_MAPBOX_LAYER(layerId, MAP) {
  if (MAP.getLayer(layerId)) {
    MAP.removeLayer(layerId);
    MAP.removeSource(layerId);
  }
}
/**
 * mapbox切换底图
 * @param { String } id 要切换的底图类型
 */
 CHANGE_MAPBOX_BASE_LAYER = (MAP) => {
  const layerId = LAYERS_GROUP.TD_BASE_MAP;
  let sources;

  // 移除原来图层
  REMOVE_MAPBOX_LAYER(layerId, MAP);

  sources = {
    TD_IMG: {
      id: layerId,
      type: 'raster',
      tiles: TD_IMG_URL,
      tileSize: 256,
    },
  };

  let layers = {
    id: layerId,
    type: 'raster',
    source: sources.TD_IMG,
  };

  MAP.addLayerToGroup(layerId, layers);
};

/**
 * mapbox切换标注
 * @param { String } id 要切换的底图类型
 */
CHANGE_MAPBOX_BASE_LABEL_LAYER = (MAP) => {
  const layerId = LAYERS_GROUP.TD_BASE_LABEL_MAP;
  let sources;

  // 移除原来图层
  REMOVE_MAPBOX_LAYER(layerId, MAP);

  sources = {
    TD_IMG: {
      id: layerId,
      type: 'raster',
      tiles: TD_CIA_URL,
      tileSize: 256,
    },
  };

  let layers = {
    id: layerId,
    type: 'raster',
    source: sources.TD_IMG,
  };

  MAP.addLayerToGroup(layerId, layers);
};

地图初始化

mapInit() {
  map2d = new MapboxGL.Map({
    container: 'map',
    style: {
      sources: {},
      version: 8,
      glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
      layers: [],
    },
    antialias: true, // 启用抗锯齿以改善三维地形的渲染效果
    
  });

  const mapContainer = document.getElementById('map');

  

  map2d.on('load', function () {
    // 添加所有的图层组（占位图层）
    _.map(LAYERS_GROUP, (id) => {
      map2d.addLayerGroup(id);
    });
    // 添加底图

    CHANGE_MAPBOX_BASE_LAYER(map2d);
    CHANGE_MAPBOX_BASE_LABEL_LAYER(map2d);
  });
  

  return map2d;
}

进行到这一步以后，地图上显示天地图影像图以及标注
天地图影像图以及标注

3.在现有地图上添加了其他图层（点，线，面）

注意，为了使切换底图时，方便过滤出这些图层，在给图层id命名时需要需要便于筛选
例如：“MAP_LAYER_XXXXXX”
此处对添加其他图层方法就不做赘述了
添加后的效果：现有地图上添加了其他图层

4.将现有地图切换为mapbox底图

获取当前地图样式的配置信息，保存在currentStyle变量中。

将当前样式中的所有数据源（sources）复制到新样式的数据源中，以确保保留了原有的数据源。

查找需要保留在新样式中的图层的索引位置。这里通过过滤掉newStyle.layers数组中id不包含’-label’的图层。为的是去掉mapbox的文字标注，因为我们这里使用的是天地图的标注。

从当前样式中筛选出需要保留的应用程序图层（app layers）。这里需要保留id中包含 ‘TD_BASE’ 或id中包含 ‘MAP_LAYER’ 的图层（这里就是前面说的命名时需要特别注意的原因）

这些图层是那些具有不同数据源设置的图层。

构建新的图层数组，然后将所有图层拷贝到新数组中

使用map.setStyle(newStyle)方法将地图样式设置为新样式。

/**
 * 切换地图样式(mapbox底图)
 * @param {*} data Mapbox地图样式
 * @param {*} MAP 地图实例
 */
mapStyleSwitcher = (data, MAP) => {
  let token = '你自己的mapbox 的 Token';

  axios
    .get(`https://api.mapbox.com/styles/v1/${data}?access_token=${token}`)
    .then((result) => {
      const { data: newStyle } = result;
      const currentStyle = MAP.getStyle();

      newStyle.sources = Object.assign({}, currentStyle.sources, newStyle.sources);

      let Layers = newStyle.layers.filter((el) => {
        //去掉mapbox底图地名标注
        return !el.id.includes('-label');
      });

      const appLayers = currentStyle.layers.filter((el) => {
        return (
          (el.source &&
            el.source != 'mapbox://mapbox.satellite' &&
            el.source != 'mapbox' &&
            el.source != 'composite') ||
          el.id.includes('TD_BASE') ||
          el.id.includes('MAP_LAYER')
        );
      });

      Layers = [...Layers, ...appLayers];
      newStyle.layers = Layers;
      MAP.setStyle(newStyle);
    })
    .catch((error) => {
      console.error(error);
    });
};

调用方法：例如切换为mapbox深色图

mapStyleSwitcher('mapbox/dark-v11', map);

切换后的效果：mapbox深色图

5.切换回天地图底图

从当前样式中筛选出需要保留的图层，例如图层组中的图层，以及手动添加的其他图层：依旧是需要保留id中包含 ‘TD_BASE’ 或id中包含 ‘MAP_LAYER’ 的图层

去除掉当前样式中不需要的属性

使用map.setStyle()方法将地图样式设置为新样式。

然后再使用addLayerToGroup（）方式添加天地图底图

/**
 * 重置地图样式(切换为天地图底图时使用)
 * @param {*} MAP 地图实例
 */
 mapStyleReset = (MAP) => {
  const currentStyle = MAP.getStyle();

  const appLayers = currentStyle.layers.filter((el) => {
    return el.id.includes('TD_BASE') || el.id.includes('MAP_LAYER');
  });

  // console.log(appLayers);

  let newStyle = {};

  newStyle.layers = [...appLayers];
  newStyle.glyphs = 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf';
  newStyle.version = 8;
  newStyle.sources = currentStyle.sources;

  delete newStyle.sprite;

  MAP.setStyle(newStyle);
};

调用方法：

mapStyleReset(map);
//重新添加底图到图层组中
CHANGE_MAPBOX_BASE_LAYER(map)

效果：
重新添加底图
至此就实现了mapbox地图与天地图底图相互切换，且保留地图上原有图层的功能。
希望可以帮助遇到此类问题的朋友们提供到一些解决思路

二五25
关注
  • 27
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Mapbox加载天地图CGCS2000瓦片地图服务
05-06
通过对mapbox GL JS进行改造，使其能够加载天地图CGCS2000瓦片地图服务。
mapbox加载天地图
yGIS
08-23 1455
【代码】mapbox加载天地图。
使用vue框架使用mapbox在以天地图为底图上加载10万数据的麻点专题图代码
张志强的博客
06-07 1669
在上面的代码中，我们使用Supercluster库创建了一个新的索引，并将我们的数据加载到该索引中。在initMap方法中，我们创建了一个新的Mapbox.Map实例，并将其渲染到我们的HTML元素中。在本文中，我们将使用Mapbox的JavaScript库，它提供了一种简单的方式来集成Mapbox地图到我们的Vue应用程序中。在上面的代码中，我们使用Mapbox.Marker类创建了一个新的标记，并将其添加到地图上。我们还使用了Array.map方法来遍历我们的数据，并将每个数据点转换为一个标记。
Mapbox添加行政区矢量图层，Mapbox添加分级设色图层，Mapbox添加文本标记图层，Mapbox给行政区矢量数据添加名称，Mapbox自定义鼠标悬浮框，Mapbox添加天地图底图
RenGJ010617的博客
04-20 1437
Mapbox的中国分部好像在2021年左右就退出中国了，官方文档的汉化工作也戛然而止，相关的社区建设也相当欠缺，内容比较混乱，最离谱的是mapbox官方底图库中的中国地图基本都是错的，天地图引入又麻烦......恰好我最近有一个基础的mapbox应用需求，就做了一些整理和探索，分享给大家。
Mapbox加载浙江省天地图服务和数据处理
qq_42038997的博客
01-22 930
mapbox加载浙江省天地图服务以及行政边界获取数据处理
mapbox底图下载器
07-15
下载mapbox矢量切片，包括样式文件，生成一个index.html测试页面，测试浏览下载的地图
android mapbox地图新手基础 demo
09-07
Android世界地图，替代国内谷歌地图不可用，详情介绍可以在 http://blog.csdn.net/zhayunbiao/article/details/51072284#reply 查看
mapboxwms天地图，高德地图，谷歌地图
04-28
mapboxwms天地图，高德地图，谷歌地图，使用最新mapbox，基类封装
mapbox 视角切换，模仿baidu地图的3d与2d的切换，与指南针的旋转
06-09
mapbox 视角切换，模仿baidu地图的3d与2d的切换，与指南针的旋转
Mapbox加载天地图CGCS2000矢量瓦片地图服务
weixin_42562567的博客
06-16 9357
1.背景 最近在做天地图的项目，要基于MapBox添加CGCS2000矢量切片数据，但是 Mapbox 只支持web 墨卡托（3857）坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码，支持CGCS2000的切片数据加载，并且修改了相关的mapbox-gl的配套代码，详情请见github网址。https://github.com/cgcs2000 2.将MapBox部署到本地 npm i @cgcs2000/mapbox-gl <!DOCTYPE html> <ht
(vue)openLayer加载天地图 实现切换地图类型（地图影像）、更改地图色调（蓝色）等效果
night43的博客
01-03 3805
package.json文件中出现版本号即安装成功。一、 首先安装openLayer。二、在地图页面中引用加载天地图。根据要求填写完成后复制key值。②在页面中引入，代码如下。进入页面后选择右上角。
mapbox-gl扩展sprites图片
一醉千秋的专栏
03-29 314
在mapbox-gl.js中，通过在styles中设置sprite和glyphs，实现样式图标和字体的加载。而一旦style加载完成，如果重置地图中的style，则会导致地图全部重新加载，图层的顺序，地图上的要素，都会丢失，无法对当前地图状态进行还原。在这种情况下，通过代码方式，动态加载sprites，来实现地图样式中图标的灵活切换。代码如下: [email protected]为精灵图的配置文件。
leaftjs+turfjs+idw纯前端实现等值面绘图+九段线
最新发布
无极低码
04-25 328
1和2绘制完成后前端叠加地图不能完全重合，可能也更坐标系有关，放大后锯齿感明显；3是比较兼顾的做法，4在前端做克里金或idw简直要命，感觉电脑都能跑报废了。3.后台进行插值计算、地图裁剪、最终生成geojson文件或kml给地图，前端做叠加操作。4.数据查出来全扔给前端利用canvas绘等值面图，叠加到地图。6.直接后端计算好发布图层服务，或者直接将等值面图做成瓦片服务。1.后台绘图，用surfer绘制好，给前端调用叠加到地图。2.后台用python绘图，绘制好给前端调用，叠加到地图。2.清洗成格点数据。
Cesium加载矢量瓦片技术路线
xinyun12836的博客
04-12 1746
这为创建定制化的地图提供了极大的灵活性。MVTImageryProvider可以帮助开发者创建高效、可定制且用户友好的地图应用，可对现有的基于cesium开发的产品在矢量数据支持上有非常大的提升。（2）MVT数据通常比传统的光栅地图数据（如PNG或JPEG格式）要小，这意味着更快的加载时间和更低的带宽需求，从而提供更流畅的用户体验。此部分通过讲解矢量数据瓦片处理，样式配图、瓦片服务发布、前端瓦片加载显示这4个步骤实现是量瓦片数据加载至cesium的技术流程。发布自己的mbtiles矢量切片文件。
使用Custom Mapbox Layer打造个性化地图体验
gitblog_00053的博客
04-04 451
使用Custom Mapbox Layer打造个性化地图体验 项目地址:https://gitcode.com/xiaoiver/custom-mapbox-layer 在探索地理数据和地图展示的世界中，Custom Mapbox Layer 是一个非常有价值的工具，它允许开发者自定义Mapbox地图层，以创建出独一无二的地图视图，满足各种定制化需求。本文将深入解析这个项目的原理、用途及特点，帮助...
mapbox 天地图 底图切换组件
qq_43714712的博客
12-05 1194
天地图底图切换
使用mapbox自定义绘制工具（point，line，polygon，circle，rectangle）
热门推荐
weixin_44539540的博客
04-22 1万+
mapbox自定义绘制工具如何使用mapbox绘制常用的工具需要引入的资源创建div引入mapbox实例设置circle工具创建 point 绘制工具创建line绘制工具创建polygon（多边形）绘制工具创建 rectangle（矩形）绘制工具清除图层（layer）和资源(source) 如何使用mapbox绘制常用的工具 每次在网上查资源，尼玛脑袋疼，好多大神写的啥玩意呀。我们知道，操作地图不外乎就是一些事件，其实mapbox有一些关于绘制工具的一些插件，也可以自己定义绘制工具。 我这里的demo，就是
OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果
liu2004051957的博客
11-22 3760
OpenLayers开发库如何实现加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果。
mapbox地图api
05-17
Mapbox是一家提供地图和位置数据的公司，其地图API提供了许多功能，包括地图样式、地理编码、路线规划、地理围栏、交通路况等等。Mapbox的API可以在多个平台上使用，如Web、移动设备和桌面应用程序。 Mapbox地图API包括以下主要组件： 1.地图样式：Mapbox提供了多种地图样式，可以选择不同的地图风格和配色方案。 2.地理编码：这个功能可以将地址或地名转换为经纬度坐标，使得位置信息可以在地图上显示。 3.路线规划：Mapbox提供了路线规划功能，可以计算出最佳的行驶路线，包括步行、骑车、驾车等等。 4.地理围栏：这个功能可以设置虚拟的地理围栏，当设备进入或离开围栏时触发相应的事件。 5.交通路况：Mapbox提供了实时的交通路况信息，可以帮助用户规划最佳的行车路线。 总之，Mapbox提供了强大的地图API，开发者可以利用这些API构建出功能丰富、交互性强的地图应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值