angular - 如何在 Angular 5 应用程序中使用 Mapbox？

问题描述

我在我的Mapbox帐户中创建了自定义样式，并尝试在我的 Angular 5 应用程序中使用相同的样式。

下面的 html 文件将显示美国所有州的人口密度

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SdohCompare</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    h2,
    h3 {
      margin: 10px;
      font-size: 1.2em;
    }

    h3 {
      font-size: 1em;
    }

    p {
      font-size: 0.85em;
      margin: 10px;
      text-align: left;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
    .map-overlay {
      position: absolute;
      bottom: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.8);
      margin-right: 20px;
      font-family: Arial, sans-serif;
      overflow: auto;
      border-radius: 3px;
    }

    #features {
      top: 0;
      height: 100px;
      margin-top: 20px;
      width: 250px;
    }

    #legend {
      padding: 10px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      line-height: 18px;
      height: 150px;
      margin-bottom: 40px;
      width: 100px;
    }

    .legend-key {
      display: inline-block;
      border-radius: 20%;
      width: 10px;
      height: 10px;
      margin-right: 5px;
    }
  </style>
</head>

<body>
  <div class="container-fluid">
    <div id='map'></div>
    <div class='map-overlay' id='features'>
      <h2>US population density</h2>
      <div id='pd'>
        <p>Hover over a state!</p>
      </div>
    </div>
    <div class='map-overlay' id='legend'></div>
  </div>
  <script>
    mapboxgl.accessToken = 'pk.apikey';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/styles/cjitxqf1n0tgu2sp94h48zhu4'
    });
    map.on('load', function () {
      var layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
      var colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
      for (i = 0; i < layers.length; i++) {
        var layer = layers[i];
        var color = colors[i];
        var item = document.createElement('div');
        var key = document.createElement('span');
        key.className = 'legend-key';
        key.style.backgroundColor = color;

        var value = document.createElement('span');
        value.innerHTML = layer;
        item.appendChild(key);
        item.appendChild(value);
        legend.appendChild(item);
      }
    });
    map.on('mousemove', function (e) {
      var states = map.queryRenderedFeatures(e.point, {
        layers: ['statedata']
      });

      if (states.length > 0) {
        document.getElementById('pd').innerHTML = '<h3><strong>' + states[0].properties.name + '</strong></h3><p><strong><em>' + states[0].properties.density + '</strong> people per square mile</em></p>';
      } else {
        document.getElementById('pd').innerHTML = '<p>Hover over a state!</p>';
      }
    });
    map.getCanvas().style.cursor = 'default';
    map.fitBounds([[-133.2421875, 16.972741], [-47.63671875, 52.696361]]);
  </script>
</body>
</html>

如何将上述代码转换为 Angular 5 应用程序？有没有文件可以做到这一点？

任何帮助都非常感谢..

标签： angularmapboxmapbox-gl-js

angular - 如何在 Angular 5 应用程序中使用 Mapbox？

问题描述

解决方案

推荐阅读