外观
二维场景
2075字约7分钟
2025-3-25
我们使用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参数中
参数名 | 类型 | 参数解释 |
---|---|---|
id | String 或 HTMLElement | 地图div容器的id或dom |
mapOptions | Object | 创建地球的参数 |
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参数说明
参数名 | 类型 | 参数解释 |
---|---|---|
type | string | 图层类型 |
icon | string | 图层缩略图,用于图层切换控件的显示 |
通用参数 | TileLayer类构造参数 | |
其他参数 | 每个type都有一些个性化的不同参数,参考各type对应的图层类构造参数 |
3.2 底图的type图层类型
basemaps所支持的type目前包括:
类型名 | 说明 | 对应的图层类 | 备注 |
---|---|---|---|
image | 单张图片 | mars2d.layer.ImageLayer | |
tile | 标准金字塔地图 | mars2d.layer.TileLayer | |
wms | OGC WMS标准服务 | mars2d.layer.WmsLayer | |
wmts | OGC WMTS标准服务 | mars2d.layer.WmtsLayer | |
arcgis | ArcGIS标准服务 | mars2d.layer.ArcGisLayer | |
arcgis_cache | ArcGIS切片 | mars2d.layer.ArcGisCacheLayer | |
tdt | 天地图 | mars2d.layer.TdtLayer | 在线地图 |
gaode | 高德 | mars2d.layer.GaodeLayer | 在线地图 |
baidu | 百度 | mars2d.layer.BaiduLayer | 在线地图 |
tencent | 腾讯 | mars2d.layer.TencentLayer | 在线地图 |
osm | OpenStreetMap(OSM) | mars2d.layer.OsmLayer | 国外在线地图 |
mapbox | Mapbox地图 | mars2d.layer.MapboxLayer | 国外在线地图 |
谷歌地图 | 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文档及后续的教程中进行详细说明。