高德地图 3d 建筑模型
map.png
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
#container,html,body{
height: 100%;
margin:0;
}
.amap-marker-label{
color: #fff;
background-color: transparent;
border: none;
font-size: 24px;
text-align: center;
}
</style>
<title>3D楼块</title>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=您申请的key&plugin=Map3D,AMap.Scale,AMap.ControlBar"></script>
<script language="javascript">
function mapInit() {
let posList = [
[
[106.517443,29.511761],
[106.516874,29.510948],
[106.516874,29.510813],
[106.51703,29.51071],
[106.516853,29.510388],
[106.516236,29.50966],
[106.518076,29.50973],
[106.51821,29.510379],
[106.518258,29.510696],
[106.518178,29.511149],
[106.518178,29.511149],
[106.517727,29.511653],
[106.517443,29.511761]
],
[
[106.516578,29.512227],
[106.517748,29.511653],
[106.518,29.511415],
[106.518064,29.511336],
[106.518182,29.51114],
[106.518214,29.51092],
[106.518263,29.510542],
[106.518188,29.510085],
[106.518113,29.509744],
[106.517978,29.509081],
[106.517909,29.508969],
[106.517834,29.508936],
[106.517678,29.50888],
[106.51565,29.508609],
[106.515618,29.508483],
[106.51598,29.507914],
[106.514633,29.507059],
[106.514386,29.507041],
[106.51385,29.507013],
[106.513544,29.507227],
[106.513555,29.507288],
[106.512857,29.507484],
[106.513437,29.508843],
[106.513158,29.508997],
[106.513088,29.509053],
[106.512933,29.509492],
[106.512906,29.509833],
[106.512959,29.510253],
[106.513131,29.510757],
[106.513313,29.511172],
[106.513549,29.511761],
[106.513694,29.512027],
[106.514043,29.512204],
[106.514563,29.512377],
[106.515363,29.512648],
[106.515658,29.512662],
[106.515963,29.512498],
[106.516578,29.512227]
]
];
let colorArr = [
{
top: 3, //123用同样的颜色效果
color1: 'ff6262', //楼顶颜色
color2: 'e14141', //楼面颜色
lineColor: [0,121,231, 1] //底部线的颜色 rgba
},
{
top: 6, //456用同样的颜色效果
color1: 'ff71c8', //楼顶颜色
color2: 'de3b9f', //楼面颜色
lineColor: [255,113,200, 1] //底部线的颜色 rgba
},
{
top: 9, //789用同样的颜色效果
color1: 'ff9662', //楼顶颜色
color2: 'f46d2a', //楼面颜色
lineColor: [255,150,98, 1] //底部线的颜色 rgba
},
{
top: 12, //10 11 12用同样的颜色效果
color1: '55ce55', //楼顶颜色
color2: '218b21', //楼面颜色
lineColor: [85,206,85, 1] //底部线的颜色 rgba
},
{
top: 16, //13 14 15 16用同样的颜色效果
color1: '30afff', //楼顶颜色
color2: '0071b9', //楼面颜色
lineColor: [48,175,255, 1] //底部线的颜色 rgba
},
]
var buildingLayer = new AMap.Buildings({zIndex:130,merge:false,sort:false,zooms:[17,20]});
var options = {
hideWithoutStyle: false,//是否隐藏设定区域外的楼块
areas:[
{
order: 1, //排名
zoomSize: 20,
rotateAngle: 10,
mallPosition: [113.32703,23.132175],
mallName: 'wwqe',
// visible:false,//是否可见
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ffffff00',//楼顶颜色
color2: 'ffffcc00',//楼面颜色
lineColor: [255, 255, 255 , 1], //rgba
path: posList[1]
},
{
order: 6, //排名
zoomSize: 20,
rotateAngle: 10,
mallPosition: [113.32703,23.132175],
mallName: 'qwewe',
// visible:false,//是否可见
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ffffff00',//楼顶颜色
color2: 'ffffcc00',//楼面颜色
lineColor: [255, 255, 255 , 1], //rgba
path: posList[0]
}
]
};
options.areas.forEach((item,index)=>{
if(item.order == 1){
item.color1 = 'ff30afff';
item.color2 = 'ff0071b9';
item.lineColor = [48,175,255, 1];
}else if(item.order > 3 && item.order <= 6){
item.color1 = 'ff' + colorArr[1].color1;
item.color2 = 'ff' + colorArr[1].color2;
item.lineColor = colorArr[1].lineColor;
}else if(item.order > 6 && item.order <= 9){
item.color1 = 'ff' + colorArr[2].color1;
item.color2 = 'ff' + colorArr[2].color2;
item.lineColor = colorArr[2].lineColor;
}else if(item.order > 9 && item.order <= 12){
item.color1 = 'ff' + colorArr[3].color1;
item.color2 = 'ff' + colorArr[3].color2;
item.lineColor = colorArr[3].lineColor;
}else if(item.order > 12 && item.order <= 16){
item.color1 = 'ff' + colorArr[4].color1;
item.color2 = 'ff' + colorArr[4].color2;
item.lineColor = colorArr[4].lineColor;
}
})
buildingLayer.setStyle(options); //此配色优先级高于自定义mapStyle
var map = new AMap.Map("container", {
zoom:options.areas[0].zoomSize,
pitch:50,
showIndoorMap:false,
showLabel:false,
rotateEnable: true,
rotation: options.areas[0].rotateAngle,
mapStyle:'amap://styles/ffaca3b000b8fd533368b6ad6a7cc603',
center:[106.514692,29.509754],
// center: options.areas[0].mallPosition,
features:['bg','point','road'],
viewMode:'3D',
layers:[
new AMap.TileLayer({}),
buildingLayer
]
});
map.addControl(new AMap.Scale())
map.addControl(new AMap.ControlBar({
showZoomBar:false,
showControlButton:true,
position:{
right:'10px',
top:'10px'
}
}));
// var marker = new AMap.Marker({
// position: map.getCenter(),
// icon: 'http://threemodel.oss-cn-beijing.aliyuncs.com/marker.png',
// // offset: new AMap.Pixel(-13, -30),
// // 设置是否可拖拽
// // draggable: true,
// // cursor: 'move'
// map: map
// });
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
// marker.setLabel({
// //修改label相对于maker的位置
// offset: new AMap.Pixel(5, 15),
// content: "01"
// });
// // 设置点标记的动画效果，此处为弹跳效果
// marker.setAnimation('AMAP_ANIMATION_BOUNCE');
//绘制line
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 120 });
map.add(object3Dlayer);
var Line3D = new AMap.Object3D.Line();
Line3D.transparent = true;
var geometry = Line3D.geometry;
options.areas.forEach((item,index)=>{
//圈围立体建筑
new AMap.Polygon({
bubble:false,
fillColor:'#1589D2',
fillOpacity:0.4,
strokeWeight: 2,
path:item.path,
map:map
});
// 创文本标记
// var text = new AMap.Text({
// text:item.mallName,
// textAlign:'center', // 'left' 'right', 'center',
// verticalAlign:'middle', //middle 、bottom
// draggable:true,
// cursor:'pointer',
// angle:0,
// style:{
// 'background-color': 'rgba(0,0,0,0)',
// 'border':'none',
// 'font-size': '20px',
// 'color': '#fff'
// },
// position: item.mallPosition,
// map: map
// });
// 绘制line
let linePoint = item.path;
linePoint.forEach((lineitem,lineindex)=>{
})
});
object3Dlayer.add(Line3D);
}
</script>
</head>
<body onload="mapInit();">
<div id="container" ></div>
</body>
</html>
网友评论