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

Posted 2022-01-13 算法与编程之美

1 问题描述

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

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

2 算法描述

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

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是在底图上叠加图层的机制，它可以解决服务层聚合的问题，也是去除图层关键之在。

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 结语

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

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）