根据缩放级别显示功能 [英] Displaying features based on zoom level

问题描述

我是openlayers库的新手，但我遇到了一个问题.我渲染了很多要素，当地图缩小时，要素彼此重叠，看起来很丑陋，如您在第一个屏幕截图中所见.我希望缩小的地图(第一屏幕)在所有缩放级别下都看起来像放大的地图(第二屏幕).实施它的最常见方式是什么?

I'm new to openlayers library and I got a question. I render a lot of features and when the map is zoomed out the features overlay each other, which looks pretty ugly, as you can see on the first screenshot. I'd like the zoomed-out map(first screen) to look like zoomed-in map(second screen) at all zoom levels. What would be the most common way of implementing it?

推荐答案

以下是样式功能的示例，该功能可从聚类地图图层中检测组特征，并为单个对象绘制一个正方形，为组对象绘制一个圆形:

Here is an example of a style function that detects group features from a cluster map layer and draws a square for individual object and circle for group objects:

var styleFunction = function() {
  return function(feature,resolution) {
    var style;
    var radius;
    var offsetY = -26;
    var gotGroup = false;

    var features = feature.get('features');

    if (features.length == 1) { //length = 1 - individual object instead of combo object
      style = new ol.style.Style({
        image: new ol.style.RegularShape({
        radius: 10,
        points: 4,
        angle: Math.PI / 4,
        fill: createFillStyle(feature),
        stroke: createStrokeStyle(feature,resolution,props)
        }),
        text: createTextStyle(feature, resolution, props)
      });
    } else {
      var rad = 11;
      if (features.length > 1) { //If group of features increase radius of object
        rad = 12;
        gotGroup = true;
      }
      style = new ol.style.Style({
        image: new ol.style.Circle({
        radius: rad,
        fill: createFillStyle(feature),
        stroke: createStrokeStyle(feature,resolution,props)
      }),
      text: createTextStyle(feature, resolution, props)
    });
  }
  return [style];
};
};

希望这对您的项目有帮助

Hope this helps with your project

这篇关于根据缩放级别显示功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！