地圖內(nèi)是由各種不同的圖層來疊加顯示亲雪,形成整個三維地圖場景的企蹭。 圖層是地圖中很重要的概念婿斥,也是平臺內(nèi)很重要的組成部分茴恰。
#1. 圖層類
平臺的所有圖層類都繼承于BaseLayer類 (opens new window),圖層類均在mars3d.layer.*
命名空間下面何址。里逆,圖層清單請訪問LayerType類(opens new window)
下面我們演示創(chuàng)建一個圖層對象 ,并調(diào)用map.addLayer添加到地圖上用爪。
//用工廠方法原押,指定type來創(chuàng)建圖層對象
var layer = mars3d.LayerUtil.create({
type: 'xyz',
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.jpg',
subdomains: 'abc',
})
map.addLayer(layer)
//直接創(chuàng)建具體類型的圖層對象
var tileLayer = new mars3d.layer.XyzLayer({
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.jpg',
subdomains: 'abc',
})
map.addLayer(tileLayer)
圖層主要分以下幾大類
- 地形圖層 TerrainLayer (opens new window), 三維地圖場景 的 基石和骨骼
- 柵格瓦片圖層 BaseTileLayer (opens new window)偎血,三維地圖場景 的 皮膚
- 矢量數(shù)據(jù)圖層 GraphicLayer(opens new window)
- 三維模型圖層 TilesetLayer (opens new window)诸衔,呈現(xiàn)更細(xì)節(jié)的三維
- 圖層組 GroupLayer (opens new window)盯漂,方便組合管理
- 其他可視化圖層
#1.1. 在config.json構(gòu)造地圖時涉及到的圖層
參數(shù)名 | 類型 | 參數(shù)API | 說明 | 支持的類 |
---|---|---|---|---|
terrain | Object | 參數(shù)(opens new window) | 地形 | TerrainLayer(opens new window) |
basemaps | Array | 參數(shù)(opens new window) | 底圖圖層 | BaseTileLayer(opens new window) |
layers | Array | 參數(shù)(opens new window) | 圖層 | LayerType清單(opens new window) |
#2. 常用圖層介紹
#2.1 地形圖層
見地形圖層章節(jié)介紹。
#2.2 柵格瓦片圖層
見柵格瓦片圖層章節(jié)介紹笨农。
#2.3 矢量數(shù)據(jù)圖層
見矢量數(shù)據(jù)圖層章節(jié)介紹宠能。
#2.4 三維模型圖層
見三維模型圖層章節(jié)介紹。
#2.5 Group圖層組說明
為了方便圖層控制磁餐,平臺提供了type:'group'
的圖層組GroupLayer類 (opens new window)圖層,目前主要在構(gòu)造Map時傳入basemaps
或layers
參數(shù)中使用阿弃,可以用于:
- (1)將多個圖層組合起來方便控制(比如將 衛(wèi)星底圖 和 文字注記層 放在一起控制管理)诊霹;
{
"name": "離線地圖",
"type": "group",
"layers": [ //多個圖層放在一起控制管理
{
"name": "全國基礎(chǔ)數(shù)據(jù)",
"type": "xyz",
"url": "http://data.mars3d.cn/tile/googleImg/{z}/{x}/{y}.jpg",
"minimumLevel": 0,
"maximumLevel": 12
},
{
"name": "具體項目數(shù)據(jù)",
"type": "xyz",
"url": "http://data.mars3d.cn/tile/googleImg/{z}/{x}/{y}.jpg",
"minimumTerrainLevel": 12,
"minimumLevel": 12,
"maximumLevel": 18,
"rectangle": { "xmin": 116.33236, "xmax": 118.183557, "ymin": 31.143784, "ymax": 32.565035 }
}
]
},
- (2)圖層管理 的圖層分組節(jié)點(虛擬節(jié)點)。
var map = new mars3d.Map('mars3dContainer', {
basemaps: [
{ "id": 10, "name": "地圖底圖", "type": "group" }, //圖層管理 的圖層分組節(jié)點(虛擬節(jié)點)
{
"pid": 10,
"name": "天地圖衛(wèi)星",
"icon": "img/basemaps/tdt_img.jpg",
"type": "tdt",
"layer": "img_d",
"key": ["9ae78c51a0a28f06444d541148496e36"],
"show": true
},
{
"pid": 10,
"name": "本地單張圖片",
"icon": "img/basemaps/offline.jpg",
"type": "image",
"url": "img/tietu/world.jpg"
}
],
layers: [
{ "id": 99, "name": "數(shù)據(jù)圖層", "type": "group" }
]
})
#2.2 其他可視化圖層
主要提供一些與echarts渣淳、heatmap脾还、mapv等其他可視化組件結(jié)合通過canvas繪制的一些圖層。