0
다른 데이터 집합이지도를 포함하여 다른 형식으로 표시되는 Google Analytics과 비슷한 대시 보드 형태의 웹 응용 프로그램에서 작업하고 있습니다.geoJSON 좌표 (또는 데이터)로 HTML5 캔버스에서 대화식지도를 그리는 방법
지도에는 해당 지역 고유의 데이터를로드 할 수 있도록 클릭 가능한 지역이 있어야하며 지역에는 호버 효과가 있어야합니다 (much like this one). Google Maps API를 사용하고 싶지 않지만 도서관에 개방되어 있습니다.
이제 GeoJSON (아래 스 니펫 참조)에서지도 데이터를 볼 수 있습니다. 제 문제는 geoJSON 데이터를 사용하여 HTML5 캔버스에서지도를 그리는 방법입니다. 나는 어디에서 시작해야하는지 전혀 알 수 없기 때문에 그 질문이 얼마나 일반적인지 알고 있습니다. 그래서 저는 제 손을 잡아주고 저에게 길을 보여 줄 사람이 필요합니다. 최대한 자세하게 답해주십시오. 감사.
{
"type": "FeatureCollection",
"features": [{ "type": "Feature", "id": 0,
"properties": { "OBJECTID_1": 29, "OBJECTID": 29, "COUNTY_NAM": "BARINGO", "COUNTY_COD": 30, "Shape_Leng": 5.81571392065, "Shape_Area": 0.88451236881 },
"geometry": { "type": "Polygon", "coordinates": [ [ [ 36.028686523000033, 1.276123047000056 ], [ 36.036499023000033, 1.263916016000053 ], [ 36.039306641000053, 1.259887695000032 ],............[ 36.028686523000033, 1.276123047000056 ] ] ] } }
]
}
내 연구로 openlayers, 전단지 및 d3과 같은 라이브러리로 안내되었습니다. 이것들은 모두 훌륭하지만 중요한 학습 곡선이 있습니다. 나는 학습에 대해 아무것도 없지만 프로젝트를 끝내기위한 가장 간단한 해결책을 원합니다.
좋습니다. 프로젝트를보다 자세히 정의해야합니다. 지도를 드래그하고 확대/축소 할 수있게 하시겠습니까? 어떤 브라우저와 호환되기를 원하십니까? 맨 처음부터 그것을하는 가장 쉬운 방법은 html에 SVG 요소를 만들고 geoJSON 데이터의 라인으로 채우고 onHover/onClick 이벤트를 첨부하는 것입니다. 아마도 jQuery를 사용하여 도움을받을 수 있습니다. 하지만 호환성 문제가 있습니다. D3 및 OpenLayers와 같은 libs가 제공하는 것입니다. StackOverflow는 귀하의 직업을 끝내기위한 상세한 손 보유를위한 것이 아닙니다. – Spacedman
나는 "내 손을 잡아라"라는 문구를 사용해서는 안되며, 내가 뭘 찾고있는 것이 아닌, 올바른 방향으로 한 점, 최근의 논평은 부분적으로 성취했다. 지도에는 줌 기능이 필요하지 않으며 클릭 가능한 지역 만 새로운 콘텐츠를로드합니다. 맵을 일종의 탐색으로 생각하십시오. 브라우저 호환성에 관해서는, 응용 프로그램이 공개용이 아니기 때문에 그다지 관심사가 아닙니다. 이는 회사 (클라이언트)를위한 대시 보드입니다. 따라서 geoJSON은 svg 경로로 변환해야하거나 좌표가 그대로 사용할 수 있습니까? – user1678293
브라우저에서 SVG에 대한 기본 자습서를 찾아보십시오. 연극을하고 돌아와서 더 많은 질문을하십시오. 당신은 그것을 알아낼 것입니다! – Spacedman