openlayers图标大小随zoom变化，icon动态变化 change:resolution

最新推荐文章于 2024-06-14 23:30:00 发布

林强181

最新推荐文章于 2024-06-14 23:30:00 发布

阅读量5k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qlin_11/article/details/120204576

版权

当使用OpenLayers展示20x20像素图标时，发现地图缩放导致图标显得过小。有两种解决方法：一是通过监听change:resolution事件动态调整样式，二是设置动态样式。可以使用样式功能，根据分辨率的反比例平方根或立方根来改变图标大小，以适应不同缩放级别。

摘要由CSDN通过智能技术生成

有两个思路；一个是动态样式，一个是事件监听更改样式。

change:resolution事件监听更改样式

1 map.getView().on('change:resolution',checkZoom);//checkZoom为调用的函数
 2 
 3 function checkZoom() {
   
 4     // alert("1");
 5     // var childId;
 6     console.log(map.getView().getZoom());
 7     if (map.getView().getZoom() == 11) {
   
 8         // console.log(vector.getSource().getFeatures()[0].getProperties().CODE);
 9         // childId = vector.getSource().getFeatures()[0].getProperties().CODE;
10         // vector.setVisible(false);
11         lastVectorShow();
12 
13     }
14 }

动态样式
https://stackoom.com/question/3qROp
温馨提示：将鼠标放在语句上可以显示对应的英文。或者切换至中英

最低0.47元/天解锁文章

林强181

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
openlayers图标大小随zoom变化，icon动态变化 change:resolution

有两个思路；一个是动态样式，一个是事件监听更改样式。change:resolution事件监听更改样式1 map.getView().on('change:resolution',checkZoom);//checkZoom为调用的函数 2 3 function checkZoom() { 4 // alert("1"); 5 // var childId; 6 console.log(map.getView().getZoom()); 7 if (map.
复制链接

扫一扫