# estateDataVisualization

**Repository Path**: zr_swu/estate-data-visualization

## Basic Information

- **Project Name**: estateDataVisualization
- **Description**: 基于Mars3d的房地产数据可视化项目
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-12-02
- **Last Updated**: 2023-07-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 房地产数据可视化系统安装说明

### 1. git仓库地址

前端：https://gitee.com/zr_swu/estate-data-visualization

后端：https://gitee.com/zr_swu/estate-data-visualization-backend

数据：https://gitee.com/zr_swu/estate-data

项目体验地址：[房地产数据可视化](http://139.196.33.14:8001/#/)

### 2. 数据准备

#### 2.1 下载数据

```shell 
git clone https://gitee.com/zr_swu/estate-data
```

![image-20220429112532281](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220429112532.png)

#### 2.2 使用nginx代理访问数据

 nginx.conf 配置:

```xml
server {
        listen       8000;
		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Headers X-Requested-With;
		add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
		
        location / {
            root   /var/www/estate-data/;
            autoindex on;
        }
    }
```

代理的数据包括3dtiles和geojson数据

![image-20220429112330664](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220429112330.png)

#### 2.3 数据库导入

```sql
mysql> create database estate_data_visualization;
mysql> use estate_data_visualization;
mysql> source /var/www/estate-data/estate_data_visualization.sql
```

### 3. 后端服务搭建

#### 3.1 拉取代码

```sh
git clone https://gitee.com/zr_swu/estate-data-visualization-backend.git
```

#### 3.2 修改数据库连接配置

src/main/resources/application.properties 中：

![image-20220429134524118](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220429134524.png)

#### 3.3 maven打包

```shell
cd estate-data-visualization-backend/
mvn clean package
```

#### 3.4 运行jar包

```shell
cd estate-data-visualization-backend/target
nohup java -jar estateDataVisualization-0.0.1-SNAPSHOT.jar > /var/log/estate-data-visualization.log 2>&1 &
```

### 4. 前端搭建

#### 4.1 代码拉取

```shell
git clone https://gitee.com/zr_swu/estate-data-visualization.git
```

#### 4.2 修改后端服务地址

修改src/util/下的request.js 中的后端接口baseURL

![image-20220429140558524](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220429140558.png)

#### 4.3 修改静态资源服务地址

修改src/下的main.js 将dataServerUrl 修改为对应的服务地址 格式为：‘ip:port’

![image-20220429142049590](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220429142049.png)

#### 4.4 npm打包

安装vue脚手架、bable 插件并进行打包

```sh
cnpm install @vue/cli-service -g
cnpm install @vue/cli-plugin-babel -D
npm run build
```

#### 4.5 nginx反向代理

将打包生成的dist文件夹通过nginx发布

nginx配置：

```xml
server {
    listen 80;

    location / {
        # 配置dist文件路径
        root /var/www/estateDataVisulization/dist;
        index index.html index.htm;
    }
}
```

### 5. 使用说明

#### 5.1 环境要求

##### 5.1.1 显卡要求

客户端访问机器的显卡显存应不低于3GB。

##### 5.1.2 浏览器支持

推荐使用`Chrome 90+` 浏览器， 建议升级浏览器到最新版本访问。通过浏览器访问[WebGL Report网站](https://webglreport.com/)，检查一下您的浏览器是否支持WebGL和支持的清单。

#### 5.2 小区搜索功能说明

使用该功能可通过小区名搜索或显示附近的所有小区

![image-20220430122927931](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220430122928.png)	

以“显示附近所有小区”为例，搜索得到的结果以表格形式展示 ，由于很多住房的价格信息并不在我们的数据库中，建议使用表格筛选功能筛选出有价格信息的小区：

![image-20220430123246797](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220430123247.png)

![image-20220430142113974](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220430142114.png)

点击表格某一行 视角会跳转到该小区 展示小区轮廓与小区信息

![image-20220430142216645](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220430142216.png)

#### 5.3 poi搜索功能说明

使用该功能可以通过poi名称或poi类型名查询范围内的poi信息，范围的选择又包括全重庆、视域范围、框选范围三种，这里以框选范围为例

![image-20220430142551102](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220430142551.png)

#### 5.4 路径规划功能说明

使用该功能可在地图上选择起点与终点，进行步行或驾车路线的规划，规划完成后系统会展示人或小车模型在路线上运动的模拟动画

![image-20220430143014693](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220430143015.png)

#### 5.5 街景联动功能说明

使用该功能可以实现街景地图和三位地图的分屏联动展示

![image-20220430143141505](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220430143141.png)

#### 5.6 房价统计功能说明

该功能提供重庆市各区县平均房价(现有数据)的统计提供一个geojson图层与一个echarts图表进行展示

![image-20220430143408335](https://markdown-zr.oss-cn-chengdu.aliyuncs.com/img/20220430143409.png)