Mars2D开发者中心

外观

二维场景

2147字约7分钟

2025-3-25

本页目标

学会用 new mars2d.Map 创建二维场景，理解构造参数（底图、图层、控件、视角）以及 Map 的常用方法。

我们使用DIV渲染后看到的二维地图对象，我们统称为二维场景。mars2d.Map类是构建Mars2D应用程序的入口，我们称其为视图容器，它承载了Mars2D应用的所有内容。

mars2d.Map这是一切的开始，所有相关控制的起点，掌握好了mars2d.Map类 基本也就掌握好了Mars2D。 本文将详细介绍如何使用该类创建和管理二维地图场景。

1. 二维场景初始化

在使用mars2d时你可以根据需要对默认参数进行配置，如果你只是想得到默认的效果，你仅需要写下面一行代码即可：

const map = new mars2d.Map("mars2dContainer")

正常我们需要在初始化时，显示对应的影像地图，加载一些业务数据等，所以我们需要对其进行一些配置，mars2d提供了详细的参数配置方案（如下），你可以暂时不需要完全理解各个参数的意义，在接下来的后续教程中我们会详细解释相关参数。

// 创建二维地图场景
const map = new mars2d.Map("mars2dContainer", {
  zoom: 13,
  center: { lng: 117.240601, lat: 31.827107 },
  minZoom: 3,
  maxZoom: 18,
  control: {
    scale: true,
    locationBar: {
      crs: "CGCS2000_GK_Zone_3",
      template: "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>横{crsx}  纵{crsy}</div> <div>层级:{level}</div>"
    },
    zoom: { position: "bottomright" },
    toolBar: { position: "bottomright" },
    layers: { position: "topleft" }
  },
  basemaps: [
    { name: "高德地图", type: "gaode", layer: "vec", show: true },
    { name: "高德地图", type: "gaode", layer: "img" }
  ],
  operationallayers: [{ name: "经纬网", type: "graticule" }]
})

运行效果

新窗口查看

2. 构造参数说明

Map类的构造参数比较多，我们已经分类放在方法的第2个参数mapOptions参数中

参数名类型参数解释
idString 或 HTMLElement地图div容器的id或dom
mapOptionsObject创建地球的参数

image

2.1 使用json配置文件记录参数快速创建二维场景

我们在不同项目应用时，可能是同一套代码，仅仅只是地图的配置参数不一样， 那么我们可以把地图的参数保存在后端服务动态生成或存储在json文件，将二维场景参数化。 我们可以直接加载使用不同json数据来快速创建各种二维场景。

(1)通过任意方式去读取json文件，下面只是一种演示的方式

const configUrl = "http://mars2d.cn/config/config.json"
mars2d.Util.fetchJson({ url: configUrl }).then((json) => {
  initMap(json) // 构建地图
})

(2)读取到的json对象传入new mars2d.Map方法创建地图

function initMap(mapOptions) {
  // 创建二维地图场景
  const map = new mars2d.Map("mars2dContainer", mapOptions)
}

config.json中的属性参数是与mapOptions参数相同。

(3)地球创建好之后可以通过map.setOptions方法更新所有参数

// 更新地球参数
map.setOptions({
  center:{ lng: 117.240601, lat: 31.827107 }
})

你如果想设置进入地图页面时，自定义默认视角中心点和地图层级的话，你可以在创建地图时设置zoom和center参数 值：

const map = new mars2d.Map("mars2dContainer", {
  zoom: 13,
  center: { lng: 117.240601, lat: 31.827107 }
})

也可以通过map.getView 方法获取当前的地图视角后拷贝设置到config.json中。或者在地图空白区域右键菜单中【查看当前视角】来快捷获取下参数值。

3. 栅格瓦片底图

栅格底图就是我们浏览地图最重要的底层参照物，在创建地图的时候，你可以通过basemapse 添加栅格瓦片底图（允许添加多个，添加多个图层后可在底图控制器中切换），一般我们可以设置basemaps数组中默认显示的底图的show参数为true。

const map = new mars2d.Map("mars2dContainer", {
  basemaps: [
    {
      name: "天地图电子",
      type: "group",
      layers: [
        { name: "底图", type: "tdt", layer: "vec_d" },
        { name: "注记", type: "tdt", layer: "vec_z" }
      ],
      show: true
    },
    { name: "天地图卫星", type: "tdt", layer: "img" },
    { name: "OSM地图", type: "xyz", url: "http://a.tile.openstreetmap.org/{z}/{x}/{y}.png" },
    { name: "高德地图", type: "gaode", layer: "vec" }
  ]
})

3.1 底图的图层参数

栅格底图所支持的图层类型，只能是瓦片图层，basemaps参数为一个数组，其中各图层的参数支持：

basemaps参数说明

参数名类型参数解释
typestring图层类型
iconstring图层缩略图，用于图层切换控件的显示
通用参数TileLayer类构造参数
其他参数每个type都有一些个性化的不同参数，参考各type对应的图层类构造参数

3.2 底图的type图层类型

basemaps所支持的type目前包括：

类型名说明对应的图层类备注
image单张图片mars2d.layer.ImageLayer
tile标准金字塔地图mars2d.layer.TileLayer
wmsOGC WMS标准服务mars2d.layer.WmsLayer
wmtsOGC WMTS标准服务mars2d.layer.WmtsLayer
arcgisArcGIS标准服务mars2d.layer.ArcGisLayer
arcgis_cacheArcGIS切片mars2d.layer.ArcGisCacheLayer
tdt天地图mars2d.layer.TdtLayer在线地图
gaode高德mars2d.layer.GaodeLayer在线地图
baidu百度mars2d.layer.BaiduLayer在线地图
tencent腾讯mars2d.layer.TencentLayer在线地图
osmOpenStreetMap（OSM）mars2d.layer.OsmLayer国外在线地图
mapboxMapbox地图mars2d.layer.MapboxLayer 国外在线地图
google谷歌地图mars2d.layer.GoogleLayer目前已被封

3.3 更新底图

创建完成底图后，需要切换底图或获取当前的底图，可以根据config配置的id或name属性，显示指定的底图，如：

// 获取或设置当前显示的底图，设置时可以传入图层id或name
map.basemap = "离线地图"

// 获取配置的底图数组
const arr = map.getBasemaps()

4. operationallayers叠加图层参数

在二维地图中，你可以在地图上添加多个图层来叠加显示。 在创建地图时，可以传operationallayers参数 来将当前项目内常用的图层一次性配置好，代码中去按需使用。

const map = new mars2d.Map("mars2dContainer", {
  operationallayers: [
    { name: "实时路况", type: "gaode", layer: "time" },
    { name: "经纬网", type: "graticule", show: true }
  ]
})

4.1 可以叠加的类型

operationallayers 配置支持的 basemaps所有支持的瓦片图层，还支持所有矢量覆盖物数据的加载，支持的type类型，请参考 图层类型 ，每个type都有一些个性化的不同参数，参考各type对应的图层类构造参数。

4.2 对图层的控制

可以通过 let layer = map.getLayer(1987,'id')来获取config.json中配置的对应id为1987的图层对象。

为了方便理解getLayer获取到的对象，layers配置的图层与下面的创建方式是等价的，

// 用工厂方法创建图层
const layerImg = mars2d.LayerUtil.create({
  type: "image",
  url: "//data.mars2d.cn/file/img/radar/201906211112.PNG",
  rectangle: { xmin: 73.16895, xmax: 134.86816, ymin: 12.2023, ymax: 54.11485 },
  alpha: 0.7
})
map.addLayer(layerImg)

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

更多方法可以在图层类型 找到对应的 图层类 后，查阅对应类的属性或方法进行进一步控制及管理图层。

5. control 控件参数

在创建地图的时候，你可以在配置项中通过control对控件中的功能组件进行相应的配置，支持的参数，参考 control参数说明

const map = new mars2d.Map("mars2dContainer", {
  control: {
    // 以下是Leaflet所支持的控件相关的options
    scale: true,
    zoom: { position: "bottomright" },
    layers: { position: "topleft" },

    // 以下是mars2d.control定义的控件
    defaultContextMenu: true, // 右键菜单
    locationBar: {
      crs: "CGCS2000_GK_Zone_3",
      template: "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>横{crsx}  纵{crsy}</div> <div>层级:{level}</div>"
    },
    toolBar: { position: "bottomright" }
  }
})

6. Map的方法

map实例化后的对象提供了很多方法用于对地图进行操作。

6.1 主要方法

  • map.addLayer、map.removeLayer：控制图层的加载和删除

  • map.addControl、map.removeControl：控制控件的加载和删除

  • map.addThing、map.removeThing：来控制Thing管理分析等其他类的加载和删除

  • map.bindContextMenu、map.unbindContextMenu、map.openContextMenu、map.closeContextMenu、map.getContextMenu：来控制右键菜单

  • map.flyToBounds、map.flyToPoint、map.flyToGraphic等flyTo开头的方法：来进行视角定位

还有更多方法，再此就不一一列举了，具体参考API文档及后续的教程中进行详细说明。

相关