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

已于 2023-08-07 17:49:40 修改
阅读量1.3k 收藏 12
点赞数 3
分类专栏： 从0开始基于vue的ArcGIS API for JS开发 文章标签： javascript vue.js qt
于 2022-05-18 19:58:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35093027/article/details/124840179
版权

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

要实现的效果

在这里插入图片描述

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

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

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

使用vuex管理开关状态

在store的index.js中添加对maptree的控制。
在这里插入图片描述
在MapTools.vue中实现对maptree的控制和隐藏
在这里插入图片描述
打印maptree的状态：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
老靳的WebGIS
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
WebGIS学习资源推荐（包含学习路线、软件和数据资源推荐）
X北辰北的博客
01-20 6124
写在前面 很多人对于WebGIS不是很熟悉，尤其是刚接触WebGIS的开发人员来说，感觉这东西漫无边际，不知道如何下手，所以本篇文章就结合自己的开发和学习经验，给大家推荐一下学习路线和相关的学习资源。 首先直接上一张学习路线图，图中绿标的知识必须要掌握。 学习资源推荐 1、Web开发方面 1.1、Web开发基础知识学习资源 Web开发基础知识无非就是前端三剑客：HTML、CSS、JavaScript。对于这三块知识学习的话，其实重点和难点还是在CSS和JS这两块，以下是一些推荐的学习网站和资
WebGIS——部署ArcGIS API for JavaScript 4.11
m0_37768631的博客
05-01 3219
部署ArcGIS API for JavaScript 4.11 本文介绍如何将ArcGIS API for JavaScript 4.11下载并部署到本机IIS上，系统WIN10 64位 参考文章：http://www.cnblogs.com/jerry-liuyu/p/10283714.html 一、下载并开启ISS服务 官网链接：https://developers.arcgis.com/ ...
MapGis二次开发——基础地图目录树控件的加载
zxm719382456的博客
04-28 733
MapGis二次开发之基础地图目录树控件的加载
Web GIS开发教程
duoshehuan6005的博客
12-13 746
Web GIS开发教程非程序员的基本 Web GIS 开发课程英文名：Web GIS development course此视频教程共4.0小时，中英双语字幕，画质清晰无水印，源码附件全。
WebGIS网站代码开源（http://webgis.pub）
bukunu的专栏
06-14 383
，采用的服务器端技术主要是MapServer。为了展示方便，使用Python开发了简单的静态网站生成器来构建发布网站。后来想翻译成英文网站同时发布，在处理过程中使用Sphinx重新进行了组织。英文网站去年上线（http://webgis.pub），并把源代码开源了，但里面转换过程中有各种问题都需要慢慢处理。最近因为服务器到期需要换服务器，集中处理了一些问题。记录一下，并欢迎指出问题及改进网站。前两年为了写《开源WebGIS》一书建了一个WebGIS中文网站（
WEBGIS开发基础到进阶视频教程2023-WEBGIS视频教程2023
05-18
分享一套WEBGIS开发视频课程，2023年5月完结新课，提供课程配套的源码和课件下载！ 学完本套课程您可以获得： 1、GIS与web基础 2、GIS软件基础操作 3、WEBGIS框架学习 4、项目实战、POSTGIS、geotools WEBGIS开发...
webgis-openlayers景点管理系统.zip
06-05
基于openlayers的webgis开发，采用datagrid展现数据库中POI点信息，实现了点的增删改功能。以高德地图为底图，使用到了openlayers marker、popup等功能。另外添加了路线搜索，使用高德地图api，用openlayers进行渲染...
WebGIS教程：地图发布与地图服务.zip
05-18
6. 图层管理：在WebGIS中，地图通常由多个图层组成，每个图层可以包含不同类型的地理信息。用户可以根据需求选择显示哪些图层，或者调整图层的透明度、叠加顺序等。 7. 查询与分析：WebGIS还支持对地图数据进行交互...
WEBGIS开发实实例教程.rar
12-26
WebGIS是目前GIS开发中应用最多的的一个方向，也是现在的一个潮流，不仅新开的项目一般都采用WebGIS模式，而且越来越多的已经完成的传统项目也在往WEB端转，如广电系统，电信系统。从事WebGIS开发要考虑到前端、后端...
WebGIS项目开发实战（源代码及工程文件）
04-13
WebGIS项目开发实战（源代码及工程文件）
js实现webgis
11-26
1、用JS实现和google地图一样的地图--拖动，移动，放大、缩小、还原 2、不需搭建gis服务器，不需第三方API支持。 3、地图的图片直接从百度地图中选择所需的比例，直接截图，然后PS拼接一下就OK了(示例为福州市地图)。 4、代码简单，容易套用，可以直接用于二次开发，实现地理位置信息的展示。 5、可在此基础上进行扩展，增加标注层，数据展示窗等。 6、功能简单，适用于简单的地理信息展示。 7、作者邮箱：258385583@qq.com, 转载请保留。
WebGIS原理与应用开发源代码（代码和数据）
12-09
WebGIS原理与应用开发课程，教程附带源代码以及开发数据
WebGIS完整功能例子
12-06
本压缩包文件“WebGIS完整功能例子”提供了一个全面展示WebGIS功能的实例，旨在帮助用户理解和应用WebGIS技术。 在WebGIS中，主要包含以下几个关键知识点： 1. **地图服务**：WebGIS的核心是地图服务，它可以将...
GIS开发/WebGIS开发零基础入门：地图域当前信息（附代码）
gis1205的博客
10-14 976
示例功能该示例底图显示一个天地图世界地图，实现显示地图域当前信息功能。示例实现本示例需要使用 【include-openlayers-local.js】 ，通过 ol.view()类的 getResolution()方法实现显示当前分辨率功能；通过 ol.map()类的方法实现显示当前地图范围功能；通过 ol.map()类的 getView()方法实现显示当前视口范围功能；实现步骤引用开发库:本示例通过本地离线 【include-openlayers-local.js】 脚本引入开发库；
WebGIS开发入门
热门推荐
popstarqq的博客
10-22 2万+
一 WebGIS： Web就是网页端，GIS全称是地理信息系统;所以webgis系统就是网页端的地理信息系统，简单点说将地理空间信息以地图的方式在网页端展现出来，进行可视化或者是分析； 二 GIS背景 gis是一门专业课程，本科阶段叫地理信息系统(科学)，硕士阶段是地图学与地理信息系统；该专业毫无疑问就是webgis开发最专业的专业了； 大部分gis专业学生，本科先接触arcgis 二次开发；然后是arcgis for js的网页gis二次开发；接触开源gis比较少； 目前只要设计地图开发的都可以
SuperMap GIS基础产品WebGIS FAQ集锦（1）
SuperMap技术控
04-03 1090
SuperMap GIS基础产品WebGIS FAQ集锦（1）
webGIS，基于百度地图的HelloWord实现
this_zq的博客
05-08 902
写在前面： 本文作为本人学习总结之用，同时分享给大家~ 个人前端博客网站：zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！ 本篇github源码地址： https://github.com/front-end-study-GoGoGo/webGIS-basic-BMapGL 1 先上运行效果图 2 介绍 随着前端技术的不断发展，WebGIS普及度也越来越广，本篇将主要讲解基于百度地图JavaScript API GL v1.0.
WEBGIS开发1-地图资源部署及加载
weixin_42276227的博客
02-01 847
基于Cesium的Mars3D进行三维地图的加载及相关功能的实现
webgis完整开发教程
最新发布
07-11
以下是WebGIS开发的一些基本步骤和教程： 1. 确定需求：首先需要明确WebGIS的功能和使用场景，确定需要展示哪些地理信息和数据，并为此设定目标和目的。 2. 数据收集：WebGIS的核心是地理数据，因此需要先收集、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

老靳的WebGIS

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

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

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

打赏作者

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

抵扣说明：

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

余额充值