Javascript OpenLayers3缩放时自定义地图调整标记大小

我最近的任务是为我的Wurm在线游戏联盟创建地图。我在游戏地图的静态图像上制作了一个基于genius SVG的覆盖图。基本上，它从电子表格中获取数据，并将村庄渲染为地图上的彩色圆圈

然而，我们在地图上到处都有成员，所以我开始考虑如何创建一个可缩放的基于网络的土地地图。游戏管理员每年都会给我们一个地图转储，所以我们可以根据自己的感觉创建自定义地图应用程序。我下载了我关心的岛屿/服务器Xanadu的最新地图转储

Xanadu dump是一个62MB的PNG，分辨率为8192 x 8192像素。我发现了一个瓷砖制作程序（MapTiler版本7），我开始制作瓷砖。在瓦片渲染完成后，程序本身通过编程方式创建带有嵌入式JavaScript的HTML文件。它让我在OpenLayers3上领先一步

我能够重新计算村庄坐标，并用村庄圆圈拼凑出一张可缩放的平铺地图。不用说，当我得到定制的OpenLayers3地图时，我非常高兴。（工作示例：）

按照我的设置方式，每个地图“装饰”或彩色圆圈都是自己的矢量

我的游戏伙伴们对我的可缩放地图的主要抱怨是，彩色村庄圆圈放大后太大了，但放大时太小了。 我尝试过各种方法，但还没有找到正确的例子。我习惯于根据事件查找和转换SVG元素，但OP3画布呈现在DOM中对我来说并不明显

我的一些问题是：

• 如何检测地图何时被缩放？有没有我错过的回电
• 当检测到缩放时，如何迭代所有向量并更新圆半径

//杰克完全可缩放的世外桃源地图
风险值数据=
[{
X:“6744”，
Y:“-2355.75”，
名称：“阿米什河”，
村民：[“Aniceset”、“Fulano”]，
背景色：“海蓝宝石”，
LandMarkType:“成员”
}, {
X:“6808.75”，
Y:“-2265.125”，
名称：“阿米什人地产”，
村民：[“Aniceset”，“村民”]，
背景色：“紫色”，
LandMarkType:“成员”
}];
控制台日志（数据）；
var mapExtent=[0.00000000，-8192.00000000,8192.00000000,0.00000000]；
var-mapMinZoom=0；
var mapMaxZoom=5；
var mapMaxResolution=1.00000000；
var tileExtent=[0.00000000，-8192.00000000，8192.00000000，0.00000000]；
var mapResolutions=[]；
对于（var z=0；z您正在寻找分辨率侦听器，是一个很好的地方：

map.getView().on('change:resolution', function(){
  var zoom = map.getView().getZoom();

  // your conditions
  if (zoom < 10) {
    // your ol.layer.Vector assuming `vector_layer` global variable
    vector_layer.setStyle(style_with_another_radius);
  }
});

map.getView（）.on（'change:resolution'，function（））{
var zoom=map.getView（）.getZoom（）；
//你的情况
如果（缩放<10）{
//您的ol.layer.Vector假定为'Vector\u layer'全局变量
vector_layer.setStyle（带有另一个半径的样式）；
}
});
您可以收听缩放的
moveend
事件，但在移动地图时也会触发该事件：

map.on('moveend', function(){
    var radius= map.getView().getZoom() * someFactor; // or whatever +,/ ...
    yourVectorVillage.setStyle(new ol.style.Circle({ radius : radius}));
    // or a style of your own where you can modify the radius
});

我认为我的一个缺点是，我在我的村庄数据迭代器中将所有圆圈作为单个向量添加。我的第一个任务是将圆圈作为多个特征添加到单个向量中。因此，我对我的代码有点烦躁。我仍然无法摆脱村庄点的多层结构。现在我需要弄清楚研究如何在迭代意义上定位向量。嘿，伙计们。我已经在OL3和向量层操作方面做了很多努力。相反，我发现集成OL3和D3是我想去的地方。下面这个例子：，我能够在我的平铺层上覆盖一个SVG层，然后重新计算我的SVG，并与地图相协调后期渲染事件：map.on（'postrender'，函数（事件）{//stuff}）；