Mars2D开发者中心

外观

矢量图层

989字约3分钟

2025-3-25

本页目标

掌握矢量图层的类型与创建方式（GraphicLayer / GeoJsonLayer / WFS）。

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

image

1. 图层类型清单

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

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

type类型名图层说明对应的图层类备注
graphic矢量数据图层mars2d.layer.GraphicLayer
geojsonGeoJSON图层mars2d.layer.GeoJsonLayer
wfsOGC WFS图层mars2d.layer.WfsLayer
arcgis_featureArcGIS WFS图层mars2d.layer.ArcGisFeatureLayer

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

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

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

const map = new mars2d.Map("mars2dContainer", {
  layers: [
    {
      id: 1987,
      type: "geojson",
      name: "示例数据",
      url: "//data.mars2d.cn/file/geojson/mars2d-draw.json",
      popup: "{name}",
      show: true
    }
  ]
})
// 可以通过下面方法获取到配置的图层
const geojsonLayer = map.getLayer(1987, "id")

2.2 代码中创建图层

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

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

// 直接创建具体类型的图层对象
const geoJsonLayer = new mars2d.layer.GeoJsonLayer({
  url: "https://data.mars2d.cn/file/geojson/areas/100000_full.json",
  symbol: {
    type: "polyline",
    styleOptions: {
      color: "#ff0000",
      width: 3
    }
  }
})
map.addLayer(geoJsonLayer)

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

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

3 常用矢量图层类

3.1 GraphicLayer

矢量数据图层

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

// 加载数据到矢量图层
const graphic = new mars2d.graphic.Marker({
  latlng: [31.854628, 117.245425],
  style: {
    image: "img/marker/mark1.jpg",
    width: 32,
    height: 44
  }
})
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 mars2d.layer.GeoJsonLayer({
  name: "省界线",
  url: "https://data.mars2d.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)服务 、通过ArcGisFeatureLayer类 来加载ArcGIS Server 服务发布的矢量数据的加载。

// OGC WFS
const wfsLayer = new mars2d.layer.WfsLayer({
  name: "规划面",
  url: "https://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
const wfsLayer = new mars2d.layer.ArcGisWfsLayer({
  name: "合肥市",
  url: "https://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)

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

相关