Openlayers鹰眼OverviewMap自定义样式时鹰眼大小调整

Openlayers鹰眼OverviewMap自定义样式时可以根据关注区域的范围长宽比调整鹰眼控件的宽、高大小,让关注的区域始终全部在鹰眼中显示。
如鹰眼控件宽设置100px时

/*鹰眼控件中地图容器的样式*/
.ol-custom-overviewmap .ol-overviewmap-map{
    border:none;
    width: 100px;
    /*width: 100px;*/
    }

Openlayers鹰眼OverviewMap自定义样式时鹰眼大小调整_第1张图片

 鹰眼控件宽设置150px时

/*鹰眼控件中地图容器的样式*/
.ol-custom-overviewmap .ol-overviewmap-map{
    border:none;
    width: 150px;
    /*width: 100px;*/
    }

Openlayers鹰眼OverviewMap自定义样式时鹰眼大小调整_第2张图片

 完整代码





OverViewMap





你可能感兴趣的:(前端,javascript,openlayers)