在之前的文章描述了如何通过prism绘制3d城市版块,这篇文章将采用另外的方式来实现3d版块的制作
AMap.Object3D.Wall
wall 见名知意,这个api就是绘制墙的, 也可以看做是有高度的线. 属性也很简单
path: 线的坐标
height: 墙的高度
color: 墙的颜色
通过wall画3d版块 其实就是先通过边界线坐标画一个面,再通过边界线坐标画墙,通过墙把画的面顶起来
绘制版块
版块绘制之前的文章讲过 就不再赘述了,直接上代码
const opts = {
subdistrict: 1,
extensions: "all",
level: "province",
};
const district = new AMap.DistrictSearch(opts);
district.search("山东省", function (status, result) {
const bounds = result.districtList[0].boundaries;
for (let i = 0; i < bounds.length; i += 1) {
// 绘制版块
new AMap.Polygon({
map: map,
path: bounds[i],
strokeColor: "#0dcdd1",
fillColor: "#3D6BB1",
});
}
});
添加墙
3d对象都需要object3Dlayer来存放 ,然后给object3Dlayer指定map对象
//object3Dlayer可以看做一个容器,用来放多个3d对象
let object3Dlayer = new AMap.Object3DLayer();
//把object3Dlayer添加到map对象中
map.add(object3Dlayer);
var wall = new AMap.Object3D.Wall({
//版块边界线
path: bounds,
//墙的高度
height: 80000,
//墙的颜色
color: "#0dcdd1",
});
//wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面 默认为front
wall.backOrFront = 'both';
// 是否允许使用透明颜色
wall.transparent = true;
//将wall放到object3Dlayer中
object3Dlayer.add(wall);
到此 版块和墙都已经绘制完成,但是由上图可以看出版块并没有被wall顶起来.其实只要将wall的高度改为负数,底层地图就被压下去了,视觉上来看就是版块被抬起来的感觉
** 全部代码展示 (其中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&plugin=AMap.DistrictSearch"></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,
}));
const opts = {
subdistrict: 1,
extensions: "all",
level: "province",
};
const district = new AMap.DistrictSearch(opts);
district.search("山东省", function (status, result) {
const bounds = result.districtList[0].boundaries;
for (let i = 0; i < bounds.length; i += 1) {
// 绘制版块
new AMap.Polygon({
map: map,
path: bounds[i],
strokeColor: "#0dcdd1",
fillColor: "#3D6BB1",
fillOpacity: 1
});
}
let object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);
var height = -800000;
var color = "#0dcdd1";
var wall = new AMap.Object3D.Wall({
path: bounds,
height: height,
color: color,
});
//wall 有个面,该属性表示哪个面可见,可选值back ,front ,both表示两面都填充 默认为front
wall.backOrFront = 'front';
// 是否允许使用透明颜色
wall.transparent = true;
object3Dlayer.add(wall);
});
</script>
</html>