Mars3d采用ellipsoid球实现模拟地球旋转效果

1.Mars3d采用ellipsoid球实现模拟地球旋转效果

2.开始自选装之后,模型一直闪烁

http://mars3d.cn/editor-vue.html?id=graphic/entity/ellipsoid

3.相关代码:

import * as mars3d from "mars3d"export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象
export const eventTarget = new mars3d.BaseClass()export const mapOptions = {scene: {center: { lat: 30.606438, lng: 116.329605, alt: 53280, heading: 0, pitch: -60 }}
}
/*** 初始化地图业务,生命周期钩子函数(必须)* 框架在地图初始化完成后自动调用该函数* @param {mars3d.Map} mapInstance 地图对象* @returns {void} 无*/
export function onMounted(mapInstance) {map = mapInstance // 记录map// 创建矢量数据图层graphicLayer = new mars3d.layer.GraphicLayer()map.addLayer(graphicLayer)// 在layer上绑定监听事件graphicLayer.on(mars3d.EventType.click, function (event) {console.log("监听layer,单击了矢量对象", event)})bindLayerPopup() // 在图层上绑定popup,对所有加到这个图层的矢量数据都生效bindLayerContextMenu() // 在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效// 加一些演示数据
//   addDemoGraphic1(graphicLayer)addDemoGraphic2(graphicLayer)
//   addDemoGraphic3(graphicLayer)
//   addDemoGraphic3b(graphicLayer)
//   addDemoGraphic4(graphicLayer)
//   addDemoGraphic5(graphicLayer)
//   addDemoGraphic6(graphicLayer)
//   addDemoGraphic7(graphicLayer)
//   addDemoGraphic8(graphicLayer)
//   addDemoGraphic9(graphicLayer)
//   addDemoGraphic10(graphicLayer)
//   addDemoGraphic11(graphicLayer)
//   addDemoGraphic12(graphicLayer)
//   addDemoGraphic13(graphicLayer)
//   addDemoGraphic14(graphicLayer)
}/*** 释放当前地图业务的生命周期函数* @returns {void} 无*/
export function onUnmounted() {map = nullgraphicLayer.remove()graphicLayer = null
}//
function addDemoGraphic1(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: [116.1, 31.0, 1000],style: {radii: new Cesium.Cartesian3(1000.0, 1000.0, 1500.0),color: "#00ff00",opacity: 0.5,label: { text: "鼠标移入会高亮", pixelOffsetY: -30 },// 高亮时的样式(默认为鼠标移入,也可以指定type:'click'单击高亮),构造后也可以openHighlight、closeHighlight方法来手动调用highlight: {opacity: 0.9}},attr: { remark: "示例1" }})graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)// 演示个性化处理graphicinitGraphicManager(graphic)
}
// 也可以在单个Graphic上做个性化管理及绑定操作
function initGraphicManager(graphic) {// 3.在graphic上绑定监听事件// graphic.on(mars3d.EventType.click, function (event) {//   console.log("监听graphic,单击了矢量对象", event)// })// 绑定Tooltip// graphic.bindTooltip('我是graphic上绑定的Tooltip') //.openTooltip()// 绑定Popupconst inthtml = `<table style="width: auto;"><tr><th scope="col" colspan="2" style="text-align:center;font-size:15px;">我是graphic上绑定的Popup </th></tr><tr><td>提示:</td><td>这只是测试信息,可以任意html</td></tr></table>`graphic.bindPopup(inthtml).openPopup()// 绑定右键菜单graphic.bindContextMenu([{text: "删除对象[graphic绑定的]",icon: "fa fa-trash-o",callback: (e) => {const graphic = e.graphicif (graphic) {graphic.remove()}}}])// 测试 颜色闪烁if (graphic.startFlicker) {graphic.startFlicker({time: 20, // 闪烁时长(秒)maxAlpha: 0.5,color: Cesium.Color.YELLOW,onEnd: function () {// 结束后回调}})}
}//
function addDemoGraphic2(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.2, 31.0, 1000),style: {radii: new Cesium.Cartesian3(1000.0, 1000.0, 1000.0),color: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例2" }})graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)// 设置自转动画map.viewer.clock.onTick.addEventListener(function(clock) {var time = clock.currentTime;var multiplier = 1; // 时间流速倍数,可以根据需要调整// 计算地球的旋转角度var angle = window.Cesium.Math.TWO_PI * multiplier * time.secondsOfDay / 86400;// 设置EllipsoidEntity的旋转角度// const a = window.Cesium.Quaternion.fromAxisAngle(window.Cesium.Cartesian3.UNIT_Z, angle);graphic.entity.orientation.setValue(window.Cesium.Quaternion.fromAxisAngle(window.Cesium.Cartesian3.UNIT_Z, angle));// graphic.orientation = window.Cesium.Quaternion.fromAxisAngle(window.Cesium.Cartesian3.UNIT_Z, angle);});
}function addDemoGraphic3(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.307258, 30.999546, 1239.2),style: {radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),maximumConeDegree: 90,materialType: mars3d.MaterialType.EllipsoidElectric,materialOptions: {color: Cesium.Color.GREEN,speed: 5.0}},attr: { remark: "示例3" }})graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
}function addDemoGraphic3b(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.303345, 31.087028, 452.2),style: {radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),maximumConeDegree: 90,materialType: mars3d.MaterialType.EllipsoidWave,materialOptions: {color: "#00ffff",speed: 5.0}}})graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
}//
function addDemoGraphic4(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: [116.4, 31.0, 1000],style: {radii: new Cesium.Cartesian3(2500.0, 2500.0, 2500.0),innerRadii: new Cesium.Cartesian3(10.0, 10.0, 10.0),minimumClockDegree: -15.0,maximumClockDegree: 15.0,minimumConeDegree: 75.0,maximumConeDegree: 105.0,pitch: 30,color: "#f33349",opacity: 0.9,outline: true,outlineColor: "rgba(255,255,255,0.5)",label: {text: "我是原始的",font_size: 18,color: "#ffffff",pixelOffsetY: -10,distanceDisplayCondition: true,distanceDisplayCondition_far: 500000,distanceDisplayCondition_near: 0}},attr: { remark: "示例4" }})graphicLayer.addGraphic(graphic)// graphic转geojsonconst geojson = graphic.toGeoJSON()console.log("转换后的geojson", geojson)addGeoJson(geojson, graphicLayer)
}// 添加单个geojson为graphic,多个直接用graphicLayer.loadGeoJSON
function addGeoJson(geojson, graphicLayer) {const graphicCopy = mars3d.Util.geoJsonToGraphics(geojson)[0]delete graphicCopy.attr// 新的坐标graphicCopy.position = [116.5, 31.0, 1000]graphicCopy.style.label = graphicCopy.style.label || {}graphicCopy.style.label.text = "我是转换后生成的"graphicLayer.addGraphic(graphicCopy)
}// 2圈平面扇形
function addDemoGraphic5(graphicLayer) {const outerRadius = 5000.0const innerRadius = 1000const graphic = new mars3d.graphic.EllipsoidEntity({position: [116.1, 30.9, 1000],style: {radii: new Cesium.Cartesian3(outerRadius, outerRadius, outerRadius),innerRadii: new Cesium.Cartesian3(innerRadius, innerRadius, innerRadius),minimumClockDegree: -20.0,maximumClockDegree: 20.0,minimumConeDegree: 90,maximumConeDegree: 90,color: "rgba(255,255,0,0.2)",outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例5" }})graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
}// 半圆顶球体
function addDemoGraphic6(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.2, 30.9, 1000),style: {radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),maximumConeDegree: 90,color: Cesium.Color.BLUE.withAlpha(0.3),outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例6" }})graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
}// 含内半径 半圆顶球体
function addDemoGraphic7(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.3, 30.9, 1000),style: {radii: new Cesium.Cartesian3(2500.0, 2000.0, 1500.0),innerRadii: new Cesium.Cartesian3(1000.0, 800.0, 600.0),maximumConeDegree: 90,color: Cesium.Color.RED.withAlpha(0.3),outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例7" }})graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
}// 被切开的含内半径 半圆顶球体
function addDemoGraphic8(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.4, 30.9, 1000),style: {radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),innerRadii: new Cesium.Cartesian3(1000.0, 1000.0, 1000.0),minimumConeDegree: 20.0,maximumConeDegree: 90,color: Cesium.Color.YELLOW.withAlpha(0.3),outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例8" }})graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
}// 顶部和底部切出的桶形体
function addDemoGraphic9(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.5, 30.9, 1000),style: {radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),innerRadii: new Cesium.Cartesian3(1000.0, 1000.0, 1000.0),minimumConeDegree: 60.0,maximumConeDegree: 140.0,color: "rgba(31,254,230,0.3)",outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例9" }})graphicLayer.addGraphic(graphic)
}// 碗行体
function addDemoGraphic10(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.1, 30.8, 1000),style: {radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),innerRadii: new Cesium.Cartesian3(1800.0, 1800.0, 1800.0),minimumConeDegree: 110.0,color: "rgba(149,228,12,0.3)",outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例10" }})graphicLayer.addGraphic(graphic)
}// 时钟开孔
function addDemoGraphic11(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.2, 30.8, 1000),style: {radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),innerRadii: new Cesium.Cartesian3(1500.0, 1500.0, 1500.0),minimumClockDegree: -90.0,maximumClockDegree: 180.0,minimumConeDegree: 20.0,maximumConeDegree: 70.0,color: "rgba(149,228,12,0.3)",outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例11" }})graphicLayer.addGraphic(graphic)
}// 局部圆顶
function addDemoGraphic12(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.3, 30.8, 1000),style: {radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),minimumClockDegree: -90.0,maximumClockDegree: 180.0,maximumConeDegree: 90.0,color: "rgba(242,250,25,0.3)",outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例12" }})graphicLayer.addGraphic(graphic)
}// 部分椭圆体
function addDemoGraphic13(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.4, 30.8, 1000),style: {radii: new Cesium.Cartesian3(3000.0, 3000.0, 3000.0),innerRadii: new Cesium.Cartesian3(700.0, 700.0, 700.0),minimumClockDegree: 180.0,maximumClockDegree: 400.0,maximumConeDegree: 90.0,color: "rgba(247,154,44,0.3)",outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例13" }})graphicLayer.addGraphic(graphic)
}// 土星综合对象
function addDemoGraphic14(graphicLayer) {const position = new mars3d.LngLatPoint(116.5, 30.8, 1000)const graphic = new mars3d.graphic.EllipsoidEntity({name: "土星",position: position,style: {radii: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),color: new Cesium.Color(0.95, 0.82, 0.49)},attr: { remark: "示例14" }})graphicLayer.addGraphic(graphic)const graphicNei = new mars3d.graphic.EllipsoidEntity({name: "土星的内圈",position: position,style: {radii: new Cesium.Cartesian3(4000.0, 4000.0, 4000.0),innerRadii: new Cesium.Cartesian3(3000.0, 3000.0, 3000.0),minimumConeDegree: 89.8,maximumConeDegree: 90.2,color: new Cesium.Color(0.95, 0.82, 0.49, 0.5),heading: 30,pitch: 30}})graphicLayer.addGraphic(graphicNei)const graphicWai = new mars3d.graphic.EllipsoidEntity({name: "土星外圈",position: position,style: {radii: new Cesium.Cartesian3(4600.0, 4600.0, 4600.0),innerRadii: new Cesium.Cartesian3(4150.0, 4150.0, 4150.0),minimumConeDegree: 89.8,maximumConeDegree: 90.2,color: new Cesium.Color(0.95, 0.82, 0.49, 0.5),heading: 30,pitch: 30}})graphicLayer.addGraphic(graphicWai)
}// 生成演示数据(测试数据量)
export function addRandomGraphicByCount(count) {graphicLayer.clear()graphicLayer.enabledEvent = false // 关闭事件,大数据addGraphic时影响加载时间const bbox = [116.984788, 31.625909, 117.484068, 32.021504]const result = mars3d.PolyUtil.getGridPoints(bbox, count, 30)console.log("生成的测试网格坐标", result)const radius = result.radiusfor (let j = 0; j < result.points.length; ++j) {const position = result.points[j]const index = j + 1const graphic = new mars3d.graphic.EllipsoidEntity({position: position,style: {radii: new Cesium.Cartesian3(radius, radius, radius),color: Cesium.Color.fromRandom({ alpha: 0.6 })},attr: { index: index }})graphicLayer.addGraphic(graphic)}graphicLayer.enabledEvent = true // 恢复事件return result.points.length
}// 开始绘制
export function startDrawGraphic() {graphicLayer.startDraw({type: "ellipsoid",style: {color: "rgba(0,255,255,0.6)"}})
}// 在图层绑定Popup弹窗
export function bindLayerPopup() {graphicLayer.bindPopup(function (event) {const attr = event.graphic.attr || {}attr["类型"] = event.graphic.typeattr["来源"] = "我是layer上绑定的Popup"attr["备注"] = "我支持鼠标交互"return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })})
}// 绑定右键菜单
export function bindLayerContextMenu() {graphicLayer.bindContextMenu([{text: "开始编辑对象",icon: "fa fa-edit",show: function (e) {const graphic = e.graphicif (!graphic || !graphic.hasEdit) {return false}return !graphic.isEditing},callback: (e) => {const graphic = e.graphicif (!graphic) {return false}if (graphic) {graphicLayer.startEditing(graphic)}}},{text: "停止编辑对象",icon: "fa fa-edit",show: function (e) {const graphic = e.graphicif (!graphic || !graphic.hasEdit) {return false}return graphic.isEditing},callback: (e) => {const graphic = e.graphicif (!graphic) {return false}if (graphic) {graphic.stopEditing()}}},{text: "删除对象",icon: "fa fa-trash-o",show: (event) => {const graphic = event.graphicif (!graphic || graphic.isDestroy) {return false} else {return true}},callback: (e) => {const graphic = e.graphicif (!graphic) {return}const parent = graphic.parent // 右击是编辑点时graphicLayer.removeGraphic(graphic)if (parent) {graphicLayer.removeGraphic(parent)}}}])
}

 

4.采用属性机制即可实现球体模拟地球旋转的效果:

采用属性机制即可

 function addDemoGraphic2(graphicLayer) {const graphic = new mars3d.graphic.EllipsoidEntity({position: new mars3d.LngLatPoint(116.2, 31.0, 1000),style: {radii: new Cesium.Cartesian3(1000.0, 1000.0, 1000.0),color: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: "rgba(255,255,255,0.5)"},attr: { remark: "示例2" }})graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)// 设置自转动画let anglemap.on(mars3d.EventType.clockTick, function (clock) {angle = (Cesium.Math.TWO_PI * clock.multiplier * clock.currentTime.secondsOfDay) / 86400 // 计算旋转角度})graphic.entity.orientation = new Cesium.CallbackProperty((time) => {return Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, angle)}, false)}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/21510.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WPS Office AI实战:智能表格化身智能助理

前面我们已经拿 WPS AI 对Word文字、PPT幻灯片、PDF 做了开箱体验&#xff0c;还没有看过的小伙伴&#xff0c;请翻看以前的文章&#xff0c;本文开始对【智能表格】进行AI开箱测验。 表格在日常的数据处理中占绝对地位&#xff0c;但表格处理并不是每一个人都擅长&#xff0c;…

第2讲 KMD ISP子系统缩略词及目录结构

QCOM Camera子系统缩略词介绍 CPAS(Camera Peripherals and Support)CDM(Camera Data Mover)TFE(Thin Front End)IFE(Image Front End)OPE(Offline Processing Engine)BPS(Bayer Processing Segment)SFE(Sensor Front End)LRME(Low Resolution Motion Estimation)CSID(Camera …

taro3 微信小程序 createIntersectionObserver 监听无效

项目&#xff1a; taro3 vue3 官方文档 版本&#xff1a;3.x Taro.createIntersectionObserver(component, options) 创建并返回一个 IntersectionObserver 对象实例。在自定义组件或包含自定义组件的页面中&#xff0c;应使用 this.createIntersectionObserver([options]) …

常见面试题之垃圾收回

1. 简述Java垃圾回收机制&#xff1f;&#xff08;GC是什么&#xff1f;为什么要GC&#xff1f;&#xff09; 为了让程序员更专注于代码的实现&#xff0c;而不用过多的考虑内存释放的问题&#xff0c;所以&#xff0c;在Java语言中&#xff0c;有了自动的垃圾回收机制&#x…

性能测试工具 jmeter 录制脚本,传递 cookie,循环执行接口

目录 前言&#xff1a; 代理录制脚本 循环重复添加接口 登录并传递 cookie 给新建产品接口 循环执行脚本 前言&#xff1a; 在使用JMeter进行性能测试时&#xff0c;录制脚本是一种常用的方法。录制脚本可以帮助你捕获和重放用户与应用程序之间的交互&#xff0c;以模拟真…

阿里云域名注册域名持有者信息模板创建流程(图文)

阿里云域名注册域名持有者个人或企业都需要有已经通过实名认证的信息模板&#xff0c;如果没有可用的信息模板&#xff0c;需要先创建信息模版&#xff0c;等待信息模板实名通过后才可以注册域名&#xff0c;阿里云百科来详细说下阿里云注册域名创建信息模板实名全过程&#xf…

对 Jenkins+ANT+Jmeter 接口测试的实践

目录 1、前言 2、框架与数据准备 3、脚本设计 4、整理测试报告 1、前言 JenkinsANTJMeter是一种常见的接口测试实践方案&#xff0c;可以实现自动化的接口测试和持续集成。Jenkins是一个流行的持续集成工具&#xff0c;ANT是一个构建工具&#xff0c;而JMeter是一个功能强大…

二次元少女-InsCode Stable Diffusion 美图活动一期

一、 Stable Diffusion 模型在线使用地址&#xff1a; https://inscode.csdn.net/inscode/Stable-Diffusion 二、模型相关版本和参数配置&#xff1a; 模型版本&#xff1a;chilloutmix_NiPrunedFp32Fix.safetensors 采样方法(Sampler)Sampling method&#xff1a;DPM SDE …

Android11.0 导航栏添加图标截屏

需求&#xff1a; 导航栏添加截屏和电源键图标&#xff0c;控制截屏和用于设备重启关机功能。设置中添加延时截屏和控制截屏图标显示开关。 1. 导航栏添加图标 1.1 添加布局文件和图标icon 在layout目录下添加nav_power.xml和screenshot.xml文件 frameworks/base/packages…

CEO对今天的CIO们真正的要求是什么?

在当今数字化和信息时代&#xff0c;企业的首席信息官&#xff08;CIO&#xff09;的角色变得至关重要。CIO不仅需要具备深厚的技术知识&#xff0c;还需要在商业战略、创新和领导力方面展现出卓越的能力。作为企业的首席执行官&#xff08;CEO&#xff09;&#xff0c;他们对C…

wangzherongyao PM

第一场&#xff0c;对面没前排唯一的亚瑟也是输出&#xff0c;两法师&#xff0c;压力不大&#xff0c;黄忠打这类阵容就是砍瓜切菜&#xff0c; 本人对百里守约没啥好感&#xff0c;因为百里、墨子、钟馗这类英雄纯属技能概率英雄还要看对面脸 第二场&#xff1a; 9分钟前一切…

前端做excel的录入解析,将excel的数据传给后端,显示在页面上。

具体的流程如图所示&#xff1a; 1.点击excel录入按钮 2.打开弹框 3.点击上传按钮&#xff0c;会自动打开计算机本地文件&#xff0c;选择想上传的文件&#xff0c;点击打开 4.会将excel的数据解析成一个表格&#xff0c;可以在表格中做删除操作&#xff0c;点击确定 5.将exc…