vue使用Mars3D实现3d卫星轨道和3d地球图

1、安装

//安装mars3d主库
npm install mars3d --save

2、引入
main,js

import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
~~mars3d-space不引入，无法使用卫星的功能~~
import 'mars3d-space'
Vue.prototype.mars3d = mars3d;

vue.config.js

const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const cesiumSource = 'node_modules/mars3d-cesium/Build/Cesium/'
module.exports = {configureWebpack: (config) => {let plugins = []if (process.env.NODE_ENV === 'production') {plugins = [new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify('static')}),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'static/Workers' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'static/Assets' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: 'static/ThirdParty' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'static/Widgets' }])]} else {plugins = [new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify('')}),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'Workers' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }])]}return {module: {unknownContextCritical: false,rules: [{test: /\.js$/,enforce: 'pre',include: path.resolve(__dirname, 'node_modules/mars3d-cesium/Source'),sideEffects: false}]},optimization: {usedExports: true,splitChunks: {maxInitialRequests: Infinity,minSize: 0,maxSize: 250000,cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,priority: -10,chunks: 'all',name(module) {const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]return `npm.${packageName.replace('@', '')}`}},commons: {name: 'Cesium',test: /[\\/]node_modules[\\/]mars3d-cesium[\\/]Build[\\/]Cesium/,priority: 10,chunks: 'all'}}}},output: {sourcePrefix: ' '},amd: {toUrlUndefined: true},resolve: {alias: {vue$: 'vue/dist/vue.esm.js','@': path.resolve('src')}},node: {fs: 'empty',Buffer: false,http: 'empty',https: 'empty',zlib: 'empty'},plugins: plugins}},// 关闭eslintlintOnSave: false,devServer: {overlay: {warning: false,errors: false}},//已省略其他配置
}

3、使用

<template><div><div id="mars3dContainer" class="mars3d-container"></div></div>
</template><script>
export default {name: "index",components: {},data() {const basePathUrl = window.basePathUrl || ''return {configUrl: basePathUrl + 'config/config.json',map:""};},mounted() {this.$axios.get('/config/config.json').then(res=>{console.log(res)this.initMars3d(res.data.map3d)})},methods: {initMars3d(options) {let mars3d = this.mars3d//合并属性参数，可覆盖config.json中的对应配置let mapOptions = mars3d.Util.merge(options, {scene: {center: { lat: 12.845055, lng: 112.931363, alt: 24286797, heading: 3, pitch: -90 },cameraController: {zoomFactor: 3.0,minimumZoomDistance: 1000,maximumZoomDistance: 300000000,constrainedAxis: false, //解除在南北极区域鼠标操作限制},globe: { enableLighting: true },clock: {multiplier: 1, //速度},},control: {animation: false, //是否创建动画小器件，左下角仪表timeline: false, //是否显示时间线控件},});delete mapOptions.terrain;//创建三维地球场景this.map = new mars3d.Map("mars3dContainer", mapOptions);var tle_arr = ["COSMOS 33918U","1 33918U 93036DX  21197.87508339  .00001232  00000-0  17625-3 0  9990","2 33918  74.0595 343.7064 0054912  74.2148  45.2906 14.76790626663155","COSMOS 33919U","1 33919U 93036DY  21197.91197918  .00000904  00000-0  20362-3 0  9990","2 33919  74.0505 161.6299 0033213 276.5546  83.1838 14.57578432657116","COSMOS 33920U","1 33920U 93036DZ  21197.66738688  .00000502  00000-0  17722-3 0  9999","2 33920  74.0698  46.6248 0055820 106.9911 253.7370 14.36347026649192","COSMOS 33921U","1 33921U 93036EA  21197.38565197  .00009006  00000-0  82577-3 0  9990","2 33921  74.0006 290.6759 0010303  43.2289 316.9701 14.94971510663519","COSMOS 33922U","1 33922U 93036EB  21197.56502581  .00000274  00000-0  89558-4 0  9994","2 33922  74.0508 266.4243 0024779  54.6361  12.2512 14.42936298653573","COSMOS 33924U","1 33924U 93036ED  21197.52273790  .00000077  00000-0  98248-4 0  9996","2 33924  73.9172 330.8929 0412462 300.5791  55.5226 13.47506448610712","COSMOS 33928U","1 33928U 93036EH  21197.42931451  .00000092  00000-0  35017-4 0  9996","2 33928  73.9247 191.2154 0063743 117.8632 242.9002 14.43123719653944","COSMOS 33929U","1 33929U 93036EJ  21198.19991980  .00001910  00000-0  36273-3 0  9999","2 33929  74.0305 128.7466 0003289 114.3771 359.7968 14.64926844657886","COSMOS 33930U","1 33930U 93036EK  21198.38692156  .00000817  00000-0  22790-3 0  9999","2 33930  74.0285 287.1899 0028219 336.8694  92.7860 14.47667592652647",];this.createSatelliteList(tle_arr);},createSatelliteList(arr) {let mars3d = this.mars3d//创建矢量数据图层let graphicLayer = new mars3d.layer.GraphicLayer();this.map.addLayer(graphicLayer);graphicLayer.on(mars3d.EventType.click, function (event) {console.log("单击了卫星", event);});for (let i = 0; i < arr.length; i += 3) {const weixin = new mars3d.graphic.Satellite({name: arr[i],tle1: arr[i + 1],tle2: arr[i + 2],model: {url: "//data.mars3d.cn/gltf/mars/weixin.gltf",scale: 1,minimumPixelSize: 60,autoHeading: true,show: true,},label: {color: "#ffffff",opacity: 1,font_family: "楷体",font_size: 30,outline: true,outlineColor: "#000000",outlineWidth: 3,background: true,backgroundColor: "#000000",backgroundOpacity: 0.5,font_weight: "normal",font_style: "normal",pixelOffsetX: 0,pixelOffsetY: -20,scaleByDistance: true,scaleByDistance_far: 10000000,scaleByDistance_farValue: 0.4,scaleByDistance_near: 100000,scaleByDistance_nearValue: 1,show: true,},// cone: {//   sensorType: mars3d.graphic.SatelliteSensor.Type.Rect,//   angle1: 30,//   angle2: 15,//   color: '#6ef500',//   reverse: true,//   show: true,// },path: {show: true,color: "#e2e2e2",opacity: 0.5,width: 1,},});graphicLayer.addGraphic(weixin);// RectSensor锥体（比Satellite内置的cone效率略高）// const rectSensor = new mars3d.graphic.RectSensor({//   position: new Cesium.CallbackProperty(function (time) {//     return weixin.position;//   }, false),//   style: {//     angle1: 30,//     angle2: 15,//     length: 90000,//     color: "rgba(0,255,0,0.4)",//     outline: true,//     topShow: true,//     topSteps: 2,//     rayEllipsoid: true,//     heading: new Cesium.CallbackProperty(function (time) {//       return weixin.heading;//     }, false),//   },//   reverse: true,// });// graphicLayer.addGraphic(rectSensor);}}},
};
</script><style lang="scss" scoped>
.available{background: url("../../public/config/config.json");
}
</style>

josn文件

{"map3d": {"scene": {"center": { "lat": 30.526361, "lng": 116.335987, "alt": 45187, "heading": 0, "pitch": -45 },"scene3DOnly": false,"shadows": false,"removeDblClick": true,"sceneMode": 3,"showSun": true,"showMoon": true,"showSkyBox": true,"showSkyAtmosphere": true,"fog": true,"fxaa": true,"globe": {"depthTestAgainstTerrain": false,"baseColor": "#546a53","showGroundAtmosphere": true,"enableLighting": false},"cameraController": {"zoomFactor": 3.0,"minimumZoomDistance": 1,"maximumZoomDistance": 50000000,"enableRotate": true,"enableTranslate": true,"enableTilt": true,"enableZoom": true,"enableCollisionDetection": true,"minimumCollisionTerrainHeight": 15000}},"control": {"homeButton": false,"baseLayerPicker": false,"sceneModePicker": false,"vrButton": false,"fullscreenButton": false,"navigationHelpButton": false,"animation": false,"timeline": false,"infoBox": false,"geocoder": false,"geocoderConfig": { "key": ["ae29a37307840c7ae4a785ac905927e0"] },"selectionIndicator":false,"defaultContextMenu": false,"mouseDownView": false,"compass": { "bottom": "toolbar", "right": "5px" },"distanceLegend": { "left": "100px", "bottom": "2px" },"locationBar": {"fps": false,"crs":"CGCS2000_GK_Zone_3","crsDecimal":0,"template": "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>横{crsx}  纵{crsy}</div> <div>海拔：{alt}米</div> <div>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div>视高：{cameraHeight}米</div>"}},"terrain": {"url": "//data.mars3d.cn/terrain","show": true},"basemaps": [{ "id": 10, "name": "地图底图", "type": "group" },{"id": 2021,"pid": 10,"name": "天地图影像","icon": "http://mars3d.cn/example/img/basemaps/tdt_img.png","type": "tdt","layer": "img_d","key": ["9ae78c51a0a28f06444d541148496e36"],"show": true},{"pid": 10,"name": "天地图电子","icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png","type": "group","layers": [{ "name": "底图", "type": "tdt", "layer": "vec_d", "key": ["9ae78c51a0a28f06444d541148496e36"] },{ "name": "注记", "type": "tdt", "layer": "vec_z", "key": ["9ae78c51a0a28f06444d541148496e36"] }]},{"pid": 10,"name": "高德影像","type": "group","icon": "http://mars3d.cn/example/img/basemaps/gaode_img.png","layers": [{ "name": "底图", "type": "gaode", "layer": "img_d" },{ "name": "注记", "type": "gaode", "layer": "img_z" }]},{"pid": 10,"name": "高德电子","type": "gaode","icon": "http://mars3d.cn/example/img/basemaps/gaode_vec.png","layer": "vec"},{"pid": 10,"name": "百度影像","type": "group","icon": "http://mars3d.cn/example/img/basemaps/bd-img.png","layers": [{ "name": "底图", "type": "baidu", "layer": "img_d" },{ "name": "注记", "type": "baidu", "layer": "img_z" }]},{"pid": 10,"name": "百度电子","icon": "http://mars3d.cn/example/img/basemaps/bd-vec.png","type": "baidu","layer": "vec"},{"pid": 10,"name": "腾讯影像","icon": "http://mars3d.cn/example/img/basemaps/gaode_img.png","type": "group","layers": [{ "name": "底图", "type": "tencent", "layer": "img_d" },{ "name": "注记", "type": "tencent", "layer": "img_z" }]},{"pid": 10,"name": "腾讯电子","icon": "http://mars3d.cn/example/img/basemaps/gaode_vec.png","type": "tencent","layer": "vec"},{"pid": 10,"name": "ArcGIS影像","icon": "http://mars3d.cn/example/img/basemaps/esriWorldImagery.png","type": "xyz","url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}","enablePickFeatures": false},{"pid": 10,"name": "微软影像","icon": "http://mars3d.cn/example/img/basemaps/bingAerial.png","type": "bing","key": "AuKhM0WRkjhX8E4y1OM0TukYycaw_4Vh3eSfXONDf7OARls-WEB3K_Rfx89bWxof","layer": "Aerial"},{"pid": 10,"name": "OSM地图","type": "xyz","icon": "http://mars3d.cn/example/img/basemaps/osm.png","url": "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png","subdomains": "abc"},{"id": 2017,"pid": 10,"name": "蓝色底图","icon": "http://mars3d.cn/example/img/basemaps/bd-c-midnight.png","type": "xyz","url": "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}","chinaCRS": "GCJ02","enablePickFeatures": false},{"pid": 10,"name": "黑色底图","icon": "http://mars3d.cn/example/img/basemaps/bd-c-dark.png","type": "tencent","layer": "custom","style": "4"},{"pid": 10,"name": "灰色底图","icon": "http://mars3d.cn/example/img/basemaps/bd-c-grayscale.png","type": "mapbox","username": "marsgis","styleId": "cki0a92b123qo1aluk0e5v7sb","scaleFactor": true},{"pid": 10,"name": "离线地图  (供参考)","type": "xyz","icon": "http://mars3d.cn/example/img/basemaps/mapboxSatellite.png","url": "//data.mars3d.cn/tile/googleImg/{z}/{x}/{y}.jpg","minimumLevel": 1,"maximumLevel": 18,"minimumTerrainLevel": 1,"maximumTerrainLevel": 18,"rectangle": { "xmin": -180, "xmax": 180, "ymin": -85, "ymax": 85 }},{"pid": 10,"name": "单张图片 (本地离线)","icon": "http://mars3d.cn/example/img/basemaps/offline.png","type": "image","url": "//data.mars3d.cn/file/img/world/world.jpg"}],"layers": [{ "id": 20, "name": "辅助图层", "type": "group" },{"pid":20,"name": "行政区划界线","type": "xyz","url": "https://t{s}.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=9ae78c51a0a28f06444d541148496e36","subdomains": "01234567","maximumLevel": 10,"show": false},{"pid":20,"name": "天地图注记","type": "tdt","layer": "img_z","key": ["9ae78c51a0a28f06444d541148496e36"],"show": false},{ "id": 30, "name": "实时路况", "type": "group" },{"pid":30,"name": "高德实时路况","type": "gaode","layer": "time","minimumTerrainLevel": 4,"minimumLevel": 4,"proxy": "//server.mars3d.cn/proxy/"},{"pid":30,"name": "百度实时路况","type": "baidu","layer": "time"}]}
}

效果图

vue使用Mars3D实现3d卫星轨道和3d地球图相关推荐

[ STK ]（九）改变 3D 视图的背景颜色，设置卫星轨道的颜色，导出 3D 视图
文章目录一.改变 3D 视图的背景颜色二.设置卫星轨道的颜色三.导出3D视图一.改变 3D 视图的背景颜色在背景处右键单击设置你想要的的颜色即可二.设置卫星轨道的颜色在卫星上双击在 ...
卫星轨道推演计算相关知识点总结（含欧拉角、旋转矩阵、及各坐标系转化等）
来源:轨道机动算法的C++实现_shirro123的专栏-CSDN博客卫星轨道推演计算相关基础知识点总结一.卫星的运动特性二.卫星的空间坐标系 ...
卫星轨道的估计问题(Matlab)(三):标准重采样粒子滤波(SIR)对新问题的尝试
SIR滤波器关于粒子滤波的基本知识可以参加下面的博客: 粒子滤波,讲的很通俗易懂基本粒子滤波算法过程: SIR算法伪代码: Matlab代码实现求解如下所示的滤波问题: %PF的应用 clc,c ...
卫星轨道的估计问题(Matlab)(二):扩展卡尔曼滤波(EKF)对新问题的尝试
前言在前面的问题中我们已经考虑到了用微分方程来描述卫星运动轨迹的方法: r¨=rθ˙2−GMr−2θ¨=−2r−1r˙θ˙\ddot r = r\dot \theta^2-GMr^{-2}\\\dd ...
卫星轨道的估计问题(Matlab)(一):理论基础
问题: 在平面轨道中绕地球(质量为mmm)运动的一个卫星,设rrr为该卫星到地球的距离,θ\thetaθ为该卫星与地球连线同坐标轴xxx成的夹角.该卫星坐标m(x,y)m(x,y)m(x,y).求 ...
卫星轨道资料洋面风的绘图
1.一般格点数据的绘图 import cartopy.crs as ccrs import cartopy.feature as cfeature import cartopy.mpl.ticker ...
MATLAB STK构建卫星轨道姿态控制仿真演示系统
MATLAB & STK构建卫星轨道姿态控制仿真演示系统杜耀珂郑科宇摘要:通过在MATLAB中建立卫星的轨道运动和姿态动力学仿真模型就可以分析在不同的控制作用下,卫星的轨道和姿态的变化情 ...
cesium学习之 Entity 画卫星轨道（一）
cesium学习之 Entity 画卫星轨道 (一) 最近公司想做个卫星轨迹展示大屏,原型图看上去确实比较逼真,然后我就惨了,开始学习cesium,满满的English文档,看着头大. B站上面有入 ...
matlab 画卫星轨道,Matlab仿真实例-卫星轨迹
卫星轨迹一．问题提出设卫星在空中运行的运动方程为: d2rkd 2 r() 22 dtrdt 2 d 2drd rdtdt dt2 其中是k重力系数(k=401408km3/s).卫星轨道采用极坐 ...
036卫星轨道及卫星在轨运动
一.卫星轨道六要素 1.升交点赤经Ω\OmegaΩ 春分点:太阳沿黄道从天赤道以南向北通过天赤道的点,称为春分点. 升交点:卫星由南向北运行时,与地球赤道面的交点. 升交点赤经为地心与春分点连线和 ...

vue使用Mars3D实现3d卫星轨道和3d地球图

vue使用Mars3D实现3d卫星轨道和3d地球图相关推荐

最新文章

热门文章