我们已经学会了如何绘制点,线,面。今天我们就结合geoJson进行绘制 点,线,面。
通常的业务场景是希望绘制一个城市的版块,我们可以先拿到一个城市的geoJson(通常是只包含面(MultiPolygon)),然后通过高德的api绘制城市版块
如何获取快速城市的GeoJson数据
我们可以使用阿里云的DataV
可以通过点击选择想要的城市版块,这里以山东省为例。
复制链接,我们可以直接在项目中使用
全部代码展示 (其中xxxx 高德的秘钥,cccc是高德的key,需要自己申请)
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>map</title>
<style>
body,
html,
#container {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
window._AMapSecurityConfig = {
securityJsCode: "xxxx",
};
</script>
<script
language="javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=cccc"
></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script language="javascript">
const map = (window.map = new AMap.Map("container", {
center: [118.035441,36.323541],
viewMode: "3D",
zoom: 7,
pitch: 50,
showLabel: false,
}));
//发送请求 获取GeoJson数据
ajax(
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
function (err, geoJSON) {
if (!err) {
//将获取到的GeoJson数据进行解析
var geojson = new AMap.GeoJSON({
geoJSON: geoJSON,
getPolygon: function (geojson, lnglats) {
//将解析出来的面 进行绘制
return new AMap.Polygon({
path: lnglats,
strokeColor: "#0dcdd1",
fillColor: "#3D6BB1",
});
},
getMarker: function (geojson, lnglats) {
//用来绘制点
},
getPolyline: function (geojson, lnglats) {
//用来绘制线;
}
});
map.add(geojson);
}
}
);
</script>
</html>
对于点和线的绘制与面一致 ,只不过该GeoJson 不包含 点和线的数据,就不在举例了
扩展:通过面的数据绘制线
ajax(
"https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
function (err, geoJSON) {
if (!err) {
//将获取到的GeoJson数据进行解析
var geojson = new AMap.GeoJSON({
geoJSON: geoJSON,
getPolygon: function (geojson, lnglats) {
for (let i = 0; i < lnglats.length; i += 1) {
// 绘制边界线
return new AMap.Polyline({
path: lnglats[i],
strokeColor: "#0dcdd1",
strokeWeight: 3,
});
}
},
getMarker: function (geojson, lnglats) {
//用来绘制点
},
getPolyline: function (geojson, lnglats) {
//用来绘制线;
},
});
map.add(geojson);
}
}
);