Я пытаюсь отобразить некоторые шейп-файлы, используя ReactionJs и D3.Я думаю, что файловая структура geojson может вызывать некоторые проблемы, хотя единственная ошибка, которую я вижу в источнике, это «Cannot GET / Map»;/ Карта, являющаяся маршрутом к компоненту CMAP, подробно описана ниже.Пример, которым я следую, приведен ниже, единственное отличие состоит в том, что данные получены.
https://medium.com/@zimrick/how-to-create-pure-react-svg-maps-with-topojson-and-d3-geo-e4a6b6848a98
import React from 'react';
import axios from 'axios';
import * as d3 from 'd3';
import { geoMercator, geoPath } from "d3-geo"
export default class CMAP extends React.Component {
constructor() {
super()
this.state = {
shpData: []
}
}
projection() {
return geoMercator()
.scale(100)
.translate([ 800 / 2, 450 / 2 ])
}
componentDidMount() {
axios.get('http://localhost:5000/map')
.then(res => {
const shpData = res.data;
this.setState({shpData});
})
}
render() {
return (
<svg width={ 800 } height={ 450 } viewBox="0 0 800 450">
<g className="countries">
{
this.state.shpData.map((d,i) => (
<path
key={ `path-${ i }` }
d={ geoPath().projection(this.projection())(d) }
className="country"
fill={ `rgba(38,50,56,${1 / this.state.shpData.length * i})` }
stroke="#FFFFFF"
strokeWidth={ 0.5 }
/>
))
}
</g>
</svg>
)
}
}
** geojson Данные показаны на http://localhost:5000/map **
[{"Name":"Foothills","geojson":"
{\"type\":\"MultiPolygon\",\"coordinates\":
[[[[-114.922165212,36.0851699760009],
[-114.922138874,36.0849262190008], [-114.921774356881,36.0850707749982], [-114.921819,36.0830600000008], [-114.921834748284,36.0820342210052], [-114.921922,36.0763510000006], [-114.922003654909,36.0715755639993], [-114.922011,36.0711460000007], [-114.922201,36.0417680000006], [-114.912893,36.0417680000006], [-114.912893,36.0344996840007], [-114.912893,36.0342310000001],[-114.909518318998,36.0343404337493],[-114.908144,36.0343850000001],[-114.908524,36.0271560000007],[-114.912703,36.0271560000007],[-114.912701810816,36.0272474544695],[-114.914037779274,36.0272506660356],[-114.914093029,36.0273279710009],[-114.922873368,36.0272931440002],[-114.92303011,36.0272925170002],[-114.923164874,36.0272919770005],[-114.940890571,36.0272239440001],[-114.949772545,36.0272176640003],[-114.959126837,36.0271655800006],[-114.959119454,36.0290018710004],[-114.95911927,36.0290787910004],[-114.959117718,36.0308026360007],[-114.959115873,36.0326171360007],[-114.959114082,36.0345319070001],[-114.959084304,36.0346086730004],[-114.959083453,36.0349039900007],[-114.959066109,36.0350659830004],[-114.95906561,36.0351291650004],[-114.95906354,36.0353915090007],[-114.959032168,36.0355630440005],[-114.959025306,36.0358432200006],[-114.958937916,36.0417986350007],[-114.958938268,36.0419950590006],[-114.958935224,36.0431035270005],[-114.959094901,36.0432032560005],[-114.95908892,36.0487813520004],[-114.959068136,36.0488966250006],[-114.958893355,36.0489410430005],[-114.95863858,36.0489410890005],[-114.958563911,36.0489187230006],[-114.958558235,36.0501453040006],[-114.958559015,36.0508224840005],[-114.958559946,36.0515340050006],[-114.958563833,36.0516040780005],[-114.958561477,36.0525710690005],[-114.958557453,36.0543374750003],[-114.958557351,36.0559019850006],[-114.958556541,36.0561918070004],[-114.958551762,36.0580268870003],[-114.958547167,36.0597850480004],[-114.958545752,36.0602850240006],[-114.958521559,36.0608041110005],[-114.958518345,36.0616653300006],[-114.958511492,36.0634949040004],[-114.958507946,36.0639701440001],[-114.958502827,36.0652860070004],[-114.958496125,36.0670427810001],[-114.958493987,36.0676073110006],[-114.958515195,36.0679205980005],[-114.958500754,36.0680084320003],[-114.958476873,36.0680866010006],[-114.958433509,36.0681681030006],[-114.958411161,36.0691219370005],[-114.958236553,36.0693792600011],[-114.957889547,36.0698815530008],[-114.957472926,36.0704411720002],[-114.95738556,36.0705506020005],[-114.957307798,36.0706490940012],[-114.957144616,36.0708515310003],[-114.956938293,36.0710829180001],[-114.956838619,36.0711947000007],[-114.956750937,36.0712903930002],[-114.956645973,36.0714052240007],[-114.956431256,36.0716252480011],[-114.956279014,36.0717810390008],[-114.955962518,36.0720870650007],[-114.955937578,36.0721116580003],[-114.955671904,36.0723561380007],[-114.95517961,36.0727738740004],[-114.954551944,36.0732458410007],[-114.954106975,36.0735621760008],[-114.953713442,36.0738197150007],[-114.953278524,36.0740948920005],[-114.9528117,36.0743657800009],[-114.952216348,36.0746813160012],[-114.951688007,36.0749477540005],[-114.951185349,36.0751758650005],[-114.950564899,36.0754280760012],[-114.949903071,36.0756704500012],[-114.949040411,36.0759529660009],[-114.948589727,36.0760810700009],[-114.948376511,36.0761362570011],[-114.948095695,36.0762075680008],[-114.947588036,36.076318883],[-114.946876886,36.0764593350006],[-114.9462155,36.0765657070011],[-114.945532039,36.0766554750009],[-114.944938316,36.0767113780008],[-114.944196467,36.0767761030011],[-114.943439846,36.0768366240003],[-114.942656097,36.076903862],[-114.942037425,36.0769582440008],[-114.941486409,36.0770157320011],[-114.940913841,36.0770964520009],[-114.940212335,36.0772190590006],[-114.939510844,36.0773855160011],[-114.939473883,36.0773956890008],[-114.939391653,36.0774183200001],[-114.939030752,36.0775176460004],[-114.938879184,36.0775594120008],[-114.93824697,36.0777689150006],[-114.937596718,36.0780112840011],[-114.93700283,36.0782663150009],[-114.936277478,36.0786126620007],[-114.935368049,36.079043172001],[-114.935034661,36.0792034510007],[-114.934445173,36.079487338001],[-114.932871001,36.080243886001],[-114.928927161,36.0821261900008],[-114.928240021,36.0824218750005],[-114.926046761,36.0833123040004],[-114.923931238,36.08415374],[-114.922195636,36.0854562550009],[-114.922165212,36.0851699760009]]]]}"},{"Name":"Lake Las Vegas","geojson":"{\"type\":\"MultiPolygon\",\"coordinates\":[[[[-114.914171,36.1237530000005],[-114.914185924,36.1226960000004],[-114.914147,36.1226960000004],[-114.913975,36.1227620000002],[-114.913814,36.1228310000008],[-114.91375,36.1228490000008],[-114.913678,36.1228400000008],[-114.913614,36.1228230000003],[-114.913571,36.1227850000009],[-114.913539,36.1226380000008],[-114.913504,36.122502],[-114.913511,36.122502],[-114.913497,36.1223990000007],[-114.913457,36.1222770000006],[-114.913461,36.1221990000009],[-114.91349,36.1220380000009],[-114.913566,36.1217490000008],[-114.913602168,36.1217054340007],[-114.911784,36.1217250000004],[-114.911814,36.1213360000002],[-114.909713,36.1213250000009],[-114.909136,36.1213220000004],[-114.907613,36.1212830000008],[-114.907623,36.1208430000008],[-114.90769824785,36.1175530939968],[-114.907752,36.1152030000008],[-114.907775,36.1146810000002],[-114.907795,36.1146280000008],[-114.907858427085,36.1119236570027],[-114.90793,36.1088720000006],[-114.907919,36.1086880000008],[-114.907888,36.1082970000006],[-114.908005,36.1040020000007],[-114.908006,36.1039370000008],[-114.907986,36.1038600000009],[-114.906477,36.1038210000008],[-114.900423,36.1037970000006],[-114.900364,36.103558],[-114.900369,36.1032190000008],[-114.9006,36.1026190000009],[-114.901286,36.1016130000004],[-114.905088,36.096104],[-114.908111,36.0919790000005],[-114.908840003367,36.0914359974932],[-114.909326,36.0910740000002],[-114.911036,36.0902750000002],[-114.911196,36.0905120000006],[-114.911477,36.0908360000004],[-114.911517,36.0912250000007],[-114.914607,36.0901550000002],[-114.914129,36.0892940000008],[-114.916462,36.0885380000007],[-114.918536,36.0878630000008],[-114.921746,36.086348],[-114.921774356881,36.0850707749982],[-114.922138874,36.0849262190008],[-114.922165212,36.0851699760009],[-114.922195636,36.0854562550009],[-114.923931238,36.08415374],[-114.926046761,36.0833123040004],[-114.928240021,36.0824218750005],[-114.928927161,36.0821261900008],[-114.932871001,36.080243886001],[-114.934445173,36.079487338001],[-114.935034661,36.0792034510007],[-114.935368049,36.079043172001],[-114.936277478,36.0786126620007],[-114.93700283,36.0782663150009],[-114.937596718,36.0780112840011],[-114.93824697,36.0777689150006],[-114.938879184,36.0775594120008],[-114.939030752,36.0775176460004],[-114.939391653,36.0774183200001],[-114.939473883,36.0773956890008],[-114.939612324,36.0790452970002],[-114.939756414999,36.0806364360536],[-114.939571,36.0806350000009],[-114.940141164549,36.0880172320356],[-114.940162,36.0882870000006],[-114.940127042,36.0882896229435],[-114.937763,36.0884670000007],[-114.937805,36.0891600000009],[-114.937808,36.0892420000007],[-114.937866,36.0938370000008],[-114.937949092814,36.1010231280028],[-114.937955,36.1015340000003],[-114.937697772992,36.1015419777036],[-114.936762,36.1015710000008],[-114.936962,36.1048660000003],[-114.938282,36.1050080000006],[-114.938282,36.1060750000001],[-114.938251,36.1090080000005],[-114.938263,36.1120370000003],[-114.938557,36.1249520000008],[-114.921639,36.1249750000007],[-114.916684,36.1249750000007],[-114.914687,36.1249750000007],[-114.914154,36.1249780000002], [-114.914171,36.1237530000005]]]]}"}]