矢量图层

Mars3D 6/8/2023

三维场景中，地形和栅格来组成了三维的基础，但更多的业务还是需要点线面等矢量数据来充实, 这就是我们的矢量数据图层。

# 1. 图层类型清单

当前主要使用的矢量图层，是指 GraphicLayer (opens new window) 类及其子类对象。矢量图层中可以通过addGraphic方法来加入各类型 (opens new window) 的矢量数据 (opens new window) 来组成。

目前常用的矢量图层有以下类型：

类型名	功能	类名	功能示例
graphic	矢量图层	mars3d.layer.GraphicLayer (opens new window)	查看 (opens new window)
busineData	业务数据图层	mars3d.layer.BusineDataLayer (opens new window)	查看 (opens new window)
wfs	WFS标准服务图层	mars3d.layer.WfsLayer (opens new window)	查看 (opens new window)
arcgis_wfs	ArcGIS Feature Server服务图层	mars3d.layer.ArcGisWfsLayer (opens new window)	查看 (opens new window)
geojson	GeoJson文件图层	mars3d.layer.GeoJsonLayer (opens new window)	查看 (opens new window)
czml	CZML文件图层	mars3d.layer.CzmlLayer (opens new window)	查看 (opens new window)
geojson_shp	Shapefile(SHP)文件图层	Shp2JsonLayer.js (opens new window) 独立插件JS	查看 (opens new window)
geojson_kml	KML文件图层	Kml2JsonLayer.js (opens new window) 独立插件JS	查看 (opens new window)
tileset	3DTiles三维模型图层	mars3d.layer.TilesetLayer (opens new window)	查看 (opens new window)
i3s	I3S三维模型图层	mars3d.layer.I3SLayer (opens new window)	查看 (opens new window)

# 2. 矢量图层的创建及使用

# 2.1 快速开始(初始化 new Map 时传入)

在构造Map时传入 layers 参数中配置相关图层，并设置 show:true 后进行初始化加载矢量图层

var map = new mars3d.Map('mars3dContainer', {
 layers: [
     "id":1987,
     "type": "geojson",
     "name": "示例数据",
     "url": "http://data.mars3d.cn/file/geojson/geojson-draw.json",
     "popup": "{name}",
     "show": false
//可以通过下面方法获取到配置的图层
let tiles3dLayer = map.getLayer(1987,'id')

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2.2 代码中创建图层

可以有下面2种方式来创建图层对象：

//用工厂方法，指定type来创建图层对象
var wfsLayer = mars3d.LayerUtil.create({
 name: '合肥教育点',
 type: 'wfs',
 url: 'http://server.mars3d.cn/geoserver/mars/wfs',
 layer: 'mars:hfjy',
 parameters: {
   maxFeatures: 500,
 minimumLevel: 13,
 symbol: {
   type: 'billboardP',
   styleOptions: {
     image: 'img/marker/mark1.jpg',
     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
     clampToGround: true,
 popup: 'all',
 show: true,
map.addLayer(wfsLayer)
//直接创建具体类型的图层对象
var geoJsonLayer = new mars3d.layer.GeoJsonLayer({
 name: '标绘示例数据',
 url: 'http://data.mars3d.cn/file/geojson/geojson-draw.json',
 popup: '{type} {name}',
 flyTo: true,
map.addLayer(geoJsonLayer)

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
26
27
28
29
30
31

在Map创建后可以通过 map.addLayer (opens new window) 和 map.removeLayer (opens new window) 方法来控制图层的加载和删除。

在图层本身也有 layer.addTo (opens new window) 和 layer.remove (opens new window) 2个方法支持添加或移除图层。

# 3 常用矢量图层类

# 3.1 GraphicLayer

矢量数据图层

//创建矢量数据图层
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)