Javascript 在这里闪烁图层矢量地图

背景：

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

问题：

在集成的中途，我注意到当放大/缩小时，标签和卡车限制标志在重新装载后闪烁。我在这里（）自己提供的示例中捕获了相同的行为

由于问题发生在他们自己的示例中，我认为可以安全地声明这不是我的实现问题

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

问题：

---

有人知道如何解决这个问题吗？

不幸的是，没有一个好的解决方案。这是由通过here api呈现页面的方式造成的。我认为这是无法解决的

已经说过，您可能能够添加一些css，这些css将在元素中淡出，因此过渡更加平滑

因此，您需要检测

zoom:

如果它改变了，你会想要触发css动画

---

这需要一些工作，不是一个完美的解决方案，但总比什么都没有好。

我试图重现这种效果，我理解你的意思。据我所知（我以前没有在这里使用过

贴图

），而用户放大/缩小重新渲染过程有时会产生点的

单一闪烁

这里有两个JSFIDLE示例，您将发现一个不同之处，但我认为问题并没有消除

示例代码

/**
 * 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);

---

我不熟悉here.com地图API，但通过查看上面链接的示例，我认为您运气不好。在检查地图本身时，我发现它是一个画布元素。因此，地图是通过JavaScript绘制的，我担心您对此无能为力。除非有一些插件机制，你可以用它覆盖绘图程序。它不会闪烁，它是在一个新的位置渲染…我认为另一个人回答得更好