Giter VIP home page Giter VIP logo

Comments (7)

ahocevar avatar ahocevar commented on June 24, 2024

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

from ol-mapbox-style.

ssisman14 avatar ssisman14 commented on June 24, 2024

"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);
          }
        });
      }
    });

from ol-mapbox-style.

ahocevar avatar ahocevar commented on June 24, 2024

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

from ol-mapbox-style.

ssisman14 avatar ssisman14 commented on June 24, 2024
  • ol-mapbox style latest version

  • OpenLayers latest version

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

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

from ol-mapbox-style.

Synthian avatar Synthian commented on June 24, 2024

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

from ol-mapbox-style.

Jared-Miller avatar Jared-Miller commented on June 24, 2024

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

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.

from ol-mapbox-style.

ahocevar avatar ahocevar commented on June 24, 2024

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?

from ol-mapbox-style.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.