山海鲸可视化

GIS电子地图

GIS 电子地图是地理信息系统(GIS)与电子地图技术的结合体,它能够显示真实的地理位置,并具备 GPS 定位功能。GIS 电子地图通常与 GPS 结合使用,为各种应用提供了精确的定位和导航功能。
image.png

山海鲸可视化软件中,GIS 电子地图具备了以下功能:

1. 支持切换多种底图

双击地图进入编辑模式后,在“服务”菜单中可以选择添加“ArcGIS 卫星”“Mapbox 矢量”两种地图影像。
image.png

点击“+”号可导入本地影像,在“服务地址”中可直接输入影像地址进行导入。
山海鲸支持的影像类型包括URL 模板WMTS超图 Rest 接口ArcGis RestMapbox Vector Tiles(MVT)WMS
image.png

Mapbox 矢量影像底图和 ArcGIS 卫星影像底图切换,如下图所示:
1.gif

2. 可以实现多种地图投影

进入地图的编辑模式后,可以在“地图投影”设置项的下拉菜单中选择地图的投影方式,默认方式为“Web 墨卡托投影(EPSG:3657)”
image.png

切换 ArcGis 卫星影像的投影方式,如下图所示:
2.gif

3. 支持自定义地图样式

在地图中,先添加一个ArcGis 卫星影像
image.png

选中 ArcGis 卫星影像,在“地图滤镜”设置项下开启“使用滤镜”按钮,即可对该影像样式进行配置。
image.png

4. 支持通过数据生成标绘

在地图的编辑模式下,在“标绘”菜单中可以看到包含标记飞线图形热力图四种标绘。
image.png

4.1 标记

编辑模式下,在“标绘”菜单中选择“标记”,点击添加一个标记组
image.png

选中标记组,在右侧“数据”界面中勾选对应的地点字段名称字段
image.png

示例数据:
image.png

勾选好数据字段后,在该标记组和地图中就会自动生成对应数量和位置的标记点。
image.png

4.2 飞线

编辑模式下,在“标绘”菜单中选择“飞线”,点击添加一个飞线组
image.png

“数据”界面拖入飞线的地点字段名称字段
image.png

示例数据:
image.png

勾选好数据字段后,在该飞线组和地图中就会自动生成对应数量和位置的飞线。
image.png

4.3 热力图

编辑模式下,在“标绘”菜单中选择“热力图”,添加热力图。
image.png

“数据”界面拖入热力图的地点字段数据字段
image.png

示例数据:
image.png

切换至“样式”界面,将热力圈大小由“8”调整至“50”,即可得:
image.png

5. 支持自由绘制图形

地图编辑模式下,在“标绘”菜单中点击“图形”,可以看到有线多边形三种图形类型。
image.png

“线”为例,通过鼠标点击即可进行线型绘制,双击即可完成绘制。
3.gif

完成“线”的绘制后,可对该条线进行样式的配置。
image.png

多边形的绘制也是同样的操作方式。

6. 支持接入 GIS 服务

在地图“服务”菜单中,点击“WFS”中的“+”号,可以通过输入地址的方式来接入 WFS 服务。
image.png

image.png

7. 支持区域划分/下钻

地图编辑模式中,在“服务”菜单中选择“geojson”,可以看到包含世界各国轮廓中国各省市轮廓美国各州轮廓三种轮廓区域。
image.png

点击“+”号可以导入本地GeoJSON 文件
image.png

对于添加至地图中的轮廓区域,可以在“样式”界面进行区域的下钻设置
image.png

打开“开启下钻”按钮,在该轮廓区域内双击任意区域会进行下一级地图的下钻。
8.gif

8. 支持根据数据改变区域颜色

在地图中添加一个“中国各省市轮廓”,并在“数据”界面勾选对应地点字段和数据字段。
image.png

示例数据:
image.png

选中“中国各省市轮廓”,在“图形样式”配置项中开启“使用数据样式”按钮。
image.png

“样式设置”中,在“默认”颜色基础上添加“配置 2”,设置填充颜色,并设定最大值为“500”
image.pngimage.png

此时在地图区域中,值 ≤500 的区域显示蓝色,值> 500 的区域显示默认填充颜色。
image.png

9. 支持测绘功能

在地图的编辑模式下,在“测绘”菜单中可以看到包含距离面积坐标三个选项。
image.png

9.1 距离

点击“距离”,可使用鼠标点击选定距离,然后双击进行距离的测定。
4.gif

9.2 面积

点击“面积”,可使用鼠标点击选定面积,然后双击进行面积的测定。
5.gif

9.3 坐标

点击“坐标”,可点击地图任意点进行坐标的测定。
6.gif

10. 支持图形交互

在编辑模式中添加好一个图形“圆”
image.png

退出编辑模式,在项目中任意添加一个其他组件,并将其不透明度设置为“0%”
image.png

再双击进入编辑模式,选中“圆”,设置如下交互:
image.png

交互设置好后,就能得到如下效果:
7.gif