High-resolution maps using the HERE Maps API

问题

How would I display a high-resolution map similar to the one at https://beta.here.com using the HERE Maps API for JavaScript?

From the API reference there is an option to change the pixelRatio when creating a map.

var map = new H.Map(
    document.getElementById('map'),
    defaultLayers.normal.map,
    { pixelRatio: 2 }
);

This works great and produces a high-resolution map on high-DPI screens, however, this changes the scale of the map and all map objects become small and text becomes difficult to read.

回答1:

The PPI settings aren't documented very well in the JavaScript API reference, but is documented in the Map Tile API.

Pixels per inch. Resolution that can be requested, valid values are: 72 – normal, used by default if no value provided 250 – mobile 320 – hi-res

You can specify the PPI when creating a default layer (second option).

var defaultLayers = platform.createDefaultLayers(512, 320);

var map = new H.Map(
    document.getElementById('map'),
    defaultLayers.normal.map,
    { pixelRatio: 2 }
);

回答2:

You can also ask the window:

var hidpi = ('devicePixelRatio' in window && devicePixelRatio > 1);

and create the default Layers like this:

var defaultLayers = platform.createDefaultLayers(hidpi ? 512 : 256, hidpi ? 320 : null);

回答3:

For the benefit of anyone using the HereMap tiles without the Javascript API (such as through Leaflet), the crucial parameters are &ppi=250 (&ppi=72 for low-dpi) and /512/ instead of /256/ after the {z}/{x}/{y}.

来源：https://stackoverflow.com/questions/27310007/high-resolution-maps-using-the-here-maps-api

标签

here-api