如何去除叠加图层后的多余形状

1 问题描述

当我们往地图上叠加图层后，未能完全覆盖那块地图，原先地图的上的一些形状被放大之后仍能看见，那么如何去除叠加图层后仍然显示的多余形状呢？

起初地图的样式为左一，解决后的为左二。可以明显看到形状被去掉，看不到3D的效果了。

2 算法描述

首先创建script标签，在标签里面先定义一个照片图层的变量，url后面引用的地址是照片地址，bounds里面是设置的经度纬度，分别是图片放在地图上左上角和右上角的经纬度，zooms设置的是地图的缩放级别

代码语言：javascript复制

   var imageLayer = new AMap.ImageLayer({
       url: 'https://img-blog.csdnimg.cn/e7da205c4e884e21be375c37cba08bb9.png',
       bounds: new AMap.Bounds(
        [104.272544, 30.576161],   //左上角
        [104.285232, 30.585218]    //右上角
        ),
       zooms: [5, 18]
   });

其次初始化地图，设置地图的中心坐标，设置图层Layer，这句layers: [new AMap.TileLayer(),imageLayer]就是去除多余形状的关键所在，如果不引用这一句就仍然能看到那些多余的形状。TileLayer是在底图上叠加图层的机制，它可以解决服务层聚合的问题，也是去除图层关键之在。

代码语言：javascript复制

   var map = new AMap.Map('container', {
       resizeEnable: true,
       zoom: 16,
       center: [104.275435, 30.576777],
       layers: [
           new AMap.TileLayer(),
           imageLayer
       ]
   });

上面的container是定义的一个id，目的是为了设置地图的样式，利用css设置样式，设置地图显示的大小，样式代码如下：

代码语言：javascript复制

html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}

#container {
width: 100%;
height: 100%;
}

3 结语

在解决叠加图层的问题时也花了较长时间，看似只有一句关键的代码，但是那句关键的代码不容易写对，变量名可能会出错，通过多次尝试最终把那句代码写正确了，结果也能正确的运行出来。

container layer script url 地图

0 人点赞