(я подумал о том, чтобы опубликовать это на codereview.stackexchange.com, но ссылка openlayers.org «Задать вопрос» ведет сюда, поэтому я пишу здесь.)
Мой код успешно рисует карту, помещаетнекоторые SVG-маркеры на нем и накладывают трек GPX.Теперь я хотел бы изменить цвет дорожки GPX, чтобы сделать его более отличимым от карты, но все попытки (основанные на примерах с гуглом) терпят неудачу;нет сообщения об ошибке - хотя я не знаю, где оно появится - просто все попытки стилизовать дорожку приводят к тому, что дорожка не отображается.
Вот код:
<html lang="en">
<head>
<meta charset="utf-8">
<title>picrenamer3 - SAM_5772.JPG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<style>
svg#bullet {
max-height: 22px;
max-width: 22px;
}
</style>
<script>
var map;
function updateClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
/* clipboard successfully set */
}, function() {
/* clipboard write failed */
alert('failed to write to clipboard (hint: are you serving this file over https?)');
});
}
function initialize_map(lat, lon, zoom, trackfile) {
map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([lon, lat]),
zoom: zoom
})
});
map.on('singleclick', function(evt) {
var coordinates = evt.coordinate;
var p = map.getView().getProjection();
var cord = ol.proj.toLonLat(coordinates, p);
updateClipboard(cord[1].toFixed(6) + ',' + cord[0].toFixed(6));
});
if (trackfile != '') {
gpxTrackVector = new ol.source.Vector({
url: trackfile,
format: new ol.format.GPX()
});
var gpxTrackLayer = new ol.layer.Vector({
source: gpxTrackVector,
});
map.addLayer(gpxTrackLayer);
}
}
function add_layer_with_marker(lat, lng, col, cx, cy) {
var svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40" id="svg2"><circle cx="' + cx + '" cy="' + cy + '" r="7.5" id="c2" style="fill:' + col + ';stroke:#000000;stroke-width:2.5" /></svg>'
var mysvg = new Image();
mysvg.src = 'data:image/svg+xml,' + escape(svg);
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
})]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
img: mysvg,
imgSize:[40, 40]
})
}),
/*
* Stop markers totally obscuring markers at same place.
*/
opacity: 0.6
});
map.addLayer(vectorLayer);
}
</script>
</head>
<body onload="
initialize_map(50.125819, 12.528039, 10.000000, '/home/alexis/sieben-fluesse-simplified.gpx');
add_layer_with_marker(50.125819,12.528039,'#0000ff', 23, 17);
add_layer_with_marker(50.125819,12.528039,'#ffffff', 23, 23);
">
<div id="map" style="width: 100%; height: 80vh;"></div>
</body>
</html>
Кто-нибудь может посоветовать мне, как рационализировать код OpenLayers здесь?Я делаю какие-либо очевидные ошибки, касающиеся смешивания версий OpenLayer?Если я смогу исправить эти моменты, то я думаю, что я, вероятно, смогу Google, как сделать стиль трека или найти пример, который работает на моем коде.Большое спасибо!
Остальная часть этого поста содержит некоторые заметки о приведенном выше коде.
Приведенный выше код идентичен тому, что я использую.Я обслуживаю его с помощью SimpleHTTPServer Python (к которому я переключился, когда понял, что file: // - загруженный JS не может записать в буфер обмена), поэтому путь к файлу GPX в вызове initialize_map () ('/ home / alexis /') работает для меня и отображается на карте в виде бледно-тонкой бирюзовой линии, которую трудно отличить от карты под ней.Следовательно, желая изменить цвет дорожки.
Приведенный выше код объединяет примеры с гуглом (один для отображения маркеров, один для отображения дорожек, один для получения местоположения, один для записи текста в буфер обмена и т. Д.),которые - насколько я знаю - могли основываться на разнице версий OpenLayers или использовать разные подходы к программированию с OpenLayers.Но результат в том, что - из-за моей нехватки знаний о Javascript и OpenLayers - я загнал себя в угол и не смог успешно выполнить мою следующую разработку (цвет трека).Поэтому мы пришли сюда за советом относительно рационализации кода, который, я думаю, является необходимым условием для продолжения разработки кода и продолжения обучения OpenLayers.
К сожалению, для написания этого вопроса необходимо изменить путь GPX.на URL не показывает трек.Если это поможет, файл GPX доступен по адресу https://www.pasta.freemyip.com/~alexis/sieben-fluesse-simplified.gpx.
. В настоящее время я объединяю SVG, CSS, HTML и JS в один файл.Я делаю это потому, что весь вывод генерируется скриптом Python, но я готов разбить его на отдельные файлы SVG, CSS, HTML и JS.