1、高德地图可视化项目搭建
参考我的上篇文章完成基本搭建:H5数据可视化(高德地图构建项目)
2、使用高德行政区查询
该部分主要参照官方教程即可,其中使用行政区划查询服务前要先引入该插件,具体的引入方式请参考教程:插件的使用。
下面列出我的代码实例,官方文档教程点这里
AMap.plugin('AMap.DistrictSearch', function() {
var opts = {
subdistrict: 0, // 获取边界不需要返回下级行政区
extensions: "all", // 返回行政区边界坐标组等具体信息
level: "city" // 查询行政级别为 市
};
var district = new AMap.DistrictSearch(opts);
district.search('郑州市', function(status, result) {
// 查询成功时,result即为对应的行政区信息
var bounds = result.districtList[0].boundaries;
// ...下一步绘制覆盖物在这里进行
})
})
3、绘制行政区覆盖
for (var i = 0, l = bounds.length; i < l; i++) {
var polygonbox = new AMap.Polygon({
strokeWeight: 3,
path: bounds[i],
fillOpacity: 0.9,
fillColor: "#6e3fc8",
strokeColor: "#6e3fc8",
extData: {
IDname: "郑州",
Center: "传递内容"
}
});
map.add(polygonbox);
}
4、效果图与完整代码
效果图
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script src="https://webapi.amap.com/maps?key=2da678792428d85bd3f0c0e26b25c54b&v=1.4.15&plugin=Map3D"></script>
<script src="https://webapi.amap.com/loca?key=2da678792428d85bd3f0c0e26b25c54b&v=1.3.0"></script>
</head>
<body>
<div id='map' style='width:800px; height:600px;'></div>
<script>
window.onload = function() {
const map = new AMap.Map('map', {
pitch: 50, // 地图俯仰角度,有效范围 0 度- 83 度
viewMode: '3D', // 地图模式
mapStyle: 'amap://styles/8b1ff64d2c968f4f84c2a5f5ef562cfb', // 地图主题
zoom: 8, //设置地图的缩放级别
zooms: [8, 20], // 缩放级别限制
center: [113.509464, 34.662878],
});
AMap.plugin('AMap.DistrictSearch', function() {
var opts = {
subdistrict: 0, // 获取边界不需要返回下级行政区
extensions: "all", // 返回行政区边界坐标组等具体信息
level: "city" // 查询行政级别为 市
};
var district = new AMap.DistrictSearch(opts);
district.search('郑州市', function(status, result) {
// 查询成功时,result即为对应的行政区信息
var bounds = result.districtList[0].boundaries;
for (var i = 0, l = bounds.length; i < l; i++) {
var polygonbox = new AMap.Polygon({
strokeWeight: 3,
path: bounds[i],
fillOpacity: 0.9,
fillColor: "#6e3fc8",
strokeColor: "#6e3fc8",
extData: {
IDname: "郑州",
Center: "传递内容"
}
});
map.add(polygonbox);
}
})
})
}
</script>
</body>
</html>