olms with arcgis vector tile - Sprite failure

[ssisman14]

Hı ,
I am using olms to load arcgis style in my ol vector tile. I have two basic problems.

1. Some icons do not appear in a certain zoom range.
   just max appears at zoom level.

in fact ==>

ol-mapbox-style ==>

2. some icons do not appear in the correct position.

in fact ==>

ol-mapbox-style ==>

Help me with your suggestions :)

[ahocevar]

Please share the code you use to create the OpenLayers / ol-mapbox-style map in the above screenshots.

[ssisman14]

"cbsdell4.ibb.gov.tr" server access is off

var vTileLayer = new ol.layer.VectorTile({
            renderMode: 'vector',
            reload: Infinity,
            declutter : true,
            source: new ol.source.VectorTile({
              cacheSize: 512,
              format: new ol.format.MVT(),
              url: 'https://cbsdell4.ibb.gov.tr/server/rest/services/Hosted/RehberVT/VectorTileServer/tile/{z}/{y}/{x}.pbf',
			        maxZoom: 26,
            }),
            id: "vTileLayer",
        
              tilePixelRatio: 8,
          });
     var vLayer = new ol.layer.Vector({
            style: function(feature) {
              return feature.get('style');
            },
            source: new ol.source.Vector(),
            zIndex: 3,
            id: "vLayer",
          });
      var map = new ol.Map({
        layers: [ vLayer ],
        target: 'map',
        view: new ol.View({
          center: [3223224.4636233835, 5014301.391308421],
          zoom: 11,
          minZoom: 8,
          maxZoom: 22,
        }),
      });
      

    function GetRoot(name){
      for(var i in root.layers) {
          if(root.layers[i]["source-layer"] === name) {
            return root.layers[i];
          }
        }
    }

  

var root;
var rootPath = "https://cbsdell4.ibb.gov.tr/server/rest/services/Hosted/RehberVT/VectorTileServer/resources/styles/root.json";
var spritePath = "https://cbsdell4.ibb.gov.tr/server/rest/services/Hosted/RehberVT/VectorTileServer/resources/sprites/sprite.json";
var pngPath = "https://cbsdell4.ibb.gov.tr/server/rest/services/Hosted/RehberVT/VectorTileServer/resources/sprites/sprite.png";
    $.ajax({
      type: "GET",
      url: spritePath,
      success: function(spriteData) {
        $.ajax({
          type: "GET",
          url: rootPath,
          success: function(rootData) {
            root = rootData;
            mb2olstyle(vTileLayer, rootData, 'esri', undefined, spriteData, pngPath);
            map.addLayer(vTileLayer);
          }
        });
      }
    });

[ahocevar]

When debugging rendering, try using the apply() function of ol-mapbox-style to get the most accurate rendering with the correct tile grid configuration. Then verify your result against that. Things that come to mind:

• Make sure you are using the latest version of ol-mapbox-style. In previous versions, rendering was one zoom-level off from mapbox-gl-js.
• Make sure you are using the latest version of OpenLayers. In previous versions, the tile size default was 256 instead of 512 pixel, which would have caused rendering at an incorrect zoom level.

Other (probably unrelated) things I noticed:

• there is no tilePixelRatio option in recent versions of OpenLayers
• there is no reload option
• the style function for the vLayer is redundant

[ssisman14]

• ol-mapbox style latest version

• OpenLayers latest version

I'm having difficulty implementing the apply() function.

root.json ==> https://codeshare.io/2jo7YR

[Synthian]

Here to bump a 2 year old thread - I have created a minimal example:
https://jsfiddle.net/n9cpd5q7/4/

When you load this fiddle, you should be centered on an example of the labels being not placed in the correct location. Route 79 labels should be on the dark grey road. There are other examples around the map in seemingly random places.

Additionally, ArcGIS vector maps often don't have tiles for the lower zoom levels - the client is expected to only request up to z = 15 (for example) and then use that data for the lower levels. We can manually manage this by setting maxZoom on the VectorTileSource, but it appears that is not possible with apply or olms

[Jared-Miller]

When calculating the midpoint of a MultiLineString, it is interpolating as though the start and end coordinates are for a LineString.

ol-mapbox-style/src/stylefunction.js

Lines 464 to 472 in ac13bf5

	if (geom.getFlatMidpoint) {
	const extent = geom.getExtent();
	const size = Math.sqrt(Math.max(
	Math.pow((extent[2] - extent[0]) / resolution, 2),
	Math.pow((extent[3] - extent[1]) / resolution, 2))
	);
	if (size > 150) {
	//FIXME Do not hard-code a size of 150
	const midpoint = geom.getFlatMidpoint();

Using getFlatMidpoints() here would improve the label position for MultiLineStrings that have a midpoint that isn't on any segments and is equivalent to calling getFlatMidpoint() for LineStrings, based on the render feature in OpenLayers.

Since this solution only uses the midpoint of the first segment in the MultiLineString, it may also place labels strangely on a line with many segments. A slightly less naive solution could use the midpoint of all segments in the line and select the closest midpoint on a segment.

The complete solution for this issue likely involves similar work as #230. Rather than setting a single midpoint geometry on the style for a given feature, it would need to contain all the potential segments and determine in the OpenLayers core which ones should be used.

[ahocevar]

To improve the situation, the easiest solution is to use getFlatMidpoint for LineString geometries and getFlatMidpoints with only the first midpoint for MultiLineString geometries. Anyone willing to provide a pull request?