You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
480 lines
15 KiB
480 lines
15 KiB
<template>
|
|
<div class="g-cnt">
|
|
<cpt-card isFullScreen>
|
|
<div class="m-map">
|
|
<div id="map"></div>
|
|
</div>
|
|
</cpt-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestPost } from "@/js/dai/request";
|
|
import cptCard from "@/views/modules/visual/cpts/card";
|
|
import cptTb from "@/views/modules/visual/cpts/tb";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import dateFormat from "dai-js/tools/dateFormat";
|
|
import {
|
|
Scene,
|
|
PointLayer,
|
|
PolygonLayer,
|
|
LineLayer,
|
|
CityBuildingLayer,
|
|
RasterLayer,
|
|
} from "@antv/l7";
|
|
import { GaodeMap, Map } from "@antv/l7-maps";
|
|
import { DrawEvent, DrawPolygon } from "@antv/l7-draw";
|
|
import { spliceIntoChunks } from "@/utils/index";
|
|
|
|
let scene;
|
|
|
|
export default {
|
|
name: "l7",
|
|
data() {
|
|
return {
|
|
srcMapData: [],
|
|
dotData: [],
|
|
iconUrlArray: {
|
|
anzhibangjiao: require("@/assets/img/shuju/fiveLayer/anzhibangjiao.png"),
|
|
buliangqingshaonian: require("@/assets/img/shuju/fiveLayer/buliangqingshaonian.png"),
|
|
shequjiaozheng: require("@/assets/img/shuju/fiveLayer/shequjiaozheng.png"),
|
|
resi_xfry: require("@/assets/img/shuju/fiveLayer/resi_xfry.png"),
|
|
xidurenyuan: require("@/assets/img/shuju/fiveLayer/xidurenyuan.png"),
|
|
xiejiaorenyuan: require("@/assets/img/shuju/fiveLayer/xiejiaorenyuan.png"),
|
|
zhaoshizhaohuojingshenbing: require("@/assets/img/shuju/fiveLayer/zhaoshizhaohuojingshenbing.png"),
|
|
|
|
yjdw: require("@/assets/img/shuju/fiveLayer/yjdw.png"),
|
|
sr_gy: require("@/assets/img/shuju/fiveLayer/sr_gy.png"),
|
|
sr_gc: require("@/assets/img/shuju/fiveLayer/sr_gc.png"),
|
|
whdw: require("@/assets/img/shuju/fiveLayer/whdw.png"),
|
|
sr_ggld: require("@/assets/img/shuju/fiveLayer/sr_ggld.png"),
|
|
lwh: require("@/assets/img/shuju/fiveLayer/lwh.png"),
|
|
sr_tyc: require("@/assets/img/shuju/fiveLayer/sr_tyc.png"),
|
|
lyjlb: require("@/assets/img/shuju/fiveLayer/lyjlb.png"),
|
|
sr_yjy: require("@/assets/img/shuju/fiveLayer/sr_yjy.png"),
|
|
zaxld: require("@/assets/img/shuju/fiveLayer/zaxld.png"),
|
|
other: require("@/assets/img/shuju/fiveLayer/other.png"),
|
|
sr_jzz: require("@/assets/img/shuju/fiveLayer/sr_jzz.png"),
|
|
sr_djc: require("@/assets/img/shuju/fiveLayer/sr_djc.png"),
|
|
sr_rfqck: require("@/assets/img/shuju/fiveLayer/sr_rfqck.png"),
|
|
ep_lg: require("@/assets/img/shuju/fiveLayer/ep_lg.png"),
|
|
sr_xfz: require("@/assets/img/shuju/fiveLayer/sr_xfz.png"),
|
|
pu_jgzsbm: require("@/assets/img/shuju/fiveLayer/pu_jgzsbm.png"),
|
|
ep_qt: require("@/assets/img/shuju/fiveLayer/ep_qt.png"),
|
|
|
|
gr_czw: require("@/assets/img/shuju/fiveLayer/gr_czw.png"),
|
|
ep_cycs: require("@/assets/img/shuju/fiveLayer/ep_cycs.png"),
|
|
dc_jyz: require("@/assets/img/shuju/fiveLayer/dc_jyz.png"),
|
|
ep_gwylcs: require("@/assets/img/shuju/fiveLayer/ep_gwylcs.png"),
|
|
dc_jqz: require("@/assets/img/shuju/fiveLayer/dc_jqz.png"),
|
|
dc_whpdw: require("@/assets/img/shuju/fiveLayer/dc_whpdw.png"),
|
|
ep_wb: require("@/assets/img/shuju/fiveLayer/ep_wb.png"),
|
|
ep_mrxycs: require("@/assets/img/shuju/fiveLayer/ep_mrxycs.png"),
|
|
dc_yqhjz: require("@/assets/img/shuju/fiveLayer/dc_yqhjz.png"),
|
|
dc_jzgd: require("@/assets/img/shuju/fiveLayer/dc_jzgd.png"),
|
|
ep_scjgqy: require("@/assets/img/shuju/fiveLayer/ep_scjgqy.png"),
|
|
|
|
cm_nmsc: require("@/assets/img/shuju/fiveLayer/cm_nmsc.png"),
|
|
event_tdnd: require("@/assets/img/shuju/fiveLayer/event_tdnd.png"),
|
|
cm_bhsc: require("@/assets/img/shuju/fiveLayer/cm_bhsc.png"),
|
|
cm_cjsc: require("@/assets/img/shuju/fiveLayer/cm_cjsc.png"),
|
|
ep_lssd: require("@/assets/img/shuju/fiveLayer/ep_lssd.png"),
|
|
|
|
resi_szry: require("@/assets/img/shuju/fiveLayer/resi_szry.png"),
|
|
ps_lyy: require("@/assets/img/shuju/fiveLayer/ps_lyy.png"),
|
|
resi_snry: require("@/assets/img/shuju/fiveLayer/resi_snry.png"),
|
|
ps_mzb: require("@/assets/img/shuju/fiveLayer/ps_mzb.png"),
|
|
ps_zs: require("@/assets/img/shuju/fiveLayer/ps_zs.png"),
|
|
ps_wss: require("@/assets/img/shuju/fiveLayer/ps_wss.png"),
|
|
ps_jjz: require("@/assets/img/shuju/fiveLayer/ps_jjz.png"),
|
|
ep_xx: require("@/assets/img/shuju/fiveLayer/ep_xx.png"),
|
|
ep_yy: require("@/assets/img/shuju/fiveLayer/ep_yy.png"),
|
|
},
|
|
};
|
|
},
|
|
|
|
props: {},
|
|
|
|
computed: {},
|
|
|
|
components: {
|
|
cptCard,
|
|
cptTb,
|
|
},
|
|
|
|
watch: {},
|
|
|
|
async mounted() {
|
|
await this.getMapData();
|
|
this.iniMap();
|
|
await this.getDotData();
|
|
this.updateMap();
|
|
},
|
|
|
|
methods: {
|
|
iniMap() {
|
|
const { srcMapData } = this;
|
|
scene = new Scene({
|
|
id: "map",
|
|
map: new GaodeMap({
|
|
pitch: 45,
|
|
style: "dark",
|
|
// style: "light",
|
|
center: [srcMapData.longitude, srcMapData.latitude],
|
|
// token: "xxxx - token",
|
|
zoom: 18,
|
|
minZoom: 10,
|
|
}),
|
|
});
|
|
|
|
scene.on("loaded", () => {
|
|
const polygon = [
|
|
...srcMapData.children
|
|
.filter((item) => item.coordinates.length > 0)
|
|
.map((item) => ({
|
|
type: "Feature",
|
|
properties: {
|
|
name: item.name,
|
|
center: [item.longitude, item.latitude],
|
|
},
|
|
geometry: {
|
|
type: "Polygon",
|
|
coordinates: [
|
|
spliceIntoChunks(
|
|
item.coordinates.split(",").map((item) => parseFloat(item)),
|
|
2
|
|
),
|
|
],
|
|
},
|
|
})),
|
|
];
|
|
console.log(polygon);
|
|
|
|
const polygonLayer = new PolygonLayer({
|
|
autoFit: true,
|
|
})
|
|
// .size(1000)
|
|
.source({ type: "FeatureCollection", features: polygon })
|
|
.color("name", [
|
|
"rgba(255, 100, 60, 0.5)",
|
|
"rgba(43, 231, 253, 0.35)",
|
|
"rgba(255, 255, 50, 0.35)",
|
|
])
|
|
// .shape("extrude")
|
|
.shape("fill")
|
|
.style({
|
|
opacityLinear: {
|
|
enable: true, // true - false
|
|
dir: "out", // in - out
|
|
},
|
|
opacity: 1,
|
|
// heightfixed: true,
|
|
// pickLight: true,
|
|
// raisingHeight: 1000,
|
|
// sourceColor: "#333",
|
|
// targetColor: "rgba(255,255,255, 0.5)",
|
|
});
|
|
|
|
scene.addLayer(polygonLayer);
|
|
|
|
const linelayer = new LineLayer({
|
|
zIndex: 2,
|
|
name: "line2",
|
|
})
|
|
.source({ type: "FeatureCollection", features: polygon })
|
|
.shape("line")
|
|
.size(1)
|
|
.color("name", [
|
|
"rgba(255, 50, 50, 0.7)",
|
|
"rgba(43, 231, 253, 0.7)",
|
|
"rgba(255, 255, 50, 0.7)",
|
|
])
|
|
.style({
|
|
opacity: 1,
|
|
})
|
|
.animate({
|
|
interval: 1, // 间隔
|
|
duration: 2, // 持续时间，延时
|
|
trailLength: 2, // 流线长度
|
|
});
|
|
scene.addLayer(linelayer);
|
|
|
|
const circleLayer = new PolygonLayer({
|
|
zIndex: 3,
|
|
})
|
|
.source({ type: "FeatureCollection", features: polygon })
|
|
.color("name", [
|
|
"rgba(255, 50, 50, 0.99)",
|
|
"rgba(43, 231, 253, 0.99)",
|
|
"rgba(255, 255, 50, 0.99)",
|
|
])
|
|
.shape("circle")
|
|
.active(true)
|
|
.animate(true)
|
|
.size(50)
|
|
.style({
|
|
offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
|
|
opacity: 1,
|
|
});
|
|
scene.addLayer(circleLayer);
|
|
|
|
scene.addImage(
|
|
"pos-red",
|
|
require("@/assets/img/shuju/grid/pos-red.png")
|
|
);
|
|
scene.addImage(
|
|
"pos-green",
|
|
require("@/assets/img/shuju/grid/pos-green.png")
|
|
);
|
|
scene.addImage(
|
|
"pos-yellow",
|
|
require("@/assets/img/shuju/grid/pos-yellow.png")
|
|
);
|
|
const posLayer = new PolygonLayer({
|
|
zIndex: 4,
|
|
})
|
|
.source({ type: "FeatureCollection", features: polygon })
|
|
.shape("name", ["pos-red", "pos-green", "pos-yellow"])
|
|
.size(14)
|
|
.style({
|
|
offsets: [0, 10], // 文本相对锚点的偏移量 [水平, 垂直]
|
|
// rotation: 60,
|
|
layerType: "fillImage",
|
|
});
|
|
scene.addLayer(posLayer);
|
|
|
|
const textLayer = new PolygonLayer({
|
|
zIndex: 10,
|
|
})
|
|
.source({ type: "FeatureCollection", features: polygon })
|
|
.color("name", [
|
|
"rgba(255, 100, 60, 0.99)",
|
|
"rgba(43, 231, 253, 0.99)",
|
|
"rgba(255, 255, 50, 0.99)",
|
|
])
|
|
.shape("name", "text")
|
|
.size(16)
|
|
.style({
|
|
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
|
textOffset: [0, 45], // 文本相对锚点的偏移量 [水平, 垂直]
|
|
spacing: 2, // 字符间距
|
|
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
|
stroke: "#ffffff", // 描边颜色
|
|
strokeWidth: 0.3, // 描边宽度
|
|
strokeOpacity: 1.0,
|
|
})
|
|
.active(true);
|
|
scene.addLayer(textLayer);
|
|
|
|
textLayer.on("mousemove", (e) => {
|
|
textLayer.style({
|
|
raisingHeight: 0,
|
|
});
|
|
});
|
|
|
|
textLayer.on("click", (e) => {
|
|
console.log(e.feature.properties.name);
|
|
});
|
|
|
|
textLayer.on("unmousemove", (e) => {
|
|
polygonLayer.style({
|
|
raisingHeight: 0,
|
|
});
|
|
});
|
|
|
|
fetch(
|
|
"https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json"
|
|
).then(async (res) => {
|
|
const pointLayer = new CityBuildingLayer({
|
|
autoFit: true,
|
|
});
|
|
pointLayer
|
|
.source(await res.json())
|
|
.size("floor", [0, 500])
|
|
.color("rgba(242,246,250,1.0)")
|
|
.animate({
|
|
enable: true,
|
|
})
|
|
.active({
|
|
color: "#0ff",
|
|
mix: 0.5,
|
|
})
|
|
.style({
|
|
opacity: 0.7,
|
|
baseColor: "rgb(16, 16, 16)",
|
|
windowColor: "rgb(30, 60, 89)",
|
|
brightColor: "rgb(255, 176, 38)",
|
|
sweep: {
|
|
enable: true,
|
|
sweepRadius: 2,
|
|
sweepColor: "#1990FF",
|
|
sweepSpeed: 0.5,
|
|
sweepCenter: [120.145319, 30.238915],
|
|
},
|
|
});
|
|
// scene.addLayer(pointLayer);
|
|
});
|
|
|
|
// const textFeatures = [
|
|
// ...srcMapData.children.map((item) => ({
|
|
// type: "Feature",
|
|
// properties: {
|
|
// name: item.name,
|
|
// },
|
|
// geometry: {
|
|
// type: "Point",
|
|
// coordinates: [item.longitude, item.latitude],
|
|
// },
|
|
// })),
|
|
// ];
|
|
|
|
// console.log(textFeatures);
|
|
|
|
// let textLayer = new PointLayer({
|
|
// // autoFit: true
|
|
// })
|
|
// .source({ type: "FeatureCollection", features: textFeatures })
|
|
// .shape("name", "text")
|
|
// .size(24)
|
|
// .color("#0ff")
|
|
// .style({
|
|
// textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
|
// textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
|
|
// spacing: 2, // 字符间距
|
|
// padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
|
// stroke: "#ffffff", // 描边颜色
|
|
// strokeWidth: 0.3, // 描边宽度
|
|
// strokeOpacity: 1.0,
|
|
// });
|
|
|
|
// scene.addLayer(textLayer);
|
|
});
|
|
},
|
|
|
|
updateMap() {
|
|
const { iconUrlArray, dotData } = this;
|
|
if (!dotData || dotData.length == 0) return;
|
|
if (!scene) return;
|
|
|
|
Object.keys(iconUrlArray).forEach((ki) => {
|
|
scene.addImage(ki, iconUrlArray[ki]);
|
|
console.log(ki);
|
|
});
|
|
|
|
const dotFeatures = [
|
|
...dotData.map((item) => ({
|
|
type: "Feature",
|
|
properties: {
|
|
categoryKey: item.categoryKey,
|
|
},
|
|
geometry: {
|
|
type: "Point",
|
|
coordinates: [
|
|
parseFloat(item.longitude),
|
|
parseFloat(item.latitude),
|
|
],
|
|
},
|
|
})),
|
|
];
|
|
|
|
console.log(dotFeatures);
|
|
|
|
const dotLayer = new PointLayer()
|
|
.source({ type: "FeatureCollection", features: dotFeatures })
|
|
.shape("categoryKey", (categoryKey) => {
|
|
return categoryKey;
|
|
})
|
|
.size(8)
|
|
.style({
|
|
rotation: 0,
|
|
layerType: "fillImage",
|
|
});
|
|
scene.addLayer(dotLayer);
|
|
},
|
|
|
|
async getMapData() {
|
|
const { data, code, msg } = await requestPost("/gov/org/agency/maporg", {
|
|
level: "",
|
|
orgId: "",
|
|
});
|
|
if (msg === "success" && code === 0) {
|
|
this.srcMapData = data;
|
|
}
|
|
},
|
|
|
|
async getDotData() {
|
|
const { data, code, msg } = await requestPost(
|
|
"/data/aggregator/coverage/dataList",
|
|
{
|
|
coverageTypes: ["zhzl", "yjcl", "aqsc", "csgl"],
|
|
categoryKeys: [
|
|
"resi_xfry",
|
|
"anzhibangjiao",
|
|
"xiejiaorenyuan",
|
|
"buliangqingshaonian",
|
|
"shequjiaozheng",
|
|
"zhaoshizhaohuojingshenbing",
|
|
"xidurenyuan",
|
|
"yjdw",
|
|
"whdw",
|
|
"lwh",
|
|
"lyjlb",
|
|
"zaxld",
|
|
"other",
|
|
"ep_lg",
|
|
"pu_jgzsbm",
|
|
"sr_gy",
|
|
"sr_gc",
|
|
"sr_ggld",
|
|
"sr_tyc",
|
|
"sr_yjy",
|
|
"sr_jzz",
|
|
"sr_djc",
|
|
"sr_rfqck",
|
|
"sr_xfz",
|
|
"dc_jyz",
|
|
"dc_jqz",
|
|
"dc_whpdw",
|
|
"dc_yqhjz",
|
|
"dc_jzgd",
|
|
"ep_cycs",
|
|
"ep_gwylcs",
|
|
"ep_wb",
|
|
"ep_mrxycs",
|
|
"ep_scjgqy",
|
|
"ep_qt",
|
|
"gr_czw",
|
|
"cm_nmsc",
|
|
"cm_bhsc",
|
|
"cm_cjsc",
|
|
"ep_lssd",
|
|
"event_tdnd",
|
|
],
|
|
search: "",
|
|
isPage: false,
|
|
}
|
|
);
|
|
if (msg === "success" && code === 0) {
|
|
this.dotData = data.list;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.g-cnt {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.m-map {
|
|
position: relative;
|
|
padding: 20px 0;
|
|
height: 100%;
|
|
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|