有没有一种方法可以在一个图标被放置在openlayersMap上之后更新它的比例?
我有一个标记图标上的Map。我想用户能够使图标更大/更小使用滑块。
我一直在尝试使用getStyle或setStyle来解决这个问题,但似乎无法改变比例。
var london = [-0.1276474, 51.507321899999994];
var isOnMap = true;
const baseMapTile = new ol.layer.Tile({
source: new ol.source.OSM(),
visible: true,
title: 'OSMStandard'
});
const marker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
name: 'Somewhere near Nottingham',
});
const map = new ol.Map({
view: new ol.View({
center: (ol.proj.fromLonLat(london)),
zoom: 15,
}),
layers: [
baseMapTile,
new ol.layer.Vector({
source: new ol.source.Vector({
features: [marker]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
scale: 1,
src: 'https://openlayers.org/en/latest/examples/data/icon.png'
})
})
})
],
target: 'map'
});
var translate = new ol.interaction.Translate({
features: new ol.Collection([marker])
});
map.addInteraction(translate);
document.getElementById('markerSlider').oninput = function() {
newScale = document.getElementById('markerSlider').value / 100;
console.log(newScale);
document.getElementById('newScale').innerHTML = newScale;
}
/*
translate.on('translating', function (evt) {});
map.getView().on(['change:center', 'change:resolution', 'change:rotation'], function() {});
*/
#map{
width: 300px;
height: 300px;
border: 1px solid black;
padding: 5px;
float: left;
}
#info{
width: calc(100% - 330px);
margin-left: 5px;
padding: 5px;
height: 100px;
border: 1px solid black;
float: left;
}
.info h2{
font-size: small;
text-decoration: underline;
font-weight: 600;
margin: 0 0 10px 0;
}
#newScale{
font-size: larger;
margin: 5px 0 0 15px;;
}
<link href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
<div id="map" class="map"></div>
<div id="info" class="info">
<h2>Change Marker Size</h2>
<input type='range' min='50' max='150' value='100' class='markerSlider' id='markerSlider'><br>
<span id='newScale'>1</span>
</div>
1条答案
按热度按时间nhhxz33t1#
经过一些帮助和更多的实验,我弄明白了。所需的代码行是:
第一行代码获取与标记相关联的图像并设置新的比例,第二行代码用于更新Map输出中的更改。