Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
言程序plus
CSDN数据可视化之三维地图展示
提交
f2d32861
CSDN数据可视化之三维地图展示
项目概览
言程序plus
/
CSDN数据可视化之三维地图展示
与 Fork 源项目一致
从无法访问的项目Fork
通知
45
Star
22
Fork
2
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
CSDN数据可视化之三维地图展示
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f2d32861
编写于
10月 26, 2022
作者:
6
628f27b3fb72c14e897fac6b
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
代码优化
上级
e739e670
变更
4
展开全部
隐藏空白更改
内联
并排
Showing
4 changed file
with
39 addition
and
74 deletion
+39
-74
public/index.html
public/index.html
+1
-1
public/static/Cesium.js
public/static/Cesium.js
+26
-0
src/components/fans-3d.vue
src/components/fans-3d.vue
+6
-45
src/components/force-3d.vue
src/components/force-3d.vue
+6
-28
未找到文件。
public/index.html
浏览文件 @
f2d32861
...
@@ -11,7 +11,7 @@
...
@@ -11,7 +11,7 @@
<script
src=
"static/echarts.min.js"
></script>
<script
src=
"static/echarts.min.js"
></script>
<script
src=
"static/EchartsLayer.js"
></script>
<script
src=
"static/EchartsLayer.js"
></script>
<script
type=
"text/javascript"
src=
"https://www.supermapol.com/earth/vue-iEarth/static/Cesium/Cesium.js"
></script>
<script
type=
"text/javascript"
src=
"https://www.supermapol.com/earth/vue-iEarth/static/Cesium/Cesium.js"
></script>
<!-- <script type="text/javascript" src="static/Cesium.js"></script> -->
</head>
</head>
<body>
<body>
<noscript>
<noscript>
...
...
public/static/Cesium.js
0 → 100644
浏览文件 @
f2d32861
此差异已折叠。
点击以展开。
src/components/fans-3d.vue
浏览文件 @
f2d32861
...
@@ -30,8 +30,6 @@
...
@@ -30,8 +30,6 @@
<
script
setup
>
<
script
setup
>
import
{
ref
,
onMounted
}
from
"
vue
"
;
import
{
ref
,
onMounted
}
from
"
vue
"
;
import
{
useRouter
}
from
"
vue-router
"
;
import
{
useRouter
}
from
"
vue-router
"
;
import
{
ArrowDown
}
from
"
@element-plus/icons-vue
"
;
import
{
ElMessage
}
from
"
element-plus
"
;
import
{
getFansInfo
,
getFansDistribution
}
from
"
@/api/apiList.js
"
;
import
{
getFansInfo
,
getFansDistribution
}
from
"
@/api/apiList.js
"
;
import
{
fa
}
from
"
element-plus/es/locale
"
;
import
{
fa
}
from
"
element-plus/es/locale
"
;
const
$router
=
useRouter
();
const
$router
=
useRouter
();
...
@@ -42,6 +40,7 @@ let echartsLayer = null;
...
@@ -42,6 +40,7 @@ let echartsLayer = null;
onMounted
(()
=>
{
onMounted
(()
=>
{
getFansInfoData
();
getFansInfoData
();
});
});
//获取粉丝数据
const
getFansInfoData
=
()
=>
{
const
getFansInfoData
=
()
=>
{
getFansInfo
().
then
((
res
)
=>
{
getFansInfo
().
then
((
res
)
=>
{
if
(
res
.
code
==
200
)
{
if
(
res
.
code
==
200
)
{
...
@@ -50,6 +49,7 @@ const getFansInfoData = () => {
...
@@ -50,6 +49,7 @@ const getFansInfoData = () => {
}
}
});
});
};
};
//初始化三维场景
const
initCesuim3D
=
(
result
)
=>
{
const
initCesuim3D
=
(
result
)
=>
{
viewer
=
new
Cesium
.
Viewer
(
"
cesiumContainer
"
,
{});
viewer
=
new
Cesium
.
Viewer
(
"
cesiumContainer
"
,
{});
var
imageryLayers
=
viewer
.
imageryLayers
;
var
imageryLayers
=
viewer
.
imageryLayers
;
...
@@ -58,7 +58,6 @@ const initCesuim3D = (result) => {
...
@@ -58,7 +58,6 @@ const initCesuim3D = (result) => {
new
Cesium
.
CGCS2000MapServerImageryProvider
({
new
Cesium
.
CGCS2000MapServerImageryProvider
({
url
:
"
http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer
"
,
url
:
"
http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer
"
,
suggest
:
true
,
//4490坐标系,按照suggest切片方案切的瓦片,需要设置该参数
suggest
:
true
,
//4490坐标系,按照suggest切片方案切的瓦片,需要设置该参数
// tilingScheme: new Cesium.ArcGisGeographicTilingScheme({})
})
})
);
);
var
labelImagery
=
new
Cesium
.
TiandituImageryProvider
({
var
labelImagery
=
new
Cesium
.
TiandituImageryProvider
({
...
@@ -67,19 +66,7 @@ const initCesuim3D = (result) => {
...
@@ -67,19 +66,7 @@ const initCesuim3D = (result) => {
});
});
imageryLayers
.
addImageryProvider
(
labelImagery
);
imageryLayers
.
addImageryProvider
(
labelImagery
);
const
convertData
=
function
(
data
)
{
//echart数据组装
const
res
=
[];
for
(
let
i
=
0
;
i
<
data
.
length
;
i
++
)
{
const
geoCoord
=
geoCoordMap
[
data
[
i
].
name
];
if
(
geoCoord
)
{
res
.
push
({
name
:
data
[
i
].
name
,
value
:
geoCoord
.
concat
(
data
[
i
].
value
),
});
}
}
return
res
;
};
result
.
forEach
((
ele
)
=>
{
result
.
forEach
((
ele
)
=>
{
ele
.
name
=
ele
.
city
;
ele
.
name
=
ele
.
city
;
ele
.
value
=
ele
.
gps
.
concat
(
ele
.
score
);
ele
.
value
=
ele
.
gps
.
concat
(
ele
.
score
);
...
@@ -178,18 +165,10 @@ const initCesuim3D = (result) => {
...
@@ -178,18 +165,10 @@ const initCesuim3D = (result) => {
},
},
],
],
};
};
echartsLayer
=
new
EchartsLayer
(
viewer
);
echartsLayer
=
new
EchartsLayer
(
viewer
);
echartsLayer
.
chart
.
setOption
(
options
);
echartsLayer
.
chart
.
setOption
(
options
);
// let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
// handler.setInputAction(function (e) {
// let pos = scene.pickPosition(e.position);
// console.log(pos);
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// window.camera = scene.camera;
};
};
//获取粉丝分布及实现迁徙图
const
getFansDistributionData
=
(
result
)
=>
{
const
getFansDistributionData
=
(
result
)
=>
{
allFansFlag
.
value
=
true
;
allFansFlag
.
value
=
true
;
let
startData
=
result
;
let
startData
=
result
;
...
@@ -197,31 +176,12 @@ const getFansDistributionData = (result) => {
...
@@ -197,31 +176,12 @@ const getFansDistributionData = (result) => {
if
(
res
.
code
==
200
)
{
if
(
res
.
code
==
200
)
{
var
planePath
=
var
planePath
=
"
path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z
"
;
"
path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z
"
;
res
.
data
.
forEach
((
ele
)
=>
{
var
convertData
=
function
(
data
)
{
var
res
=
[];
for
(
var
i
=
0
;
i
<
data
.
length
;
i
++
)
{
var
dataItem
=
data
[
i
];
var
fromCoord
=
geoCoordMap
[
dataItem
[
0
].
name
];
var
toCoord
=
geoCoordMap
[
dataItem
[
1
].
name
];
if
(
fromCoord
&&
toCoord
)
{
res
.
push
({
fromName
:
dataItem
[
0
].
name
,
toName
:
dataItem
[
1
].
name
,
coords
:
[
fromCoord
,
toCoord
],
value
:
dataItem
[
1
].
value
,
});
}
}
return
res
;
};
res
.
data
.
forEach
((
ele
)
=>
{
ele
.
fromName
=
ele
.
city
;
ele
.
fromName
=
ele
.
city
;
ele
.
toName
=
startData
.
city
;
ele
.
toName
=
startData
.
city
;
ele
.
coords
=
[
startData
.
gps
,
ele
.
gps
];
ele
.
coords
=
[
startData
.
gps
,
ele
.
gps
];
ele
.
value
=
ele
.
score
;
ele
.
value
=
ele
.
score
;
});
});
var
color
=
[
"
#00EAFF
"
,
"
green
"
,
"
blue
"
];
var
color
=
[
"
#00EAFF
"
,
"
green
"
,
"
blue
"
];
var
series
=
[];
var
series
=
[];
[[
startData
.
city
,
res
.
data
]].
forEach
(
function
(
item
,
i
)
{
[[
startData
.
city
,
res
.
data
]].
forEach
(
function
(
item
,
i
)
{
...
@@ -288,6 +248,7 @@ const getFansDistributionData = (result) => {
...
@@ -288,6 +248,7 @@ const getFansDistributionData = (result) => {
});
});
};
};
//返回至粉丝榜
const
backStep
=
()
=>
{
const
backStep
=
()
=>
{
allFansFlag
.
value
=
false
;
allFansFlag
.
value
=
false
;
getFansInfo
().
then
((
res
)
=>
{
getFansInfo
().
then
((
res
)
=>
{
...
...
src/components/force-3d.vue
浏览文件 @
f2d32861
...
@@ -34,14 +34,11 @@ import { ElMessage } from "element-plus";
...
@@ -34,14 +34,11 @@ import { ElMessage } from "element-plus";
import
{
getForceInfo
}
from
"
@/api/apiList.js
"
;
import
{
getForceInfo
}
from
"
@/api/apiList.js
"
;
const
$router
=
useRouter
();
const
$router
=
useRouter
();
const
tableData
=
ref
([]);
const
tableData
=
ref
([]);
onMounted
(()
=>
{
onMounted
(()
=>
{
// setTimeout(() => {
// initCesuim3D();
// }, 1000);
getForceInfoData
();
getForceInfoData
();
});
});
//获取原力数据
const
getForceInfoData
=
()
=>
{
const
getForceInfoData
=
()
=>
{
getForceInfo
().
then
((
res
)
=>
{
getForceInfo
().
then
((
res
)
=>
{
if
(
res
.
code
==
200
)
{
if
(
res
.
code
==
200
)
{
...
@@ -50,7 +47,7 @@ const getForceInfoData = () => {
...
@@ -50,7 +47,7 @@ const getForceInfoData = () => {
}
}
});
});
};
};
//初始化3d
const
initCesuim3D
=
(
result
)
=>
{
const
initCesuim3D
=
(
result
)
=>
{
var
viewer
=
new
Cesium
.
Viewer
(
"
cesiumContainer
"
,
{});
var
viewer
=
new
Cesium
.
Viewer
(
"
cesiumContainer
"
,
{});
var
imageryLayers
=
viewer
.
imageryLayers
;
var
imageryLayers
=
viewer
.
imageryLayers
;
...
@@ -68,22 +65,7 @@ const initCesuim3D = (result) => {
...
@@ -68,22 +65,7 @@ const initCesuim3D = (result) => {
});
});
imageryLayers
.
addImageryProvider
(
labelImagery
);
imageryLayers
.
addImageryProvider
(
labelImagery
);
var
planePath
=
//数据组装
"
path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z
"
;
const
convertData
=
function
(
data
)
{
const
res
=
[];
for
(
let
i
=
0
;
i
<
data
.
length
;
i
++
)
{
const
geoCoord
=
geoCoordMap
[
data
[
i
].
name
];
if
(
geoCoord
)
{
res
.
push
({
name
:
data
[
i
].
name
,
value
:
geoCoord
.
concat
(
data
[
i
].
value
),
});
}
}
return
res
;
};
result
.
forEach
((
ele
)
=>
{
result
.
forEach
((
ele
)
=>
{
ele
.
name
=
ele
.
city
;
ele
.
name
=
ele
.
city
;
ele
.
value
=
ele
.
gps
.
concat
(
ele
.
score
);
ele
.
value
=
ele
.
gps
.
concat
(
ele
.
score
);
...
@@ -188,19 +170,15 @@ const initCesuim3D = (result) => {
...
@@ -188,19 +170,15 @@ const initCesuim3D = (result) => {
var
echartsLayer
=
new
EchartsLayer
(
viewer
);
var
echartsLayer
=
new
EchartsLayer
(
viewer
);
echartsLayer
.
chart
.
setOption
(
options
);
echartsLayer
.
chart
.
setOption
(
options
);
let
handler
=
new
Cesium
.
ScreenSpaceEventHandler
(
scene
.
canvas
);
handler
.
setInputAction
(
function
(
e
)
{
let
pos
=
scene
.
pickPosition
(
e
.
position
);
console
.
log
(
pos
);
},
Cesium
.
ScreenSpaceEventType
.
LEFT_CLICK
);
// window.camera = scene.camera;
};
};
//跳转博客
const
gotoBlog
=
(
val
)
=>
{
const
gotoBlog
=
(
val
)
=>
{
let
url
=
"
https://blog.csdn.net/
"
+
val
.
username
;
let
url
=
"
https://blog.csdn.net/
"
+
val
.
username
;
window
.
open
(
url
);
window
.
open
(
url
);
};
};
</
script
>
</
script
>
<
style
lang=
"less"
>
<
style
lang=
"less"
>
.force3d {
.force3d {
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录