더 많은 클라이언트 측 기능을 지원하는 OpenLayers 대안 [닫기]

폐쇄되었습니다 . 이 질문은 더 집중되어야 합니다. 현재 답변을받지 않습니다.

이 질문을 개선하고 싶습니까? 이 게시물 을 편집 하여 한 가지 문제에만 집중할 수 있도록 질문을 업데이트하십시오 .

휴일 2 년 전 .

포인트 기능에 클라이언트 쪽 렌더링을 이상적으로 사용하고 플러그인이 없어야하는 시스템에 대해 다른 아키텍처를 고려하고 있습니다. 이 질문 에 대한 응답으로 개발 된 이 응용 프로그램을 사용하여 OpenLayers 및 500에서 눈에 띄게 떨어지고 1,000 이상으로 고생하기 시작합니다. 임의로 생성 된 기능에는 이벤트 핸들러가없는 것 같으며 모두 동일한 기호를 사용합니다.

클릭 및 마우스 오버 처리기와 성능이 낮은 플랫폼에서 최대 10 개의 서로 다른 기호와 함께 최대 1,000 개의 기능이 표시 될 것으로 예상됩니다.

특히이 GIS Cloud 예제를 본 후 클라이언트 측 성능이 향상되기를 바랐습니다. HTML5 캔버스와 SVG와는 다르게 작동하지만 성능의 차이는 정말 놀랍습니다.

내 주요 질문 (당신이 그렇게 친절하면)은 다음과 같습니다

임의의 포인트 생성 응용 프로그램이 작성 / 사용한 다른 OpenLayers 응용 프로그램의 성능을 나타 냅니까?
WMS 서비스 (사용해야하는)를 지원하고 Flash / Silverlight / 다른 플러그인을 사용하지 않고 클라이언트 측 기능으로 더 빠른 입증 된 무료 대체 웹 매핑 API가 있습니까?
내가 조사해야 할 것에 대한 다른 제안이 있습니까?

주로 서버 측 렌더링에 의존하는 것이 옵션이지만 사용자 수와 UI의 응답성에 대한 우려로 인해 I와 클라이언트 모두 이것을 피하고 싶습니다.

— 무덤
소스

Firefox 8에서 해당 앱을 사용하는 5 년 된 듀얼 코어, 3GB RAM 데스크탑 (1gb Linux 배포판 ISO 다운로드 중)에서 1,000 포인트는 거의 즉각적으로 끌어 당기는 데 어려움을 겪지 않습니다. 10,000 소요 시간은 약 1.5 초입니다.

— user2856

@LukePinner는 빠르게 그리기 및 부드럽게 이동 / 확대 / 축소하는 것입니까? 데이터를 검색하고 지형지 물을 그리는 것도 괜찮지 만 문제가되는 것은지도 상호 작용입니다.

— tomfumb

방금 ipad2에서 앱을 시도했으며 1000 점을 잘 처리했습니다. 10K 포인트를 사용하면 처음 렌더링하는 데 몇 초가 걸리지 만 꽤 잘 처리됩니다. 원하는 경우 항상 OL Vector 레이어 클래스를 서브 클래 싱하고 사용자 정의 클래스를 구현할 수 있습니다. 한 가지 예를들 수 있습니다.

— unicoletti

예, 패닝 / 줌 문제가 없습니다. 1,000 포인트 :하지만 내 1.6GHz의 아톰 넷북에 아주 약간 아래로 천천히 않습니다

— user2856

답변:

첫 번째 질문에 대한 대답은 예 입니다. 매우 일반적인 구성으로 OL을 사용하고 있습니다. 성능을 향상시키기 위해 사용할 수있는 트릭이 있습니다. 나중에 알아볼 것입니다.

질문 2에 대한 답은 (특히 고착과 관련하여) 가능할 것입니다. 이 사이트에서 대안 목록을 검색 할 수 있습니다 (지금 마음에 드는 것은 Leaflet ).

질문 3에 대한 답 : 측정부터 시작하십시오.

렌더러가 벡터 레이어의 옵션 목록에 명시 적으로 지정되도록 앱 의 로컬 복사본을 편집했습니다 . 테스트하는 동안 Canvas 렌더러를 생략 한 다음 실험을 다른 페이지로 다시로드합니다.

var pts = new OpenLayers.Layer.Vector("Points", {renderers: ["Canvas", "SVG", "VML"]});

이 출력합니다 그래서 나는 다시 그리기 기능에 타이머를 추가하는 방법을 많이 지출 시간을 그리기 :

function redraw() {
var start = (new Date).getTime();
[...]
var diff = (new Date).getTime() - start;
console.log("redraw completed in "+diff+"ms");

그 후 OSX SL에서 1000 및 5000 기능을 그리는 Chrome 17 및 Firefox 8.0.1에서 여러 번 실행했습니다. 놀랍게도 SVG 렌더러는 평균 캔버스 렌더러보다 20 % 빠릅니다! (참고 : Windows의 js 시간은 OSX만큼 정확하지 않으므로 결과의 일관성이 떨어질 수 있습니다).

이것과 당신의 말

문제가되는지도 상호 작용입니다

IMHO는 핫스팟이 기능의 벡터 처리에 있다고 알려줍니다. 내 응용 프로그램을 작업하는 동안 최근에 그것을 살펴보고 하위 클래스를 결정한 다음 간단한 포인트에 사용하지 않는 모든 복잡한 코드를 제거하기로 결정했습니다. 분명히 나는 매우 열중하고 OpenLayers.Geometry.Point에 대한 종속성을 제거했으며 내 버전은 이제 x, y 속성을 가진 간단한 js 객체에서 작동합니다.

옵션은 다음과 같은 이점 / 비용 순서입니다.

첫 번째 옵션은 다음과 같이 전략 옵션을 벡터 레이어에 구성하여 서버 측에서 가시 점 을 필터링하는 것입니다.

 strategies: [new OpenLayers.Strategy.Refresh({force:true}), new OpenLayers.Strategy.BBOX({ratio:2, resFactor: 3})],

이렇게하면 클라이언트 측에서 그려진 기능의 수를 확대 할 때 그 대신 가시적 인 기능으로 제한됩니다.

두 번째 옵션 으로 사용자 정의 된 Vector / Renderer 작성을 고려할 수 있습니다 . 내 github 페이지 에서 사용자 정의 제거되고 더 빠른 구현의 예를 볼 수 있습니다 . 모든 용도에 적합하지는 않지만 내가 제안하는 것에 대한 대략적인 아이디어를 제공하기에 충분해야합니다.

사용자가 완전히 축소 될 때의 세 번째 옵션은 일종의 서버 측 기능 클러스터링 을 구현 하여 근접 점이 단일 기능으로 병합되어 그려지는 기능의 수를 다시 줄이는 것입니다.

— 유 니콜 티
소스

상세하고 철저한 답변에 감사드립니다. 필자는 필요할 때만 작업이 수행되도록 캐싱 전략과 함께 서버 측 클러스터링을 살펴볼 것입니다. 서버 측 옵션 중 하나는 MapGuide이므로 포인트 검색 및 클러스터링 방법은 완전히 사용자 정의 할 수 있습니다. 또한 차이점을 확인하기 위해 렌더러 옵션을 살펴볼 것입니다.

— tomfumb

내 프로젝트에서 사용하는 예제 벡터 / 캔버스 렌더러에 대한 링크를 추가했습니다.

— unicoletti

와이프 다운 예제는 엄청난 차이를 만들어냅니다. 정말 인상적입니다. 나는 10,000 비행에 1,000 기능으로 어려움을 겪고에서 갔다

— tomfumb

OL Canvas 렌더러와 점에 솔리드 채우기를 사용하도록 첫 번째 예제 (swingley.appspot.com)를 수정했으며 확대 / 축소 및 팬 성능은 실제로 TagCanvas 및 TagVector와 매우 유사합니다. 또한 수정에서 제거한 적중 테스트 기능을 다시 구현하여 비교 성능을 테스트 할 수있었습니다. 태그 * 접근 방식은 적중 된 기능을 식별하는 데 약 20 % 더 빠릅니다 (5000 중). 사용자 정의 클래스를 작성 / 업데이트하는 데 상당한 노력과 유사한 성능 (테스트에서)을 고려할 때, 나는 바닐라 OL이 무엇을 할 수 있는지 알 것입니다.

— tomfumb

적중 테스트는 모든 기능을 다른 캔버스로 다시 그리므로 새로 고칠 때마다 두 번 그려지기 때문 입니다.

— unicoletti

UTFGrid 와 TileMill 을 사용하면 성능이 좋은 무제한 포인트를 표시 할 수 있습니다. n 임의의 점을 표시하는 것은 그러한 상황이나 GISCloud 또는 이와 유사한 마법에서 작동하지 않는 일종의 고안된 예입니다. 벡터 성능 해킹에는 일반적으로 전체 데이터 세트 및 일부 전처리에 대한 지식이 필요하기 때문에 TileMill 및 GISCloud 많은 타일링.

— tmcw
소스