# WebGIS-Demo

**Repository Path**: geogy/webgis-demo

## Basic Information

- **Project Name**: WebGIS-Demo
- **Description**: WebGIS高级认证
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-01-26
- **Last Updated**: 2025-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
<img src="https://s2.loli.net/2024/11/01/XoOiB5kpGrZbcqY.jpg" style="width:150px"/>
    <h1>WebGIS 高级认证</h1>
</div>


## 关于

2025年SuperMap WebGIS高级认证。使用 Vue3 + TypeScript + iClient MapBox 完成，包括以下功能：

1、地图叠加：WMTS作为底图，叠加Rest地图服务，Rest地图服务有子图层过滤+legend图例显示

2、影像服务：iServer发布影像服务，Web页面实现影像服务的检索，并加载显示在地图

3、地物查询定位(通过FGB格式返回)

4、矢量瓦片：
		1）实现矢量瓦片的属性过滤显示，例如专题图显示某几类
		2）样式修改，例如修改面图层的颜色，点的图标等
		3）点击高亮，显示详细信息

5、聚点图：如右图，点击聚合点展开，散开的点可点击弹窗展示详细信息

6、L7航向图

7、实现客户端量算

8、Web打印：
		1）调用iServer的WEB打印服务,使用自带的模板进行打印图例+鹰眼图+比例尺；
		2）自定义打印模板：通过 SuperMap iDesktop/iDesktopX 软件自定义布局模板

9、交通网络分析：
		1）最佳路径分析：最佳路径显示，并展示行驶导引信息
		2）爆管分析，标记某个点，查找改点上游或下游最近阀门位置

## 安装使用

```bash
# 依赖安装
npm install

# 运行
npm run dev # 使用 http://172.16.15.36:8090 iServer服务地址运行
npm run dev:test # 使用 http://localhost:8090 iServer服务地址运行
npm run dev:prod # 使用 http://172.16.15.29:8090 iServer服务地址运行

# 项目打包
npm run build # 使用 http://172.16.15.29:8090 iServer服务地址打包
npm run build:dev # 使用 http://172.16.15.36:8090 iServer服务地址打包
npm run build:test # 使用 http://localhost:8090 iServer服务地址打包

```

## 项目预览

![](https://gitee.com/geogy/csdn_picture/raw/master/blog/PixPin_2025-02-12_16-14-05.png)

![](https://gitee.com/geogy/csdn_picture/raw/master/blog/PixPin_2025-02-12_16-14-55.png)

![](https://gitee.com/geogy/csdn_picture/raw/master/blog/PixPin_2025-02-12_16-15-34.png)

![](https://gitee.com/geogy/csdn_picture/raw/master/blog/PixPin_2025-02-12_16-16-03.png)

![](https://gitee.com/geogy/csdn_picture/raw/master/blog/PixPin_2025-02-12_16-16-32.png)

![](https://gitee.com/geogy/csdn_picture/raw/master/blog/PixPin_2025-02-12_16-16-55.png)

![](https://gitee.com/geogy/csdn_picture/raw/master/blog/PixPin_2025-02-12_16-18-40.png)