地图修改
This commit is contained in:
parent
4123bb393f
commit
e3726e36a9
@ -2,21 +2,17 @@
|
||||
<div class="map-center-warp">
|
||||
<!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
|
||||
<div class="map-pos">
|
||||
<custom-echart-maps
|
||||
:chart-data="chartsData.valData"
|
||||
height="100%"
|
||||
width="100%"
|
||||
:option="chartsData.option"
|
||||
:geo="geoData"
|
||||
:name="mapName"
|
||||
@click="mapClick"
|
||||
/>
|
||||
<custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
var aspectScale = 0.8807505292367753;
|
||||
// var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
|
||||
// var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
|
||||
@ -24,7 +20,7 @@ var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
|
||||
const isShow = ref(false);
|
||||
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
|
||||
let geoData = geoJsonData;
|
||||
let mapName = ref('ZJ');
|
||||
let mapName = ref('ZJ' + route.name);
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
title: {
|
||||
@ -102,131 +98,8 @@ const chartsData = reactive({
|
||||
},
|
||||
series: [
|
||||
// 闪烁散点图系列
|
||||
{
|
||||
name: '闪烁散点',
|
||||
type: 'effectScatter', // 使用 effectScatter 类型
|
||||
coordinateSystem: 'geo',
|
||||
data: [
|
||||
// 示例数据点，实际应用中应替换为真实的数据
|
||||
{
|
||||
name: '孟定镇',
|
||||
value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
|
||||
itemStyle: {
|
||||
color: '#FF0000', // 孟定镇的颜色
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '勐永镇',
|
||||
value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
|
||||
itemStyle: {
|
||||
color: '#00FF00', // 勐永镇的颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
symbolSize: function (val) {
|
||||
return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false,
|
||||
},
|
||||
rippleEffect: {
|
||||
period: 4, // 波纹动画周期
|
||||
scale: 3, // 波纹缩放比例
|
||||
brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
|
||||
},
|
||||
hoverAnimation: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
valData: [
|
||||
{
|
||||
map: mapName.value,
|
||||
roam: true,
|
||||
zoom: 0.9,
|
||||
show: true,
|
||||
itemStyle: {
|
||||
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
||||
color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
||||
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
||||
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
||||
borderColor: 'rgba(92, 184, 238, 1)', // 图形描边的颜色。[ default: #333 ]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
distance: 0,
|
||||
color: '#000',
|
||||
padding: [6, 4, 2, 4],
|
||||
borderRadius: 4,
|
||||
backgroundColor: 'rgba(255,255,255,.66)',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#E87813', // 地图初始化区域字体颜色
|
||||
borderWidth: 0,
|
||||
borderColor: '#000',
|
||||
},
|
||||
},
|
||||
// emphasis: {
|
||||
// //高亮状态的效果
|
||||
// label: {
|
||||
// show: true,
|
||||
// color: '#fff',
|
||||
// },
|
||||
// itemStyle: {
|
||||
// // show: false,
|
||||
// areaColor: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 1,
|
||||
// y2: 0,
|
||||
// colorStops: [
|
||||
// { offset: 0, color: '#4bffb4' },
|
||||
// { offset: 1, color: '#4bffb4' },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
// 闪烁散点图系列
|
||||
{
|
||||
name: '闪烁散点',
|
||||
type: 'effectScatter', // 使用 effectScatter 类型
|
||||
coordinateSystem: 'geo',
|
||||
data: [
|
||||
// 示例数据点，实际应用中应替换为真实的数据
|
||||
{
|
||||
name: '孟定镇',
|
||||
value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
|
||||
itemStyle: {
|
||||
color: '#FF0000', // 孟定镇的颜色
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '贺派乡',
|
||||
value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
|
||||
itemStyle: {
|
||||
color: '#00FF00', // 贺派乡的颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
symbolSize: function (val) {
|
||||
return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false,
|
||||
},
|
||||
rippleEffect: {
|
||||
period: 4, // 波纹动画周期
|
||||
scale: 3, // 波纹缩放比例
|
||||
brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
|
||||
},
|
||||
hoverAnimation: false,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const mapClick = (data) => {
|
||||
@ -238,9 +111,7 @@ const infoHide = () => {
|
||||
isShow.value = false;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
console.info('iconUrl', iconUrl);
|
||||
});
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
div {
|
||||
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
const chartRef = ref(null);
|
||||
const { setOptions, getInstance, resize, registerMap, startAutoPlay } = useEcharts(chartRef);
|
||||
const { setOptions, getInstance, resize, regMap, startAutoPlay, onMapClick } = useEcharts(chartRef);
|
||||
const option = reactive({
|
||||
// series: [],
|
||||
});
|
||||
@ -63,25 +63,23 @@ export default {
|
||||
);
|
||||
|
||||
function initCharts() {
|
||||
regMap(props.name, props.geo);
|
||||
if (props.option) {
|
||||
Object.assign(option, cloneDeep(props.option));
|
||||
}
|
||||
// option.series = props.chartData;
|
||||
setOptions(option);
|
||||
|
||||
onMapClick(({ name, data }) => {
|
||||
console.info('onMapClick点击区域:', name);
|
||||
console.info('onMapClick关联数据:', data);
|
||||
emit('click', { name, data });
|
||||
});
|
||||
startAutoPlay({
|
||||
interval: 2000,
|
||||
seriesIndex: 0,
|
||||
showTooltip: true,
|
||||
});
|
||||
registerMap(props.name, props.geo);
|
||||
resize();
|
||||
getInstance()?.off('click', onClick);
|
||||
getInstance()?.on('click', onClick);
|
||||
}
|
||||
|
||||
function onClick(params) {
|
||||
console.info('地图onClick', params);
|
||||
emit('click', params);
|
||||
}
|
||||
|
||||
return { chartRef };
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}"
|
||||
class="title-top-bg"
|
||||
></div>
|
||||
<span class="title-top-content" :style="{ 'text-align': left }">{{ topTitle || '--' }}</span>
|
||||
<span class="title-top-content" :style="{ 'text-align': 'left' }">{{ topTitle || '--' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { unref, nextTick, watch, computed, ref } from 'vue';
|
||||
import { unref, nextTick, watch, computed, ref, markRaw } from 'vue';
|
||||
import { useDebounceFn, tryOnUnmounted } from '@vueuse/core';
|
||||
import { useTimeoutFn } from './useTimeout';
|
||||
import { useEventListener } from './useEventListener';
|
||||
@ -11,6 +11,8 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
const currentIndex = ref(-1);
|
||||
const dataLength = ref(0);
|
||||
|
||||
let mapClickHandler = null;
|
||||
|
||||
// 新增方法 - 启动轮播
|
||||
const startAutoPlay = (options = {}) => {
|
||||
const {
|
||||
@ -60,6 +62,7 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
const getDarkMode = computed(() => {
|
||||
return theme === 'default' ? 'dark' : theme;
|
||||
});
|
||||
|
||||
let chartInstance = null;
|
||||
let resizeFn = resize;
|
||||
const cacheOptions = ref({});
|
||||
@ -89,7 +92,8 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
return;
|
||||
}
|
||||
|
||||
chartInstance = echarts.init(el, t);
|
||||
chartInstance = markRaw(echarts.init(el, t));
|
||||
|
||||
const { removeEvent } = useEventListener({
|
||||
el: window,
|
||||
name: 'resize',
|
||||
@ -105,6 +109,35 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
});
|
||||
}
|
||||
|
||||
function handleMapClick(params) {
|
||||
console.info('handleMapClick', params);
|
||||
// 过滤非地图区域的点击事件
|
||||
if (params.componentType === 'geo3D' || params.componentType === 'geo') {
|
||||
// 获取点击区域信息
|
||||
const mapName = params.name;
|
||||
const regionData = params.data || {};
|
||||
|
||||
// 执行注册的回调函数
|
||||
if (typeof mapClickHandler === 'function') {
|
||||
mapClickHandler({
|
||||
name: mapName,
|
||||
data: regionData,
|
||||
coordinates: params.event?.event?.point,
|
||||
// originalParams: params
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onMapClick(handler) {
|
||||
mapClickHandler = handler;
|
||||
|
||||
// 返回解绑方法
|
||||
return () => {
|
||||
mapClickHandler = null;
|
||||
};
|
||||
}
|
||||
|
||||
function setOptions(options = {}, clear = true) {
|
||||
const mergedOptions = {
|
||||
animation: true,
|
||||
@ -132,6 +165,8 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
clear && chartInstance?.clear();
|
||||
|
||||
chartInstance?.setOption(unref(getOptions));
|
||||
chartInstance.off('click'); // [!code ++]
|
||||
chartInstance.on('click', handleMapClick); // [!code ++]
|
||||
}, 30);
|
||||
});
|
||||
}
|
||||
@ -145,13 +180,17 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
* @param {string} mapName - 地图名称
|
||||
* @param {object} geoJSON - GeoJSON 数据
|
||||
*/
|
||||
function registerMap(mapName, geoJSON) {
|
||||
function regMap(mapName, geoJSON) {
|
||||
if (!mapName || !geoJSON) {
|
||||
console.warn('地图名称或 GeoJSON 数据无效');
|
||||
return;
|
||||
}
|
||||
|
||||
console.info('getMap', echarts.getMap(mapName));
|
||||
if (!echarts.getMap(mapName)) {
|
||||
echarts.registerMap(mapName, geoJSON);
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => getDarkMode.value,
|
||||
@ -167,6 +206,9 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
tryOnUnmounted(() => {
|
||||
stopAutoPlay(); // 清理定时器
|
||||
if (!chartInstance) return;
|
||||
if (chartInstance) {
|
||||
chartInstance.off('click', handleMapClick);
|
||||
}
|
||||
removeResizeFn();
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
@ -184,8 +226,9 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
resize,
|
||||
echarts,
|
||||
getInstance: () => chartInstance,
|
||||
registerMap,
|
||||
regMap,
|
||||
startAutoPlay, // 暴露轮播方法
|
||||
stopAutoPlay,
|
||||
onMapClick,
|
||||
};
|
||||
};
|
||||
|
||||
@ -31,6 +31,7 @@ import {
|
||||
TimelineComponent,
|
||||
CalendarComponent,
|
||||
GraphicComponent,
|
||||
GeoComponent,
|
||||
} from 'echarts/components';
|
||||
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
@ -61,6 +62,7 @@ echarts.use([
|
||||
GaugeChart,
|
||||
ScatterChart,
|
||||
EffectScatterChart,
|
||||
GeoComponent,
|
||||
]);
|
||||
|
||||
export default echarts;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user