关于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