# WEBGIS（弃坑）

**Repository Path**: Linh9788/webgis

## Basic Information

- **Project Name**: WEBGIS（弃坑）
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-28
- **Last Updated**: 2022-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WEBGIS学习路线

## 前期准备
- java运行环境jre  
  [windows安装java_Windows安装Java环境JDK](https://blog.csdn.net/weixin_35544017/article/details/114402956)
- GeoServer安装  
  [Windows 安装程序](https://docs.geoserver.org/latest/en/user/installation/win_installer.html)  
- Postgre和PostGIS安装   
  [PostgreSQL(PostGIS)安装和入门的若干问题](https://www.cnblogs.com/onsummer/p/9823912.html)
- QGIS  
  [QGIS连接PostgreSQL](https://blog.csdn.net/liyazhen2011/article/details/88992030)
- OpenLayers  
  [The ol package](https://openlayers.org/download/)  
- 建立连接  
  [PostGIS+QGIS+GeoServer+OpenLayers实现数据的存储、服务的发布以及地图的显示](https://www.cnblogs.com/lzugis/p/6539872.html)  
  [Vite + Vue3 + OpenLayers](https://www.jianshu.com/p/002545d66675)

## 基本功能点
- 前台查询统计分析管理端  
  `图层显隐控制` `地图基本操作` `GIS数据增删改查` `叠加分析` `缓冲区分析` `路径分析`  
- 前端可视化  
  `web` `ue4`

## 数据来源
> [DataV.GeoAtlas（阿里云）](http://datav.aliyun.com/portal/school/atlas/area_selector)  
> [厦门市大数据安全开放平台](https://data.xm.gov.cn/opendata/#/)  
> [天地图](https://www.tianditu.gov.cn/)  
> [高德开放平台](https://lbs.amap.com/)
- 点数据  
  `厦门商圈坐标`
- 线数据  
  `厦门道路数据` `厦门行政区边界`
- 面数据  
  `厦门建筑数据`

## 参考样例
- [商业选址在线分析平台（公众版）](https://data.xm.gov.cn/opendata/business-location/#/)  
- [天地图厦门](http://www.xmmap.org/)
- [国家基础地理信息中心](https://www.webmap.cn/mapDataAction.do?method=forw&resType=5&storeId=2&storeName=%E5%9B%BD%E5%AE%B6%E5%9F%BA%E7%A1%80%E5%9C%B0%E7%90%86%E4%BF%A1%E6%81%AF%E4%B8%AD%E5%BF%83&fileId=1A5CEBDB34C04A29AAB7E673930498E7)
- [DataV.GeoAtlas边界生成器](http://datav.aliyun.com/portal/school/atlas/area_generator)
- [数据美学的领导者（大屏）](https://www.aliyun.com/activity/intelligent/datav-showcase?spm=a2crr.b71905609.atlas.47.5a0d26c0K5wUiz)

## 实现过程
### 项目搭建
- 路由  
  [vue3 配置路由](https://blog.csdn.net/wsjzzcbq/article/details/117789118)
- 路径别名  
  [vite配置项目路径别名](https://segmentfault.com/a/1190000041417219)
- vuex
  [vuex在vite&vue3的简单使用](https://blog.csdn.net/weixin_44901846/article/details/120722736)  
  [vite安装构建vue-router和vuex](https://www.jianshu.com/p/1e7b2213e4df)
### 地图数据处理
- QGIS加载在线地图  
  [添加天地图底图](https://www.jianshu.com/p/f56c017cc528)  
  [在QGIS加载天地图、高德地图](https://www.cnblogs.com/googlegis/p/14986844.html)
### 页面基本布局和交互逻辑
- 地图div占满屏幕
```
/* App.vue */
html,
body,
#app {
  height: 100%;
  widows: 100%;
  padding: 0;
  margin: 0;
}
```
```
/* mapview */
.map_div {
  height: 100%;
  display: flex;
  flex-direction: column;
}
```
- ref 和 reactive  
  [vue3中ref和reactive的区别](https://zhuanlan.zhihu.com/p/268053724)  
  [vue3 ref 和reactive的区别](https://blog.csdn.net/weixin_43342105/article/details/110233333)
- 传值  
  [Vue3 过10种组件通讯方式](https://www.jianshu.com/p/bab8f8b03713) 
### 底图加载切换和纠偏
- 纠偏  
  [瓦片地图原理](https://segmentfault.com/a/1190000011276788)  
  [国内主要地图瓦片坐标系定义及计算原理](https://cntchen.github.io/2016/05/09/%E5%9B%BD%E5%86%85%E4%B8%BB%E8%A6%81%E5%9C%B0%E5%9B%BE%E7%93%A6%E7%89%87%E5%9D%90%E6%A0%87%E7%B3%BB%E5%AE%9A%E4%B9%89%E5%8F%8A%E8%AE%A1%E7%AE%97%E5%8E%9F%E7%90%86/)
- 天地图、高德  
  [使用OpenLayers6（ol6）加载天地图和高德地图](https://blog.csdn.net/qq_44317919/article/details/106769426)
- 底图切换  
  [openlayers地图切换](https://blog.csdn.net/lf_morning/article/details/93638557)  
  [OpenLayers3（三）混合地图切换](https://blog.csdn.net/jx950915/article/details/82733160)  
  [openlayers加载百度地图四——ol6加载百度地图](https://blog.csdn.net/xiaonankeji/article/details/109577203)
- 百度地图纠偏  
  [CntChen/tile-lnglat-transform](https://github.com/CntChen/tile-lnglat-transform)  
  [GIS开发：开源库计算经纬度坐标和瓦片坐标](https://blog.csdn.net/wclwksn2019/article/details/106992429/)  
  [coordtransform 坐标转换](http://wandergis.com/coordtransform/)  
  [OpenLayers加载百度离线瓦片地图（完美无偏移）](https://www.bbsmax.com/A/VGzlQqPlJb/)---------有偏移  
  [openlaysers开发常见坐标定义说明](https://blog.csdn.net/u010065726/article/details/106076273)------有偏移   
- 高德地图纠偏  
  [关于openlayers引入高德地图出现坐标偏移的纠偏方法](https://blog.csdn.net/wengjidong/article/details/109776707)