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

Question

我正在使用 OpenLayers 在地图上显示道路文件。目前，我设法根据道路类型分配样式，但是当我运行服务器时，我可以看到所有显示的数据。 有什么方法可以只显示主要道路（例如，当我运行服务器时，它应该只在地图上首先显示橙色道路，然后在缩放后它应该显示其他道路）当我运行服务器并且可以在缩放后看到更多的次要道路像谷歌地图或开放街道地图的显示方式？我尝试在我的代码中使用 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;
      }