如何仅将邮政编码覆盖与填充和特定邮政编码一起使用？

Question

/**
 * Shows the postcode layer provided by Platform Data Extension REST API
 * https://developer.here.com/platform-extensions/documentation/platform-data/topics/introduction.html
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function showPostcodes(map, bubble){
  var service = platform.getPlatformDataService();

  style = new mapsjs.map.SpatialStyle({ strokeColor: 'red', fillColor: 'rgba(0, 85, 170, 0.4)' });
  
  //style.setStyle({strokeColor:'Red'});

  
  // create tile provider and layer that displays postcode boundaries
  var boundariesProvider = new mapsjs.service.extension.platformData.TileProvider(service,
  {
    layerId: 'PSTLCB_GEN', level: 12
  }, {
      resultType: mapsjs.service.extension.platformData.TileProvider.ResultType.POLYLINE,
      styleCallback: function(data) {return style}
  });
  var boundaries = new mapsjs.map.layer.TileLayer(boundariesProvider);
  map.addLayer(boundaries);

  // create tile provider and layer that displays postcode centroids
  /*
  var centroidsProvider = new mapsjs.service.extension.platformData.TileProvider(service,
  {
    layerId: 'PSTLCB_MP', level: 12
  }, {
      resultType: mapsjs.service.extension.platformData.TileProvider.ResultType.MARKER
  });
  var centroids = new mapsjs.map.layer.MarkerTileLayer(centroidsProvider);
  map.addLayer(centroids);
  */

  // add event listener that shows infobubble with basic information
  // about the postcode
  centroidsProvider.addEventListener('tap', function(ev) {
    var marker = ev.target;
    bubble.setPosition(marker.getPosition());
    var str = '<nobr>Postal code: ' + marker.getData().getCell('POSTAL_CODE') + '</nobr><br>' +
              'Country code: ' + marker.getData().getCell('ISO_COUNTRY_CODE') + '<br>'
    bubble.setContent(str);
    bubble.open();
  });
}





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

//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'devportal-demo-20180625',
  app_code: '9v2BkviRwi9Ot26kp2IysQ',
  useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
  tileSize: pixelRatio === 1 ? 256 : 512,
  ppi: pixelRatio === 1 ? undefined : 320
});

//Step 2: initialize a map  - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'),
  defaultLayers.normal.map, {pixelRatio: pixelRatio});

map.setCenter({lat:50.892710, lng:-0.916670});
map.setZoom(12);

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

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);

// create info bubble that is used to display the postcode data
bubble = new H.ui.InfoBubble(map.getCenter(), {
  content: ''
});
bubble.close();
ui.addBubble(bubble);

// Now use the map as required...
showPostcodes(map, bubble);

<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<link href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1542186754" rel="stylesheet"/>

<div id="map" style="width: 100%; height: 600px; background: grey" />

我有这个jsfiddle演示，但我正试图...

1. 仅显示包含地图中心纬度的邮政编码的边界
2. 用颜色填充边框

链接到jsfid-> / hectare / w0dves5j /

任何帮助将不胜感激！

Answer 1

假设您正在参考此示例：

https://developer.here.com/api-explorer/maps-js/v3.0/platformDataExtension/postcodes-jsla-pde

1. 您可以从PDE响应中迭代出给定的后多边形，将每个多边形与地图中心进行比较，然后仅显示继承此中心坐标的多边形。

2. 填充多边形：

   new H.map.Polygon(lineString, {
     style: {
       fillColor: '#FFFFCC',
       strokeColor: '#829',
       lineWidth: 8
     }