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

最新推荐文章于 2024-04-24 22:30:20 发布
最新推荐文章于 2024-04-24 22:30:20 发布
阅读量4.5k 收藏 26
点赞数 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"
      }
    ]
  }
}

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

言只 石皮
关注
  • 2
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
vue3 - 使用 Lunchbox.js 创建一个 3D 地球（详细步骤及运行示例教程源码）
高级前端工程师
02-13 1762
用 Lunchbox 在 vue3 中创建一个旋转的 3D 地球竟是如此简单，在VUE中使用echarts制作3d地球，VUE3 创建可交互的3D世界，使用Lunchbox.js 在Vue 中构建3D 视觉效果，用Lunchbox 在 vue3，使用Lunchbox.js 在Vue 中构建3D 视觉效果，在VUE中使用echarts制作3d地球，js实现地球旋转动画，vue实现3d地球特效，用vue3+Three打造一个三维太阳系，vue-cli3 使用 cesium 创建 3d 地图，VUE使用百度地图A
从零开始Vue项目中使用MapboxGL开发三维地图教程（七）创建一个自动旋转的地球、添加一个3D模型、实现在两个地图之间滑动和同步来比较两个地图
tigerhhzz的博客
06-18 1446
实现思路：通过在动画结束时调用easeTo，旋转动画将无限期地继续。旋转在用户交互时暂停，并且在高缩放级别时减慢到停止。实现功能：地球仪和camera动画结合在一起，创建旋转行星效果。
mars3d平台Vue2最简的项目模板源码
12-28
mars3d平台Vue2最简的项目模板源码，也可以在https://gitee.com/marsgis/mars3d-vue2-template下载。
Echarts实现3D地球加卫星环绕效果
个人主页https://www.siwuji.top
02-02 2135
通过echarts实现自动旋转3D地球加卫星环绕效果
Vue3项目引入Mars3D（vite 技术栈）
最新发布
m0_62498143的博客
04-24 1215
项目背景：笔者采用Vue3引入Mars3D后，再调用GeoServer离线发布的图层。
Threejs实现宇宙中地球动态展示和卫星绕地运动
左本Web3D
04-21 3694
1，介绍 该示例使用的是 r95版本Three.js库。 主要实现功能：宇宙星空背景，流星星星闪烁，地球自转，卫星绕地运动。 实际效果还是很丝滑的，GIF效果图如下： 2，主要说明 1，宇宙背景利是用背景图片+粒子效果zai。 2，流星是使用一张透明图片，随机一个位置进行固定方向移动。 3，地球是用SphereGeometry创建球几何体并进行贴图，案例地球中设置了多层贴图，这样地球会表现比较立体。 4，轨道是用RingGeometry创建一个圆环并设置显示角度。 5，卫星是用精
【Three.js + Vue 构建三维地球-Part One】
Ricce的博客
08-28 764
Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。
cesium多颗卫星绕着不同的轨道旋转示例
大剑师兰特的GIS世界
06-26 969
本示例的目的是介绍演示如何在vue+satellite项目中模拟多颗卫星的运行轨迹和覆盖状态。
行星轨迹制作_用3ds max制作三维行星运动动画
weixin_39897449的博客
12-20 1968
3ds max是一款广泛用于建筑、装饰、机械设计、模具制造等行业的专用软件，用它不仅可以制作形象逼真的物理模型，而且能够创作精巧的三维空间动画，用它来制作物理课件，可谓是巧夺天工．现以人教版新教材必修2第七章第1节行星的运动为例，展示用3ds max制作三维动画课件无与伦比的优越性．万有引力定律教学是通过分析太阳系行星的运动规律逐渐深入的．由于行星的运动我们我无法直接观察，要让学生了解行星的运行特...
【mars3d - 报错】使用mars3d加载时的一些报错和不生效问题
m0_53584457的博客
08-09 1002
在使用过程中遇到过很多报错，不管大的还是小的，在这里总结下，应该会持续更新； 可能是因为 arcType：Cesium.arcType.NONE 与 clampToGround：true 是相互冲突的，两个都设置就会报错的；只能二选一了 这个就比较简单，就是样式没引入，新建个css || less 文件，引入下就好； 如果是mars3d官网的样式，直接将对应文件引入即可； 在里面写了按钮，点击却没有触发事件； 比如下面，岳西水厂的按钮就可以触发，大别山水厂的按钮就触发不了； 设置pointerEv
Mars3d项目启动上的一些坑
m0_56026872的博客
03-31 6136
Mars3d，cesium
3D轨道模拟：绕太阳公转的地球的3D模拟
01-30
3D轨道模拟 网站： 使用对地球绕太阳运行的3D模拟。 该项目使用了的物理方程和数学方程。 请参阅，以获取有关如何推导方程式的更多信息。 改进措施 为太阳和地球上的任意点添加相机视图，以可视化其他物体的运动
业余气象卫星云图接收
11-14
该报告具体介绍了业余无线电爱好者HAM进行气象卫星云图接收的具体细节，从准备工作到最后实战得到卫星云图，可谓是自主与卫星通联的一次实践，是HAM非常宝贵的经验
mars3d平台Vue3最简的项目模板源码
12-28
https://gitee.com/marsgis/mars3d-vue-template
VUE 3D轮播图封装实现方法
01-19
本文为大家分享了VUE 3D轮播图封装的具体代码，供大家参考，具体内容如下 一、体验地址 VUE 3D轮播图 二、实现功能点 （1）、无缝轮播 （2）、进入变大、离开缩小（类3d切换效果） 三、js代码 <!--轮播图...
基于 ThreeJs 的中国 3D 地图展示，使用 vue 框架.zip
06-06
基于 ThreeJs 的中国 3D 地图展示，使用 vue 框架.zip
vue3_vite_ts_cesium实现地球自转
u012425087的博客
04-01 529
本文介绍如何使用 Vue3、Vite、TypeScript 和 Cesium 实现数字地球浏览器，通过 icrf 函数实现地球的自转。包括初始化 Vue3 项目、配置 Vite、创建数字地球浏览器、添加到 Vue3 项目中等。通过本文可了解如何使用 Vite 配置 Vue3 项目，使用 TypeScript 编写 Vue3 项目，以及如何使用 Cesium 实现数字地球浏览器。阅读本文可以深入理解 Vue3 组件化思想和 Cesium 使用方法。
207：vue+openlayers 动态位置高度角度，模拟卫星地面覆盖区域的大小
大剑师兰特的GIS世界
02-08 703
第207个本示例的目的是介绍演示如何在vue+openlayers中卫星接收覆盖范围的场景，动态设置卫星经度、纬度、高度、俯仰角、转向角、天线可视角度等信息，计算并画出地面的覆盖区域。这是在地球是平整的情况下的简单推论，由于地球是球体，真实情况跟这个是有一定差距的。
vue使用百度地图GL 卫星地球地图 避坑一 BMAP_EARTH_MAP出现 undefined报错的问题
关于我遇到的或大或小的问题
04-26 3055
目录. 避坑系列的目录 示例中心中关于地球的示例还是这么写的 但是在使用的时候你就会发现，这个东西已经改名了 你可以改成这个试试： this.map.setMapType('B_EARTH_MAP');// 设置地图类型为地球模式
vue 实现高德3d楼宇
12-23
Vue是一种流行的JavaScript框架，可用于构建交互式的Web应用程序。要使用Vue实现高德3D楼宇效果，首先需要了解高德地图的API，并且要熟悉Vue框架的基本概念和语法。 首先，需要引入高德地图的JavaScript API，并在Vue应用程序中创建一个地图实例。接着，通过高德地图的楼块图层功能，可以实现3D楼宇的展示。在Vue组件中，可以使用高德地图提供的相关方法和属性，例如添加楼块图层、设置楼块样式等来实现3D楼宇的效果。 同时，可以结合Vue的数据绑定和组件化特性，将地图的相关操作和交互功能封装成Vue组件，使得代码更加模块化和可复用。比如，可以创建一个地图组件，其中包含了显示地图、添加楼块图层等功能，并且可以将地图中的一些操作通过Vue的数据驱动来实现。 另外，在Vue应用中还可以利用其他Vue插件或库，比如Three.js等来增强对3D楼宇的展示效果，以及提供更加丰富的交互体验。 总之，通过结合Vue框架和高德地图的API以及其他相关的插件和库，可以实现高德3D楼宇效果的展示和交互，使得Web应用程序更加生动和具有吸引力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

言只 石皮

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

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

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

打赏作者

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

抵扣说明：

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

余额充值