Mars3D基础学习:地图图层 Layer

地图内是由各种不同的图层来叠加显示,形成整个三维地图场景的。 图层是地图中很重要的概念,也是平台内很重要的组成部分。

image

#1. 图层类

平台的所有图层类都继承于BaseLayer类 ,图层类均在mars3d.layer.*命名空间下面。,图层清单请访问LayerType类

image

下面我们演示创建一个图层对象 ,并调用map.addLayer添加到地图上。

//用工厂方法,指定type来创建图层对象
var layer = mars3d.LayerUtil.create({
   type: 'xyz',
   url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.jpg',
   subdomains: 'abc', 
}) 
map.addLayer(layer)

//直接创建具体类型的图层对象
var  tileLayer = new mars3d.layer.XyzLayer({
   url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.jpg',
   subdomains: 'abc', 
})
map.addLayer(tileLayer)

图层主要分以下几大类

  1. 地形图层 TerrainLayer , 三维地图场景 的 基石和骨骼
  2. 栅格瓦片图层 BaseTileLayer ,三维地图场景 的 皮肤
  3. 矢量数据图层 GraphicLayer
  4. 三维模型图层 TilesetLayer ,呈现更细节的三维
  5. 图层组 GroupLayer ,方便组合管理
  6. 其他可视化图层

#1.1. 在config.json构造地图时涉及到的图层

参数名类型参数API说明支持的类
terrainObject参数地形TerrainLayer
basemapsArray参数底图图层BaseTileLayer
layersArray参数图层LayerType清单

#2. 常用图层介绍

#2.1 地形图层

地形图层章节介绍。

#2.2 栅格瓦片图层

栅格瓦片图层章节介绍。

#2.3 矢量数据图层

矢量数据图层章节介绍。

#2.4 三维模型图层

三维模型图层章节介绍。

#2.5 Group图层组说明

为了方便图层控制,平台提供了type:'group'的图层组GroupLayer类 图层,目前主要在构造Map时传入basemapslayers参数中使用,可以用于:

  • (1)将多个图层组合起来方便控制(比如将 卫星底图 和 文字注记层 放在一起控制管理);
{
 "name": "离线地图",
 "type": "group",
 "layers": [ //多个图层放在一起控制管理
   {
     "name": "全国基础数据",
     "type": "xyz",
     "url": "http://data.mars3d.cn/tile/googleImg/{z}/{x}/{y}.jpg",
     "minimumLevel": 0,
     "maximumLevel": 12
   },
   {
     "name": "具体项目数据",
     "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)图层管理 的图层分组节点(虚拟节点)。
var map = new mars3d.Map('mars3dContainer', {
 basemaps: [
     { "id": 10, "name": "地图底图", "type": "group" }, //图层管理 的图层分组节点(虚拟节点)
     {
       "pid": 10,
       "name": "天地图卫星",
       "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": "数据图层", "type": "group" }
 ]
})

#2.2 其他可视化图层

主要提供一些与echarts、heatmap、mapv等其他可视化组件结合通过canvas绘制的一些图层。

#3. 运行效果

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
mars3d是一个用于构建三维地球可视化应用的开源JavaScript库。它包含了一系列的功能和工具,可以用于加载和展示地理数据,其中包括geojson数据。 对于mars3d中的geojson图层,有几种不同的使用方法。首先,你可以使用mars3d.layer.GeoJsonLayer类来创建一个geojson图层对象。你可以传入一个geojson文件的URL作为参数,然后mars3d库将自动加载并解析该文件,并在地球上显示对应的矢量数据。你还可以通过设置symbol属性来定义矢量数据的样式,比如颜色和宽度。此外,你还可以使用popup属性来设置弹出窗口的内容。 如果你希望在加载geojson数据时进行一些自定义处理,例如计算贴地线坐标或者修改矢量数据的样式,你可以使用onCreateGraphic字段来自定义处理逻辑。在这个回调函数中,你可以访问到每个要素的坐标和属性信息,并进行相应的处理。例如,你可以使用mars3d.PolyUtil.computeSurfaceLine方法来计算贴地线坐标,并创建一个mars3d.graphic.WallPrimitive对象来表示墙体。然后,你可以将这个对象添加到geojson图层中,以在地球上显示出来。 另外,对于更复杂的地理数据处理需求,你还可以使用leaflet-stream库与mars3d结合使用。这个库可以将geojson数据流式传输到地图上,同时可以进行一些属性转换和处理操作。你可以通过引入leaflet-stream库并使用其API来实现这些功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [记录mars3d的使用 - geojson图层](https://blog.csdn.net/Juzimhh/article/details/123545683)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [leaflet-stream:管道 geojson 到地图](https://download.csdn.net/download/weixin_42097208/19778560)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木遥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值