关于Mars3d的入门

news2024/11/15 11:33:37

关于Mars3d的入门

一. 创建地球，加载瓦片图层
二矢量图层
- 2.1 常用矢量图层
- - 2.1.1 GraphicLayer
  - 2.1.2 GeoJsonLayer
- 2.2 矢量图层的点击事件
三矢量数据
四事件机制

一. 创建地球，加载瓦片图层

      // 1. 创建地球
      let map = new mars3d.Map("mars3dContainer", mapOptions);


	// 2. 加载瓦片
	layers: [
    {
      name: "test",
      type: "image",
      url: "//data.mars3d.cn/test.png",
      rectangle: { xmin: 127.259691, xmax: 137.267778, ymin: 34.834432, ymax: 36.84387 },
      show: true
    }
   ]

加载瓦片的方式有两种：

在这里插入图片描述

二矢量图层

矢量图层与矢量数据的用法

定义矢量数据
把矢量数据放到矢量图层
把矢量图层放到地图上

在这里插入图片描述

2.1 常用矢量图层

2.1.1 GraphicLayer

//创建矢量数据图层
let graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)

//加载数据到矢量图层
let graphic = new mars3d.graphic.LabelEntity({
  position: new mars3d.LngLatPoint(116.1, 31.0, 1000),
  style: {
    text: 'Mars3D三维可视化平台',
    font_size: 25,
    color: '#003da6',
  },
})
graphicLayer.addGraphic(graphic)

2.1.2 GeoJsonLayer

通过json的格式创建图层，高效方便

let geoJsonLayer = new mars3d.layer.GeoJsonLayer({
  name: '省界线',
  url: 'http://data.mars3d.cn/file/geojson/sheng-line.json',
  symbol: {//可以通过配置symbol参数来指定渲染的矢量数据类型和样式。
    type:"polyline",
    styleOptions: {
      color: '#ffffff',
      opacity: 0.8,
      width: 2
    },
  },
})
map.addLayer(geoJsonLayer)

2.2 矢量图层的点击事件

 graphicEllipseLayer.on(mars3d.EventType.click, function (event) {
        console.log("监听layer，单击了矢量对象", event)
      })

      // 绑定layer标绘相关事件监听(可以自行加相关代码实现业务需求，此处主要做示例)
      graphicEllipseLayer.on(mars3d.EventType.drawStart, function (e) {
        console.log("开始绘制", e)
      })
      graphicEllipseLayer.on(mars3d.EventType.drawAddPoint, function (e) {
        console.log("绘制过程中增加了点", e)
      })
      graphicEllipseLayer.on(mars3d.EventType.drawRemovePoint, function (e) {
        console.log("绘制过程中删除了点", e)
      })
      graphicEllipseLayer.on(mars3d.EventType.drawCreated, function (e) {
        console.log("创建完成", e)

        // graphicLayer.stopDraw()
        // graphicLayer.startDraw(mars3d.Util.clone(e.graphic.options)) // 连续标绘时，可以代替isContinued
      })

      graphicEllipseLayer.on(mars3d.EventType.editStart, function (e) {
        console.log("开始编辑", e)
      })
      graphicEllipseLayer.on(mars3d.EventType.editMovePoint,  (e)=> {
        console.log("编辑修改了点", e.graphic.editing._graphic.options.style.radius)
        this.$emit("mixinsRadiusChangeMth",e.graphic.editing._graphic.options.style.radius)
        this.mapScan(e.graphic);
      })
      graphicEllipseLayer.on(mars3d.EventType.editAddPoint, function (e) {
        console.log("编辑新增了点", e)
      })
      graphicEllipseLayer.on(mars3d.EventType.editRemovePoint, function (e) {
        console.log("编辑删除了点", e)
      })
      graphicEllipseLayer.on(mars3d.EventType.editStop, function (e) {
        console.log("停止编辑", e)
      })
      graphicEllipseLayer.on(mars3d.EventType.removeGraphic, function (e) {
        console.log("删除了对象", e)
      })

三矢量数据

在这里插入图片描述

剩余的矢量对象

ParticleSystem粒子对象 —》粒子效果

漫游路线对象 —》展示对象按照一定轨迹移动

视频融合对象 —》投射视频物体表面

四事件机制

在这里插入图片描述

常用的方法

// 获取图层 在清除图层
const layer = map.getLayerById(2021)
 
// 移除图层
map.removeLayer(layer )
 
// 隐藏图层
layer.show = false
 
// 显示图层
layer.show = true


//通过id获取图层
const layer = map.getLayerById(2021) 
const layer = map.getLayer("id",2021) 

//获取所有的图层
const layers =map.getLayers({

basemaps:false // 不包含basemps中配置的所有图层

layers：false // 不包含layers中配置的所有图层

})

//判断图层是否添加过
const isHaveLayer = map.hasLayer(2021) // 返回boolean