【完整的WebGIS教程】5WebGIS目录树管理

已于 2023-08-07 17:49:40 修改
阅读量1.4k 收藏 12
点赞数 3
分类专栏： 从0开始基于vue的ArcGIS API for JS开发 文章标签： javascript vue.js qt
于 2022-05-18 19:58:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35093027/article/details/124840179
版权
该教程详细介绍了如何在WebGIS应用中实现目录树管理功能。通过添加开关按钮，使用Vuex管理状态，创建MapTree组件，并结合Element UI的Tree组件，实现了地图目录树的显示与隐藏。在MapTools.vue中添加控制逻辑，并在MapTree.vue中编写显示目录树的代码，最终成功挂载底图服务。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本次的教程实现的是目录树的效果，GIF如下：

要实现的效果

在这里插入图片描述

添加目录树管理的开关按钮

在MapTools.vue中添加目录树管理的按钮，设置其点击的响应函数为@click="handleMapToolsItemClick，设置其id为maptree,在methods中添加对点击事件的响应函数。
在这里插入图片描述

按钮点击效果
在这里插入图片描述

使用vuex管理开关状态

在store的index.js中添加对maptree的控制。

了解本专栏 订阅专栏 解锁全文 超级会员免费看
【完整的WebGIS教程】6.1 使用ArcGIS Server发布要素服务
老靳的WebGIS
06-07 3261
前言：在前面的文章中，我在【完整的WebGIS教程】5WebGIS目录树管理中，使用了捷泰发布好的服务，在第六章，我们将要自己发布服务，进而在网页上使用我们的数据。我发布服务时候参考的是大佬的教程，放上他的文章的网站启动SQLServer 设置实例名称和账号密码 点击确定，看到我们刚刚链接的数据库 右键，启动地理数据库 选择ArcGIS Server的授权文件 选择实例数据：省、市、县的行政区划数据 导入成功： 可以看到我的数据库中已经有了刚刚选择的三个数据： 依次右键要发布的数据，点击管理
Web前端面试题整合，持续更新【可以收藏】
jason的java世界
12-12 1681
css相关、JS相关、浏览器网络相关、vue相关、react相关、移动端相关、插件及工具相关、前端性能优化、原生通信、算法相关、node相关、计算机基础
树形目录文件管理系统
12-02
本系统是自己实现tomcat功能，大了一个简易的web服务器，同时利用反射和注解实现了RequestMapping注解功能，能够以此为框架自己开发不同的系统。前端使用Html+Css+JS实现面向对象编程，实现树形目录结构，实现展开关闭，保存下载功能，是一个功能比较完善的文件管理系统
X-Creator平台表单开发：目录树的建立
weixin_39112004的博客
07-10 175
低代码开发
webgis图层操作
weller_84195的专栏
11-05 940
 以下是针对图层设置其是否显示的代码，这些代码可以结合treeview控件来实现对地图图层的整体控制功能：public void setLayerVisible(int LayerId,PictureBox PictureBox,Boolean m_bVisible)        {            String m_sDataFrame = map.GetDefaultMapName()
基于超图软件的WebGIS应用系统二次开发技术研究.doc编程资料
04-15
基于超图软件的WebGIS应用系统二次开发技术研究.doc
WebGis008-图层控件
www.fc88804.cn
06-23 357
WebGis008-图层控件 实际应用中，一般来说要把地图容器加载的各个图层以列表形式展现出来，供用户自主选择展示哪些图层。ol5.x版本中没有这样的控件。但是实现起来很方便。ol中layer层有提供getVisible和setVisible两个方法。通过这些，就可以做出相应的单选框或者复选框控件。 首先定义地图 定义若干个图层添加进地图 从地图中拿到layers数组 遍历layers图层数组并存储数据 在dom中新建一个ul列表嵌套input复/单选框组件用以绑定控制图层显示状态
ArcGis Server开发Web GIS入门教程
06-26
- 在目录树中找到准备好的 MXD 文件，右键选择 “Publish to ArcGIS Server”。 - 配置服务名称、路径和其他选项，完成发布。 - **使用 ArcGIS Server Manager 发布 Map Service**： - 登录到 ArcGIS Server ...
TM_C_081113_ArcGIS-API-for-Flex-教程_v1.00.pdf
04-25
### ArcGIS API for Flex 教程知识点概览 #### 一、初级篇 **1.1 环境搭建** **1.1.1 概述** ArcGIS API for Flex 是 ESRI 在 2008 年推出的一款用于开发富互联网应用程序（RIA）的 WebGIS 客户端开发包。它提供...
【WebGIS初学到入职】（十一）用OpenLayers实现图层管理功能——图层级数修改
ReBeX
10-31 1024
一、前言 前置：【WebGIS初学到入职】（九）用OpenLayers实现图层管理功能 然后本篇在上篇的基础上，修改了读取图层的代码（用模板字面量来做），然后添加了图层级数修改功能。 二、代码 主要的JavaScript部分： let layer = []; //map中的图层数组 let layerZIndex = []; //图层级数数组 let layerName = []; //图层名称数组
JavaScript版WebGIS地图图层树控件
05-12
1、实现多地图服务关联，支持ArcGIS Server地图服务。 2、显示动态地图服务的图层节点的异步加载。 3、对地地图服务的地图图层进行进行显示控制。 4、使用标准JSON格式进行地图服务配置。 5、改图层树基于Jquery zTree开发。 压缩包中包括代码文件和配置文件，解压密码同文件名，PandaGIS。
WebGis 学习文档
02-09
http://www.cnblogs.com/naaoveGIS/category/600559.html || 博客出处，感觉不错，爬了下来（新手。），需要的下,或者直接博客看
WebGIS插件
05-25
webgis——apache web服务器配置使用,地图服务系统，就是客户端发送数据请求时，服务器端实时处理空间数据，并把生成的数据，以服务形式发送给客户端，然后客户端就能看到地图或获取到数据。 商用中最有名的就是ArcServer，而在开源界就是MapServer和GeoServer. 可以上官网下载自行编译。对于window用户，可下载已编译安装包ms4w，其安装过程很简单，下载ms4w，解压缩到硬盘任意目录（目录名最好不要包含中文字符），打开命令提示符窗口，切换到ms4w所在目录，键入 apache-install即可。
WebGIS三维可视化
02-19
WebGIS三维可视化的非常好的参考资料
WebGIS 信息系统-Element项目实战
leva的博客
07-08 2090
在打开的页面中单击“v6.0.0-dist.zip”，如图1-21所示，即可下载OpenLayers文件的压缩包，解压缩后，将其中的ol.css文件和ol.js文件复制到自己的项目中。单击图1-17中的“View Raw”按钮，可得到Element的JavaScript代码，如图1-18所示（只显示了部分代码）。打开Vue官网，首先单击“起步”按钮，然后单击页面中的“安装”按钮，接着找到页面中的“开发版本”按钮和“生产版本”按钮，最后单击“开发版本”按钮即可将Vue文件下载到本地，如图1-13所示。
搭建WebGIS网站
xuyizhuo的博客
07-02 8566
转载自:https://www.cnblogs.com/mhere/p/8567805.html 搭建WebGis使用到的软件有：Java、Tomcat、GeoServer、PostgreSQL、PostGIS、OpenLayers3; 下面将一步步操作。 一、搭建服务器，使用软件：Java、Tomcat、GeoServer 1、安装并配置Java a. 下载Java1.8： ...
【WebGIS示范网站】
老靳的WebGIS
09-13 1735
WebGIS前端网站。
发现一款WebGIS组件化开发神器！一起来练手
SuperMap技术控
06-28 1916
前端组件化开发由来已久，无论是SSR（Server Side Render，服务端渲染），还是前端SPA(Single Page Application，单页面应用)，都具有较成熟的组件化开发方案。现阶段国内前端组件化开发最火的当属React和Vue。 随着前端生态和工具的完善，前端组件化开发效率大大提升。尤其是Ant Design、Element、iView等优秀前端组件库的推出，更是将组件化开...
webgis - cesuim常用网址（配置Primitive为示例的Development）
最新发布
weixin_46011290的博客
01-25 2486
cesium、Primitive
WebGIS完整功能实现示例教程
WebGIS（Web地理信息系统）是一个将GIS（地理信息系统）的图形功能与Web的强大功能...同时，利用各种前端库可以快速搭建起具有完整功能的WebGIS应用，这都是构建在线地图服务、地理数据分析等应用不可或缺的技术基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老靳的WebGIS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值