foreword
Last week, the boss asked me to write a small map tool, saying that it would be used by other employees to make PPT, and he raised several requirements:
1. Input the city name or province name to display the corresponding map
2. Ability to highlight an area
3. The pictures are high-definition, huge high-definition!
I opened csdn and pieced together such a thing for him, and the effect is not bad.
renderings
Function
Enter the division code of a province or prefecture-level city to display the administrative area map
You can click the area to highlight and display the label, click again to cancel the highlight, modify the code to adjust the background color and highlight color
The save picture button in the upper right corner can save the current picture, modify the code to adjust the picture clarity
resource
Introduced Baidu echarts and jquery, both of which are online versions, eliminating the need to download js files, so that they can be used on any computer connected to the Internet
Echarts : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
jquery: https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
In addition, Alibaba Cloud's map selector is used: Alibaba Cloud
the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行政区划小工具</title>
<!-- 引入 echarts.js 文件-->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:800px;"></div>
<script>
function start()
{
city = document.getElementById("data").value;
city_url = "https://geo.datav.aliyun.com/areas_v3/bound/" + String(city) +"_full.json";
alert(city_url);
};
</script>
<script type="text/javascript">
var city=window.prompt("请输入省份或城市行政代码：");
var city_url = "https://geo.datav.aliyun.com/areas_v3/bound/" + String(city) +"_full.json";
chart = echarts.init(document.getElementById('main'));
$.get(city_url,function (mapjson)
{
mapdata = mapjson.features.map((item) =>
{
return {
name: item.properties.name,
value : "0",
label: {show:false},
}
});
echarts.registerMap('citymap', mapjson);
var option =
{
title: {
text: '行政区划',
x:'center',
},
toolbox: {
show : true,
feature : {
myTool1: {
show: true,
title: "还原",
onclick: () => {
const chart = echarts.init(document.getElementById('main'));
// 还原
chart.clear();
chart.setOption(option);
// 传值
this.$emit("init");
console.log('click');
},
},
dataView : {show: true},
// restore : {show: true},
padding: 5,
saveAsImage : {
pixelRatio: 10} //值越大分辨率越高
}
},
visualMap: {
show:false,
left: 'right',
categories: ['1','0'],
inRange: {
color: ['#004986','#DAE3F3']
},
text:['High','Low'], // 文本，默认为数值文本
calculable: true
},
series:[
{
name:'地图',
type:'map',
map:'citymap',
aspectScale: 1,
itemStyle: {
normal: {
areaColor: '#afdfe4',
borderColor: '#ffffff',
borderWidth: 2
},
emphasis: {
show: true,
areaColor: '#2b4490'
}
},
label: {
normal: {
show: false,
textStyle: {
color: "#ffffff",
fontSize: 14,
},
},
emphasis:{
show: true,
textStyle: {
color: "#ffffff",
fontSize: 14,
},
},
},
avoidLabelOverlap: true,
data : mapdata,
}
],
};
chart.setOption(option);
chart.off('click')
//地图点击事件---高亮
chart.on('click', function(params){
console.log(params);//此处写点击事件内容
for(var i=0;i<mapdata.length;i++){
// mapdata[i].value="0";
// mapdata[i].label.show=false;
if(params.name == mapdata[i].name){
if (mapdata[i].value=="1"){
mapdata[i].value="0";
mapdata[i].label.show=false;
}
else{
mapdata[i].value="1";
mapdata[i].label.show=true;
};
}
}
chart.setOption(option);
});
});
</script>
</body>
</html>Summarize
I refer to the codes of many other bloggers. I haven’t learned the relevant knowledge systematically, so I don’t write comments on the code to mislead my children. Please do your own research.
Contact me to delete if there is any infringement