PTV Vector Map街道小标签显示异常技术排查请求

环境信息 #

• 前端：Java + JavaFx
• 后端：WildFly + Keycloak
• 地图实现：通过ol.js、olms.js、require.js及PTV/MapBox加载PTV矢量地图

问题现象 #

部分街道名称小标签显示位置异常，其定位中心与地图其他元素（如道路线）不符，但其余地图元素均显示正常（示例图可见标签偏离对应道路位置）。

相关样式配置 #

经排查，standard.json中以下配置块负责渲染异常标签：

{"id": "TSP_RoadLocal_Label","type": "symbol","source": "ptv","source-layer": "LayerTransport","minzoom": 13,"filter": ["all",["==","$type","LineString"],["==","display_class",5]],"layout": {"icon-rotation-alignment": "auto","symbol-placement": "line","text-font": ["Noto Sans Regular"],"text-size": {"stops": [[10,8],[20,14]]},"text-letter-spacing": 0.1,"text-field": "{street_name}"},"paint": {"text-color": "#1B1C1F","text-opacity": {"stops": [[13,0],[14,1]]},"text-halo-color": "hsl(0, 0%, 100%)","text-halo-width": 2}}

相关实现代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset='utf-8' />
<meta name="viewport" content="width= 100, initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {height: 100%}
body {height: 100%; margin: 0; padding: 0}
#map_canvas {position:absolute; top:0; bottom:0; width:100%; height: 100%}
</style>
<script src="libraries/ol.js"></script>
<script src="libraries/olms.js"></script>
<script src="libraries/require.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="map_canvas" style="height: 100%; width: 100%"></div>
<script>
var fromProjection; var toProjection; var zoom;
var apiUrl = 'https://api.myptv.com/maps/v1/vector-tiles/{z}/{x}/{y}?apiKey='; var apiKey; var urlTemplate = apiUrl + apiKey; var jsonStyle;
var map;
function setApiKey(api) {apiKey = api; urlTemplate = apiUrl + apiKey;}
function init() {try {if (map != null) {return;} map = new ol.Map({target: 'map_canvas', view: new ol.View({ center: ol.proj.transform([8.7528, 50.377], 'EPSG:4326', 'EPSG:3857'), zoom: 18}), controls:[]}); const layer = new ol.layer.VectorTile({source: new ol.source.VectorTile({format: new ol.format.MVT(), url:urlTemplate, maxZoom: 18,}),}); fetch('./libraries/standard.json').then((response) => response.json()).then((json) => layer.setStyle(olms.stylefunction(layer,json, 'ptv'))); map.addLayer(layer);} catch (e) {console.log(e);}}
function getMap() {init(); return map;}
function getZoom() {return zoom;}
function setZoom(zoomLvl) {zoom = zoomLvl; getMap().getView().setZoom(zoom);}
function getCenterLat() {return ol.proj.transform(getMap().getView().getCenter(), 'EPSG:3857', 'EPSG:4326')[1];}
function getCenterLng() {return ol.proj.transform(getMap().getView().getCenter(), 'EPSG:3857', 'EPSG:4326')[0];}
function setCenter(lat, lng) {try {getMap().getView().setCenter(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857'));} catch (e) {console.log(e)}}
</script>
</body>
</html>

Java渲染类代码 #

import java.net.URL; import java.util.Vector; import javafx.application.Platform;
public class PTVDevVectorMapRenderer extends AbstractHtmlInteractiveMapRenderer {
private static final long serialVersionUID = 1L; public String apiKey = KonstantenCache.getWertGCW("PTV_DEVELOPER", "PTV_API_KEY");
public PTVDevVectorMapRenderer() {super(); initializeMap();}
/** Initialize PTV Map */
public void initializeMap() {final URL urlPTVMaps = getClass().getResource("PTVDevVectorMap.html"); htmlRenderer.setContent(urlPTVMaps.toExternalForm()); refresh(); Platform.runLater(new Runnable() {@Override public void run() {setApiKey(); String scriptInit = "init()"; htmlRenderer.execute(scriptInit);}});}
public void setApiKey() {String apiKey = KonstantenCache.getWertGCW("PTV_DEVELOPER", "PTV_API_KEY"); String scriptApiKey = "setApiKey('" + apiKey + "')"; htmlRenderer.execute(scriptApiKey);}
@Override public void setCenter(double lat, double lng) {String scriptCenter = "setCenter(" + lat + "," + lng + ")"; htmlRenderer.execute(scriptCenter);}
@Override public double getCenterLat() {double centerLat = (double) htmlRenderer.executeAndReturn("getCenterLat()"); return centerLat;}
@Override public double getCenterLng() {double centerLng = (double) htmlRenderer.executeAndReturn("getCenterLng()"); return centerLng;}
@Override public int getZoom() {Object obj = htmlRenderer.executeAndReturn("getZoom()"); if (obj instanceof String) {return 13;} return (int) obj;}
@Override public void setZoom(int zoom) {String script = "setZoom(" + zoom + ")"; htmlRenderer.execute(script);}
@Override public int getMaxZoomLvl() {return 19;}
@Override public int getMinZoomLvl() {return 3;}
@Override public double getDistance(double[] objectPoint, double[] objectPoint2) {String script = "calcDistance(" + objectPoint[0] + "," + objectPoint[1] + "," + objectPoint2[0] + "," + objectPoint2[1] + ")"; double distance = (double) htmlRenderer.executeAndReturn(script); return distance;}
@Override public void setRoute(double[] objectPoint, double[] objectPoint2) {}
@Override public Vector<?> getRoutePoints(double[] objectPoint, double[] objectPoint2) {return null;}
@Override public Vector<double[]> getFahrtgebiet() {return null;}
@Override public double[] getFahrtgebietPoint() {return null;}
}

恳请协助排查部分街道名称小标签显示异常的原因，感谢支持！

内容的提问来源于stack exchange，提问作者Jordi Segura