Альтернативы OpenLayers, поддерживающие больше возможностей на стороне клиента [закрыто]

14

Я рассматриваю различные архитектуры для системы, которая в идеале будет использовать рендеринг на стороне клиента для точечных объектов и должна быть без плагинов. Я использовал это приложение, разработанное в ответ на этот вопрос, для тестирования моего ноутбука (который вполне способен - четырехъядерный процессор с тактовой частотой 2,6 ГГц, 4 ГБ памяти, без какой-либо другой нагрузки, Firefox 8) с различным количеством точек в OpenLayers и он заметно отстает на 500 и начинает бороться за 1000. Кажется, что случайно сгенерированные функции не имеют каких-либо обработчиков событий и все используют одну и ту же символику.

Я рассчитываю показать до 1000 функций с 10 различными символами, все с обработчиками нажатия и наведения мыши, и на менее мощных платформах.

Я надеялся на лучшую производительность на стороне клиента, особенно после просмотра этого примера облака ГИС - я знаю, что он работает по-разному (HTML5 canvas против SVG), но разница в производительности действительно поразительна.

Мои ключевые вопросы (если вы будете так любезны):

  1. Является ли приложение для генерации случайных точек представителем производительности в других приложениях OpenLayers, которые вы написали / использовали?
  2. Существует ли проверенный и бесплатный альтернативный API веб-картографирования, который поддерживает службы WMS (который мне нужно использовать) и работает быстрее с функциями на стороне клиента, без использования Flash / Silverlight / любых других плагинов?
  3. Любые другие предложения о том, что я должен расследовать?

Опираться в первую очередь на рендеринг на стороне сервера - это вариант, но и я, и клиент хотели бы избежать этого из-за опасений по поводу увеличения количества пользователей и скорости отклика пользовательского интерфейса.

tomfumb
источник
На моем 5-летнем двухъядерном настольном компьютере с 3 ГБ ОЗУ, использующим это приложение в Firefox 8 (при загрузке 1 ГБ Linux-дистрибутива ISO), 1000 точек рисуются практически мгновенно, без проблем ... 10 000 занимает около 1,5 с.
user2856
@ LukePinner - это просто рисование быстро * и плавное панорамирование / масштабирование? Получение данных и отрисовка объектов тоже хорошо для меня, но проблема заключается в взаимодействии карты.
tomfumb
Я только что попробовал ваше приложение на своем ipad2, и оно отлично справилось с 1000 баллами. Изначально с 10 тыс. Точек рендеринг занимает пару секунд, но затем он справляется довольно хорошо. Если вы хотите, вы всегда можете создать подкласс класса OL Vector и реализовать собственный. Я могу указать вам на один пример.
unicoletti
Да, нет проблем панорамирования / масштабирования. Хотя на моем нетбуке Atom с тактовой частотой 1,6 ГГц скорость работы в 1K баллов немного замедляется :)
user2856

Ответы:

23

Ответ на 1-й вопрос - да . Вы используете 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");

После этого я попробовал несколько запусков на Chrome 17 и Firefox 8.0.1 на OSX SL с функциями 1000 и 5000. К моему удивлению, рендерер SVG в среднем на 20% быстрее рендера Canvas! (Примечание: в Windows время js не такое точное, как в OSX, поэтому результаты могут быть менее согласованными).

Это и вы говорите, что

это проблема взаимодействия карт

IMHO говорит нам, что точка доступа находится в векторной обработке объектов. Работая над моим приложением, я недавно взглянул на него и решил выделить его подкласс, а затем избавиться от всего сложного кода, который бесполезен для простых моментов. По общему признанию я стал довольно диким и даже удалил зависимость от OpenLayers.Geometry.Point, и моя версия теперь работает на простых объектах js с атрибутами x, y.

Ваши варианты в порядке выгоды / стоимости:

Первый вариант - отфильтровать видимые точки на стороне сервера путем настройки опции стратегии для векторного слоя, как показано ниже:

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

Таким образом, при увеличении количества отображаемых объектов на стороне клиента будут отображаться только те элементы, которые будут отображаться, а не все.

В качестве второго варианта вы можете рассмотреть возможность написания настраиваемого вектора / рендерера . Пример нестандартной, ускоренной реализации доступен на моей странице github здесь . Хотя это не подходит для всех целей, этого должно быть достаточно, чтобы дать общее представление о том, что я предлагаю.

Третий вариант, когда пользователь полностью уменьшает масштаб, - это реализовать некоторую кластеризацию объектов на стороне сервера, чтобы точки слияния были объединены в одну, что снова уменьшило количество нарисованных объектов.

unicoletti
источник
Большое спасибо за подробный и тщательный ответ. Я, скорее всего, буду рассматривать кластеризацию на стороне сервера, надеюсь, в сочетании со стратегией кэширования, чтобы операция выполнялась только при необходимости. Одним из вариантов на стороне сервера является MapGuide, поэтому подход к получению и кластеризации точек может быть полностью индивидуальным. Я также поэкспериментирую с параметрами рендерера, чтобы увидеть, в чем разница.
tomfumb
1
Я добавил ссылку на пример рендера vector / canvas, который я использую в моем проекте.
Unicoletti
Вау, урезанный пример имеет огромное значение, это действительно впечатляет. Я перешел от борьбы с 1000 функций к полету с 10000
tomfumb
Я изменил первый пример (swingley.appspot.com), чтобы использовать средство визуализации OL Canvas и сплошную заливку для точек, а производительность масштабирования и панорамирования фактически очень похожа на ваши TagCanvas & TagVector. Я также повторно реализовал функциональность тестирования на удар, которую вы удалили в своих модификациях, чтобы я мог протестировать сравнительную производительность - подход Tag * был примерно на 20% быстрее при определении, какая функция была поражена (из 5000). Учитывая значительные усилия по написанию / обновлению пользовательских классов и аналогичную производительность (в моих тестах), я думаю, я посмотрю, что может сделать vanilla OL
TomFumb
Это потому, что хит-тест перерисовывает все объекты на другой холст, поэтому они рисуются дважды при каждом обновлении.
unicoletti
0

Используя UTFGrid и TileMill, вы можете отображать неограниченное количество очков с довольно хорошей производительностью. Отображение n случайных точек является своего рода надуманным примером, который не сработает в этой ситуации или с GISCloud, или с любой другой магией, хотя - поскольку для взлома векторной производительности обычно требуется знание полного набора данных и некоторая предварительная обработка: и TileMill, и GISCloud делают много черепицы.

tmcw
источник