地图场景

约 1745 字大约 6 分钟

2025-02-13

我们使用 DIV 渲染后看到的二维地图对象，我们统称为地图场景，在 mirage2d 中对应是[mirage2d.Map 类]，这是一切的开始，所有相关控制的起点。掌握学习好了 mirage2d.Map 类基本也就掌握好了 mirage2d。

1. 地图场景初始化

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

var map = new mirage2d.Map("mirage2dContainer");

当你需要对地图进行配置的时候，mirage2d 提供了详细的参数配置方案（如下），你可以暂时不需要完全理解各个参数的意义，在接下来的后续教程中我们会详细解释相关参数。

// 创建二维地图场景
var map = new mirage2d.Map("mirage2dContainer", {
  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. mirage2d.Map 类参数说明

参数名	类型	参数解释
id	String 或 HTMLElement	地图 div 容器的 id 或 dom
mapOptions	Object	mapconfig.json 配置文件

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

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

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

let mapOptions = mirage2d.Resource.getJSON(
  "http://www.miragemap.cn/mirage/map2d/demo/mapconfig.json"
);

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

function initMap(mapOptions) {
  //创建二维地图场景
  var map = new mirage2d.Map("mirage2dContainer", mapOptions);
}

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

2.2 运行效果

新窗口查看

3. 默认视角参数

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

var map = new mirage2d.Map("mirage2dContainer", {
  zoom: 13,
  center: { lng: 117.240601, lat: 31.827107 },
});

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

4.控件

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

var map = new mirage2d.Map("mirage2dContainer", {
  control: {
    scale: true,
    zoom: { position: "bottomright" },
    layers: { position: "topleft" },

    //以下是mirage2d.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" },
  },
});

5. 栅格瓦片底图

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

 const map = new mirage2d.Map("mirage2dContainer", {
    map: {
      zoom: 11,
      center: {
        lng: 108.93253243451126,
        lat: 34.28048775305431
      },
      minZoom: 2,
      maxZoom: 26,
      basemap: "天地图卫星",
      centerAutoLevel: 15,
      controls: {
        scale: true,
        locationBar: {
          crs: "CGCS2000_GK_Zone_3",
          template:
            "<div style='float: left;margin-right: 15px'>经度:{lng}</div> <div style='float: left;margin-right: 15px'>纬度:{lat}</div> <div style='float: left;margin-right: 15px'>横{crsx}  纵{crsy}</div> <div style='float: left;margin-right: 15px'>层级:{level}</div>"
        },
        layers: {
          position: "topleft"
        },
        zoom: {
          position: "bottomright"
        },
        toolBar: {
          position: "bottomright"
        }
      },
      basemaps: [
        {
          pid: 10,
          name: "天地图卫星",
          type: "TileGroupLayer",
          icon: "lib/mirage/map2d/image/basemaps/02/天地图卫星.png",
          radio: true,
          layers: [
            {
              name: "底图",
              type: "xyz",
              layertype: "img_d",
              key: ["ad5bee3fe473a639887fa9d57a670c6e"],
              url: "//t{0-7}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=您的key"
            },
            {
              name: "注记",
              type: "xyz",
              layertype: "img_z",
              key: ["ad5bee3fe473a639887fa9d57a670c6e"],
              url: "//t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=您的key"
            }
          ]
        }
      ]
    },
    appkey:""//授权码信息，如果没有可以保持空
  })

7.1 底图的图层参数

栅格底图所支持的图层类型，只能是瓦片图层，均是继承自[ BaseTileLayer 类] 的图层类型。basemaps 参数为一个数组，其中各图层的参数支持：
basemaps 参数说明

参数名	类型	参数解释
type	String	图层类型
name	String	用于图层控件展示的名称
其他参数		每个 type 都有一些个性化的不同参数，参考各 type 对应的图层类构造参数

7.2 底图的 type 图层类型

basemaps 所支持的 type 目前包括：

类型名	说明	对应的图层类	备注
imageLayer	单张图片	[mirage2d.Layer.imageLayer]
TileXyzLayer	标准金字塔地图	[mirage2d.Layer.TileXyzLayer]
WmsLayer	OGC WMS 标准服务	[mirage2d.Layer.WmsLayer]
WmtsLayer	OGC WMTS 标准服务	[mirage2d.Layer.WmtsLayer]
ArcGisMapServerLayer	ArcGIS 标准服务	[mirage2d.Layer.ArcGisMapServerLayer]
ArcGisTileXyzLayer	ArcGIS 切片	[mirage2d.Layer.ArcGisTileXyzLayer ]
TileGroupLayer	天地图	[mirage2d.Layer.TileGroupLayer]	在线地图
TileGroupLayer	高德	[mirage2d.Layer.GaodeLayer]	在线地图
TileGroupLayer	星图	[mirage2d.Layer.TileGroupLayer]	在线地图
TileBaiDuLayer	百度	[mirage2d.layer.BaiduLayer]	在线地图
TileTencentLayer	腾讯	[mirage2d.Layer.TencentLayer ]	在线地图

7.3 更新底图

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

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

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

8. 可以叠加的图层

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

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

8.1 可以叠加的图层

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

8.2 对图层的控制

可以通过[ let layer = map.getLayer('image1981')] 来获取 map 中配置的对应 layerid 为 image1981 的图层对象。

添加时的方法如下：

//用工厂方法创建图层
let layer = new mirage2d.Layer.TileXyzLayer("image1981", {
  url: "http://192.168.28.201:9888/{z}/{x}/{y}.png",
  zIndex: 15
})

map.addLayer(layer)

map.removeLayer("image1981")

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

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