Comments (7)
Please share the code you use to create the OpenLayers / ol-mapbox-style map in the above screenshots.
from ol-mapbox-style.
"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.
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 thevLayer
is redundant
from ol-mapbox-style.
-
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.
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.
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
Using getFlatMidpoints()
here would improve the label position for MultiLineString
s that have a midpoint that isn't on any segments and is equivalent to calling getFlatMidpoint()
for LineString
s, 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.
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)
- Mapbox streets-v12 style trys to load invalid fonts HOT 1
- Make source available in transformRequest HOT 2
- Guessing of access token parameter may lead to bad requests HOT 1
- Requests to third-party server for fonts HOT 8
- issue with standalone example using recent versions of olms (METERS_PER_UNIT error) HOT 1
- applyBackground issue HOT 3
- line-pattern webgl HOT 3
- Provide a default URL template for fonts when 'ol:webfonts' not available HOT 1
- Issue rendering fill layers above symbol layers HOT 2
- 加载mapboxgl的样式时文本标签显示错乱 HOT 1
- Maybe a bug in stylefunction HOT 2
- Vector tile layer with MVT format clip circle style HOT 6
- color2 is null loading outdoor-v2 HOT 1
- Example of using a styled Esri vector tiles basemap (but not as the whole map) HOT 1
- Text-Allow-Overlap and Declutter issues. HOT 6
- Incorrect Tiles being requested for projections other than Web Mercator (EPSG:3857) HOT 2
- render vector tiles offline, or render vector tiles to raster for later offline use? HOT 3
- Applying style to VectorTile layer HOT 2
- Displaying symbols from sprites HOT 6
- Rendering very slow when there are many text labels HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ol-mapbox-style.