-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
jjh
committed
Jun 29, 2022
1 parent
1f77028
commit dfea474
Showing
9 changed files
with
441 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>上海市</title> | ||
<script src="echarts.min.js"></script> | ||
<script src="jquery-3.6.0.min.js"></script> | ||
<style> | ||
html,body,#main{ | ||
padding: 0px; | ||
margin: 0px; | ||
height: 100%; | ||
overflow: hidden; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="main"></div> | ||
<script type="text/javascript"> | ||
$.getJSON("上海市.json",function(map){ | ||
var myChart = echarts.init(document.getElementById('main')); | ||
echarts.registerMap("luoyang",map); | ||
var option = { | ||
series : [ { | ||
map : "luoyang", | ||
type : "map", | ||
aspectScale: 1.0, | ||
selectedMode: 'single',//选择类型, | ||
hoverable:false,//鼠标经过高亮 | ||
roam: true,//鼠标滚轮缩放 | ||
itemStyle: { | ||
normal: { | ||
borderWidth:1, | ||
borderColor:'#0000FF',//区域边框色 | ||
areaColor: '#9FDAB9',//区域背景色 | ||
label: { | ||
show: true, | ||
textStyle: { | ||
color: '#6495ED',//文字颜色 | ||
fontSize:12 //文字大小 | ||
} | ||
} | ||
}, | ||
emphasis: { // 选中样式 | ||
borderWidth:1, | ||
borderColor:'#00ffff', | ||
color: '#ffffff', | ||
label: { | ||
show: true, | ||
textStyle: { | ||
color: '#ff0000' | ||
} | ||
} | ||
} | ||
} | ||
} ] | ||
}; | ||
myChart.setOption(option); | ||
}); | ||
</script> | ||
</body> | ||
</html> |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> | ||
<title>行政区边界查询</title> | ||
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> | ||
<style> | ||
html,body,#container{ | ||
margin:0; | ||
height:100%; | ||
} | ||
.input-item-text{ | ||
width:7rem; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="container"></div> | ||
<div class="input-card"> | ||
<label style='color:grey'>行政区边界查询</label> | ||
<div class="input-item"> | ||
<div class="input-item-prepend"> | ||
<span class="input-item-text" >行政级别</span> | ||
</div> | ||
<select id="level"> | ||
<option value="district">district</option> | ||
<option value="city">city</option> | ||
<option value="province">province</option> | ||
</select> | ||
|
||
</div> | ||
<div class="input-item"> | ||
<div class="input-item-prepend"> | ||
<span class="input-item-text" >名称/adcode</span> | ||
</div> | ||
<input id='district' type="text" value='朝阳区'> | ||
|
||
</div> | ||
<input id="draw" type="button" class="btn" value="查询" /> | ||
</div> | ||
<script type="text/javascript"> | ||
window._AMapSecurityConfig = { | ||
securityJsCode:'59326afd07c8905505c2df657cc149b1', | ||
} | ||
</script> | ||
<script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key=ecaea229684e2977a647af2fb3fddddb&plugin=AMap.DistrictSearch"></script> | ||
<script type="text/javascript"> | ||
//初始化地图对象,加载地图 | ||
var map = new AMap.Map("container", { | ||
center: [121.397428, 31.00923],//地图中心点 | ||
zoom: 10 //地图显示的缩放级别 | ||
}); | ||
|
||
var district = null; | ||
var polygons=[]; | ||
function drawBounds() { | ||
//加载行政区划插件 | ||
if(!district){ | ||
//实例化DistrictSearch | ||
var opts = { | ||
subdistrict: 0, //获取边界不需要返回下级行政区 | ||
extensions: 'all', //返回行政区边界坐标组等具体信息 | ||
level: 'district' //查询行政级别为 市 | ||
}; | ||
district = new AMap.DistrictSearch(opts); | ||
} | ||
//行政区查询 | ||
district.setLevel(document.getElementById('level').value) | ||
district.search(document.getElementById('district').value, function(status, result) { | ||
map.remove(polygons)//清除上次结果 | ||
polygons = []; | ||
var bounds = result.districtList[0].boundaries; | ||
if (bounds) { | ||
for (var i = 0, l = bounds.length; i < l; i++) { | ||
//生成行政区划polygon | ||
var polygon = new AMap.Polygon({ | ||
strokeWeight: 1, | ||
path: bounds[i], | ||
fillOpacity: 0.4, | ||
fillColor: '#80d8ff', | ||
strokeColor: '#0091ea' | ||
}); | ||
polygons.push(polygon); | ||
} | ||
} | ||
map.add(polygons) | ||
map.setFitView(polygons);//视口自适应 | ||
}); | ||
} | ||
drawBounds(); | ||
document.getElementById('draw').onclick = drawBounds; | ||
document.getElementById('district').onkeydown = function(e) { | ||
if (e.keyCode === 13) { | ||
drawBounds(); | ||
return false; | ||
} | ||
return true; | ||
}; | ||
</script> | ||
</body> | ||
</html> |
Oops, something went wrong.