Vue2.6+arcgis api 4.X：实现底图切换（basemapGallery）功能

最新推荐文章于 2024-08-01 15:12:32 发布
最新推荐文章于 2024-08-01 15:12:32 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： arcgis api for JS 4.X
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happy81997/article/details/105218696
版权
本文档介绍了如何使用Vue2.6和arcgis API 4.X来实现自定义底图切换功能，替代默认的BasemapGallery widget。通过组件化方式创建BaseGallery.vue，设计HTML结构并设置样式。关键在于监听鼠标事件来展开和收缩底图图标，以及处理底图切换，涉及到arcgis API中basemap的管理，包括添加所有底图并利用visible属性控制显示。
摘要由CSDN通过智能技术生成

目录

 

前言

开发环境

开发流程

前言

arcgis api自带底图切换widget（BasemapGallery）但是，自带的这个应该绝大多数使用者都觉得不好用，所以自己定制开发的应该更爽点，大致效果类似于百度地图底图切换那样整的：

鼠标放上去时候效果
鼠标移走时候效果

 

开发环境

Vue +arcgis  api  4.12

开发流程

最低0.47元/天 解锁文章
小湾生产队队长
关注
专栏目录
ArcGIS for js4.x实现天地图加载与地图切换
03-22
本文实现了ArcGIS js中加载天地图 并实现矢量地图和影像地图切换。 版本：ArcGIS for js4.x，天地图：包含国家天地图和山东天地图，2019年最新版天地图。
ArcGIS API for JavaScript+vue系列（四）-自行封装类似于百度地图中的底图切换（basemapGallery）功能
tjx1997的博客
10-19 1419
目录一、背景与思考二、封装MapSwitch文件 一、背景与思考 在ArcGIS API的widgets中，有一个basemapGallery的底图切换功能，但是该功能占据的空间过大，且不够美观，所以尝试利用vue自行封装一个底图切换功能。 百度地图的底图切换功较为优秀，切换功能置于地图页面的右下角，且当鼠标未悬于切换图层上时不会展示其他的切换图层，该展示的方式既美观又不过分的占据地图的空间，所以参照此功能来封装我们的底图切换功能。 在封装该功能之前，我们需要需要分析一下该功能的组成部分。首先在地图页面
从零开始的VUE+ArcGIS API for JS项目——底图切换工具（天地图，高德）
最新发布
hfhf45_的博客
08-01 1834
实现自定义底图切换的工具，添加天地图，高德等地图作为底图。
vue+arcgis 4.x 开发展示底图
xinxin_zhu的博客
10-12 1305
1.安装依赖包 npm install esri-loader 2.在入口函数中 main.js 配置加载 js 和css 文件 3.地图展示页面 ,map.vue 4.完整代码 <template> <div> <div id="viewDiv"> </div> &l...
arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（八）—— 自定义底图切换
花姐夫JUN的博客
06-05 365
为什么有地图切换的需求？可视化需求：不同的底图可以以不同的样式和表达方式呈现地理信息。切换底图可以改变地图的外观和风格，使用户能够选择最适合他们需求的地图显示方式。例如，用户可能希望在街道地图和卫星图像之间进行切换，以便更好地理解和分析地理数据。上下文和背景信息：底图提供了地理环境的上下文和背景信息。在不同的应用场景中，用户可能需要不同的底图来支持他们的工作。例如，对于城市规划者来说，他们可能更关注街道和建筑物的信息，而对于环境保护机构来说，地形和土地利用可能更重要。
vue + arcgis for javascript 实战（二）实现底图切换，经纬度显示等
Anonymous996的博客
01-02 1525
好了，我们继续给我们的地图进行配置 现在path:src/utils文件夹加入一个EsriConfig.js文件,我们将option和Modules移入进入然后导出。 并且在path:computents/Map/index文件中导入 import { Option, Modules } from "@/utils/EsriConfig"; 此时，就将模块抽离开了。 注意，现在option成了大写 export const Option = { url: "https://js.arcgis.com/
vue + ArcGIS 地图应用系列二：加载地图
True_Rain
05-06 1896
1. 创建 Vue 项目 我们利用 Vue-CLI 工具进行快捷创建 下载 Vue-CLI 工具 yarn add global @vue/cli # or: npm i @vue/cli -g 创建 Vue 项目 根据自己项目需求进行配置，这里不过多的赘述。 vue create example # example为项目名称，我这里以example为例 进行项目并启动测试 ...
vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(二)
xlostx的博客
03-31 1897
截图后地图上画出的线有了，但是打点的图标图片没有了 ，标注点不显示。截图里面图片不显示。
从零开始的VUE+ArcGIS API for JS项目——初始化地图应用
hfhf45_的博客
07-31 1585
从零开始创建基于vue3 + vite3 + arcgis map sdk for js的 webgis前端项目（持续更新中）
arcgis api for js实现动态切换底图（淡入淡出效果）
05-05
arcgis api for js实现动态切换底图（淡入淡出效果）arcgis api for js实现动态切换底图（淡入淡出效果）
Vue中组态实现方案-BaseMap.rar
03-30
Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar
vue3+arcgis for js 4.17 加载天地图
10-13
基于vue3，使用arcgis for javascript 4.17 加载天地图，已经上线使用。在使用是可以直接天地图官网更换需要得地图服务http://lbs.tianditu.gov.cn/data/dataapi.html
ArcGIS API for JS + Vue 实现 2D / 3D /不同底图 的无缝切换（视图位置不发生改变）
DSH964的博客
12-27 5374
需要用到：Vue 2.5 、Bootstrap 4 、ArcGIS API for JS 4.10 说明：这里的底图切换和2D/3D的切换思路和官网一致，但是实现方法完全不同，是利用Vue将初始化的参数变成响应式从而实现的无缝切换 效果： 初始状态： 初始状态是 Google 的底图，为 3D 状态 随机变换视图位置后切换底图： 不会改变视图位置 切换显示维度： 同样不会改...
arcgis 4.x 更换底图 vue
YangZe的博客
08-17 555
方法一： let map = new this.gisConstructor.Map(); let view = new this.gisConstructor.MapView({ map: map, zoom: 2, container: "viewDiv", }); // 底图服务 let tjUAVLayer = new this.gisConstructor.TileLayer({ .
Arcgis js api && Element UI 自定义底图(basemap)切换
博客
12-03 1031
api版本：4.21, 链接：Map | API Reference | ArcGIS API for JavaScript 4.21 | ArcGIS Developer 原理: 使用了Element 2.x框架的select组件,点击对应的value，map.basemap="newBasemap",实现图层点击切换。 实现: 代码： <template> <div id="content"> <!-- <div id="basemap...
WEBGIS切换地图底图BasemapGallery(在图库中选择底图)
shankedixin的博客
09-11 474
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ch
Vue中组态实现方案-BaseMap的使用
BADAO_LIUMANG_QIZHI的博客
03-30 1706
场景 Vue中实现组态绘制的效果 可以方便的实现自由绘制底图与展示效果。 github地址： https://github.com/bojue/BaseMap gitee地址： https://gitee.com/JiaBin520/BaseMap 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 将代码克隆到本地 git clone https://gi.
05 地图添加底图切换控件
X北辰北的博客
09-11 1500
本文讲述如何在地图上添加地图切换控件。通过底图切换控件，我们可以实现当前地图和的地图之间的一个切换，效果如下：     如上所示，通过右上角的底图切换控件可以实现两地图之间的切换显示，具体操作如下： 添加底图切换控件的容器，并设置样式： &lt;div id="map"&gt; &lt;div id="HomeButton"&gt;&lt;/div&gt; &l...
vue + arcgis4.x 热力图
08-02
Vue是一种流行的JavaScript框架，用于构建用户界面。而ArcGIS是一套强大的地理信息系统软件开发工具包，包括各种地理空间功能。ArcGIS API for JavaScript是一个用于在Web应用程序中使用ArcGIS功能的JavaScript API。而ArcGIS API for JavaScript 4.x是其中最新版本。 ArcGIS API for JavaScript 4.x提供了许多功能和组件，可以轻松地在Vue应用程序中集成和使用。其中之一就是热力图功能。热力图是一种通过颜色的渐变来可视化密度或权重的数据分布的方法。 在Vue中使用ArcGIS API for JavaScript 4.x的热力图功能，首先需要在Vue项目中引入ArcGIS API的库文件。可以通过CDN引入或者使用本地安装的库文件。然后在Vue组件中使用JavaScript代码来创建和配置热力图。 在代码中，需要定义一个包含要显示的数据和热力图的参数对象。数据可以是地理数据或其他类型的数据，根据需要进行设置。然后使用热力图的构造函数创建一个独立的热力图实例。最后将热力图对象添加到地图或指定的视图中，以显示热力图。 热力图的外观可以通过设置参数对象中的属性进行自定义。可以设置颜色、不透明度、最小和最大权重等。还可以自定义热力图数据点的尺寸和形状等样式属性。 总之，通过在Vue应用程序中使用ArcGIS API for JavaScript 4.x，可以轻松地实现热力图功能。这为开发人员提供了一种可视化空间数据的方法，从而更好地理解和分析数据。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值