From 480dda90912926b1f6fbf971f1be8fe19c2b54a3 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期一, 24 三月 2025 14:27:08 +0800
Subject: [PATCH] Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/chongzhou-screen
---
src/components/datascreen/map.vue | 361 +++++++++++++++++++++++++++++---------------------
1 files changed, 208 insertions(+), 153 deletions(-)
diff --git a/src/components/datascreen/map.vue b/src/components/datascreen/map.vue
index 890aedc..dd38884 100644
--- a/src/components/datascreen/map.vue
+++ b/src/components/datascreen/map.vue
@@ -5,51 +5,43 @@
</template>
<script>
-// import "echarts-gl";
+import mapBg from "@/assets/map/mapBg.png";
+import tooltipBg from "@/assets/map/tooltipBg.png";
+import tooltipBlue from "@/assets/map/tooltipBlue.png";
+import tooltipOrange from "@/assets/map/tooltipOrange.png";
+
export default {
name: 'Map',
+ props: {
+ data: {
+ type: Array,
+ default: () => []
+ }
+ },
data() {
return {
- mapBg: null // 地图背景图片
+ mapBg: null, // 地图背景图片
+ // 地图标记点数据
+ mapPoints: [
+ { name: "点位1", value: [103.6672, 30.6333], type: "blue", symbolSize: 32 },
+ { name: "点位2", value: [103.6772, 30.6533], type: "orange", symbolSize: 32 },
+ { name: "点位3", value: [103.6572, 30.6433], type: "blue", symbolSize: 32 },
+ { name: "点位4", value: [103.6872, 30.6633], type: "orange", symbolSize: 32 },
+ { name: "点位5", value: [103.6472, 30.6233], type: "blue", symbolSize: 32 }
+ ]
+ }
+ },
+ created() {
+ if (Object.keys(this.data).length > 0) {
+ console.log(this.data);
+ // this.mapPoints = this.data.mapResponses;
}
},
mounted() {
- this.initMapBg();
this.initMap();
},
methods: {
- // 初始化地图背景图片
- initMapBg() {
- // 创建一个 canvas 来生成背景图案
- const canvas = document.createElement('canvas');
- const ctx = canvas.getContext('2d');
- canvas.width = 8;
- canvas.height = 8;
-
- // 设置渐变
- const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
- gradient.addColorStop(0, 'rgba(0,24,106,0.8)');
- gradient.addColorStop(1, 'rgba(0,24,106,0.9)');
-
- // 绘制背景
- ctx.fillStyle = gradient;
- ctx.fillRect(0, 0, canvas.width, canvas.height);
-
- // 添加网格效果
- ctx.strokeStyle = 'rgba(0,234,255,0.1)';
- ctx.lineWidth = 0.5;
- ctx.beginPath();
- ctx.moveTo(0, canvas.height / 2);
- ctx.lineTo(canvas.width, canvas.height / 2);
- ctx.moveTo(canvas.width / 2, 0);
- ctx.lineTo(canvas.width / 2, canvas.height);
- ctx.stroke();
-
- // 保存为base64图片
- this.mapBg = canvas.toDataURL();
- },
initMap() {
- // json地图数据-需要根据需求下载引入对应名称文件
let mapJson = require("@/utils/map/chongzhou.json");
let myChart = this.$echarts.init(this.$refs.myMap);
myChart.showLoading();
@@ -58,153 +50,216 @@
let option = {
tooltip: {
- trigger: "none", // 关闭提示框
+ show: false
},
- // 设置多层级地图实现立体效果
geo: [
- {
- map: "myMap", // 使用注册的地图名称
- aspectScale: 1, // 地图长宽比
- zoom: 1, // 地图缩放比例
- top: "15%", // 距离容器顶部距离
- bottom: "10%", // 距离容器底部距离
- roam: false, // 禁用地图平移缩放
- z: 5, // 图层层级，数值大的在上层
- itemStyle: {
- areaColor: "transparent", // 区域透明
- borderColor: "#00eaff", // 边框颜色
- borderWidth: 1 // 边框宽度
- },
- select: {
- disabled: true // 禁用选中状态
- },
- tooltip: {
- show: false, // 关闭提示框
- },
- },
- {
- map: "myMap", // 第二层地图
- aspectScale: 1,
- zoom: 1,
- top: "16%", // 比第一层低一点
- bottom: "9%",
- roam: false,
- z: 4, // 层级比第一层低
- itemStyle: {
- areaColor: "transparent",
- borderColor: "#00eaff",
- borderWidth: 1
- },
- select: {
- disabled: true
- },
- tooltip: {
- show: false,
- },
- },
- {
- map: "myMap", // 第三层地图
- aspectScale: 1,
- zoom: 1,
- top: "17%", // 最底层
- bottom: "8%",
- roam: false,
- z: 3, // 最底层层级
- itemStyle: {
- areaColor: "transparent",
- borderColor: "#00eaff",
- borderWidth: 1
- },
- select: {
- disabled: true
- },
- tooltip: {
- show: false,
- },
- },
+ this.getGeoLayers(1),
+ this.getGeoLayers(2),
+ this.getGeoLayers(3)
],
-
series: [
{
- type: "map", // 地图类型
- name: "地图", // 系列名称
- selectedMode: false, // 禁用选中模式
- aspectScale: 1, // 长宽比
- zoom: 1, // 缩放比例
- roam: false, // 禁用平移缩放
- regionHeight: 2, // 三维地图的厚度
- map: "myMap", // 使用的地图
- z: 10, // 最顶层
- top: "14%", // 主图层位置
+ type: "map",
+ name: "地图",
+ selectedMode: false,
+ aspectScale: 1,
+ zoom: 1,
+ roam: false,
+ regionHeight: 2,
+ map: "myMap",
+ z: 10,
+ top: "14%",
bottom: "11%",
- viewControl: { // 视角控制
- distance: 115, // 视角距离主体的距离
- alpha: 40, // 视角绕 x 轴，即上下旋转的角度
- rotateSensitivity: [0, 0], // 禁用旋转
- beta: 0, // 视角绕 y 轴，即左右旋转的角度
+ viewControl: {
+ distance: 115,
+ alpha: 40,
+ rotateSensitivity: [0, 0],
+ beta: 0
},
- label: { // 标签样式
- normal: {
- show: true, // 显示标签
- textStyle: {
- color: "#fff", // 标签文字颜色
- fontSize: 16, // 文字大小
- fontWeight: "normal", // 文字粗细
- textShadowColor: "rgba(0,234,255,0.8)", // 文字阴影颜色
- textShadowBlur: 10, // 文字阴影模糊
- opacity: 1, // 文字透明度
- },
- },
- emphasis: {
- color: "#fff", // 悬浮时文字颜色
- },
+ label: {
+ show: false,
+ textStyle: {
+ color: "#fff",
+ fontSize: 10,
+ fontWeight: "normal",
+ opacity: 1
+ }
},
- itemStyle: { // 主图层样式
+ itemStyle: {
areaColor: {
- image: this.mapBg, // 使用背景图片
- repeat: 'repeat' // 平铺模式
+ type: 'pattern',
+ image: mapBg,
+ repeat: 'no-repeat',
+ imageSize: '100%',
+ patternSize: [815, 534],
+ patternPosition: [0, 0]
},
- borderColor: "#00eaff", // 边框颜色
- borderWidth: 2, // 边框宽度
- borderType: 'solid',
- shadowColor: "#00eaff", // 阴影颜色
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 20,
- opacity: 1
+ borderColor: "#324D6B",
+ borderWidth: 2,
},
emphasis: {
- disabled: true // 禁用悬浮效果
+ disabled: false,
+ label: {
+ show: false,
+ textStyle: {
+ color: "#fff",
+ fontSize: 10,
+ fontWeight: "normal",
+ opacity: 1
+ }
+ },
+ itemStyle: {
+ areaColor: {
+ type: 'pattern',
+ image: this.mapBg,
+ repeat: 'no-repeat',
+ imageSize: '100%',
+ patternSize: [815, 534],
+ patternPosition: [0, 0]
+ },
+ borderColor: "#00eaff",
+ borderWidth: 2,
+ shadowColor: "#00eaff",
+ shadowBlur: 25,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ opacity: 1
+ }
},
select: {
disabled: true
},
- light: { // 光照相关的设置
- main: { // 主光源
- color: "#00eaff", // 光照颜色
- intensity: 1.2, // 增加光照强度
- shadow: true, // 是否显示阴影
- shadowQuality: "high", // 阴影质量
+ light: {
+ main: {
+ color: "#00eaff",
+ intensity: 1.2,
+ shadow: true,
+ shadowQuality: 'ultra',
alpha: 40,
- beta: 0,
+ beta: 0
},
- ambient: { // 环境光
- color: "#00eaff", // 环境光颜色
- intensity: 0.3, // 减弱环境光以突出主光源
- },
+ ambient: {
+ color: "#00eaff",
+ intensity: 0.3
+ }
},
+ tooltip: {
+ show: false
+ },
+ silent: false // 禁用鼠标事件
},
- ],
+ this.getMarkerSeries("blue"),
+ this.getMarkerSeries("orange")
+ ]
};
myChart.setOption(option);
- }
+ },
+ // 生成标记点配置的方法
+ getMarkerSeries(type) {
+ return {
+ name: type === "blue" ? "蓝色标记" : "橙色标记",
+ type: "scatter",
+ coordinateSystem: "geo",
+ geoIndex: 0,
+ data: this.mapPoints.filter(point => point.type === type),
+ symbol: `image://${type === "blue" ? tooltipBlue : tooltipOrange}`,
+ symbolSize: [20, 30],
+ symbolOffset: [0, -15],
+ z: 20,
+ tooltip: {
+ show: true,
+ trigger: 'item',
+ backgroundColor: 'transparent',
+ borderWidth: 0,
+ padding: [0, 0, 0, 0],
+ position: function (point) {
+ return [point[0] - 100, point[1] - 160];
+ },
+ formatter: function (params) {
+ return `<div style="
+ background: url(${tooltipBg}) no-repeat center center;
+ background-size: 100% 100%;
+ width: 211px;
+ padding-bottom: 24px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ ">
+ <div style="color: #fff; font-size: 16px; margin: 21px 0;font-weight: bold;">${params.name}</div>
+ <div style="display: flex; justify-content: space-around; width: 100%;">
+ <div style="text-align: center;">
+ <div style="color: rgba(102, 255, 255, 1); font-size: 20px;margin-bottom: 8px;font-family: 'pangmenzhengdao';">99999</div>
+ <div style="color: #fff; font-size: 12px;">安置户数(户)</div>
+ </div>
+ <div style="text-align: center;">
+ <div style="color: rgba(102, 255, 255, 1); font-size: 20px;margin-bottom: 8px;font-family: 'pangmenzhengdao';">99999</div>
+ <div style="color: #fff; font-size: 12px;">安置人数(人)</div>
+ </div>
+ </div>
+ </div>`;
+ }
+ },
+ label: {
+ show: false
+ },
+ emphasis: {
+ scale: true,
+ scaleSize: 1.2,
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: type === "blue" ? '#00eaff' : '#ff8e3a'
+ }
+ }
+ };
+ },
+ // 生成geo层级配置的方法
+ getGeoLayers(index) {
+ const layerConfig = {
+ 1: { top: "15%", bottom: "10%", borderColor: "#00A0F5", borderWidth: 1 },
+ 2: { top: "16%", bottom: "9%", borderColor: "#0C93C5", borderWidth: 1 },
+ 3: { top: "17%", bottom: "8%", borderColor: "#0A5C83", borderWidth: 2 }
+ };
+
+ const config = layerConfig[index];
+ return {
+ map: "myMap",
+ aspectScale: 1,
+ zoom: 1,
+ roam: false,
+ top: config.top,
+ bottom: config.bottom,
+ z: index,
+ itemStyle: {
+ areaColor: "transparent",
+ borderColor: config.borderColor,
+ borderWidth: config.borderWidth,
+ ...(index === 3 ? {
+ shadowColor: "#00eaff",
+ shadowBlur: 25,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ opacity: 1
+ } : {})
+ },
+ emphasis: {
+ disabled: true
+ },
+ select: {
+ disabled: true
+ },
+ tooltip: {
+ show: false
+ },
+ silent: true
+ };
+ },
}
}
</script>
<style scoped>
.map-container {
- position: relative;
width: 815px;
height: 534px;
}
--
Gitblit v1.7.1