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

算法与编程之美 2021-12-23

展开全文

1 问题描述

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

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

2 算法描述

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

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

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

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

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

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

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

3 结语

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

实习编辑：李欣容