序文
先週、上司は私に、他の従業員が PPT を作成するために使用するための小さな地図ツールを作成するように依頼し、いくつかの要件を挙げました。
1. 都市名または県名を入力すると、対応する地図が表示されます
2. 領域を強調表示する機能
3. 映像は高画質、超高画質！
私は csdn を開いて、彼のためにそのようなものをつなぎ合わせました。効果は悪くありません。
レンダリング
関数
省または地級市の市区町村コードを入力すると行政区域図が表示されます
領域をクリックしてラベルを強調表示して表示し、もう一度クリックして強調表示をキャンセルし、コードを変更して背景色と強調表示色を調整できます。
右上隅にある画像の保存ボタンを使用すると、現在の画像を保存し、コードを変更して画像の鮮明さを調整できます。
リソース
Baidu echarts と jquery を導入しました。どちらもオンライン バージョンであり、js ファイルをダウンロードする必要がなくなり、インターネットに接続されているどのコンピュータでも使用できるようになりました。
Echarts : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
jquery: https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
さらに、Alibaba Cloud のマップ セレクターが使用されます: Alibaba Cloud
コード
<!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>要約する
他の多くのブロガーさんのコードを参考にしていますが、体系的に知識を学んだわけではないので、子供に誤解を与えるようなコメントは書きませんので、ご自身で調べてください。
権利侵害がある場合は削除するために私に連絡してください