HTML5의 대화 형 평면도

Question

안녕하세요 StackOverflow.

다음 주에는 아파트 기반의 대화 형 평면도 탐색기와 뷰어를 개발하게되어 기쁘게 생각합니다. 플래시 기반의 전임자를 이어 나갈 것입니다.

저는 HTML5에서이를 구현하는 데 가장 적합한 기술과 기술을 평가하는 중입니다. 모든 일반 브라우저 (IE는 7로 시작)를 지원해야합니다. 내가 필요로 무엇

오히려 간단하다

사용자는 자신이 단순한 위젯으로 전환 할 수있는 사이에 건물의 여러 정적 야외 전망을 제시한다.

그는이 외부보기에서 바닥을 선택할 수 있습니다. 마우스 오버시 (터치 장치를 클릭하면) 바닥이 강조 표시됩니다.

바닥을 클릭하면 바닥 평면도로 전환됩니다.이 평면도는 다시 mouseover/onclick에서 아파트에 대한 자세한 정보를 제공합니다.

일부 애니메이션이 포함되어야하지만 너무 멋진 것은 아닙니다. 내가 이것을 구현하기위한 옵션을 생각하고있다 http://salitergasse.at/sg9/eigentumswohnungen/moedling/perchtoldsdorf

:

는 현재 플래시 기반 버전의 버전을 볼 수 있습니다. 또한 비 개발자가 새 건물을 만들 수 있도록 아파트 (평면도)를 바닥 (다각형)으로 선택하는 빠른 방법이 필요합니다. -)를 사용하여 일반 이미지와 이미지 맵의 도중 하차에 대한

:

옵션은 내가 함께했다.

-) 캔버스를 사용하십시오 (지원없이 브라우저에 Google의 자바 스크립트 솔루션 사용). 캔버스 태그에 이미지를로드하고 레이아웃을 동적으로 만듭니다.

-)를 사용하여 SVG

너희들은 어떻게 생각하세요? 크로스 브라우저 호환성을위한 최상의 옵션은 무엇입니까?

이와 비슷한 경험이 있습니까?

나는 어떤 제안이라도 고맙게 생각합니다.

Answer 1

SVG 또는 Canvas가 사용자의 요구에 맞습니다. 이미 SVG에서 얼마나 많은 일이 이루어 졌는지 간단히 말해서 SVG에서 더 쉽게 개발할 수 있습니다.여기

는 다른 고려 사항은 다음과 같습니다

IE7에서 캔버스 모두 "현대"브라우저에서 작동하지만 IE7/8

SVG는 모든 현대적인 브라우저에서 작동하고, VML (가까이)입니다

• /캔버스 8
• 텍스트 렌더링 꽤 다를 수 있습니다 당 브라우저 지금 캔버스에 (정도
• SVG는 안드로이드에서 작동하지 않습니다 (텍스트 그라데이션 여전히 엉망 같은 사소한 것들)에 Android 및 iOS에서 작동
• 적어도 1 년 전은 아니었다. 뭐가 바뀌니?) iOS에서 작동합니까?
• SVG의 접근성은 FAR입니다. 텍스트는 검색 할 수 있으므로 검색 엔진 최적화 (SEO), 친숙 (blind-friendly), 복사 및 붙여 넣기 (Friendly and copy) 등 DOM의 나머지 부분과 상호 작용하는 것은 훨씬 자연 스럽습니다.
• 캔버스 성능이 더 좋지만, 그럴 필요는 없습니다.

이 시점에서 이전 버전의 IE에서는 제외하고 호환성이 현저히 같습니다. excanvas 라이브러리를 사용하여 Canvas에서 작업 할 수는 있지만, 특히 움직이게 될 것이 있다면 더욱 그렇습니다.

바닥 계획 유형의 앱을 개발할 때 훨씬 더 빨리 개발할 수 있기 때문에 SVG를 전적으로 권장합니다. 모든 것은 이미 DOM 객체입니다. 이벤트, 마우스 조작 등은 이미 완료되었습니다.

하지만 안드로이드 폰에서 실제로 작동 시키려면 Canvas가 더 나은 방법 일 것입니다. 나는 실내 내비게이션 :) 내가 OpenLayers (http://openlayers.org/)

사실

OpenLayers를 사용하여 종료

에 대한 비슷한 계획입니다

Answer 2

는 GIS 물건 (지도 등) 발명되었다하지만 당신은 쉽게 XYZ 정의 할 수 있습니다 미터법 좌표계를 사용하고 단순히 벡터 데이터로 피드하십시오. OpenLayers 2.x를 들어

는 (원래)를 참조하십시오 :

큰 장점은 많은 도면과 같은 기능, 다른 벡터 오버레이, 충돌 감지, 거리 측정, 툴팁, 마크 등을 함께 제공한다는 것입니다

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/draw-feature.html

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/transform-feature.html

는 OpenLayers를 들어 3.X은 다음을 참조하십시오

http://openlayers.org/en/v3.4.0/examples/

http://openlayers.org/en/v3.4.0/examples/draw-features.html

당신은 백엔드와 GeoJSON, GML 등을 통해 통신 할 수 있습니다. PostGIS를 백엔드로 사용하여 벡터 데이터를 저장했습니다. mysql (http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html)을위한 공간 확장도 있습니다.

그냥 정의 간단한 X-Y-Z는 당신이 쉽게 읽을 수 있도록 질문을 요약 할 수 있다면