I am working on OpenLayers 3 at the moment and my aim is to provide an offline map.
At the moment I am trying to get GeoJSON files offline. For that I am using the QGIS Plugin that exports the Shapefiles from QGIS into an OpenLayers Web Page. My problem is that the labels for the roads keep the same size when I am zooming in and out which leads to a messy output.
Does anyone know how to change it? I found some pages where it was proposed to use map.getscale() but I wasn't able to embedd it into the code.
I guess this is the part of the code which needs to be changed:
var styleCache_roads={} var style_roads = function(feature, resolution){ var value = "" var style = [ new ol.style.Style({ stroke: new ol.style.Stroke({color: "rgba(76,38,0,1.0)", lineDash: null, width: 1}) }) ,new ol.style.Style({ stroke: new ol.style.Stroke({color: "rgba(255,206,128,1.0)", lineDash: null, width: 1}) }) ]; var labelText = feature.get("name"); var key = value + "_" + labelText if (!styleCache_roads[key]){ var text = new ol.style.Text({ font: '9.0px Calibri,sans-serif', text: labelText, fill: new ol.style.Fill({ color: "rgba(0, 0, 0, 255)" }), }); styleCache_roads[key] = new ol.style.Style({"text": text}); } var allStyles = [styleCache_roads[key]]; allStyles.push.apply(allStyles, style); return allStyles; };
أكثر...
At the moment I am trying to get GeoJSON files offline. For that I am using the QGIS Plugin that exports the Shapefiles from QGIS into an OpenLayers Web Page. My problem is that the labels for the roads keep the same size when I am zooming in and out which leads to a messy output.
Does anyone know how to change it? I found some pages where it was proposed to use map.getscale() but I wasn't able to embedd it into the code.
I guess this is the part of the code which needs to be changed:
var styleCache_roads={} var style_roads = function(feature, resolution){ var value = "" var style = [ new ol.style.Style({ stroke: new ol.style.Stroke({color: "rgba(76,38,0,1.0)", lineDash: null, width: 1}) }) ,new ol.style.Style({ stroke: new ol.style.Stroke({color: "rgba(255,206,128,1.0)", lineDash: null, width: 1}) }) ]; var labelText = feature.get("name"); var key = value + "_" + labelText if (!styleCache_roads[key]){ var text = new ol.style.Text({ font: '9.0px Calibri,sans-serif', text: labelText, fill: new ol.style.Fill({ color: "rgba(0, 0, 0, 255)" }), }); styleCache_roads[key] = new ol.style.Style({"text": text}); } var allStyles = [styleCache_roads[key]]; allStyles.push.apply(allStyles, style); return allStyles; };
أكثر...