无法将大写字母添加到geojson世界地图

问题描述

我正在使用d3渲染具有可点击国家/地区的世界地图。这些国家/地区来自geoj​​son文件，使用此网站加载特定的大陆，地区或整个世界都没有问题： https://geojson-maps.ash.ms/

但是，该站点的数据在geojson文件中没有任何大写字母。因此，相反，我看了https://www.naturalearthdata.com/，它清楚地表明，一个人应该能够渲染上面有城市的区域。我将它们的文件通过https://mapshaper.org/转换为geojson，但由于某种原因，我只获得城市，作为空白背景下的单个点。我找不到一张提供国家/地区内有首都/城市的国家/地区地图。

这使我想知道我是否应该以某种方式将国家的geojson文件与大写的geojson文件组合在一起，并在另一个之上进行渲染。在这种情况下，那怎么可能？还是有其他解决方案？我将代码附加到渲染世界地图的位置（效果很好）：

const data = await d3.json("world.geo.json")

var topology = topojson.topology({ foo: data });

const countries = topojson.feature(topology,topology.objects.foo).features

let targetCountries = countries
selectCountry()

svg.selectAll(".country")
    .data(countries) /* binder selectAll till enter() */
    .enter().append("path")
    .attr("class","country")
    .attr("d",path)
    .on("mouSEOver",function (d) {
        d3.select(this).classed("targeted",true)
    })
    .on("mouSEOut",false)
    })

解决方法

我现在有一个解决方案，将其发布在此处，以防其他人使用：

const data = await Promise.all([d3.json("world.geo.json"),d3.json("capitals_0yl.json")])

var topology = topojson.topology({ foo: data[0],bar: data[1] });

const countries = topojson.feature(topology,topology.objects.foo).features
const cities = topojson.feature(topology,topology.objects.bar).features

let combined = d3.merge([countries,cities])

svg.selectAll(".country")
    .data(combined) /* binder selectAll till enter() */
    .enter().append("path")
    .attr("class","country")
    .attr("d",path)
    .on("mouseover",function (d) {
        d3.select(this).classed("targeted",true)
    })
    .on("mouseout",false)
    })