Mars3D开发基础学习：矢量图层

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

#1. 图层类型清单

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

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

type类型名	图层说明	对应的图层类
graphic	矢量数据图层	mars3d.layer.GraphicLayer
geojson	GeoJSON图层	mars3d.layer.GeoJsonLayer
model	gltf小模型图层	mars3d.layer.ModelLayer
lodGraphic	LOD分层分块加载矢量图层	mars3d.layer.LodGraphicLayer
wfs	OGC WFS图层	mars3d.layer.WfsLayer
arcgis_wfs	ArcGIS WFS图层	mars3d.layer.ArcGisWfsLayer

#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')

#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)

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

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

#3 常用矢量图层类

#3.1 GraphicLayer

矢量数据图层

//创建矢量数据图层
let graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)//加载数据到矢量图层
let graphic = new mars3d.graphic.LabelEntity({position: new mars3d.LatLngPoint(116.1, 31.0, 1000),style: {text: 'Mars3D三维可视化平台',font_size: 25,color: '#003da6',},
})
graphicLayer.addGraphic(graphic)

运行效果

#3.2 GeoJsonLayer

GeoJSON是适合于Web下对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。与普通json文件格式区别在于对其属性及组成由一定规范。

GeoJSON将所有的地理要素分为Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection。首先是将这些要素封装到单个的geometry里，然后作为一个个的Feature（要素）；要素放到一个要素集合里构成。

GeoJSON是平台很重要的数据格式，当前平台内矢量数据均支持导出GeoJSON和导入GeoJSON格式。

let geoJsonLayer = new mars3d.layer.GeoJsonLayer({name: '省界线',url: 'http://data.mars3d.cn/file/geojson/sheng-line.json',symbol: {//可以通过配置symbol参数来指定渲染的矢量数据类型和样式。type:"polyline",styleOptions: {color: '#ffffff',opacity: 0.8,width: 2},},
})
map.addLayer(geoJsonLayer)

常用geojson相关网站：

在线生成 GeoJSON：geojson.io

SHP转GeoJSON：mapshaper

中国行政区划GeoJSON下载：阿里云 DataV - 数据可视化平台

#3.1 WFS 图层

平台支持通过WfsLayer类来加载OGC WFS(如GeoServer)服务、通过ArcGisWfsLayer类来加载ArcGIS Server 服务发布的矢量数据的加载。

//OGC WFS
var wfsLayer = new mars3d.layer.WfsLayer({name: '合肥教育点', url: 'http://server.mars3d.cn/geoserver/mars/wfs',layer: 'mars:hfjy',parameters: { maxFeatures: 500, //支持所有wfs的参数},minimumLevel: 13,debuggerTileInfo: false,symbol: {//可以通过配置symbol参数来指定渲染的矢量数据类型和样式。type: 'billboardP',styleOptions: {image: 'img/marker/mark1.jpg',verticalOrigin: Cesium.VerticalOrigin.BOTTOM,clampToGround: true,},},popup: 'all',
})
map.addLayer(wfsLayer)//ArcGIS WFS
var wfsLayer = new mars3d.layer.ArcGisWfsLayer({name: '兴趣点',url: 'http://server.mars3d.cn/arcgis/rest/services/mars/hefei/MapServer/1',minimumLevel: 16,symbol: {//可以通过配置symbol参数来指定渲染的矢量数据类型和样式。type: 'billboardP',styleOptions: {image: 'img/marker/mark3.jpg',verticalOrigin: Cesium.VerticalOrigin.BOTTOM,clampToGround: true,},},popup: '名称：{NAME}<br />地址：{address}',show: true,
})
map.addLayer(wfsLayer)

可以通过配置symbol参数来指定渲染的矢量数据类型和样式。

#2.4 graphicGroup 矢量图层组

目前平台提供了type:'graphicGroup'的GraphicGroupLayer类类型图层，可以用于图上标绘的多图层标绘控制及管理，具体参考基础项目的图上标绘功能。