Mars3D开发者中心

外观

矢量图层

1228字约4分钟

2024-12-27

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

image

1. 图层类型清单

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

image

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

类型名功能类名功能示例
graphic矢量图层mars3d.layer.GraphicLayer查看
busineData业务数据图层mars3d.layer.BusineDataLayer查看
wfsWFS标准服务图层mars3d.layer.WfsLayer查看
arcgis_wfsArcGIS Feature Server服务图层mars3d.layer.ArcGisWfsLayer查看
geojsonGeoJson文件图层mars3d.layer.GeoJsonLayer查看
czmlCZML文件图层mars3d.layer.CzmlLayer查看
geojson_shpShapefile(SHP)文件图层Shp2JsonLayer.js 独立插件JS查看
geojson_kmlKML文件图层Kml2JsonLayer.js 独立插件JS查看
tileset3DTiles三维模型图层mars3d.layer.TilesetLayer查看
i3sI3S三维模型图层mars3d.layer.I3SLayer查看

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

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

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

const 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
   }
 ]
})
// 可以通过下面方法获取到配置的图层
const tiles3dLayer = map.getLayer(1987,'id')

2.2 代码中创建图层

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

// 用工厂方法，指定type来创建图层对象
const 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)

// 直接创建具体类型的图层对象
const 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.remove2个方法支持添加或移除图层。

3 常用矢量图层类

3.1 GraphicLayer

矢量数据图层

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

// 加载数据到矢量图层
const 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)

运行效果

新窗口查看

3.2 GeoJsonLayer

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

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

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

const 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相关网站：

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