Страница 1 из 1

openlayers: редактирование png popup

Добавлено: 27 июл 2013, 00:31
J_Mnemonic
Честно говоря долго думал в какой ветке разместить данный пост, но поскольку ничего так и не придумал, а проблема возникла в openlayers решил всё же здесь.
Заказчик оказался очень "тонкой натурой" и ему не нравится, что рядом с хвостиком popup видны маркеры, но их невозможно кликнуть. Мы то знаем что на самом деле они видны только потому что слой div прозрачный, но на самом деле они за ним находятся. но ему на это чихать - либо пусть кликаются, либо путь их не видно.
Я долго думал и решил, что оптимальным вариантом будет перерисовать png-шечку, чтоб в итоге выглядело примерно так
то как надо
то как надо
Карта_new.JPG (71.44 КБ) 9238 просмотров
сейчас так
то, как сейчас
то, как сейчас
Карта_old.JPG (75.37 КБ) 9238 просмотров
Сам я никогда PNG Не правил. но открыв его в редакторе увидел, что там отдельно прорисованы хвостики. допустим я смогу их убрать и сделать попап прямоугольным. но как мне сделать так, чтоб при клике popup упирался своим новым остроконечным углом в маркер?? я подозреваю, где то прописаны координаты соприкосновения popup с маркером? или нет?
Друзья, если кто знает или может дать ссылочку где написано как подобное сделать, буду очень признателен!

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 09:37
J_Mnemonic
подозрение что где то тут указывается место соединения popup с маркером... но что именно...

Код: Выделить всё

OpenLayers.Popup.FramedCloud = OpenLayers.Class(OpenLayers.Popup.Framed, { contentDisplayClass: "olFramedCloudPopupContent", autoSize: !0, panMapIfOutOfView: !0, imageSize: new OpenLayers.Size(1276, 736), isAlphaImage: !1, fixedRelativePosition: !1, positionBlocks: { tl: { offset: new OpenLayers.Pixel(44, 0), padding: new OpenLayers.Bounds(8, 40, 8, 9), blocks: [{ size: new OpenLayers.Size("auto", "auto"), anchor: new OpenLayers.Bounds(0, 51, 22, 0), position: new OpenLayers.Pixel(0, 0) }, { size: new OpenLayers.Size(22, "auto"), anchor: new OpenLayers.Bounds(null,
50, 0, 0), position: new OpenLayers.Pixel(-1238, 0)
}, { size: new OpenLayers.Size("auto", 19), anchor: new OpenLayers.Bounds(0, 32, 22, null), position: new OpenLayers.Pixel(0, -631) }, { size: new OpenLayers.Size(22, 18), anchor: new OpenLayers.Bounds(null, 32, 0, null), position: new OpenLayers.Pixel(-1238, -632) }, { size: new OpenLayers.Size(81, 35), anchor: new OpenLayers.Bounds(null, 0, 0, null), position: new OpenLayers.Pixel(0, -688)}]
}, tr: { offset: new OpenLayers.Pixel(-45, 0), padding: new OpenLayers.Bounds(8, 40, 8, 9), blocks: [{ size: new OpenLayers.Size("auto",
"auto"), anchor: new OpenLayers.Bounds(0, 51, 22, 0), position: new OpenLayers.Pixel(0, 0)
}, { size: new OpenLayers.Size(22, "auto"), anchor: new OpenLayers.Bounds(null, 50, 0, 0), position: new OpenLayers.Pixel(-1238, 0) }, { size: new OpenLayers.Size("auto", 19), anchor: new OpenLayers.Bounds(0, 32, 22, null), position: new OpenLayers.Pixel(0, -631) }, { size: new OpenLayers.Size(22, 19), anchor: new OpenLayers.Bounds(null, 32, 0, null), position: new OpenLayers.Pixel(-1238, -631) }, { size: new OpenLayers.Size(81, 35), anchor: new OpenLayers.Bounds(0,
0, null, null), position: new OpenLayers.Pixel(-215, -687)
}]
}, bl: { offset: new OpenLayers.Pixel(45, 0), padding: new OpenLayers.Bounds(8, 9, 8, 40), blocks: [{ size: new OpenLayers.Size("auto", "auto"), anchor: new OpenLayers.Bounds(0, 21, 22, 32), position: new OpenLayers.Pixel(0, 0) }, { size: new OpenLayers.Size(22, "auto"), anchor: new OpenLayers.Bounds(null, 21, 0, 32), position: new OpenLayers.Pixel(-1238, 0) }, { size: new OpenLayers.Size("auto", 21), anchor: new OpenLayers.Bounds(0, 0, 22, null), position: new OpenLayers.Pixel(0, -629) }, { size: new OpenLayers.Size(22,
21), anchor: new OpenLayers.Bounds(null, 0, 0, null), position: new OpenLayers.Pixel(-1238, -629)
}, { size: new OpenLayers.Size(81, 33), anchor: new OpenLayers.Bounds(null, null, 0, 0), position: new OpenLayers.Pixel(-101, -674)}]
}, br: { offset: new OpenLayers.Pixel(-44, 0), padding: new OpenLayers.Bounds(8, 9, 8, 40), blocks: [{ size: new OpenLayers.Size("auto", "auto"), anchor: new OpenLayers.Bounds(0, 21, 22, 32), position: new OpenLayers.Pixel(0, 0) }, { size: new OpenLayers.Size(22, "auto"), anchor: new OpenLayers.Bounds(null, 21, 0, 32), position: new OpenLayers.Pixel(-1238,
0)
}, { size: new OpenLayers.Size("auto", 21), anchor: new OpenLayers.Bounds(0, 0, 22, null), position: new OpenLayers.Pixel(0, -629) }, { size: new OpenLayers.Size(22, 21), anchor: new OpenLayers.Bounds(null, 0, 0, null), position: new OpenLayers.Pixel(-1238, -629) }, { size: new OpenLayers.Size(81, 33), anchor: new OpenLayers.Bounds(0, null, null, 0), position: new OpenLayers.Pixel(-311, -674)}]
}
}, minSize: new OpenLayers.Size(105, 10), maxSize: new OpenLayers.Size(1200, 660), initialize: function (a, b, c, d, e, f, g) {
    this.imageSrc = OpenLayers.Util.getImageLocation("cloud-popup-relative.png");
    OpenLayers.Popup.Framed.prototype.initialize.apply(this, arguments); this.contentDiv.className = this.contentDisplayClass
}, CLASS_NAME: "OpenLayers.Popup.FramedCloud"
});

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 10:17
ericsson
У OL чудовищно громоздкая и устаревшая система вывода popup.framecloud. Если вы хотите убрать "хвост", замените тип popup на простой anchored и дальше делайте с ним что угодно просто через CSS.
http://dev.openlayers.org/docs/files/Op ... ed-js.html

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 10:34
J_Mnemonic
Спасибо! Попробую такой вариант

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 10:44
ericsson
После того как я первый раз столкнулся с подобным же со стороны заказчика, просто перешел на Leaflet

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 10:53
J_Mnemonic
просто OL был частью требований тоже )

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 13:41
J_Mnemonic
я смотрю у anchored более скудный набор свойств и методов... :( а как его вообще закрыть то? где обрабатывается событие это? и maxSize нету... ((

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 14:02
J_Mnemonic
всё. нашёл :)
а не будете ли Вы так любезны, дасть ссылочку на примеры AnchoredBubble ? посмотреть как можно их максимально стилдьно оформить?
Ну или хотя бы подскажите как сделать рамку чёрной у popup?

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 14:23
ericsson
По-моему, это очевидно из документации: есть OpenLayers.Popup.border и прочие свойства оформления.
Если делать по-человечески (то есть не пихать оформление в скрипт) то делайте то же самое через CSS, не меняя ничего в скрипте:

Код: Выделить всё

#map .olPopup {
  border: 1px solid black !important;
}

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 14:42
J_Mnemonic
Спасибо большое.
Правда в этом случае рамка прямоугольная (я решил использовать Anchored Bubble), а хотелось бы чтоб закругления подчеркнулись

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 14:46
ericsson
J_Mnemonic, вы CSS вообще не владеете?
Допишите в стиль значение border-radius и так далее, по вкусу.

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 14:49
J_Mnemonic
CSS владею немного, но про возможность закругления углов токо что узнал из гугла :oops:

Но там пишется что у IE с этим проблемы...
а мой заказщик хочет именно IE, причём какая версия у них будет стоять - хз. может и восьмая, где с закруглениями проблемы (судя по инфе из гугла)

Прошу прощения за глупый вопрос. Спасибо большое за помощь!!

Re: openlayers: редактирование png popup

Добавлено: 27 июл 2013, 15:01
ericsson
http://caniuse.com/#feat=border-radius
Вопрос общения с заказчиком - это штука творческая, но:
- Заказчик хотел OL сам и это зафиксировано в ТЗ?
- В ТЗ написано что нужно "разработать сервис" с использованием готовых компонентов (включая OL)?
Если да, то отлично: вы не обязаны в рамках этого ТЗ вносить какие-либо доработки в сторонние библиотеки, по крайней мере, за те деньги, которые вам обещаны.

Если речь идет об IE ниже девятого, то это также должна быть доработка за счет заказчика (дописать на JS функцию, которая добавляла бы внешние блоки внешним div-ам popup-ов с соответствующим фоном, имитирующим закругление - невелика проблема), потому что в ТЗ это четко не указано.