renderings
Data format for regions
The following is the map initialization code, double-clicking the map and clicking to highlight. The methods are encapsulated. I have put the data format of mapData at the back, and they are all commented.
const drawEcharts = mapData => {<!-- -->
//When there is too much data, echarts rendering is too slow, you can use this method
if (myChart.value) {<!-- -->
myChart.value.dispose();
}
let chartDom = centerMap.value;
myChart.value = echarts.init(chartDom);
myChart.value.clear();
myChart.value.resize();
let nameMap = "centerMap";
//Icon data
// Get different initial data based on the type passed in
mapDataList = mapData;
// Based on the obtained division, first query the division level (used when downloading the map, you can use it if you don’t need it, this is to get the division level)
currentMapLevel.value = mapUtils.getRegionLevel(mapData.features[0].properties.adcode.toString());
//Render map data
echarts.registerMap(nameMap, mapData);
//The mapData data contains how many people there are in each district (for example: 1,000 people in Chengdu)
//number and resultSac are to sort the number of people in each district, and then specify a range, and then only one color can be used in a certain range.
// For example, 0-5 in the index is the color #d0f8ff, 6-11 is the color #93d5fd, and so on.
// These two codes are mainly to make the color better divide the area. You can also divide it manually. If you divide it manually, number and resultSac are not needed.
// Get segmented data
let number: any = mapData.features
.map(function (feature) {<!-- -->
return feature.properties.num ? Number(feature.properties.num) : 0;
})
.sort(function (a, b) {<!-- -->
return a - b;
});
// mapUtils.sacdata is an encapsulated method and may not be needed
let resultSac = mapUtils.sacdata(number, 5);
// Map module color division (this is the main color division). The data format of regions is placed above. You can check it. I put the manual one below.
let regions = mapData.features.map(function (feature) {<!-- -->
let colorArr = ["#d0f8ff", "#93d5fd", "#5eaedd", "#3787b7", "#0e6598"];
let colorNum = 0;
for (let index = 0; index < resultSac.length; index + + ) {<!-- -->
if (feature.properties.num <= resultSac[index]) {<!-- -->
colorNum = index;
break;
}
}
return {<!-- -->
name: feature.properties.name,
value: feature.properties.adcode,
num: feature.properties.num,
itemStyle: {<!-- --> color: colorArr[colorNum] }
};
});
// console.log(regions, "regions");
// Map configuration
let optionMap = {<!-- -->
geo3D: {<!-- -->
//Load geo3D
map: nameMap,
//Set the position and orientation of the 3D perspective
viewControl: {<!-- -->
distance: 130, //The distance between the camera and the object
alpha: 70, // The rotation angle of the three-dimensional scene in the horizontal direction
beta: 30 // Rotation angle in the vertical direction of the three-dimensional scene
},
\t\t\t// Word
label: {<!-- -->
show: false,
fontSize: 13,
fontWeight: 600,
opacity: 1,
textStyle: {<!-- -->
backgroundColor: "transparent", // Set the label background to be transparent
color: "#ffffff", // Set label text color
fontFamily: "YSBTH"
}
},
itemStyle: {<!-- -->
color: "#5ca3f9", //Set geo3d data to transparent
opacity: 1, //transparent
borderColor: "#62def5",
borderWidth: 1,
areaColor: "rgba(37,157,255,0.2)"
},
// Similar to hover
emphasis: {<!-- -->
label: {<!-- -->
show: false
}
},
zlevel: 2
},
series: [
{<!-- -->
type: "map3D", //Load series data
map: nameMap,
//Outer border color
itemStyle: {<!-- -->
color: "rgba(1, 16, 31, 0)",
opacity: 1,
borderColor: "#75f3f8",
borderWidth: 1,
shadowColor: "#3ffeff",
shadowOffsetY: 15,
shadowBlur: 8,
areaColor: "rgba(5,21,35.0.1)"
},
label: {<!-- -->
show: true,
fontSize: 13,
fontWeight: 600,
opacity: 1,
textStyle: {<!-- -->
backgroundColor: "transparent", // Set the label background to be transparent
color: "#ffffff", // Set label text color
fontFamily: "YSBTH"
}
},
//Set the position and orientation of the 3D perspective
viewControl: {<!-- -->
distance: 130, //The distance between the camera and the object
alpha: 70, // The rotation angle of the three-dimensional scene in the horizontal direction
beta: 30 // Rotation angle in the vertical direction of the three-dimensional scene
},
// Similar to hover, double-clicking or clicking on a map block is the value passed through this
emphasis: {<!-- -->
label: {<!-- -->
formatter: function (params) {<!-- -->
highlightObj.value = params;
return params.name;
},
show: true,
fontSize: 13,
fontWeight: 600,
opacity: 1,
textStyle: {<!-- -->
backgroundColor: "transparent", // Set the label background to be transparent
color: "#fff", // Set label text color
fontFamily: "YSBTH"
}
},
itemStyle: {<!-- -->
color: "#15ffff",
opacity: 1,
borderColor: "#62def5",
borderWidth: 5
}
},
// shading: 'color',
zlevel: 3,
\t\t\t\t// data
data: regions,
large: true
}
]
};
myChart.value.clear();
// myChart.value.resize();
myChart.value.setOption(optionMap);
\t
//Double click to drill down
myChart.value.getZr().on("dblclick", async res => {<!-- -->
res.event.stopPropagation();
// Because I am a component encapsulated from parent to child, there are some places where downloading is not allowed. This value is whether the downloading passed by the parent is allowed.
if (!propsList.allow) return;
//Here is the information received from emphasis.label. I will not post the data format here. You can print it yourself.
let params = highlightObj.value;
//Here is to get information about the area you clicked on
let curData = mapData.features[params.dataIndex];
// If it is at the village level, do not drill down (this is a project requirement, if there is no such requirement, it can be deleted)
if (currentMapLevel.value == 6) {<!-- -->
return;
}
// Get the division number of the clicked place. Because our backend requires a string, I changed the format.
let code = curData.properties.adcode.toString();
// Here, according to the back-end requirements, I need a division number to return to the previous level, so I store the division number I transferred down in an array.
runInHole.value.push(code);
// Level (province level corresponds to 2; city => 3; district => 4 and so on)
let level = currentMapLevel.value;
level + + ;
// This is to send a request to obtain map information. You can re-render the map after obtaining the new map information and call the encapsulated method drawEcharts.
// Because of the system response time problem, I called it from other places, so I won’t show it here.
await getMapData(1, 99, [code], level);
// This is passed down from son to father, you don’t have to do it.
emit("getRegionList", {<!-- -->
level: level,
regions: mapList,
curData
});
//Define the map highlighted by clicking
let colorActive = ref({<!-- -->
num: -1,
color: null
});
// Click to highlight
myChart.value.getZr().on("click", () => {<!-- -->
click_type = false;
let params = highlightObj.value;
//level
let level = currentMapLevel.value;
level + + ;
setTimeout(() => {<!-- -->
if (click_type != false) return;
highlightName.value = params.name;
let option = myChart.value.getOption();
let list = option.geo3D[0].regions;
if (list.length == 1) return;
//Find the selected map and set the highlight
let result = list.find(el => el.name === params.name);
//Location index
let resultIndex = list.findIndex(el => el.name === highlightName.value);
// Replace the previously highlighted area with its original color
if (colorActive.value.num >= 0) {<!-- -->
option.series[0].data[colorActive.value.num].itemStyle = {<!-- -->
color: colorActive.value.color
};
}
//Storage the index and original color of the clicked area
colorActive.value.num = resultIndex;
colorActive.value.color = option.series[0].data[resultIndex].itemStyle.color;
if (resultIndex != -1) {<!-- -->
highlightIndex.value = resultIndex;
}
// Set highlight-and highlight font size
if (result) {<!-- -->
option.series[0].data[resultIndex].itemStyle = {<!-- -->
color: "#15eaff"
};
option.series[0].label.textStyle.fontSize = 13;
if (myChart.value) {<!-- -->
myChart.value.clear();
}
myChart.value.setOption(option);
}
}, 500);
});
};
This is a manual distinction, just look at the green frame, feature.properties.num is the number of people in each area
Data format of mapData
