我可以使用传单js创建地图来查看美国城市的区号吗？

Question

<!DOCTYPE html>
<html>

<head>
  <title>Leaflet sample</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>

<body>
  <div id="map" style="width: 900px; height: 580px"></div>
  <script>
    // Creating map options
    var mapOptions = {
      center: [39.0997, 94.5786],
      zoom: 4
    }

    // Creating a map object
    var map = new L.map('map', mapOptions);

    // Creating a Layer object
    var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

    // Adding layer to the map
    map.addLayer(layer);
  </script>
</body>
</html>

Answer 1

美国区号图已在此处：

https://www.allareacodes.com/area-code-map.htm

我认为你需要开发这样的东西：

https://leafletjs.com/examples/choropleth/

这是分区统计图。在上面的link中，你可以找到如何做的方法。第一手的例子适用于人口密度。您可以将其更改为邮政编码，因为您已准备好州边界 (this link)。

这里的关键是：

 function getColor(d) {
   return d &gt; 1000 ? '#800026' :
       d &gt; 500  ? '#BD0026' :
       d &gt; 200  ? '#E31A1C' :
       d &gt; 100  ? '#FC4E2A' :
       d &gt; 50   ? '#FD8D3C' :
       d &gt; 20   ? '#FEB24C' :
       d &gt; 10   ? '#FED976' :
                  '#FFEDA0';
  }

和

 function style(feature) {
     return {
      fillColor: getColor(feature.properties.density),
      weight: 2,
      opacity: 1,
      color: 'white',
      dashArray: '3',
      fillOpacity: 0.7
    };
   }

   L.geoJson(statesData, {style: style}).addTo(map);

最后是突出显示选项

 function highlightFeature(e) {
var layer = e.target;

 layer.setStyle({
    weight: 5,
    color: '#666',
    dashArray: '',
    fillOpacity: 0.7
  });

   if (!L.Browser.ie &amp;&amp; !L.Browser.opera &amp;&amp; !L.Browser.edge) {
    layer.bringToFront();
 }
 }

我可以使用传单js创建地图来查看美国城市的区号吗？

Can I create a map using leaflet js to view area codes of cities in the United States?

html

javascript

css

leaflet