I am using roads file to display on the map using OpenLayers.currently, I manage to assign styling based on road type but when I run the server I can see all the data displayed. Is there any way I can show only primary roads(eg when I run server it should only show the orange color roads first on a map and after zooming it should show other roads) when I run the server and can see further secondary roads after zoom in like the way google maps or open street map displays? I tried using minZoom in my code but it does not work. Also how I can change the thickness of stroke dynamically while zoom in/zoom out?
code
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
})
});
Your code would look something like
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.