使用mapshaper簡化GeoJsonFeatureCollection會導致問題

更具體地說，它使相同的代碼在地圖上呈現輪廓，并且在使用指標事件時僅識別最后一個路徑元素。我使用他們的網站在 mapshaper 上簡化了一個continents.json 檔案，并替換了我的 public/data 檔案夾中的檔案。目前我正在獲取一個組件中的資料并將其傳遞給另一個組件。

const WorldMapAtlas = () => {
    const [continents, continents] = useState<null | FeatureCollection>(null)

    useEffect(() => {
        fetch('data/continents_simple.json')
            .then(response => response.json())
            .then((worldData) => {
                let continents: FeatureCollection = (worldData as FeatureCollection)
                setContinents(continents)
            })
            .catch(error => console.log(error))        
    }, [])

    return (
        <>
            {continents &&
                 <div className="w-3/4" >
                     <TestMap projectionType={geoNaturalEarth1} GeoJson={continents} size={[928, 454]} translate={[464, 227]} />
                 </div>
            }
        </>
    )
}

然后我嘗試使用 TestMap 組件渲染它

interface props {
    projectionType: () => GeoProjection;
    GeoJson: FeatureCollection | null;
    size: [number, number];
    translate: [number, number];
}

const TestMap = (props: props) => {
    const svgRef = useRef(null)
    const [height, width] = props.size;

    useEffect(() => {
        //accesses the reference element
        const svg = d3.select(svgRef.current)
 
        //declares the geoJson, projection, and path(pathGenerator)
        const geoJson = props.GeoJson
        const projection = props.projectionType()
            .fitSize(props.size, geoGraticule10())
            .translate(props.translate)      
        const path = d3.geoPath().projection(projection)

        //uses d3 to inject the data into the svg element
        const features = svg.selectAll(".country")
            .data(geoJson ? geoJson.features : [])
            .enter().append("path")

            //basic styling attributes
            .attr("d", path)
            .attr("fill", "none")
            .attr("stroke", "aliceblue")
            .attr("stroke-width", "0.5px")

            //allows pointer events anywhere inside the path even when fill=none
            .attr("pointer-events", "visibleFill")
            .attr("visibility", "visible")

            //sets the path element id to the continent name
            .attr("id", (d) => {
                 return `${d.properties.continent}`
            })

            //selects the current continent and highlights it by increasing the stroke width
            .on("mouseover", (d,i) => {
                svg.select(`#${i.properties.continent}`).attr("stroke-width", "2px")
            })

            //deselects
            .on("mouseleave", (d,i) => {
                svg.select(`#${i.properties.continent}`).attr("stroke-width", "0.5px")
            })

            //adds the .country attribute to allow for later updates on the svg element
            .attr("class", "country")
    }, [geoJson]);

    return (
        <div className="bg-blue-400">
            <svg ref={svgRef} viewBox={`0 0 ${props.size[0]} ${props.size[1]}`} />
        </div>
    )
}

export default TestMap

當我使用未簡化的 json 檔案時，它作業正常。每個國家都被突出顯示，但筆畫寬度重繪需要一段時間。當我所做的只是將 WorldMapAtlas 中的 fetch 更改為簡化的 json 時，會出現一個輪廓（它似乎并不特定于一個路徑，只有在洗掉所有路徑元素時才會消失（開發工具）），并且只有最后一個功能無論游標在哪里，json都會突出顯示。

紅點是我的游標所在的位置。

我在這方面花了很多時間，我很感激我能得到的任何幫助！謝謝

uj5u.com熱心網友回復：

在嘗試了很多不同的簡化選項后，我覺得很傻。您所要做的就是將 gj2008 選項添加到輸出命令中。

gj2008            [GeoJSON] use original GeoJSON spec (not RFC 7946)

這解決了所有問題！雖然我不知道為什么，但我不確定如何檢查原始 GeoJSON 規范，也不確定有什么區別。希望這可以幫助遇到同樣問題的任何人！

標籤：反应 打字稿 d3.js geojson d3-地理

上一篇：D3多邊形投影錯誤

下一篇：使用SharedFlow從房間資料庫中獲取查詢結果