HERE API Example - 使用 Platform Data Extension REST API 显示邮递区号图层
HERE Fleet Telematics Advanced 资料集是一种 REST API，可让您使用 HERE API 存取 HERE 核心地图资料，相关介绍可参考 HERE Fleet Telematics Advanced Data Sets，本文说明使用 Platform Data Extension REST API 显示邮递区号图层，经纬度设定在台北市。
JavaScript
/**
* 使用 Platform Data Extension REST API 显示邮递区号图层
* https://developer.here.com/platform-extensions/documentation/platform-data/topics/introduction.html
*/
function showPostcodes(map, bubble){
var service = platform.getPlatformDataService();
style = new H.map.SpatialStyle();
// 建立 tile provider 和 layer 显示邮递区号边界 boundaries
var boundariesProvider = new H.service.extension.platformData.TileProvider(service,
{
layerId: 'PSTLCB_GEN', level: 12
}, {
resultType: H.service.extension.platformData.TileProvider.ResultType.POLYLINE,
styleCallback: function(data) {return style}
});
var boundaries = new H.map.layer.TileLayer(boundariesProvider);
map.addLayer(boundaries);
// 建立 tile provider 和 layer 显示邮递区号矩心 centroids
var centroidsProvider = new H.service.extension.platformData.TileProvider(service,
{
layerId: 'PSTLCB_MP', level: 12
}, {
resultType: H.service.extension.platformData.TileProvider.ResultType.MARKER
});
var centroids = new H.map.layer.MarkerTileLayer(centroidsProvider);
map.addLayer(centroids);
// 加入 event listener，显示带有基本资讯包含邮递区号的资讯气泡
centroidsProvider.addEventListener('tap', function(ev) {
var marker = ev.target;
bubble.setPosition(marker.getGeometry());
var str = '<nobr>邮递区号: ' + marker.getData().getCell('POSTAL_CODE') + '</nobr><br>' +
'国家代码: ' + marker.getData().getCell('ISO_COUNTRY_CODE') + '<br>'
bubble.setContent(str);
bubble.open();
});
}
/**
* map 初始化相关代码:
*/
//Step 1: 初始化 platform
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: 初始化 map
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map, {
pixelRatio: window.devicePixelRatio || 1
});
// 加入 resize listener
window.addEventListener('resize', () => map.getViewPort().resize());
map.setCenter({lat:25.03746, lng:121.564558});
map.setZoom(13);
//Step 3: 增加 map 互动性
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// 建立预设 UI 元件
var ui = H.ui.UI.createDefault(map, defaultLayers);
// 建立资讯气泡显示资讯
bubble = new H.ui.InfoBubble(map.getCenter(), {
content: ''
});
bubble.close();
ui.addBubble(bubble);
showPostcodes(map, bubble);
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Map with postcodes from the Advanced Data Sets</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../template.css" />
<script type="text/javascript" src='../test-credentials.js'></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
</head>
<body id="markers-on-the-map">
<div id="map"></div>
<script type="text/javascript" src='demo.js'></script>
</body>
</html>
CSS
#map {
width: 95%;
height: 450px;
background: grey;
}
#panel {
width: 100%;
height: 400px;
}
执行结果
参考资料
Map with postcodes from the Advanced Data Sets
>>: Python - pandas (vi) dataframe资料框之相关指令
Day 22 - 新的一年离职同事的惊喜专案包(上)
顺利结束了研习的指导计画以及协助厂商的辅导计画案之後，新的一年也到来并且也有越来越多的需求，而在这个...
[day26] - Angular Component to Web Component
後来发现 , 之前说明了 Vue . React Component 如何变成 Web Compon...
DAY8 Linebot 自动回应-1
设定完成後，开启Django应用程序(APP)的views.py档案，这边就是撰写LINE Bot接...
更新纪录 2021/10/03
1.把铁人赛的程序码全部移到Ithome30days里面，之後没有发现甚麽bug应该不会修改他 2....