后端 HERE API Example

temoo · August 12, 2021 · 2 hits

GeoJSON 是一种基于 JSON 的地理空间数据交换格式,相关定义可参考 RFC 7946,一个 GeoJSON 对象可以用来代表点 (Point),线 (LineString),多边形 (Polygon) 等的几何结构,以及特征 (Feature) 的集合,或是一系列的特征 (FeatureCollection)。本范例说明如何使用 HERE API 内置的 parser 在地图上显示 GeoJSON。

为了使用 GeoJSON,我们必须另外加载 API 对应的 data module,通过 H.data.geojson.Reader 类别下载并解析 GeoJSON,然后使用 addLayer 方法在地图上加入一个图层以查看结果。

在本范例中所使用的 GeoJSON 来自 g0v GitHub

JavaScript

function showGeoJSONData (map) {
  // 创建 GeoJSON reader 并下载指定文件
  // 使用 HERE Geocoder API 获得文件的形状并定义地图外观显示
  var reader = new H.data.geojson.Reader('https://raw.githubusercontent.com/g0v/twgeojson/master/json/twCounty2010.geo.json', {
    style: function (mapObject) {
      if (mapObject instanceof H.map.Polygon) {
        mapObject.setStyle({
          fillColor: 'rgba(255, 0, 0, 0.5)',
          strokeColor: 'rgba(0, 0, 255, 0.2)',
          lineWidth: 3
        });
      }
    }
  });

  // 开始解析文件
  reader.parse();

  // 在 map 加入 layer 显示 GeoJSON data
  map.addLayer(reader.getLayer());
}

/**
 * 地图对象 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, {
  zoom: 8,
  center: {lat:24.220198623495669, lng:121.23767464362308},
  pixelRatio: window.devicePixelRatio || 1
});

window.addEventListener('resize', () => map.getViewPort().resize());


// Step 3: 创建 map 交互性
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// 创建缺省 UI 组件
var ui = H.ui.UI.createDefault(map, defaultLayers);

showGeoJSONData(map);

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">
    <meta name="description" content="Parse a GeoJSON file and display the data on a map">
    <title>显示 GeoJSON Data</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <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>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>     
  </head>
  <body>
    <h1>显示 GeoJSON Data</h1>   
    <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;
}

运行结果
https://d1dwq032kyr03c.cloudfront.net/upload/images/20201012/20012621GtsqwaUsOL.png

参考链接
Display GeoJSON Data


No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.