如何在使用 OpenLayers 放大/缩小时动态显示线串特征

Question

我正在使用 OpenLayers 使用道路文件在 map 上显示。目前，我设法根据道路类型分配样式，但是当我运行服务器时，我可以看到显示的所有数据。 有什么办法我可以只显示主要道路（例如，当我运行服务器时，它应该只在 map 上首先显示橙色道路，然后在缩放后它应该显示其他道路）当我运行服务器并且可以在缩放后看到更多的次要道路就像谷歌地图或开放街道 map 显示的方式一样？ 我尝试在我的代码中使用 minZoom，但它不起作用。 还有如何在放大/缩小时动态改变笔画的粗细？

代码

var styleRoadFunction = function(feature) {
       console.log(feature);
     //assign symbology of roads based on road type
      var color;
      var outerColor;
      var lightStroke;
      var darkStroke;
      //var maxZoom;
      var minZoom;
      if (feature.get("type")=='primary' && 'secondary' && 'trunk'){
      color = 'rgba(252, 214, 112, 1)',
      outerColor ='rgba(252, 214, 112, 1)',
      lightStroke = 'null',
      darkStroke = 'null';
      //minZoom = 13.999;
       } else if (feature.get("type")=='motorway'){
      color = 'rgba(245, 171, 53, 1)',
      outerColor ='rgba(245, 171, 53, 1)',
      lightStroke = 'null',
      darkStroke = 'null';
      //minZoom = 12.999;
      }else if (feature.get("type")=='cycleway'){
      color = 'rgba(3, 166, 120, 1)',
      outerColor = 'rgba(3, 166, 120, 1)',
      lightStroke ='rgba(236, 240, 241, 1)',
      darkStroke = 'rgba(3, 166, 120, 1)';
      } else {
      color = 'rgba(236, 236, 236, 1)',
      outerColor = 'rgba(189, 195, 199, 1)',
      lightStroke = 'null',
      darkStroke = 'null';
      //minZoom =3
      //maxZoom= 7;
      }
      

      var retStyle =   [new ol.style.Style({
        
        stroke: new ol.style.Stroke({ 
        color: outerColor,
        lineCap: 'butt',
        lineJoin:'round',
        tolerence: 5,
        width: 7,
        //maxZoom:  maxZoom,
        //minZoom : minZoom,
        opacity: 0,
        zIndex: 0
      })
      }),
        new ol.style.Style({
          stroke: new ol.style.Stroke({ 
            color: color,
            lineCap:'butt',
            lineJoin: 'round',
            tolerence: 5,
           // maxZoom:  maxZoom,
            //minZoom: minZoom,
            opacity:0,
            width: 6,
            zIndex:1,
           })
      
        }),
        new ol.style.Style({
          stroke: new ol.style.Stroke({ 
            color: lightStroke,
            //width: 5,
            width: 2,
            lineDash: [4,8],
            lineDashOffset: 6
            //zIndex:5
          })
        }),
        new ol.style.Style({
          stroke: new ol.style.Stroke({ 
            color: darkStroke,
            //width: 5,
            width: 5,
            lineDash: [4,8],
            //lineDashOffset: 6,
            //zIndex:1
          })
        }),
      ];
       return retStyle;

      };

    var vectorLayer = new ol.layer.VectorTile({
            source: new ol.source.VectorTile({
            format: new ol.format.MVT(),
            url: 'http://localhost:8080/roads/{z}/{x}/{y}.mvt'
        }),
        style:styleRoadFunction,
        
        declutter: true
     })  
   
         
    var map = new ol.Map({
    target: 'map',
    layers: [osmLayer,vectorLayer],
        view: new ol.View({
          center: ol.proj.fromLonLat([103.8198,1.3521]),
          zoom: 14
          })
      });

Answer 1

你的代码看起来像

var styleRoadFunction = function(feature, resolution) {
      var zoom = map.getView().getZoomForResolution();
      var type = feature.get("type");
       console.log(feature);
     //assign symbology of roads based on road type
      var color;
      var outerColor;
      var lightStroke;
      var darkStroke;
      //var maxZoom;
      var minZoom;
      if ((type == 'primary' || type == 'secondary' || type == 'trunk') && zoom >= 13.999){
        color = 'rgba(252, 214, 112, 1)',
        outerColor ='rgba(252, 214, 112, 1)',
        lightStroke = 'null',
        darkStroke = 'null';
        //minZoom = 13.999;
      } else if (type == 'motorway' && zoom >= 12.999){
        color = 'rgba(245, 171, 53, 1)',
        outerColor ='rgba(245, 171, 53, 1)',
        lightStroke = 'null',
        darkStroke = 'null';
        //minZoom = 12.999;
      } else if (type == 'cycleway' && zoom >= ???){
        color = 'rgba(3, 166, 120, 1)',
        outerColor = 'rgba(3, 166, 120, 1)',
        lightStroke ='rgba(236, 240, 241, 1)',
        darkStroke = 'rgba(3, 166, 120, 1)';
      } else if (zoom >= ???){
        color = 'rgba(236, 236, 236, 1)',
        outerColor = 'rgba(189, 195, 199, 1)',
        lightStroke = 'null',
        darkStroke = 'null';
        //minZoom =3
        //maxZoom= 7;
      }