<template>
<div id="amapContainer"></div>
</template>
<script>
export default {
name: 'amap3d',
data () {
return {};
},
mounted () {
this.intAmap();
},
methods: {
drawMap (city = '北京市', LngLats) {
const AMap = this.AMap;
const opts = {
subdistrict: 0,
extensions: 'all',
level: 'city'
};
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
const district = new AMap.DistrictSearch(opts);
district.search(city, function (status, result) {
const bounds = result.districtList[0].boundaries;
const mask = []
for (let i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]])
}
const map = new AMap.Map('amapContainer', {
mask: mask,
center: [116.501415, 39.926055],
disableSocket: true,
viewMode: '3D',
showLabel: false,
labelzIndex: 130,
pitch: 40,
zoom: 10,
mapStyle: "amap://styles/darkblue",
// 卫星地图显示
layers: [
new AMap.TileLayer.RoadNet({
//rejectMapMask:true
}),
new AMap.TileLayer.Satellite()
]
});
//添加高度面 v 2.0 版本引用这个3D方法直接报错
let object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
map.add(object3Dlayer)
const height = -20000;
const color = '#0088ffcc';//rgba
const wall = new AMap.Object3D.Wall({
path: bounds,
height: height,
color: color
});
wall.transparent = true;
// 添加覆盖物
(LngLats || []).forEach(v => {
const position = new AMap.LngLat(v.Lng, v.Lat);
// 点标记显示内容,HTML要素字符串
const markerContent = '' +
`<div class="custom-content-marker zyc-marker-icon">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
<div class="close-btn" onclick="clearMarker()">X</div>
<div class="content">
<p>设备数量: 15545</p>
<p>人员数量: 5842</p>
<p>摄像头数量: 96874</p>
</div>
</div>`;
new AMap.Marker({
position: position,
// 将 html 传给 content
content: markerContent,
// 以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
map: map // 添加到对应的map地图实例
});
});
object3Dlayer.add(wall);
//添加描边
for (let i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: '#99ffff',
strokeWeight: 4,
map: map
})
}
});
},
// 地图初始化
intAmap (callBack) {
this.AMap = window.AMap;
this.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar', 'AMap.DistrictSearch', 'Map3D', 'AMap.Object3DLayer'], function () {
//TODO 创建控件并添加
});
if (callBack && typeof callBack == 'function') {
callBack();
}
this.drawMap('北京市', [
{Lng: 116.501415, Lat: 39.926055},
{Lng: 116.474605, Lat: 39.946324},
{Lng: 116.343799, Lat: 39.991844},
{Lng: 116.324573, Lat: 39.872586}
]);
}
}
}
</script>
<style lang="scss">
#amapContainer {
.custom-content-marker {
position: relative;
width: 25px;
height: 34px;
img {
width: 100%;
height: 100%;
}
.close-btn {
position: absolute;
top: -6px;
right: -8px;
width: 15px;
height: 15px;
font-size: 12px;
background: #ccc;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}
.close-btn:hover {
background: #666;
}
.content {
position: absolute;
left: 20px;
top: 10px;
height: 100px;
width: 200px;
background: rgba(10, 10, 10, 0.7);
p {
padding:5px 10px;
color:#fff;
font-size: 14px;
text-align:left;
}
}
}
}
</style>
<style lang="scss" scoped>
#amapContainer {
height: 800px;
width: 100%;
margin: 0 auto;
}
</style>