#openlayers
#openlayers
Вопрос:
«Библиотека OpenLayers предоставляет JavaScript API, который позволяет легко включать карты из различных источников в вашу веб-страницу или приложение». Однако, судя по просмотру документации, разнообразие источников включает только веб-провайдеров карт Земли.
Возможно ли использовать OpenLayers для отображения объектов поверх локально сохраненных базовых карт, таких как морские карты (например,http://www.charts.noaa.gov/InteractiveCatalog/nrnc.shtml?rnc=12280 ) или произвольные (неземные) растровые изображения с искусственными декартовыми координатами?
—РЕДАКТИРОВАТЬ—
На следующей странице отображается локально сохраненное изображение, вопреки документации, в которой говорится, что изображение должно быть доступно через Интернет. Но есть ли способ использовать несколько файлов изображений в качестве плиток вместо одного файла?
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:640px; height:480px; border:3px solid" id="map"></div>
<script defer="defer" type="text/javascript">
var options = {
maxResolution: 10,
units: 'm',
resolutions: [10, 5, 2, 1, .5],
};
var map = new OpenLayers.Map('map', options);
var extent = new OpenLayers.Bounds(-4824, -3294, 4824, 3294);
var size = new OpenLayers.Size(4824, 3294);
var img = new OpenLayers.Layer.Image( "Basemap",
"maps/map0.jpg", extent, size, {layers: 'basic'} );
map.addLayer(img);
map.zoomToMaxExtent();
</script>
</body>
</html>
Ответ №1:
Здесь приведен пример локального использования плиток OpenStreetMap без прямого использования http. Очевидно, что вам нужно будет поместить свои плитки в формат XYZ, чтобы это сработало. Вот исходный код для слоя OSM. xyz каждого тайла является производным от OpenLayers.Слой.XYZ, который, конечно же, разработан для простоты и глобального охвата. Однако вы могли бы легко создать свой собственный слой с вашей собственной системой координат для работы аналогичным образом.
Соответствующая строка с точки зрения загрузки является:
var newLayer = new OpenLayers.Layer.OSM("Local Tiles",
"tiles/${z}/${x}/${y}.png",
{numZoomLevels: 19,
alpha: true,
isBaseLayer: false}
);
Примечание: Как правило, я обнаружил, что примеры и исходный код являются лучшим источником информации, чем документация. Я говорю это без критики, OpenLayers имеет ограниченные ресурсы разработчика, как и большинство проектов с открытым исходным кодом, поэтому только потому, что там ничего не задокументировано, не означает, что это невозможно сделать.
Комментарии:
1. Спасибо — похоже, это то, что я искал.
2. Какую систему координат вы используете, из интереса? Я немного работал с морскими данными и знаю, что это может быть немного необычно.
Ответ №2:
Да, вы можете загрузить любую проекцию, которая вам нравится, поскольку вызовы WMS будут полностью определяться параметрами, которые вы отправляете на OpenLayer.Конструктор карты, а именно границы (максимальные экстенты), единицы измерения (обычно градусы или метры) и, необязательно, массив разрешений (в единицах карты на пиксель). Если у вас нет массива разрешений (который будет привязывать уровни масштабирования к этим разрешениям, тогда вам нужно указать параметр maxResolution и numZoomLevels — по умолчанию это значение равно 16. Смотрите документацию OpenLayers map, которая хорошо прокомментирована и показывает многие другие параметры, а также некоторые примеры конструкторов карт, например:
var options = {
maxExtent: new OpenLayers.Bounds(0,0,700000,1300000),
maxResolution: 200,
units: 'm',
projection: "EPSG:27700",
resolutions: [ 200, 50, 10, 5, 1, 0.5, 0.1]
};
var map = new OpenLayers.Map("map", options);
которая на самом деле относится к британской национальной сетке, которая выражается в метрах, но будет одинаково хорошо работать в градусах с разрешением в градусах на пиксель.
Другие слои, которые добавляются к карте, такие как WMS, будут вычисляться на основе этих значений в конструкторе карты. Если вам нужно загрузить векторные данные в другую проекцию, вы тоже можете это сделать, установив displayProjection , но вам может потребоваться добавить стороннюю библиотеку проекций, proj4js, для выполнения преобразований — хотя вы явно не спрашивали об этом.
Я не уверен, в какой проекции находятся ваши морские карты, предположительно, в какой-то UTM или lat / lon, поэтому не могу дать вам более подходящие цифры.
Комментарии:
1. Смотрите отредактированный пример выше. Спасибо за подсказку, но я не вижу никакой документации по использованию OpenLayers. Layer.WMS() со спецификацией файла, отличной от http, хотя это вроде как работает.
2. Под «работой» я подразумеваю, что WMS () отобразит узнаваемое изображение из локального файла, но в отличие от Image (), как показано выше, оно не предназначено для файлов и не выполняет корректное панорамирование или масштабирование без WMS-сервера для выполнения работы.
3. @Dave, я добавил второй ответ, основанный на вашем обновленном вопросе.
Ответ №3:
С openlayers 3:
var newLayer = new ol.layer.Tile({
source: new ol.source.OSM({
url: 'maps/{z}/{x}/{y}.png'
})
});
var map = new ol.Map({
layers: [
newLayer
],
controls: [],
target: 'map',
view: new ol.View({
center: ol.proj.transform([4.666389, 50.009167], 'EPSG:4326', 'EPSG:3857'),
zoom: 4,
minZoom: 1,
maxZoom: 20
})
});