Question

我想在使用以下程序实现的.svg地图上绘制一些多边形。多边形在单独的.json文件中指定（请参见示例）。是否可以使用“绘制”功能来绘制地图？有更好的方法吗？不幸的是，我不是html专家，也找不到如何做。谁能帮我吗？

<!DOCTYPE html>
<html>

<head>
  <title>World Map</title>
  <meta charset="utf-8">

  <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <style>
    path {
      fill: red;
      stroke: #000;
      stroke-width: .1px;
    }
    .graticule {
      fill: none;
      stroke: #000;
      stroke-width: .2px;
    }
    .foreground {
      fill: none;
      stroke: #333;
      stroke-width: 1.2px;
    }

  </style>
</head>

<body>
  <svg width="960" height="600"></svg>
  <script>
    const svg = d3.select("svg")
    const myProjection = d3.geoAitoff()
    const path = d3.geoPath().projection(myProjection)
    const graticule = d3.geoGraticule()
    function drawMap(err, world) {
      if (err) throw err
      svg.append("g")
        .selectAll("path")
        .data(topojson.feature(world, world.objects.land).features)
        .enter().append("path")
        .attr("d", path);

      svg.append("path")
        .datum(graticule.outline)
        .attr("class", "foreground")
        .attr("d", path);

    }
    d3.json("https://unpkg.com/world-atlas@1.1.4/world/50m.json", drawMap)

  </script>
</body>

</html>

.json文件：


{
"type": "FeatureCollection",                                                      
"features": [
{ "type": "Feature", "properties": {
    "fill": "#ffff00"
},
"geometry": { 
    "type": "Polygon", 
    "coordinates": [[[50.0, 0.0], [-50.0, 0.0], [0.0, 20.0], [50.0, 0.0]]]
} },
{ "type": "Feature","properties": {
    "fill": "#ff00ff"
}, 
"geometry": { 
    "type": "Polygon", 
    "coordinates": [[[70.0, 20.0], [-30.0, 0.0], [0.0, 50.0], [70.0, 20.0]]]
} }
]
}

从.json文件在svg地图上绘制多边形

0 个答案: