如何为 HERE Javascript API 设置 HERE Base Map Tiles API？
How to setup HERE Base Map Tiles API for HERE Javascript API?
我正在为我的网络应用程序成功实施 HERE Javascript API。我想减轻地图的呈现方式，所以我首先尝试创建自己的地图样式，如 this guide.
中所呈现的那样
给出的例子工作正常，但我无法按照我的意愿调整它而不会出现故障（我猜缩进是问题，但尽管尝试了几个小时我还是无法验证它）。我找不到任何 "Map styling file generator" 所以我几乎放弃了，直到找到这些：
；和
Here JavaScript 3.0 API - decent color scheme
不幸的是，这些答案中的给定代码不起作用：
//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('mapp'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
而 defaultLayers.vector.normal.map 和 reduced 对象似乎是同一类对象，使用 defaultLayers 得到默认地图，使用简化布局得到一张没有错误的空白地图在控制台上，但那些 GET 类型错误：
mapsjs-core.js:33 GET https://1.base.hereapi.com/maptile/2.1/info?xnlp=CL_JSMv3.1.0.3&apikey=[My credentials]&output=json net::ERR_NAME_NOT_RESOLVED
d @ mapsjs-core.js:33
ic @ mapsjs-core.js:34
application/json @ mapsjs-core.js:70
af.yj @ mapsjs-core.js:69
(anonymous) @ mapsjs-core.js:44
(anonymous) @ mapsjs-core.js:44
zj @ mapsjs-core.js:44
add @ mapsjs-core.js:44
rd @ mapsjs-core.js:43
af @ mapsjs-core.js:69
n.ga @ VM2398:15
n.hh @ VM2398:18
tn @ VM2398:14
T.vb @ VM2398:14
T.th @ VM2398:20
(anonymous) @ script.js:60
下面是我的完整代码：
///### Credentials
// Identification service, this key only work on present domain.
var platform = new H.service.Platform({
'apikey': '[Well .. my credentials]'
});
///### Map setup
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
///### Map Interaction
// Add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
// Set the map interactive
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers ,'es-ES');
可能获取Map Tiles的语句变了？
我刚刚让你的源代码工作。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script type="text/javascript" charset="utf-8">
var style = `
sources:
omv:
type: OMV
max_zoom: 17
min_display_zoom: 1
scene:
background:
color: [1.000, 1.000, 1.000, 1.00]
layers:
water_areas:
data: {source: omv, layer: water}
draw:
polygons:
order: 1 # z-order of the layer
color: [0.055, 0.604, 0.914, 1.00]
road:
data: {source: omv, layer: roads}
draw:
lines:
order: 2
color: [0.561, 0.561, 0.561, 1.00]
width: 15
major_road:
filter:
kind: 'major_road'
draw:
lines:
color: [0.882, 0.553, 0.086, 1.00]
width: 5px
`;
//Initialize the Platform object:
var platform = new H.service.Platform({
'apikey': 'APIKEY'
});
// Get the default map types from the Platform object:
var defaultLayers = platform.createDefaultLayers();
// Instantiate the map:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: { lng: 13.8, lat: 52.3 }
});
var baseLayer = map.getBaseLayer();
baseLayer.getProvider().setStyle(new H.map.Style(style));
</script>
</body>
</html>
您应该使用 js 3.0 版而不是 3.1 版来使您的代码正常工作
这对你有用吗？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>
<body>
<div id="map" style="position:absolute; width:100%; height:100%; background:grey" ></div>
<!--<div id="panel" style="position:absolute; width:49%; left:51%; height:100%; background:inherit" ></div>-->
<script type="text/javascript" charset="UTF-8" >
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true
});
//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
//Step 3: make the map interactive
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
</script>
</body>
</html>
我正在为我的网络应用程序成功实施 HERE Javascript API。我想减轻地图的呈现方式，所以我首先尝试创建自己的地图样式，如 this guide.
中所呈现的那样给出的例子工作正常，但我无法按照我的意愿调整它而不会出现故障（我猜缩进是问题，但尽管尝试了几个小时我还是无法验证它）。我找不到任何 "Map styling file generator" 所以我几乎放弃了，直到找到这些：
Here JavaScript 3.0 API - decent color scheme
不幸的是，这些答案中的给定代码不起作用：
//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('mapp'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
而 defaultLayers.vector.normal.map 和 reduced 对象似乎是同一类对象，使用 defaultLayers 得到默认地图，使用简化布局得到一张没有错误的空白地图在控制台上，但那些 GET 类型错误：
mapsjs-core.js:33 GET https://1.base.hereapi.com/maptile/2.1/info?xnlp=CL_JSMv3.1.0.3&apikey=[My credentials]&output=json net::ERR_NAME_NOT_RESOLVED
d @ mapsjs-core.js:33
ic @ mapsjs-core.js:34
application/json @ mapsjs-core.js:70
af.yj @ mapsjs-core.js:69
(anonymous) @ mapsjs-core.js:44
(anonymous) @ mapsjs-core.js:44
zj @ mapsjs-core.js:44
add @ mapsjs-core.js:44
rd @ mapsjs-core.js:43
af @ mapsjs-core.js:69
n.ga @ VM2398:15
n.hh @ VM2398:18
tn @ VM2398:14
T.vb @ VM2398:14
T.th @ VM2398:20
(anonymous) @ script.js:60
下面是我的完整代码：
///### Credentials
// Identification service, this key only work on present domain.
var platform = new H.service.Platform({
'apikey': '[Well .. my credentials]'
});
///### Map setup
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
///### Map Interaction
// Add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
// Set the map interactive
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers ,'es-ES');
可能获取Map Tiles的语句变了？
我刚刚让你的源代码工作。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script type="text/javascript" charset="utf-8">
var style = `
sources:
omv:
type: OMV
max_zoom: 17
min_display_zoom: 1
scene:
background:
color: [1.000, 1.000, 1.000, 1.00]
layers:
water_areas:
data: {source: omv, layer: water}
draw:
polygons:
order: 1 # z-order of the layer
color: [0.055, 0.604, 0.914, 1.00]
road:
data: {source: omv, layer: roads}
draw:
lines:
order: 2
color: [0.561, 0.561, 0.561, 1.00]
width: 15
major_road:
filter:
kind: 'major_road'
draw:
lines:
color: [0.882, 0.553, 0.086, 1.00]
width: 5px
`;
//Initialize the Platform object:
var platform = new H.service.Platform({
'apikey': 'APIKEY'
});
// Get the default map types from the Platform object:
var defaultLayers = platform.createDefaultLayers();
// Instantiate the map:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: { lng: 13.8, lat: 52.3 }
});
var baseLayer = map.getBaseLayer();
baseLayer.getProvider().setStyle(new H.map.Style(style));
</script>
</body>
</html>
您应该使用 js 3.0 版而不是 3.1 版来使您的代码正常工作 这对你有用吗？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>
<body>
<div id="map" style="position:absolute; width:100%; height:100%; background:grey" ></div>
<!--<div id="panel" style="position:absolute; width:49%; left:51%; height:100%; background:inherit" ></div>-->
<script type="text/javascript" charset="UTF-8" >
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true
});
//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
//Step 3: make the map interactive
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
</script>
</body>
</html>