update 地图
This commit is contained in:
zk
@@ -47,6 +47,110 @@ export const legendList = [
|
||||
{ img: legend5, text: '地方医院' },
|
||||
{ img: legend6, text: '直升机' },
|
||||
];
|
||||
const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href;
|
||||
|
||||
export function createChartOption({ icons }) {
|
||||
return {
|
||||
tooltip: {
|
||||
show: false,
|
||||
// formatter: (params) => {
|
||||
// console.log('params', params);
|
||||
// if (!params?.data?.id) {
|
||||
// return '';
|
||||
// }
|
||||
// return `<div style="color:red;width:300px"> ${params.name}</div>
|
||||
// <div>id: ${params?.data?.id}</div>`;
|
||||
// },
|
||||
},
|
||||
geo: [
|
||||
{
|
||||
map: 'china',
|
||||
zlevel: 3,
|
||||
aspectScale: 0.8, //长宽比
|
||||
zoom: 1.1,
|
||||
// roam: true,
|
||||
// draggable: true,
|
||||
top: '60',
|
||||
left: 'center',
|
||||
itemStyle: {
|
||||
areaColor: '#173a58',
|
||||
shadowColor: '#173a58',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5,
|
||||
borderWidth: 6, //外部边框
|
||||
borderColor: '#6ccffe',
|
||||
},
|
||||
},
|
||||
{
|
||||
map: 'china',
|
||||
zlevel: 2,
|
||||
aspectScale: 0.8, //长宽比
|
||||
zoom: 1.1,
|
||||
// roam: true,
|
||||
// draggable: true,
|
||||
top: '60',
|
||||
left: 'center',
|
||||
itemStyle: {
|
||||
areaColor: '#1e2c38',
|
||||
shadowColor: '#1e2c38',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
borderWidth: 6, //外部边框
|
||||
borderColor: '#384d61',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
map: 'china', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
|
||||
name: '中国地图',
|
||||
type: 'map',
|
||||
selected: {}, // 默认所有省份都是未选中状态
|
||||
selectedMode: 'single', // 选中模式为单选
|
||||
zlevel: 9,
|
||||
zoom: 1.1,
|
||||
aspectScale: 0.8, //长宽比
|
||||
// roam: true,
|
||||
// draggable: true,
|
||||
hoverAnimation: false,
|
||||
silent: false,
|
||||
top: '60',
|
||||
left: 'center',
|
||||
label: {
|
||||
show: true,
|
||||
padding: [0, 10],
|
||||
height: 31,
|
||||
lineHeight: 31,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 13,
|
||||
marginLeft: 5,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
// 给地图添加背景图片
|
||||
areaColor: {
|
||||
type: 'pattern',
|
||||
image: bgImg,
|
||||
repeat: 'no-repeat',
|
||||
},
|
||||
borderColor: '#359de5',
|
||||
borderWidth: 2, //内部边框,
|
||||
},
|
||||
// 鼠标悬浮
|
||||
emphasis: {
|
||||
label: {
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#008CFF',
|
||||
},
|
||||
},
|
||||
},
|
||||
...icons.value,
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 秒转小时
|
||||
|
||||
@@ -15,12 +15,12 @@
|
||||
<a-input v-model:value="formState.end"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button class="reset-btn">清空</a-button>
|
||||
<a-button class="reset-btn" @click="clickSearch">清空</a-button>
|
||||
<a-button class="search-btn" @click="searchRoute">路线规划</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="line-container" v-show="showRoutePanel" v-click-outside="outClick">
|
||||
<div class="has-data">
|
||||
<div v-show="routeList.length" class="has-data">
|
||||
<div class="line-title"> {{ panelTitle }}</div>
|
||||
<div class="line-content">
|
||||
<div class="start">起点</div>
|
||||
@@ -33,7 +33,7 @@
|
||||
<div class="end">终点</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="false" class="empty-data"> 暂无数据</div>
|
||||
<div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="china-map-container"></div>
|
||||
@@ -61,11 +61,9 @@
|
||||
import { onMounted, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import mapJson from '/@/components/chinaMap/json/c';
|
||||
import { tabList, mapIcons, legendList, getTimeStr, getKmStr } from './chinaHooks.ts';
|
||||
import { tabList, mapIcons, legendList, getTimeStr, getKmStr, createChartOption } from './chinaHooks.ts';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href;
|
||||
|
||||
const formState = ref({
|
||||
start: '西安北站',
|
||||
end: '',
|
||||
@@ -84,22 +82,21 @@
|
||||
//自定义图片的 路径
|
||||
// symbol: 'image://https://img2.baidu.com/it/u=1568770988,2090980470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567', // 图片 URL
|
||||
symbol: 'image://' + mapIcons[0], // 图片 URL
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
zlevel: 100,
|
||||
coordinateSystem: 'geo',
|
||||
//自定义图片的 位置（lng, lat）
|
||||
data: [{ name: '太原', value: [112.55, 37.98], id: 'taiyuan' }],
|
||||
//自定义图片的 大小
|
||||
symbolSize: [25, 63],
|
||||
symbol: 'image://' + mapIcons[1], // 图片 URL
|
||||
label: {
|
||||
borderColor: 'red',
|
||||
borderWidth: 2,
|
||||
borderType: 'solid',
|
||||
shadowBlur: '10px',
|
||||
shadowColor: 'red',
|
||||
shadowOffsetX: '5px',
|
||||
shadowOffsetY: '5px',
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
function changeTab(i) {
|
||||
let x = Math.random() + 3 - Math.random() - i;
|
||||
let y = Math.random() - 2 + Math.random() + i;
|
||||
let x = Math.random() + 5 - Math.random() - i;
|
||||
let y = Math.random() - 5 + Math.random() + i;
|
||||
const o = {
|
||||
type: 'scatter',
|
||||
zlevel: 100,
|
||||
@@ -110,8 +107,41 @@
|
||||
symbolSize: [25, 63],
|
||||
symbol: 'image://' + mapIcons[Math.floor(Math.random() * 6)], // 图片 URL
|
||||
};
|
||||
const line = {
|
||||
name: '线路',
|
||||
type: 'lines',
|
||||
coordinateSystem: 'geo',
|
||||
zlevel: 100,
|
||||
large: true,
|
||||
effect: {
|
||||
show: true,
|
||||
constantSpeed: 30,
|
||||
symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
||||
symbolSize: 0,
|
||||
trailLength: 0,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#0fff17',
|
||||
width: 2,
|
||||
opacity: 1.0,
|
||||
curveness: 0.15,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
fromName: '六安',
|
||||
toName: '合肥市',
|
||||
coords: [
|
||||
[116.27, 31.786],
|
||||
[117.37, 31.386],
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
icons.value = [];
|
||||
icons.value.push(o);
|
||||
icons.value.push(line);
|
||||
currentIndex.value = i;
|
||||
let myChart = echarts.init(document.querySelector('.china-map-container'));
|
||||
initMap(myChart);
|
||||
@@ -125,91 +155,34 @@
|
||||
});
|
||||
|
||||
function initMap(myChart) {
|
||||
let option = {
|
||||
tooltip: {
|
||||
show: false,
|
||||
formatter: '{b0}: {c0}',
|
||||
},
|
||||
geo: [
|
||||
{
|
||||
map: 'china',
|
||||
zlevel: 3,
|
||||
aspectScale: 0.8, //长宽比
|
||||
zoom: 1.1,
|
||||
roam: false,
|
||||
top: '60',
|
||||
left: 'center',
|
||||
itemStyle: {
|
||||
areaColor: '#173a58',
|
||||
shadowColor: '#173a58',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5,
|
||||
borderWidth: 6, //外部边框
|
||||
borderColor: '#6ccffe',
|
||||
},
|
||||
},
|
||||
{
|
||||
map: 'china',
|
||||
zlevel: 2,
|
||||
aspectScale: 0.8, //长宽比
|
||||
zoom: 1.1,
|
||||
roam: false,
|
||||
top: '60',
|
||||
left: 'center',
|
||||
itemStyle: {
|
||||
areaColor: '#1e2c38',
|
||||
shadowColor: '#1e2c38',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
borderWidth: 6, //外部边框
|
||||
borderColor: '#384d61',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
map: 'china', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
|
||||
name: '中国地图',
|
||||
type: 'map',
|
||||
zlevel: 9,
|
||||
zoom: 1.1,
|
||||
aspectScale: 0.8, //长宽比
|
||||
hoverAnimation: false,
|
||||
silent: false,
|
||||
top: '60',
|
||||
left: 'center',
|
||||
label: {
|
||||
show: true,
|
||||
padding: [0, 10],
|
||||
height: 31,
|
||||
lineHeight: 31,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 13,
|
||||
marginLeft: 5,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
// 给地图添加背景图片
|
||||
areaColor: {
|
||||
type: 'pattern',
|
||||
image: bgImg,
|
||||
repeat: 'no-repeat',
|
||||
},
|
||||
borderColor: '#359de5',
|
||||
borderWidth: 2, //内部边框
|
||||
},
|
||||
},
|
||||
...icons.value,
|
||||
],
|
||||
};
|
||||
let option = createChartOption({ icons });
|
||||
myChart.setOption(option);
|
||||
// 关闭之前的点击事件
|
||||
myChart.off('click');
|
||||
myChart.on('click', function (res) {
|
||||
if ('scatter' === res.componentSubType) {
|
||||
alert(`点击了 ${res.name} 图标`);
|
||||
}
|
||||
if ('map' === res.componentSubType) {
|
||||
alert(`点击了 ${res.name} 地图`);
|
||||
mapClick(res, myChart);
|
||||
});
|
||||
myChart.getZr().on('click', (params) => {
|
||||
if (params.target) {
|
||||
// alert('画布非空白区');
|
||||
} else {
|
||||
// alert('画布空白区');
|
||||
myChart.dispatchAction({
|
||||
// 如果绑定了 geo 图层（指定了geoIndex），则是 geoUnSelect 事件
|
||||
type: 'unselect',
|
||||
// 指定 series 的索引
|
||||
seriesIndex: 0,
|
||||
// 指定要取消选中数据的索引, 如果要取消全部选中，则把所有数据的下标数组作为 dataIndex 即可
|
||||
dataIndex: new Array(101).fill(null).map((_, i) => i), // 0 代表取消选中 data 中第1项的选中，依此类推
|
||||
});
|
||||
myChart.dispatchAction({
|
||||
// 如果绑定了 geo 图层（指定了geoIndex），则是 geoUnSelect 事件
|
||||
type: 'geoUnSelect',
|
||||
// 指定 series 的索引
|
||||
seriesIndex: 0,
|
||||
// 指定要取消选中数据的索引, 如果要取消全部选中，则把所有数据的下标数组作为 dataIndex 即可
|
||||
dataIndex: new Array(101).fill(null).map((_, i) => i), // 0 代表取消选中 data 中第1项的选中，依此类推
|
||||
});
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', () => {
|
||||
@@ -217,12 +190,27 @@
|
||||
});
|
||||
}
|
||||
|
||||
function mapClick(res, myChart) {
|
||||
if (res.componentType !== 'series') {
|
||||
myChart.setOption({
|
||||
series: [{ selected: {} }], // 取消所有省份的选中状态
|
||||
});
|
||||
}
|
||||
|
||||
console.log('res', res);
|
||||
if ('scatter' === res.componentSubType) {
|
||||
// alert(`点击了 ${res.name} 图标`);
|
||||
}
|
||||
if ('map' === res.componentSubType) {
|
||||
// alert(`点击了 ${res.name} 地图`);
|
||||
}
|
||||
}
|
||||
|
||||
const routeList = ref([]);
|
||||
const showRoutePanel = ref(false);
|
||||
const panelTitle = ref();
|
||||
|
||||
function outClick() {
|
||||
console.log('点击外面');
|
||||
showRoutePanel.value = false;
|
||||
}
|
||||
|
||||
@@ -275,12 +263,14 @@
|
||||
arr.push(data.destinationName);
|
||||
showRoutePanel.value = true;
|
||||
routeList.value = arr;
|
||||
console.log(arr);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
console.log();
|
||||
function clickSearch() {
|
||||
formState.value.start = '';
|
||||
formState.value.end = '';
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.center-map {
|
||||
@@ -304,7 +294,7 @@
|
||||
|
||||
.tab {
|
||||
width: calc(100% / 8);
|
||||
height: 43px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -444,6 +434,11 @@
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
margin-top: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user