高德+vue Object3DLayer强制刷新后找不到的问题

是可爱的大福呀~

已于 2022-10-27 16:07:21 修改

阅读量4.2k

点赞数 1

分类专栏：高德 vue 文章标签： vue.js javascript

于 2022-05-30 10:34:01 首次发布

本文链接：https://blog.youkuaiyun.com/henghahouhei/article/details/125041923

版权

报错错误展示：

解决方式一：

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.

最低0.47元/天解锁文章