矢量数据

4/15/2023

矢量数据 是用经度、纬度、高度坐标来表示地图图形或地理实体位置的数据,一般是通过记录坐标的方式来尽可能将地理实体的空间位置表现的准确无误,常见的矢量数据有:点、线、面、体等格式。

image

# 1. 矢量数据对象

平台对Cesium矢量数据和平台自身扩展开发的矢量对象都做了梳理及统一对外接口的封装,这样使用更加简单易用、对开发人员更友好、开发效率高。

平台的所有矢量数据类都继承于BaseGraphic类 (opens new window),矢量数据类均在mars3d.graphic.*命名空间下面。矢量数据清单请访问GraphicType类 (opens new window)

下面我们演示创建一个矢量数据对象 ,并调用layer.addGraphic添加到图层上。

//创建矢量数据图层
let graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)

//加载数据到矢量图层
let graphic = new mars3d.graphic.LabelEntity({
 position: new mars3d.LngLatPoint(116.1, 31.0, 1000),
 style: {
   text: 'Mars3D三维可视化平台',
   font_size: 25,
   color: '#003da6',
 },
})
graphicLayer.addGraphic(graphic)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

矢量数据 由 坐标、样式、属性 3部分组成构成

构成 mars3d属性名 说明
坐标 position 或 positions 地理位置,如经度、纬度、高度(三维GIS中) 构成
样式 style 表现形式,如图标图片、线条样式、填充色、文字样式等
属性 attr 除经纬度信息之外的关联信息,如名称、地址、电话、面积、长度、备注等

可以通过图层的graphicLayer.addGraphic(graphic)graphicLayer.removeGraphic(graphic)方法来控制矢量数据的加载和删除。

在矢量数据本身也有graphic.addTo (graphicLayer)graphic.remove ()2个方法支持添加或移除矢量数据。

# 2. 矢量数据的类别

目前平台内的矢量数据分为四大类:

类型 性能 数据量极限 功能/特点 动态坐标位置 功能示例
Entity <1千 支持动态属性,控制方便 支持 PolygonEntity示例 (opens new window)
Primitive <1万 性能比较好 点对象支持 PolygonPrimitive示例 (opens new window)
CombinePrimitive <几十万 多个数据合并渲染,性能最佳 不支持 PolygonCombine示例 (opens new window)
DIV <100 基于DOM ,可以写CSS3效果 支持 DivGraphic示例 (opens new window)

在使用优先级上,推荐按下面顺序:Combine > Primitive > Entity ,DIV主要看你需求选择,不支持太多数据

# 2.1 Entity 矢量对象

Entity API 的主要目的是定义一组高级对象,它们把可视化和信息存储到统一的数据结果中,这个对象叫Entity。 它让我们更加关注我们的数据展示而不是底层的可视化机制。它提供了很方便的创建复杂的与静态数据相匹配的随时间变化的可视化效果。Entity内部也是使用了Primitive,它的实现细节,我们无需关心, Entity暴露一些一致性的、容易去学习和使用的接口。

Entity矢量对象特点:

  • (1)性能略低、适合少量数据
  • (2)支持Property属性机制
  • (3)支持Draw标绘和编辑
  • (4)针对Billboard、Label、Point 对象提供聚合功能。

目前Entity常用类型包括:

类型名 功能 类名 功能示例 坐标参数
point 像素点 mars3d.graphic.PointEntity (opens new window) 查看 (opens new window) position 单点
billboard 图标点 mars3d.graphic.BillboardEntity (opens new window) 查看 (opens new window) position 单点
fontBillboard 字体图片点 mars3d.graphic.FontBillboardEntity (opens new window) 查看 (opens new window) position 单点
divBillboard Div图片点 mars3d.graphic.DivBillboardEntity (opens new window) 查看 (opens new window) position 单点
label 文字 mars3d.graphic.LabelEntity (opens new window) 查看 (opens new window) position 单点
canvasLabel Canvas文字 mars3d.graphic.CanvasLabelEntity (opens new window) 查看 (opens new window) position 单点
model 小模型 mars3d.graphic.ModelEntity (opens new window) 查看 (opens new window) position 单点
box 盒子 mars3d.graphic.BoxEntity (opens new window) 查看 (opens new window) position 单点
plane 平面 mars3d.graphic.PlaneEntity (opens new window) 查看 (opens new window) position 单点
circle 圆、圆柱 mars3d.graphic.CircleEntity (opens new window) 查看 (opens new window) position 单点
cylinder 圆锥 mars3d.graphic.CylinderEntity (opens new window) 查看 (opens new window) position 单点
coneTrack 圆锥追踪体 mars3d.graphic.ConeTrack (opens new window) 查看 (opens new window) position 单点
ellipsoid 球、半球、椭球 mars3d.graphic.EllipsoidEntity (opens new window) 查看 (opens new window) position 单点
polyline 线 mars3d.graphic.PolylineEntity (opens new window) 查看 (opens new window) positions多点
curve 曲线 mars3d.graphic.CurveEntity (opens new window) 查看 (opens new window) positions多点
brushLine 自由曲线 mars3d.graphic.BrushLineEntity (opens new window) 查看 (opens new window) positions多点
polylineVolume 管道线 mars3d.graphic.PolylineVolumeEntity (opens new window) 查看 (opens new window) positions多点
path Path轨迹 mars3d.graphic.PathEntity (opens new window) 查看 (opens new window) positions多点
corridor 走廊 mars3d.graphic.CorridorEntity (opens new window) 查看 (opens new window) positions多点
wall mars3d.graphic.WallEntity (opens new window) 查看 (opens new window) positions多点
rectangle 矩形 mars3d.graphic.RectangleEntity (opens new window) 查看 (opens new window) positions多点
polygon mars3d.graphic.PolygonEntity (opens new window) 查看 (opens new window) positions多点
ellipse 椭圆、椭圆柱 mars3d.graphic.EllipseEntity (opens new window) 查看 (opens new window) position 单点
rectangularSensor 相控阵雷达范围 mars3d.graphic.RectangularSensor (opens new window) 查看 (opens new window) position 单点
video2D 视频2D投射 mars3d.graphic.Video2D (opens new window) 查看 (opens new window) position 单点

更多请参考 矢量数据类型 (opens new window)

# 2.2 Primitive 矢量对象

Primitive API 的主要目的是为了完成(可视化)任务的最少的抽象需求。它很强大又很灵活,要求我们以一个图形开发者的方式去思考,并且使用了一些图形学术语。它是为了最高效最灵活的实现可视化效果,忽略了API的一致性。他们每种都有自己的独特的性能提升方式,也需要遵守不同的优化原则。

Primitive方式更接近渲染引擎底层,需要理解Primitive API参数时需要您已有WebGL知识储备,建议先学习下《WebGL编程指南》,Primitive由两个部分组成:

  • 几何形状(Geometry):定义了Primitive的结构,例如三角形、线条、点等
  • 外观(Appearance ):定义Primitive的着色(Sharding),包括GLSL(OpenGL着色语言)顶点着色器和片段着色器(vertex and fragment shaders),以及渲染状态(render state)

使用Primitive具有以下优势:

  • (1)性能:尤其是绘制大量静态图元(比如整个美国的邮政编码区域多边形),使用几何体可以把他们组合成一个单一的几何体,这样会减少cpu的开销,并且充分利用GPU的能力。组合几何体可以在web worker中完成,不会影响用户界面的响应。
  • (2)灵活性:图元由几何体和外观构成。不过他们可以单独修改。新建的几何体可以兼容多种不同的外观,反之亦然。
  • (3)底层访问:外观提供了近乎最底层的渲染访问,但是又不需要直接担心渲染 Renderer 的细节技术 。外观使下面的技术简单了很多:编写完整的顶点和片段着色器GLSL代码、使用用户自定义的渲染状态。

同时,具有以下劣势:

  • (1)使用几何体和外观需要写更多的代码,并且需要对图形知识有深刻的理解。Entity是应用层的抽象;而几何体和外观更像是一个传统3D引擎的级别。
  • (2)对于静态数据,几何体合并非常有效,但是对于动态数据不适合。

目前Primitive常用以下类型:

类型名 功能 类名 功能示例 坐标参数
pointP 大量像素点 mars3d.graphic.PointPrimitive (opens new window) 查看 (opens new window) position 单点
billboardP 大量图标点 mars3d.graphic.BillboardPrimitive (opens new window) 查看 (opens new window) position 单点
cloud 积云 mars3d.graphic.CloudPrimitive (opens new window) 查看 (opens new window) position 单点
labelP 大量文字 mars3d.graphic.LabelPrimitive (opens new window) 查看 (opens new window) position 单点
modelP 小模型Primitive mars3d.graphic.ModelPrimitive (opens new window) 查看 (opens new window) position 单点
circleP 圆、圆柱Primitive mars3d.graphic.CirclePrimitive (opens new window) 查看 (opens new window) position 单点
planeP 平面Primitive mars3d.graphic.PlanePrimitive (opens new window) 查看 (opens new window) position 单点
boxP 盒子Primitive mars3d.graphic.BoxPrimitive (opens new window) 查看 (opens new window) position 单点
cylinderP 圆锥、圆柱Primitive mars3d.graphic.CylinderPrimitive (opens new window) 查看 (opens new window) position 单点
coneTrackP 圆锥追踪体Primitive mars3d.graphic.ConeTrackPrimitive (opens new window) 查看 (opens new window) position 单点
ellipsoidP 球、半球、椭球Primitive mars3d.graphic.EllipsoidPrimitive (opens new window) 查看 (opens new window) position 单点
polylineP 线Primitive mars3d.graphic.PolylinePrimitive (opens new window) 查看 (opens new window) positions多点
wallP 墙Primitive mars3d.graphic.WallPrimitive (opens new window) 查看 (opens new window) positions多点
corridorP 走廊Primitive mars3d.graphic.CorridorPrimitive (opens new window) 查看 (opens new window) positions多点
polylineVolumeP 管道线Primitive mars3d.graphic.PolylineVolumePrimitive (opens new window) 查看 (opens new window) positions多点
rectangleP 矩形Primitive mars3d.graphic.RectanglePrimitive (opens new window) 查看 (opens new window) positions多点
polygonP 面Primitive mars3d.graphic.PolygonPrimitive (opens new window) 查看 (opens new window) positions多点
frustum 四棱锥体 mars3d.graphic.FrustumPrimitive (opens new window) 查看 (opens new window) position 单点
lightCone 光锥体 mars3d.graphic.LightCone (opens new window) 查看 (opens new window) position 单点
water 水域面 mars3d.graphic.Water (opens new window) 查看 (opens new window) positions多点
mask 反选遮罩层 mars3d.graphic.Mask (opens new window) 查看 (opens new window) positions多点
diffuseWall 扩散围墙 mars3d.graphic.DiffuseWall (opens new window) 查看 (opens new window) positions多点
scrollWall 走马灯围墙 mars3d.graphic.ScrollWall (opens new window) 查看 (opens new window) positions多点
dynamicRiver 动态河流 mars3d.graphic.DynamicRiver (opens new window) 查看 (opens new window) positions多点
road 道路 mars3d.graphic.Road (opens new window) 查看 (opens new window) positions多点
pit mars3d.graphic.Pit (opens new window) 查看 (opens new window) positions多点
doubleSidedPlane 双面渲染平面 mars3d.graphic.DoubleSidedPlane (opens new window) 查看 (opens new window) positions多点
reflectionWater 反射水面 mars3d.graphic.ReflectionWater (opens new window) 查看 (opens new window) positions多点
videoP 视频编辑 mars3d.graphic.VideoPrimitive (opens new window) 查看 (opens new window) positions多点

目前Primitive的大数据集合 (合并渲染) 类型:

类型名 功能 类名 功能示例 坐标参数
flatBillboard 平面图标 mars3d.graphic.FlatBillboard (opens new window) 查看 (opens new window) position 单点
planeC 大量平面(合并渲染Primitive) mars3d.graphic.PlaneCombine (opens new window) 查看 (opens new window) position 单点
boxC 大量盒子(合并渲染Primitive) mars3d.graphic.BoxCombine (opens new window) 查看 (opens new window) position 单点
circleC 大量圆、椭圆、圆柱(合并渲染Primitive) mars3d.graphic.CircleCombine (opens new window) 查看 (opens new window) position 单点
cylinderC 大量圆锥(合并渲染Primitive) mars3d.graphic.CylinderCombine (opens new window) 查看 (opens new window) position 单点
frustumC 大量四棱锥体(合并渲染Primitive) mars3d.graphic.FrustumCombine (opens new window) 查看 (opens new window) position 单点
ellipsoidC 大量球、半球、椭球(合并渲染Primitive) mars3d.graphic.EllipsoidCombine (opens new window) 查看 (opens new window) position 单点
polylineC 大量线(合并渲染Primitive) mars3d.graphic.PolylineCombine (opens new window) 查看 (opens new window) positions多点
polylineVolumeC 大量管道线(合并渲染Primitive) mars3d.graphic.PolylineVolumeCombine (opens new window) 查看 (opens new window) positions多点
corridorC 大量走廊(合并渲染Primitive) mars3d.graphic.CorridorCombine (opens new window) 查看 (opens new window) positions多点
wallC 大量墙(合并渲染Primitive) mars3d.graphic.WallCombine (opens new window) 查看 (opens new window) positions多点
polygonC 大量面(合并渲染Primitive) mars3d.graphic.PolygonCombine (opens new window) 查看 (opens new window) positions多点
waterC 大量水面(合并渲染Primitive) mars3d.graphic.WaterCombine (opens new window) 查看 (opens new window) positions多点
rectangleC 大量矩形(合并渲染Primitive) mars3d.graphic.RectangleCombine (opens new window) 查看 (opens new window) positions多点

更多请参考 矢量数据类型 (opens new window)

# 2.3 DIV 矢量对象

这类实际不是真正的矢量数据对象,由Div构成的DOM对象在页面中展示,在与地图位置进行联动。

类型名 功能 类名 功能示例
div DIV点 mars3d.graphic.DivGraphic (opens new window) 查看 (opens new window)
divBoderLabel 动态边框文本 DIV点 mars3d.graphic.DivBoderLabel (opens new window) 查看 (opens new window)
divLightPoint 动态效果点 mars3d.graphic.DivLightPoint (opens new window) 查看 (opens new window)
divUpLabel 竖立的文本 DIV点 mars3d.graphic.DivUpLabel (opens new window) 查看 (opens new window)
popup Popup单击弹窗 mars3d.graphic.Popup (opens new window) 查看 (opens new window)
tooltip Tooltip移入弹窗 mars3d.graphic.Tooltip (opens new window) 查看 (opens new window)
divPlane 三维DIV面板 mars3d.graphic.DivPlane (opens new window) 查看 (opens new window)

# 2.4 其他 矢量对象

除了上面介绍的3类,还有一些其他如如粒子、视频融合 等对象,具体可以参考功能示例 (opens new window)矢量数据类型清单 (opens new window)来了解和学习。

# 3. 矢量数据的控制

前面我们讲到了平台对所有矢量数据 (opens new window) 做了统一风格的对外接口的封装,都继承于BaseGraphic类 (opens new window),这样使用更加简单易用、对开发人员更友好、开发效率高。并且参数属性和方法均一致。

# 3.1 矢量数据的事件

矢量数据均支持事件的绑定、解绑、触发等统一的事件机制,例如:

graphic.on(mars3d.EventType.click, function (event) {
 console.log("您单击了矢量对象", event);
});
1
2
3

# 3.2 矢量数据的Popup、Tooltip等控件

graphic矢量数据 (opens new window)对象上可以操作的常用方法控件相关操作方法有:

//Popup相关
graphic.hasPopup() //是否存在Popup绑定
graphic.bindPopup(content, options) //绑定鼠标单击对象后的弹窗。
graphic.unbindPopup()  //解除绑定的鼠标单击对象后的弹窗。
graphic.openPopup(position) //打开Popup弹窗
graphic.closePopup()//关闭弹窗

//Tooltip相关
graphic.hasTooltip() //是否存在Tooltip绑定
graphic.bindTooltip(content, options) //绑定鼠标移入对象后的弹窗。
graphic.unbindTooltip()  //解除绑定的鼠标移入对象后的弹窗。
graphic.openTooltip(position) //打开Tooltip弹窗
graphic.closeTooltip()//关闭Tooltip弹窗

//SmallTooltip相关 
graphic.openSmallTooltip(position, message) //显示小提示窗,一般用于鼠标操作的提示。
graphic.closeSmallTooltip()//关闭小提示窗

//右键菜单相关
graphic.hasContextMenu() //是否有绑定的右键菜单
graphic.getContextMenu() //获取绑定的右键菜单数组
graphic.bindContextMenu(content, options) //绑定地图的默认右键菜单
graphic.unbindContextMenu() //解除绑定的右键菜单
graphic.openContextMenu(position, options) //打开右键菜单
graphic.closeContextMenu() //关闭右键菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 3.3 矢量数据的鼠标交互高亮样式

在大部分矢量数据的style属性中支持highlight参数,该参数支持的值与本身的style是一致的,用于定义鼠标单击或移入后高亮显示的样式。

let graphic = new mars3d.graphic.PolygonEntity({
  positions: [
    [117.183593, 31.856606, 32.1], 
    [117.213155, 31.854726, 28.6], 
    [117.186741, 31.845103, 45.5],
  ],
  style: {
    color: "#00ff00", 
    opacity: 0.5, 
    //高亮时的样式
    highlight: {
      type:mars3d.EventType.click, //默认为鼠标移入,也可以加该参数后单击高亮
      opacity: 0.9,
    },
  },
});
graphicLayer.addGraphic(graphic); 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

并且矢量数据中也有openHighlight方法 (opens new window)closeHighlight方法 (opens new window)来外部调用按指定样式高亮对象和取消高亮对象。

最后更新: 5/2/2024, 10:42:33 PM