报错错误展示：
解决方式一：
1.重构plugin
AMap.plugin(["AMap.Object3DLayer","AMap.Object3D"],function(){
_nowStatus=true;//强制刷新后plugin并没有添加上'Object3DLayer'和'Object3D',执行再次刷新地图解决
var object3Dlayer = new AMap.Object3DLayer({zIndex:1});
map.add(object3Dlayer)
var height = -25000;
var color = '#034c6c';//rgba
var wall = new AMap.Object3D.Wall({
path:bounds,
height:height,
color:color
});
wall.transparent = true
object3Dlayer.add(wall)
})
2.判断如果plugin为空，再次刷新地图
if(!_nowStatus){
_this.cityProper();
}示例完整代码
<template>
<div class="mapContent" id="mapContent"></div>
</template>
<script>
let map,testMarkers=[]
let adCode = 370000
let depth = 1
export default {
data() {
return {
}
},
mounted() {
this.getInitMap()
},
methods: {
getInitMap() {
map = new AMap.Map('mapContent', {
zoom: 10.5,
zooms: [6, 21],
center: [117.087291,36.599326],
pitch: 30,
viewMode: '3D',
//设置地图背景图
mapStyle: 'amap://styles/74c7e4c94b8ce88780ef54e44c677366'
})
this.$nextTick(()=>{
this.cityProper()
})
},
cityProper() {
var _this = this
let _nowStatus=false;
var opts = {
subdistrict: 0,
extensions: 'all',
level: 'city'
};
var district = district = new AMap.DistrictSearch(opts)
district.search('历城区', function(status, result) {
var bounds = result.districtList[0].boundaries;
var mask = []
map.setMask(mask)
for(var i =0;i<bounds.length;i+=1){
mask.push([bounds[i]])
}
var maskerIn = new AMap.Marker({
position:[116.501415,39.926055],
map:map
})
var maskerOut = new AMap.Marker({//区域外的不会显示
position:[117.001415,39.926055],
map:map
})
//添加高度面
AMap.plugin(["AMap.Object3DLayer","AMap.Object3D"],function(){
_nowStatus=true;
var object3Dlayer = new AMap.Object3DLayer({zIndex:1});
map.add(object3Dlayer)
var height = -25000;
var color = '#034c6c';//rgba
var wall = new AMap.Object3D.Wall({
path:bounds,
height:height,
color:color
});
wall.transparent = true
object3Dlayer.add(wall)
})
if(!_nowStatus){
_this.cityProper();
}
//添加描边
for(var i =0;i<bounds.length;i+=1){
new AMap.Polyline({
path:bounds[i],
strokeColor:'#99ffff',
strokeWeight:4,
map:map
})
}
});
}
}
}
</script>
<style scoped>
.mapContent {
width: 100%;
height: 100%;
}
</style>
<style>
.amap-logo {
display: none !important;
}
</style>
ps:在最新一次项目中，需要在掩模上再添加一些3D板块，这个时候发现使用解决方法一还是不行，出现报错“Maximum call stack size exceeded”，查询得知这是因为异步获取数据所致，并且报错总是出现在plugin这里，也并非自己的数据所致。
解决方式二：
使用同步加载方式直接引入Map3D。推荐使用方法二
引入方式为
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.DistrictSearch,Map3D"></script>
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>3D掩模和3D自定义多边形</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'bb19aa5d39fb4d3fbe490c8421b6a511',
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.PolygonEditor,AMap.DistrictSearch,AMap.MouseTool,Map3D"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../js/jquery.min.js"></script>
<script>
map = new AMap.Map("container", {
zoom: 10.5,
zooms: [6, 21],
center: [117.087291, 36.599326],
pitch: 30,
viewMode: "3D",
mapStyle: "amap://styles/fc045472a14b875ac0951961d3dd3557",
});
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
map.add(object3Dlayer);
cityProper()
markers()
drawPolygon()
function cityProper() {
var opts = {
subdistrict: 0,
extensions: "all",
level: "city",
};
var district = (district = new AMap.DistrictSearch(opts));
district.search("历城区", function (status, result) {
var bounds = result.districtList[0].boundaries;
//添加高度面
var height = -25000;
var color = "#99ffff"; //rgba
var wall = new AMap.Object3D.Wall({
path: bounds,
height: height,
color: color,
});
wall.transparent = true;
object3Dlayer.add(wall);
// 外多边形坐标数组和内多边形坐标数组
var outer = [
new AMap.LngLat(-360, 90, true),
new AMap.LngLat(-360, -90, true),
new AMap.LngLat(360, -90, true),
new AMap.LngLat(360, 90, true),
];
var pathArray = [outer];
pathArray.push.apply(pathArray, bounds);
var polygon = new AMap.Polygon({
pathL: pathArray,
strokeColor: "#99ffff",
strokeWeight: 4,
strokeOpacity: 1,
fillColor: "rgb(14, 57, 134)",
fillOpacity: 1,
strokeDasharray: [10, 2, 10],
});
polygon.setPath(pathArray);
map.add(polygon);
});
}
function markers() {
let markersList = [
{
name: "唐王街道",
path: [
[117.239092, 36.861691],
[117.24589, 36.85159],
[117.23715, 36.816615],
[117.266282, 36.819725],
[117.272108, 36.818947],
[117.276964, 36.805731],
[117.253658, 36.791735],
[117.24589, 36.772291],
[117.278906, 36.753621],
[117.311922, 36.762179],
[117.33717, 36.763734],
],
},
{
name: "",
path: [
[117.156356, 36.541938],
[117.184769, 36.544184],
[117.20014, 36.554661],
[117.213182, 36.559525],
[117.220635, 36.564014],
[117.229485, 36.555783],
[117.227156, 36.553164],
[117.229951, 36.550171],
[117.229951, 36.544932],
[117.228554, 36.537447],
[117.222964, 36.529588],
[117.208059, 36.524722],
[117.212251, 36.520979],
[117.212717, 36.518733],
[117.208059, 36.514615],
[117.199209, 36.50563],
[117.183372, 36.488031],
[117.17918, 36.488031],
[117.176851, 36.483537],
[117.172193, 36.478668],
[117.172193, 36.47717],
[117.172659, 36.476046],
[117.177317, 36.467806],
[117.180111, 36.470428],
[117.183372, 36.467057],
[117.186632, 36.469679],
[117.191756, 36.462562],
[117.209456, 36.442705],
[117.226225, 36.428839],
[117.228088, 36.426966],
[117.228088, 36.422093],
[117.228074, 36.422104],
[117.232027, 36.412458],
],
},
{
name: "",
path: [
[117.220149, 36.564433],
[117.234428, 36.575355],
[117.239188, 36.575355],
[117.263666, 36.566345],
[117.277605, 36.555968],
[117.290185, 36.537395],
[117.313643, 36.536029],
],
},
{
name: "",
path: [
[117.088741, 36.347828],
[117.086475, 36.363337],
[117.08572, 36.377627],
[117.088741, 36.391914],
[117.094405, 36.396473],
[117.092895, 36.398297],
[117.096671, 36.399513],
[117.097048, 36.403768],
[117.096671, 36.405895],
[117.100069, 36.408934],
[117.103845, 36.413188],
[117.105733, 36.421696],
[117.102712, 36.425342],
[117.102712, 36.429596],
[117.100824, 36.434153],
[117.103467, 36.439925],
[117.104978, 36.442355],
[117.12197, 36.439621],
[117.128389, 36.44843],
[117.134431, 36.452378],
[117.145003, 36.45329],
[117.152933, 36.454808],
[117.161995, 36.452075],
[117.166526, 36.45663],
[117.171435, 36.459667],
[117.172946, 36.462097],
[117.179365, 36.463919],
[117.175589, 36.466348],
[117.176722, 36.468474],
],
},
{
name: "",
path: [
[117.177607, 36.669503],
[117.194199, 36.67411],
[117.208876, 36.67411],
[117.228659, 36.670015],
[117.243337, 36.667967],
[117.243337, 36.65261],
[117.238232, 36.648002],
[117.22483, 36.638785],
[117.226745, 36.627519],
[117.237594, 36.6183],
[117.23887, 36.614202],
[117.235679, 36.609592],
[117.232488, 36.601395],
[117.235041, 36.588074],
[117.234862, 36.580997],
[117.234449, 36.575353],
],
},
{
name: "",
path: [
[117.243285, 36.667913],
[117.248573, 36.667383],
[117.254654, 36.665156],
[117.261529, 36.661975],
[117.269593, 36.659005],
[117.274352, 36.658369],
[117.279244, 36.659218],
[117.283739, 36.661339],
[117.289688, 36.66346],
[117.291406, 36.662293],
[117.290217, 36.659748],
[117.287837, 36.656672],
[117.285325, 36.651581],
[117.285325, 36.645111],
[117.286251, 36.640656],
[117.286251, 36.638641],
[117.283739, 36.636519],
[117.283607, 36.635352],
[117.288366, 36.634185],
[117.293125, 36.628881],
[117.299867, 36.630578],
[117.301189, 36.627395],
[117.312294, 36.625592],
[117.317847, 36.61965],
[117.319433, 36.617952],
[117.32525, 36.616891],
[117.325514, 36.615512],
[117.331596, 36.615724],
[117.335738, 36.618452],
[117.348576, 36.620876],
[117.36217, 36.616027],
],
},
{
name: "",
path: [
[117.289636, 36.663405],
[117.295469, 36.66541],
[117.300349, 36.667511],
[117.29892, 36.668657],
[117.29892, 36.670089],
[117.300944, 36.669993],
[117.301063, 36.670757],
[117.305824, 36.673335],
[117.309276, 36.673239],
[117.31249, 36.676771],
[117.314513, 36.685172],
[117.313442, 36.68794],
[117.318084, 36.688513],
[117.31737, 36.690899],
[117.318679, 36.692426],
[117.317608, 36.694717],
[117.318203, 36.696816],
[117.315704, 36.696816],
[117.315466, 36.699584],
[117.314751, 36.70092],
[117.315466, 36.702542],
[117.314275, 36.70426],
[117.316656, 36.705596],
[117.31593, 36.707252],
[117.316073, 36.707652],
[117.318639, 36.708224],
[117.318639, 36.70971],
[117.319994, 36.710224],
[117.319424, 36.711596],
[117.320992, 36.71291],
[117.320279, 36.714168],
[117.32142, 36.715254],
[117.322489, 36.716511],
[117.321491, 36.717482],
[117.32199, 36.718797],
[117.323915, 36.719711],
[117.32306, 36.720968],
[117.32306, 36.721997],
[117.322204, 36.72274],
[117.322917, 36.723083],
[117.324771, 36.722054],
[117.326482, 36.721654],
[117.327195, 36.722911],
[117.329048, 36.723483],
[117.329904, 36.72354],
[117.329262, 36.724683],
[117.327765, 36.725654],
[117.327694, 36.726511],
[117.329405, 36.727025],
[117.3319, 36.726911],
[117.333397, 36.726111],
[117.334253, 36.72474],
[117.335322, 36.724397],
[117.336249, 36.725311],
[117.335536, 36.726625],
[117.334752, 36.727483],
[117.336819, 36.727768],
[117.336249, 36.729768],
[117.33853, 36.729368],
[117.338031, 36.730682],
[117.33853, 36.732511],
[117.34017, 36.731939],
[117.341524, 36.732339],
[117.340384, 36.733653],
[117.339599, 36.735025],
[117.342237, 36.735539],
[117.340526, 36.737596],
[117.341738, 36.740567],
],
},
{
name: "",
path: [
[117.166746, 36.706395],
[117.177432, 36.709445],
[117.186851, 36.711478],
[117.190292, 36.712204],
[117.19319, 36.714817],
[117.196631, 36.714091],
[117.201159, 36.716269],
[117.204963, 36.718302],
[117.210397, 36.718737],
[117.216736, 36.720044],
[117.220539, 36.719463],
[117.228509, 36.718737],
[117.234848, 36.71743],
[117.242274, 36.714236],
[117.245353, 36.711042],
[117.243542, 36.706831],
[117.243723, 36.702184],
[117.24481, 36.698699],
[117.248251, 36.695214],
[117.244085, 36.689259],
[117.240825, 36.685483],
[117.239376, 36.680689],
[117.23684, 36.677348],
[117.234305, 36.673426],
[117.235029, 36.669213],
],
},
{
name: "",
path: [
[117.234747, 36.717607],
[117.237854, 36.717098],
[117.240581, 36.717098],
[117.243688, 36.717352],
[117.246922, 36.717962],
[117.250473, 36.71903],
[117.25339, 36.720402],
[117.25618, 36.721775],
[117.258653, 36.723299],
[117.262902, 36.724723],
[117.269877, 36.7264],
[117.28275, 36.7295],
[117.291882, 36.731126],
[117.297906, 36.732245],
[117.305262, 36.733617],
[117.311032, 36.734277],
[117.31731, 36.734633],
[117.324729, 36.735141],
[117.331007, 36.734684],
[117.336144, 36.733159],
[117.33849, 36.732346],
],
},
];
markersList.forEach(function (marker) {
let polyline = new AMap.Polyline({
path: marker.path,
map: map,
strokeColor: "#bbb6ba",
strokeWeight: 1,
strokeOpacity: 1,
});
});
let areaList =[
{
name:'唐王街道',
path:[
[117.238754,36.861442],
[117.238947,36.861944],
[117.245127,36.8514],
[117.236898,36.816127],
[117.265053,36.819978],
[117.272752,36.818347],
[117.276668,36.805587],
[117.253511, 36.79152],
[117.24623, 36.771905],
[117.279993, 36.75291],
[117.311649, 36.761986],
[117.336678, 36.763474],
[117.336565, 36.765429],
[117.333609, 36.767254],
[117.333583, 36.779973],
[117.328351, 36.780303],
[117.329582, 36.784147],
[117.321459, 36.784147],
[117.314112, 36.787215],
[117.314575, 36.78929],
[117.329987, 36.792803],
[117.328733, 36.796567],
[117.331569, 36.797475],
[117.331996, 36.802081],
[117.340134, 36.806997],
[117.341718, 36.805091],
[117.346752, 36.808536],
[117.349359, 36.828679],
[117.34434, 36.842887],
[117.337485, 36.843117],
[117.336126, 36.846599],
[117.339157, 36.847772],
[117.340383, 36.852294],
[117.333391, 36.849902],
[117.332241, 36.856669],
[117.327564, 36.856669],
[117.329995, 36.864167],
[117.333648, 36.868794],
[117.333663, 36.878079],
[117.328358, 36.878622],
[117.327862, 36.87167],
[117.321439, 36.871933],
[117.320953, 36.883287],
[117.30876, 36.879438],
[117.266329, 36.855445],
[117.263142, 36.864167],
[117.254913, 36.866725]
]
},
{
name:'董家街道',
path:[
[117.25471,36.767658],
[117.258503,36.765095],
[117.212673,36.761786],
[117.196658,36.757974],
[117.192224,36.740131],
[117.206086,36.730943],
[117.260971,36.735634],
[117.282986,36.740978],
[117.303087,36.733029],
[117.325861,36.73547],
[117.340179,36.732063],
[117.340188,36.734652],
[117.34225,36.73547],
[117.340535,36.736788],
[117.341971,36.740808],
[117.344918,36.739625],
[117.343799,36.74183],
[117.341815,36.744585],
[117.347101,36.744759],
[117.347341,36.747566],
[117.344903,36.74686],
[117.342911,36.748098],
[117.341538,36.753695],
[117.340032,36.753879],
[117.339839,36.758541],
[117.341566,36.761401],
[117.336419,36.761401],
[117.336948,36.76392],
[117.312581,36.761979],
[117.278648,36.752779]
]
},
{
name:'港沟街道',
path:[
[117.169157,36.658831],
[117.166789,36.659162],
[117.162197,36.66621],
[117.14048,36.672031],
[117.134318,36.667911],
[117.141277,36.660826],
[117.137233,36.657838],
[117.135858,36.658831],
[117.134107,36.629731],
[117.14803,36.621692],
[117.137866,36.617318],
[117.138496,36.596645],
[117.126772,36.590511],
[117.12485,36.585543],
[117.139681,36.576866],
[117.143304,36.56603],
[117.149383,36.564585],
[117.155796,36.567968],
[117.159006,36.555611],
[117.161643,36.548283],
[117.156196,36.541375],
[117.185999,36.544249],
[117.200733,36.555147],
[117.221923,36.564585],
[117.235165,36.576866],
[117.233298,36.601814],
[117.240206,36.616162],
[117.228618,36.62643],
[117.225215,36.640168],
[117.242664,36.652919],
[117.244771,36.668936],
[117.210165,36.675155],
[117.19127,36.674111],
[117.175425,36.669964],
[117.181103,36.659827],
]
},{
name:'彩石镇',
path:[
[117.244605,36.668867],
[117.240869,36.665927],
[117.250935,36.66534],
[117.269868,36.657199],
[117.291682,36.663002],
[117.287574,36.654811],
[117.284792,36.650923],
[117.286458,36.638268],
[117.283454,36.635475],
[117.288275,36.634235],
[117.292933,36.628721],
[117.299812,36.630447],
[117.301005,36.626887],
[117.311884,36.625849],
[117.319938,36.617574],
[117.325749,36.616605],
[117.325918,36.615642],
[117.332147,36.615882],
[117.335882,36.618551],
[117.348671,36.620775],
[117.361857,36.615882],
[117.363022,36.597995],
[117.357564,36.596484],
[117.351172,36.597238],
[117.354585,36.589583],
[117.357851,36.579338],
[117.343166,36.572556],
[117.344196,36.566462],
[117.332759,36.561215],
[117.330387,36.5631],
[117.326003,36.562744],
[117.324306,36.561098],
[117.330003,36.559935],
[117.333771,36.552398],
[117.314706,36.537935],
[117.314184,36.535636],
[117.289579,36.537421],
[117.277654,36.555602],
[117.264229,36.565383],
[117.239561,36.57517],
[117.234114,36.575336],
[117.235339,36.589013],
[117.232774,36.601773],
[117.238936,36.615879],
[117.227395,36.627663],
[117.226022,36.639413],
[117.243951,36.653486],
[117.243336,36.668563]
]
}
]
map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);
areaList.forEach(function (item) {
var paths = item.path
var bounds = paths.map(function(path) {
return new AMap.LngLat(path[0], path[1]);
});
if(item.name == '唐王街道' || item.name == '港沟街道'){
var prism = new AMap.Object3D.Prism({
path: bounds,
height: 10000,
color: 'rgba(0,255,208,0.9)' // 支持 #RRGGBB、rgb()、rgba() 格式数据
});
}else{
var prism = new AMap.Object3D.Prism({
path: bounds,
height: 10000,
color: 'rgba(230,226,66,0.9)' // 支持 #RRGGBB、rgb()、rgba() 格式数据
});
}
prism.transparent = false;
object3Dlayer.add(prism);
})
}
function drawPolygon () {
var mouseTool = new AMap.MouseTool(map)
mouseTool.polygon({
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: '#1791fc',
fillOpacity: 0.4,
strokeStyle: "solid",
})
mouseTool.on('draw', function(event) {
// event.obj 为绘制出来的覆盖物对象
console.log(event.obj.De.path)
log.info('覆盖物对象绘制完成')
})
}
</script>
</body>
</html>