parent
d1c75bf9e9
commit
8c00aab826
@ -1,390 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="map-container">
|
|
||||||
<div class="extend-box">
|
|
||||||
<div class="sub-title"></div>
|
|
||||||
<div class="data-total">{{ total }}</div>
|
|
||||||
</div>
|
|
||||||
<mars-map @mapLoad="mapLoad" :options="options"></mars-map>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import point1 from "@/assets/images/levelcity.png";
|
|
||||||
import point2 from "@/assets/images/province.png";
|
|
||||||
import linePoint1 from "@/assets/images/linePoint1.png";
|
|
||||||
import linePoint2 from "@/assets/images/linePoint2.png";
|
|
||||||
import MarsMap from "@/components/mars-map";
|
|
||||||
// import province from "@/assets/images/province.png";
|
|
||||||
import { getProvince } from "@/api/yunkun/index.js";
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
const basePathUrl = window.basePathUrl || "";
|
|
||||||
return {
|
|
||||||
cityAttr: {},
|
|
||||||
total: 0,
|
|
||||||
options: {
|
|
||||||
scene: {
|
|
||||||
center: {
|
|
||||||
lat: -9.65789,
|
|
||||||
lng: 110.718514,
|
|
||||||
alt: 13807610.5,
|
|
||||||
heading: 351.3,
|
|
||||||
pitch: -73,
|
|
||||||
},
|
|
||||||
showSun: false,
|
|
||||||
showMoon: false,
|
|
||||||
showSkyBox: false,
|
|
||||||
showSkyAtmosphere: false,
|
|
||||||
fog: false,
|
|
||||||
sceneMode: 1,
|
|
||||||
backgroundColor: "rgba(0,0,0,0)",
|
|
||||||
backgroundImage: `url(${require("../assets/images/big_bg.png")})`,
|
|
||||||
orderIndependentTranslucency: false,
|
|
||||||
contextOptions: { webgl: { antialias: mars3d.Util.isPCBroswer() } },
|
|
||||||
globe: {
|
|
||||||
show: false, // 不显示地球
|
|
||||||
showGroundAtmosphere: false,
|
|
||||||
enableLighting: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
control: {
|
|
||||||
// contextmenu: { preventDefault: false, hasDefault: false },
|
|
||||||
},
|
|
||||||
basemaps: [
|
|
||||||
{
|
|
||||||
name: "mapbox影像图",
|
|
||||||
icon: "img/basemaps/mapboxSatellite.png",
|
|
||||||
type: "mapbox",
|
|
||||||
username: "sharealex",
|
|
||||||
styleId: "cly5i21fn00e901prgq643t4r",
|
|
||||||
token:
|
|
||||||
"pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
|
|
||||||
tilesize: 256,
|
|
||||||
scaleFactor: false,
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
map: null,
|
|
||||||
mapLayer: {},
|
|
||||||
chinaUrl: basePathUrl + "lib/geoJson/json/china.json",
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mapLoad(map) {
|
|
||||||
this.map = map;
|
|
||||||
|
|
||||||
map.setSceneOptions({
|
|
||||||
cameraController: {
|
|
||||||
// enableZoom: false,
|
|
||||||
// enableTranslate: false,
|
|
||||||
// enableRotate: false,
|
|
||||||
// enableTilt: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
this.mapLayer.china = new mars3d.layer.GraphicLayer({
|
|
||||||
zIndex: 10,
|
|
||||||
});
|
|
||||||
map.addLayer(this.mapLayer.china);
|
|
||||||
|
|
||||||
//加载中国各个县
|
|
||||||
this.initChina();
|
|
||||||
},
|
|
||||||
|
|
||||||
initChina() {
|
|
||||||
mars3d.Util.fetchJson({ url: this.chinaUrl }).then((res) => {
|
|
||||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
|
||||||
|
|
||||||
arr.map((item, index) => {
|
|
||||||
this.cityAttr[item.attr.name] = item.attr;
|
|
||||||
const polygonEntity = new mars3d.graphic.PolygonEntity({
|
|
||||||
positions: item.positions,
|
|
||||||
style: {
|
|
||||||
fill: true,
|
|
||||||
lastMaterialType: "Image",
|
|
||||||
materialOptions: {
|
|
||||||
materialType: "Image",
|
|
||||||
image: require("../assets/images/map-bg.jpg"),
|
|
||||||
opacity: 1,
|
|
||||||
repeat_x: 1,
|
|
||||||
repeat_y: 1,
|
|
||||||
transparent: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
materialType: "Image",
|
|
||||||
|
|
||||||
opacity: 1,
|
|
||||||
outline: true,
|
|
||||||
outlineWidth: 1.5,
|
|
||||||
outlineColor: "#00BEFF",
|
|
||||||
setHeight: 1000000,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const wall = new mars3d.graphic.WallPrimitive({
|
|
||||||
positions: item.positions,
|
|
||||||
style: {
|
|
||||||
setHeight: -20000,
|
|
||||||
diffHeight: 1000000, // 墙高
|
|
||||||
width: 15,
|
|
||||||
materialType: mars3d.MaterialType.Image2,
|
|
||||||
materialOptions: {
|
|
||||||
image: require("../assets/images/fence-top.png"),
|
|
||||||
color: "#0064F8",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
this.mapLayer.china.addGraphic(polygonEntity);
|
|
||||||
this.mapLayer.china.addGraphic(wall);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.createEchartsLayer();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
async createEchartsLayer() {
|
|
||||||
const options = await this.getEchartsOption();
|
|
||||||
const echartsLayer = new mars3d.layer.EchartsLayer(options);
|
|
||||||
this.map.addLayer(echartsLayer);
|
|
||||||
// 图表自适应
|
|
||||||
window.addEventListener("resize", function () {
|
|
||||||
echartsLayer.resize();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
async getEchartsOption() {
|
|
||||||
let res = await getProvince();
|
|
||||||
|
|
||||||
this.total = res.data.length;
|
|
||||||
|
|
||||||
const items = res.data.map((item, index) => {
|
|
||||||
if (index == 0) {
|
|
||||||
item = {
|
|
||||||
level: 1,
|
|
||||||
name: item.city,
|
|
||||||
label: item.city,
|
|
||||||
value: this.cityAttr[item.city].center,
|
|
||||||
symbol: "",
|
|
||||||
symbolSize: [65, 65],
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
item = {
|
|
||||||
level: 2,
|
|
||||||
symbol: "",
|
|
||||||
name: item.city,
|
|
||||||
label: item.city,
|
|
||||||
category: 0,
|
|
||||||
active: true,
|
|
||||||
speed: 6,
|
|
||||||
value: this.cityAttr[item.city].center,
|
|
||||||
belong: res.data[0].city,
|
|
||||||
symbolSize: [40, 40],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
|
|
||||||
// const items = [
|
|
||||||
// {
|
|
||||||
// level: 1,
|
|
||||||
// name: "江苏",
|
|
||||||
// label: "jiangsu",
|
|
||||||
// value: [118.767413, 32.041544],
|
|
||||||
// symbol: "",
|
|
||||||
// symbolSize: [30, 30],
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// level: 2,
|
|
||||||
// symbol: "",
|
|
||||||
// name: "安徽",
|
|
||||||
// label: "anhui",
|
|
||||||
// category: 0,
|
|
||||||
// active: true,
|
|
||||||
// speed: 6,
|
|
||||||
// value: [117.283042, 31.86119],
|
|
||||||
// belong: "江苏",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// level: 2,
|
|
||||||
// symbol: "",
|
|
||||||
// name: "浙江",
|
|
||||||
// category: 0,
|
|
||||||
// active: true,
|
|
||||||
// speed: 6,
|
|
||||||
// value: [120.153576, 30.287459],
|
|
||||||
// belong: "江苏",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// level: 2,
|
|
||||||
// symbol: "",
|
|
||||||
// name: "云南",
|
|
||||||
// category: 0,
|
|
||||||
// active: true,
|
|
||||||
// speed: 6,
|
|
||||||
// value: [102.712251, 25.040609],
|
|
||||||
// belong: "江苏",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// level: 2,
|
|
||||||
// symbol: "",
|
|
||||||
// name: "青海",
|
|
||||||
// category: 0,
|
|
||||||
// active: true,
|
|
||||||
// speed: 6,
|
|
||||||
// value: [101.778916, 36.623178],
|
|
||||||
// belong: "江苏",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// level: 2,
|
|
||||||
// symbol: "",
|
|
||||||
// name: "内蒙古自治区",
|
|
||||||
// category: 0,
|
|
||||||
// active: true,
|
|
||||||
// speed: 6,
|
|
||||||
// value: [111.670801, 40.818311],
|
|
||||||
// belong: "江苏",
|
|
||||||
// },
|
|
||||||
// ];
|
|
||||||
|
|
||||||
const lineColor = ["#fff", "#7BF7AD", "#00fcff"];
|
|
||||||
|
|
||||||
// 城市点位图标
|
|
||||||
const symbolList = ["image://" + point1, "image://" + point2];
|
|
||||||
|
|
||||||
// 线上的动态运动点图标
|
|
||||||
const pointSymbol = ["image://" + linePoint1, "image://" + linePoint2];
|
|
||||||
|
|
||||||
// level = 1的地点添加图标
|
|
||||||
items.forEach((el) => {
|
|
||||||
el.symbol = symbolList[el.level - 1];
|
|
||||||
});
|
|
||||||
|
|
||||||
const dataArr = [[], [], []];
|
|
||||||
items.forEach((el) => {
|
|
||||||
if (el.belong) {
|
|
||||||
items.forEach((element) => {
|
|
||||||
if (el.belong === element.name) {
|
|
||||||
console.log(dataArr[el.level - 1]);
|
|
||||||
dataArr[el.level - 1].push([
|
|
||||||
{
|
|
||||||
coord: element.value,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
coord: el.value,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const seriesOne = [
|
|
||||||
{
|
|
||||||
type: "effectScatter",
|
|
||||||
layout: "none",
|
|
||||||
showEffectOn: "emphasis",
|
|
||||||
// coordinateSystem: "cartesian2d",
|
|
||||||
coordinateSystem: "mars3dMap",
|
|
||||||
symbolSize: [20, 20],
|
|
||||||
symbolOffset: [0, -10],
|
|
||||||
zlevel: 3,
|
|
||||||
circular: {
|
|
||||||
rotateLabel: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true,
|
|
||||||
position: "bottom",
|
|
||||||
formatter: function (e) {
|
|
||||||
return e.data.level == 1 ? "" : e.name;
|
|
||||||
},
|
|
||||||
fontSize: 12,
|
|
||||||
color: "#fff",
|
|
||||||
textBorderColor: "#2aa4e8",
|
|
||||||
offset: [0, 0],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
shadowColor: "none",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: items,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
//飞线
|
|
||||||
const lineSeries = [];
|
|
||||||
dataArr.forEach((el, index) => {
|
|
||||||
lineSeries.push({
|
|
||||||
name: "",
|
|
||||||
type: "lines",
|
|
||||||
// coordinateSystem: "cartesian2d",
|
|
||||||
coordinateSystem: "mars3dMap",
|
|
||||||
zlevel: 1,
|
|
||||||
effect: {
|
|
||||||
show: true,
|
|
||||||
smooth: false,
|
|
||||||
trailLength: 0,
|
|
||||||
symbol: pointSymbol[index],
|
|
||||||
symbolSize: [10, 30],
|
|
||||||
period: 4,
|
|
||||||
},
|
|
||||||
|
|
||||||
lineStyle: {
|
|
||||||
width: 2,
|
|
||||||
color: lineColor[index],
|
|
||||||
curveness: -0.2,
|
|
||||||
},
|
|
||||||
data: el,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const seriesData = seriesOne.concat(lineSeries);
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
animation: false,
|
|
||||||
// backgroundColor: '#000',
|
|
||||||
fixedHeight: 900009,
|
|
||||||
series: seriesData,
|
|
||||||
};
|
|
||||||
return option;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
MarsMap,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.extend-box {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 103px;
|
|
||||||
z-index: 60;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
.sub-title {
|
|
||||||
width: 200px;
|
|
||||||
height: 38px;
|
|
||||||
background: url("../assets/images/extend.png");
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.data-total {
|
|
||||||
font-size: 40px;
|
|
||||||
color: #ffffff;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
background-image: linear-gradient(0deg, #00e5ff 0%, #d8d8d8 100%);
|
|
||||||
-webkit-background-clip: text; /* 使用-webkit-前缀兼容WebKit内核浏览器 */
|
|
||||||
background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue