Mars2D开发教程

矢量图层

12/8/2021

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

image

# 1. 图层类型清单

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

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

type类型名 图层说明 对应的图层类 备注
graphic 矢量数据图层 mars2d.layer.GraphicLayer
geojson GeoJSON图层 mars2d.layer.GeoJsonLayer
wfs OGC WFS图层 mars2d.layer.WfsLayer
arcgis_feature ArcGIS WFS图层 mars2d.layer.ArcGisFeatureLayer

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

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

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

var map = new mars2d.Map('mars2dContainer', {
 layers: [
   {
     "id":1987,
     "type": "geojson",
     "name": "示例数据",
     "url": "//data.mars2d.cn/file/geojson/mars2d-draw.json",
     "popup": "{name}",
     "show": true
   }
 ]
})
//可以通过下面方法获取到配置的图层
let geojsonLayer = map.getLayer(1987,'id')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2.2 代码中创建图层

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

//用工厂方法，指定type来创建图层对象
var wfsLayer = mars2d.LayerUtil.create({
 type: "geojson",
 url: "http://data.mars2d.cn/file/geojson/areas/100000_full.json",
 symbol: {
   type: "polyline",
   styleOptions: {
     color: "#ff0000",
     width: 3,
   },
 },
})
map.addLayer(wfsLayer)

//直接创建具体类型的图层对象
var geoJsonLayer = new mars2d.layer.GeoJsonLayer({
 url: "http://data.mars2d.cn/file/geojson/areas/100000_full.json",
 symbol: {
   type: "polyline",
   styleOptions: {
     color: "#ff0000",
     width: 3,
   },
 },
})
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

在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 mars2d.layer.GraphicLayer()
map.addLayer(graphicLayer)

//加载数据到矢量图层
var graphic = new mars2d.graphic.Marker({
  latlng: [31.854628, 117.245425],
  style: {
    image: "img/marker/mark1.jpg",
    width: 32,
    height: 44, 
  },
});
graphicLayer.addGraphic(graphic);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行效果

新窗口查看

# 3.2 GeoJsonLayer

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

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

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

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

常用geojson相关网站：

# 3.1 WFS 图层

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

//OGC WFS
var wfsLayer = new mars2d.layer.WfsLayer({
  name: "规划面",
  url: "http://server.mars2d.cn/geoserver/mars/ows",
  typeNS: "mars",
  typeName: "hfgh",
  minZoom: 16,
  geometryField: "the_geom",
  symbol: {
    type: "polygon",
    styleOptions: {
      fillOpacity: 0.6,
      fillColor: "#0000FF",
      outline: false,
    },
    styleField: "用地编号",
    styleFieldOptions: styleForType,
  },
  popup: "all",
})
map.addLayer(wfsLayer)


//ArcGIS WFS
var wfsLayer = new mars2d.layer.ArcGisWfsLayer({
  name: "合肥市",
  url: "http://server.mars2d.cn/arcgis/rest/services/mars/hefei/MapServer/20",
  popup: "all",
  symbol: {
    styleOptions: {
      iconUrl: "img/marker/fx1.jpg",
      iconSize: [30, 30],
      iconAnchor: [15, 15],
      popupAnchor: [0, -15],
    },
  },
  popup: "all",
})
map.addLayer(wfsLayer)
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
32
33
34
35
36
37
38
39

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

最后更新: 4/27/2022, 9:19:39 PM

矢量数据Graphic