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类 类型图层，可以用于图上标绘 的 多图层标绘控制及管理，具体参考 基础项目的 图上标绘 功能。