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

于 2021-12-14 15:13:09 发布
阅读量5k 收藏 28
点赞数 2
文章标签： vue.js 3d javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webtext/article/details/121927117
版权

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
        }
    },
    // 关闭eslint
    lintOnSave: 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"
      }
    ]
  }
}

效果图在这里插入图片描述

言只 石皮
关注
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

言只 石皮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值