vue使用Mars3D实现3d卫星轨道和3d地球图
1、安装//安装mars3d主库npm install mars3d --save2、引入main,jsimport 'mars3d/dist/mars3d.css'import * as mars3d from 'mars3d'~~mars3d-space不引入，无法使用卫星的功能~~import 'mars3d-space'Vue.prototype.mars3d = mars3d;vue.c
·
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
0- 0
已为社区贡献4条内容
所有评论(0)