Mars3d最简项目模板学习（一）

最新推荐文章于 2024-06-14 11:05:54 发布

weixin_44689966

最新推荐文章于 2024-06-14 11:05:54 发布

阅读量380

点赞数

分类专栏： Mars3D 文章标签：学习

本文链接：https://blog.csdn.net/weixin_44689966/article/details/126801138

版权

Mars3D 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、加载资源

"use script"

if (!mars3d.Util.webglreport) {
  mars3d.Util.webglerror()
}

let configUrl = 'config/config.json'
mars3d.Util.fetchJson({ url: configUrl })
  .then((data) => {
    initMap(data.map3d)
  }).catch(function (error) {
    haoutil.alert(error?.message, '出错了')
  })

var map;

function initMap (mapOptions) {

  // 到目前为止会加载出一张地图，而不是一个地球，因为mapOptions中配置了加载【lat:纬度值,lng:经度值】
  // map = new mars3d.Map('mars3dContainer', mapOptions)

  // 这个配置会加载出一个地球， 之所以没有出现左下角控制按钮，应为没有在配置中配置control控件
  map = new mars3d.Map('mars3dContainer', { basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }], })
}

配置参数

mapOption的配置参数：http://mars3d.cn/apidoc.html#Map
在线体验： http://mars3d.cn/editor-vue.html?id=map/create/options&code=1
教程： http://mars3d.cn/dev/guide/map/map.html#_1-%E4%B8%89%E7%BB%B4%E5%9C%BA%E6%99%AF%E5%88%9D%E5%A7%8B%E5%8C%96

二、图层

在这里插入图片描述

2.1 栅格瓦片底图

在这里插入图片描述

使用（可以配置使用，也可以代码添加）

配置使用： http://mars3d.cn/dev/guide/map/map.html#_7-%E6%A0%85%E6%A0%BC%E7%93%A6%E7%89%87%E5%BA%95%E5%9B%BE
详细介绍： http://mars3d.cn/dev/guide/map/tileLayer.html

*basemap中一个对象就是一个底图，一个底图中可以配置多个图层*

使用(底图配置的图层)

在这里插入图片描述

使用(代码添加)

在这里插入图片描述

2.2 矢量数据图层

在这里插入图片描述

使用：与上面相同

详细介绍：http://mars3d.cn/dev/guide/map/graphic.html#_1-%E7%9F%A2%E9%87%8F%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1

在这里插入图片描述

"use script"

if (!mars3d.Util.webglreport) {
  mars3d.Util.webglerror()
}

let configUrl = 'config/config.json'
mars3d.Util.fetchJson({ url: configUrl })
  .then((data) => {
    initMap(data.map3d)
  }).catch(function (error) {
    haoutil.alert(error?.message, '出错了')
  })

var map;

function initMap (mapOptions) {

  // 到目前为止会加载出一张地图，而不是一个地球，因为mapOptions中配置了加载【lat:纬度值,lng:经度值】
  map = new mars3d.Map('mars3dContainer', mapOptions)

  // 给地图添加了矢量数据图层
  let graphicLayer = new mars3d.layer.GraphicLayer();
  map.addLayer(graphicLayer);

  // 监听矢量数据的点击事件(光有监听不行，还得有矢量对象)
  graphicLayer.on(mars3d.EventType.click, function (event) {
    console.log("监听layer，单击了矢量对象", event);
  });

  // 添加矢量对象
  addDemoGraphic1(graphicLayer)
  function addDemoGraphic1 (graphicLayer) {
    const graphic = new mars3d.graphic.LabelEntity({
      position: new mars3d.LngLatPoint(116.1, 31.0, 1000),
      style: {
        text: "火星科技Mars3D平台",
        font_size: 25,
        font_family: "楷体",
        color: "#003da6",
        outline: true,
        outlineColor: "#bfbfbf",
        outlineWidth: 2,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        visibleDepth: false
      },
      attr: { remark: "示例1" }
    })
    graphicLayer.addGraphic(graphic)
  }
}