Context Navigation

Editing Ru:Help/Styles/Images

Adjust edit area height: Edit side-by-side

[[TranslatedPages(revision=6,outdated=Перевод не завершён)]]
= Включение изображений в стили =

== Image-URL ==
Существуют различные способы указать ссылки на изображения в стилях:

Изображения, входящие в состав стиля:: Можно сослаться на встроенные в стиль изображения. Для обзора доступных значков распакуйте файл `josm-*.jar` любой программой, умеющей работать с zip-архивами. Файлы изображений расположены в подпапке `images`. Пропустите первую папку в пути к файлу (не `images/presets/food/restaurant.svg`, а `presets/food/restaurant.svg`). Пример:
{{{#!mapcss
node[amenity=restaurant] {
    icon-image: "presets/food/restaurant.svg";
}
}}}
 Локальные изображения:: Укажите путь к файлу изображения в локальной файловой системе, абсолютный или относительный к текущему файлу `.mapcss`. Пример:
{{{#!mapcss
node[amenity=restaurant] {
    icon-image: "/home/username/osm/my-restaurant.png";
}
}}}
 или
{{{#!mapcss
node[amenity=restaurant] {
    icon-image: "my-restaurant.png";
}
}}}
 URL изображения на удалённом сервере:: Полный URL изображения из WWW. Убедитесь, что прямые ссылки разрешены владельцем сервера. Изображения скачиваются по запросу и кэшируются на клиентском компьютере (обычно в течение одной недели).
{{{#!mapcss
node {
    icon-image: "https://upload.wikimedia.org/wikipedia/en/9/9d/Commons-logo-31px.png";
}
}}}
 Изображения внутри zip-архива:: Вы можете упаковать свой стиль и все требуемые ресурсы в zip-архив, чтобы упростить распространение стиля. Когда пользователь скачивает zip-файл стиля, JOSM автоматически обнаруживает файл `.mapcss` внутри архива и находит все изображения.
{{{#!mapcss
node {
    icon-image: "image/file/within/archive.png";
}
}}}
 Изображения, встроенные в URL:: `data:`-URL в соответствии с [http://www.ietf.org/rfc/rfc2397.txt RFC2397]. Пример:
{{{#!mapcss
node {
    icon-image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAGb0lEQVR4Xq3MS2xcVx3H8e855z7m3vH1jMdjO43zshIrtpM0SZ3WFEcRVFFKoRWPBYtAHwgWCFUsQN100QeCsqAhCESrirRASdWWIkoUqgKFJm3UZ5o2oW2akrR5uXbi2ON4PPfOfZ17iERW2bCAz1/f3V8/cfDC02UEj4OxKHjdFMUfmUzOlAeXZFZuuVIKN8zi1dPh7Hcn5091G2EOB5b//NplA28/9tAT4bq111jD64ZKHR2VQWPEbULI0aHqZz7NZeLNmSeVMOJu4AfGgNEGLsR/95YuetcRzprcFJvaaVxrpm2mmqfp8FxKSYk8ck+0pt1nykFp0A/k9Tnt/lq3T2dHEOmi2DxSu+EdAAFwcPqp640xe42h26Qa2hqnXsFVHs04pNFuYgvbtOWCmD3aMj2VNaLi1+jwyxgpCKOQRCdMN6ZMd5Bmw1cPfG+5O/7LeX0ECyBppx9Zrn0c6BbNHJNr4qhFYWtsJCWpSFUm3ntxips2bxe+p1BKIJQECpRbkCQ2wu0XzbnIeemvhzYCVNR6JMDm5bdNF9qcwhiKbpvMg2KujZDmUgX1jgqT719gy+iX6QxsPM9F2YqclHbRRpUEXmCRZTGFlZGKxSMbR6+uA0gu863OzLc7cVUZN6jgKI8kicl0ykzjAiW5lGrVAWUwokApSa3UTY/XR2B3UlDgVy1sB8od7tgt2++4AcACOHL+uRW2bW8QQiCxcUoS6XssyBbnF6Y5+8kci8vjlJwqjnQwWpDlgtRYZDpHmxJzWUyk26gOYXxK0g+8G4bXX/snC0DZcmVh9EoQ5DpDSIVJYmIiGvkCurAQpkLU9kkTEEJeCjxbURSCZgTkfVjOApoM6Qtc3109Nj7uWO9M70EbPQT4YMhNjrWQEdHmTPs8SgfUisUgDLoAgcGyEjJtEaeaVlKQ5gVSGYwBhETaEmVJcemQaZ44aRpvyLIEnedGoNHNkNTTeI5DT2kRljeJziVhnKNlE1GaJFfnuRi3SXMDxmA7IUqCI20qdifkxfED+/dlanzb1cYL3BFhsTXPU4Ep0FGKUVALegCb1oLN7FlNpd5HIUNQLYxIsO0EKcByWljuAmXbp7fcIwgVb7xyaNeep3YfUnt272PLjaP1em/lZqmEk4cJQoMKfBxVIcwjlAp47okX6ap3XaoP221CIREyx7La2E6O7/h0eTXK+Bw+8uHrP7znvocXLe6flwCHXj06kab5hJAS6dhQFOgiJ2qXsKLVuHqAgdVD7HrwXibPTKJzFyMMAgECHGXTJTqxE4t3T5xMD7y29+mFRjgpLSUlYJ793T9ORWF0Lk1StCzQNqTTAle30flbzJ/bx6n3Xsa2Fb9/5Eccfu19wnlNFBniWJA3JecbDfa/8y5nJg7bW7ZeuyYKZwyF0QIAkC988Ogzfof6SppapHGZqgNTExPsfngfgaXpqyWk9QF6lwWk7YJlK1fQaTysqk8sE6LwIq4OEMql1DH3/O03PnBHUCk3JMCeA7/q6u1a0ltiNZ1eL719cPrcWR752d+Yn2lx/HSDY40qY2Pb2PapjYxv3YBX1syZ88weP3bp90Omw3PMOxNUe9FTn9gn5uemQqfk5BbAisHBlVo7g7PFx9TdgDMnZvjtzheI51qkWY5xYWxTLxXfJ5IVevIZ6gMDxCYnPjWDXZ0nSiOkEmYqO5l8cGT6FSD6+NhRJMCF1sWV88VkX6f3n/FHd+xl9uwsrTDEOIbPfWEj120eorw0JEzLhGWfop3ixxKrP0CTIQSAEVmhw5/f94uXAANg3b/r+1YrnV1T86ucPDzBrp3PcvHcHGmaUekL+OKtm9m0ailOUEe4FrXyWaKFblM4HmUvElNzF4jTxFiOhRRSJO34JHCOy6RU0i60uepfx07nO+593FycapAkCbX+Kl+/cxvXfXYIU3GjN/Yf2vPPg2/9JVxoNYNqQ+hcilznlKWDcpSwlCWiZrtx/O3Tf+AKClj88I9v/9aD99/aHBkaLlYNDTXuvPubH/3kN3e9vP3bn78HGAP6gSXA6K3fufnOXz+/888vHH3i9O4XH3j1roe+8dDo1pGvAeuAClfa/+aTQH35Yztuenz7l4aPLB9c81O/3H3L5VHFlUACZaAH6AQc/pv1o9cEiwbWbRlev+mrazeOblg3usnj/6nWV2fVyFp71fCa0sDgkOKyq5av4H/xb0Ky8po5hQEuAAAAAElFTkSuQmCC";
}
}}}
 или
{{{#!mapcss
node {
    icon-image: "data:image/svg+xml,<svg><rect x='10' y='10' width='50' height='20' fill='white' stroke='blue' stroke-width='2px'/><line x1='18' y1='37' x2='50' y2='5' stroke='black' stroke-width='1.5px'/></svg>";
}
}}}
 Изображения в OSM-Wiki:: Ссылки на файлы изображений из OSM-wiki создаются особым способом. Они должны быть совместимы с тегом `wiki:symbol`, см. [osmwiki:DE:Hiking DE:Hiking]. Пример:
{{{#!mapcss
node {
    icon-image: "wiki://Symbol_Jakobsweg.png";
}
}}}
== Форматы изображений ==
=== Растровые форматы ===
JOSM умеет отображать следующие растровые форматы: `png`, `jpeg`, `gif` и `bmp`.[[br]]
(В основном, все форматы, которые поддерживаются в Java Runtime Environment v. 6)

=== Векторные форматы ===
Имеется также встроенная поддержка формата ''scalable vector graphics'' (`svg`). svg icons are preffered over raster format icons because of lossless scaling on hidpi screens. Most `svg`-images should be rendered correctly, but in some cases the result may be flawed. This is due to limitations of the used [https://svgsalamander.java.net/ svg-library].

One thing you can be sure of, is that the rendering is consistent on all systems. So either the result looks OK, or it does not.

In case it does not, try to "simplify" the `svg` in a way that it can be handled by JOSM. See also the svg related hints at [wiki:DevelopersGuide/DefaultPresets#NewIcons]

Note: See WikiFormatting and TracWiki for help on editing wiki content.

Change information

Your email or username:

E-mail address and name can be saved in the Preferences

Comment about this change (optional):

Note: See TracWiki for help on using the wiki.