1

背景：

我正在努力将 HERE 地图与卡车限制集成到我们基于 Web 的软件解决方案中。

问题：

在集成进行到一半时，我注意到在放大/缩小时，标签和卡车限制标志在重新加载后闪烁。我在 HERE (链接) 自己提供的示例中捕获了相同的行为。

在此处输入图像描述

由于问题出现在他们自己的示例中，我认为可以肯定地说这不是我的实现问题。

我已经看到（也在他们的示例中），当他们的矢量图块使用 mapbox.gl 集成时，放大/缩小变得平滑，但由于其他优势（如交通事故显示等）。

问题：

任何人都有任何想法如何解决？

4

2 回答 2

1

我试图重现效果，我明白你的意思。据我了解（我以前没有使用过HERE地图），而用户放大/缩小重新渲染过程single-flicker有时会产生一个点。

有 2 个 JSFiddle 示例A和B，您会发现不同之处，但我认为问题并未消除。

示例代码

/**
 * A full list of available request parameters can be found in the Routing API documentation.
 * see:  http://developer.here.com/rest-apis/documentation/routing/topics/resource-calculate-route.html
 */
var routeRequestParams = {
      routingMode: 'fastest',
      transportMode: 'truck',
      trafficMode: 'enabled',
      origin: '40.7249546323,-74.0110042', // Manhattan
      destination: '40.7324386599,-74.0341396'
    },
    routes = new H.map.Group();

async function calculateRoutes(platform) {
  var router = await platform.getRoutingService(null, 8);

  // The blue route showing a simple truck route
  calculateRoute(router, routeRequestParams, {
    strokeColor: 'rgba(0, 128, 255, 0.7)',
    lineWidth: 10
  });

  // The green route showing a truck route with a trailer
  calculateRoute(router, Object.assign(routeRequestParams, {
    'truck[axleCount]': 4,
  }), {
    strokeColor: 'rgba(25, 150, 10, 0.7)',
    lineWidth: 7
  });

  // The violet route showing a truck route with a trailer
  calculateRoute(router, Object.assign(routeRequestParams, {
    'truck[axleCount]': 5,
    'truck[shippedHazardousGoods]': 'flammable'
  }), {
    strokeColor: 'rgba(255, 0, 255, 0.7)',
    lineWidth: 5
  });
}

/**
 * Calculates and displays a route.
 * @param {Object} params The Routing API request parameters
 * @param {H.service.RoutingService} router The service stub for requesting the Routing API
 * @param {mapsjs.map.SpatialStyle.Options} style The style of the route to display on the map
 */
async function calculateRoute (router, params, style) {
  await router.calculateRoute(params, async function(result) {
    await addRouteShapeToMap(style, result.routes[0]);
  }, console.error);
}

/**
 * Boilerplate map initialization code starts below:
 */

// set up containers for the map  + panel
var mapContainer = document.getElementById('map');

// Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
});

var defaultLayers = platform.createDefaultLayers();

// Step 2: initialize a map - this map is centered over Berlin
var map = new H.Map(mapContainer,
  // Set truck restriction layer as a base map
  defaultLayers.vector.normal.truck,{
  center: {lat: 40.745390, lng: -74.022917},
  zoom: 13.2,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', async () => await map.getViewPort().resize());

// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

map.addObject(routes);

/**
 * Creates a H.map.Polyline from the shape of the route and adds it to the map.
 * @param {Object} route A route as received from the H.service.RoutingService
 */
function addRouteShapeToMap(style, route){
  route.sections.forEach(async (section) => {
    // decode LineString from the flexible polyline
    let linestring = await H.geo.LineString.fromFlexiblePolyline(section.polyline);

    // Create a polyline to display the route:
    let polyline = await new H.map.Polyline(linestring, {
      style: style
    });

    // Add the polyline to the map
    await routes.addObject(polyline);
    // And zoom to its bounding rectangle
    await map.getViewModel().setLookAtData({
      bounds: routes.getBoundingBox()
    });
  });
}

// Now use the map as required...
calculateRoutes (platform);
于 2021-02-11T17:07:24.733 回答
0

不幸的是，没有一个好的解决方案。是通过here api渲染页面的方式造成的。我不认为它可以修复。

话虽如此，您也许可以添加一些会淡入元素的 CSS，以便过渡更平滑。

所以你需要检测的当前值

zoom:

如果它发生变化，你会想要触发 css 动画。

这将需要一些工作并且不会是一个完美的解决方案，但它总比没有好。

于 2021-02-10T15:29:55.273 回答