Question

我正在按照react-simple-maps npm文档的指南来启动和运行地图，这样我就可以玩它了。

我使用的代码示例来自以下链接的使用部分：

https://www.npmjs.com/package/react-simple-maps#Geographies-component

我遇到的问题是topojson文件加载：

 <Geographies geographyUrl={ "/path/to/your/topojson-map-file.json" }>

当我尝试加载topojson文件时，我似乎不断获取：

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

尝试加载文件时出现

错误。

它发生在以下声明的Geographies.js第52行：

request.open("GET", geographyUrl, true);

我正在使用其在GitHub页面中的示例中使用的topojson文件之一，因此JSON是正确的。

在我的React应用程序中，我有topojson文件位于：

src/static/topo-data.json

我尝试了将JSON文件加载到组件页面的不同方法，例如导入它：

import data from '../../static/topo-data.json'

我使用create-react-app来创建应用程序，据我所知，Json-loader是默认的。

我还把完整的路径放到geographyUrl部分，没有运气。

当我调试代码以查看response.responseText时，它不是JSON文件，它只是我自己的应用程序的index.html文件。我认为这是我加载文件的方式不正确。

Answer 1

在create-react-app环境中使用geographyUrl加载topojson文件时，必须将其放在公用文件夹中。如果你将world-50m.json直接放在公共场所（./public/world-50m.json），这应该可以解决问题：

// in ./src/App.js

import React, { Component } from 'react'
import './App.css'

import {
  ComposableMap,
  ZoomableGroup,
  Geographies,
  Geography,
} from "react-simple-maps"

class App extends Component {
  render() {
    return (
      <div className="App">
        <ComposableMap>
          <ZoomableGroup>
            <Geographies geographyUrl="/world-50m.json">
              {(geographies, projection) =>
                geographies.map((geography, i) =>
                  <Geography
                    key={geography.id}
                    geography={geography}
                    projection={projection}
                  />
                )
              }
            </Geographies>
          </ZoomableGroup>
        </ComposableMap>
      </div>
    )
  }
}

export default App

或者，如果您想通过json导入加载topojson，可以使用topojson-client进行转换，然后将其直接反馈给geographyPaths而不是geographyUrl。您可以从这里开始：

https://github.com/zcreativelabs/react-simple-maps/blob/master/examples/custom-json-geographyPaths/pages/index.js

但是只使用json导入，而不是使用axios加载topojson。

希望这有帮助。

React简单地图加载topo-json解析问题

1 个答案: