특정지도에 geojson 파일을 설정하려고합니다.

캐나다의 일부와 멕시코의 일부를 사용하여 미국의 전망을 보여주는지도를 구성하려고합니다.특정지도에 geojson 파일을 설정하려고합니다.

http://geojson.io/#id=gist:anonymous/b2f65ddc2a28013b0c9c7ecab5d7427f&map=4/39.37/-97.16

어떻게 d3.js를 사용하여 브라우저 맵에이를 표시 할 수 있습니다 : 나는 www.geojson.io이의 기본 캡처를했다?

https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json

난 여기로 geojson을 표시하기 위해 사용하고 D3의 코드가있다 : 나는 일반적으로 사용되는 geojson 파일 될 것으로 보인다 세계 110m.json를 사용하여 세계의 브라우저지도를 표시 할 수있어 브라우저지도 :

d3.json("json/world-110m.json", function (error, topology) { 
    if (error) return console.warn(error); 
    g.selectAll("path") 
     .data(topojson.object(topology, topology.objects.countries) 
      .geometries) 
    .enter() 
     .append("path") 
     .attr("d", path) 
});

세계 110m.json 난 그냥 위 내 geojson.io지도에서 캡처 영역의 평면지도를 표시해야하기 때문에 필요하지 않은 추가 정보를 많이 갖고있는 것 같아요. 내 geojson을 구축해야하고, 내 d3 코드를 업데이트해야합니까? 아니면 둘 다 업데이트해야합니까?

출처

2016-09-07 user6806234

geojson.io은 무엇을하고 있는지 확실하지 않지만 geojson이 반환하는 (두 개의 동일한 폴리곤) 사용자의 선택과 닮은 것과 상관 관계가없는 것 같습니다. 그것은 가치가 무엇인지에 대한

, 여기에 그 geojson에서 "지도"입니다 :

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var geoJson = { 
 
     "type": "FeatureCollection", 
 
     "features": [{ 
 
     "type": "Feature", 
 
     "properties": {}, 
 
     "geometry": { 
 
      "type": "Polygon", 
 
      "coordinates": [ 
 
      [ 
 
       [-129.0234375, 
 
       23.160563309048314 
 
       ], 
 
       [-129.0234375, 
 
       52.53627304145948 
 
       ], 
 
       [-65.302734375, 
 
       52.53627304145948 
 
       ], 
 
       [-65.302734375, 
 
       23.160563309048314 
 
       ], 
 
       [-129.0234375, 
 
       23.160563309048314 
 
       ] 
 
      ] 
 
      ] 
 
     } 
 
     }, { 
 
     "type": "Feature", 
 
     "properties": {}, 
 
     "geometry": { 
 
      "type": "Polygon", 
 
      "coordinates": [ 
 
      [ 
 
       [-129.0234375, 
 
       23.160563309048314 
 
       ], 
 
       [-129.0234375, 
 
       52.53627304145948 
 
       ], 
 
       [-65.302734375, 
 
       52.53627304145948 
 
       ], 
 
       [-65.302734375, 
 
       23.160563309048314 
 
       ], 
 
       [-129.0234375, 
 
       23.160563309048314 
 
       ] 
 
      ] 
 
      ] 
 
     } 
 
     }] 
 
    }; 
 

 

 
    var width = 960, 
 
     height = 600; 
 

 

 
    var projection = d3.geo.albersUsa() 
 
     .scale(500) 
 
     .translate([width/2, height/2]); 
 

 

 
    var path = d3.geo.path() 
 
     .projection(projection); 
 

 

 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height); 
 

 
    svg.append("g") 
 
     .selectAll("path") 
 
     .data(geoJson.features) 
 
     .enter().append("path") 
 
     .attr("d", path); 
 
    </script> 
 
</body> 
 

 
</html>

출처

2016-09-07 21:24:56 Mark

바로 내가 파일을 다시 열 때이 중복 다각형을 추가 생각합니다. 그러나, 나는 로컬 d3 응용 프로그램에서 실행하려고하기 전에 중복 다각형을 제거했습니다. 또한 내 로컬 d3 앱에서 실행하기 전에 geojson 파일을 topojson으로 변환했습니다. 그러나 topojson.v0.min.js : 어떤 이유에서든 "정의되지 않은 속성 유형을 읽을 수 없습니다"를 반환합니다. – user6806234

json 파일에서 내 d3 b/c의 "countries"속성 참조를 제거하여 즉각적인 오류를 수정했습니다. 나라의 물건을 가지고있다. 나는 내가 찾고있는 것이 내 시나리오에서 작동 할 수있는 기본적인 topojson 파일이라고 생각한다. 필요에 따라 구현 세부 사항을 조정할 수 있습니다. – user6806234

특정지도에 geojson 파일을 설정하려고합니다.

답변

관련 문제