英文:
Is there a way to change the scale of a feature after it has been placed in openlayers 7?
问题
以下是您提供的代码的翻译部分:
"Is there a way to update the scale of an icon being placed on an openlayers map after it's been placed there?"
有没有一种方法可以在将图标放在OpenLayers地图上之后更新其比例?
"I have map with a marker icon on it. I'd like the user to be able to make the icon larger/smaller using a slider."
我有一张地图上有一个标记图标。我希望用户能够使用滑块将图标变大/变小。
"I've been trying to figure it out using getStyle or setStyle but can't seem to get the scale to change."
我一直在尝试使用getStyle或setStyle来解决这个问题,但似乎无法改变比例。
请注意,代码部分未翻译,仅提供了相关的翻译内容。
英文:
Is there a way to update the scale of an icon being placed on an openlayers map after it's been placed there?
I have map with a marker icon on it. I'd like the user to be able to make the icon larger/smaller using a slider.
I've been trying to figure it out using getStyle or setStyle but can't seem to get the scale to change.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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() {});
*/
<!-- language: lang-css -->
#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;;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 1
以下是您要翻译的代码部分:
After some help and some more experimenting I figured it out.
The required lines of code were:
markerStyle.getImage().setScale([parseFloat(newScale),parseFloat(newScale)]);
marker.changed();
The first ling of code gets the image associated with the marker and sets the new scale ratio. The second line is required to update the change on the map output.
var london = [-0.1276474, 51.507321899999994];
var isOnMap = true;
var availableMarkers = [ ['https://testing.52weekdog.com/images/markers/marker_marker01_black.svg', 0.1, [0.5,1]],
['https://testing.52weekdog.com/images/markers/marker_marker02_black.svg', 0.1, [0,0]],
['https://testing.52weekdog.com/images/markers/marker_pin01_black.svg', 0.1, [0,0]],
['https://testing.52weekdog.com/images/markers/marker_house01_black.svg', 0.1, [0,0]]
];
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 markerStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: availableMarkers[0][2],
scale: availableMarkers[0][1],
src: availableMarkers[0][0]
})
});
const vectorSource = new ol.layer.Vector({
source: new ol.source.Vector({
features: [marker]
}),
style: markerStyle
});
marker.setStyle([markerStyle]);
const map = new ol.Map({
view: new ol.View({
center: (ol.proj.fromLonLat(london)),
zoom: 15,
}),
layers: [baseMapTile, vectorSource],
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 * 0.1;
document.getElementById('newScale').innerHTML = (newScale * 1000).toFixed();
markerStyle.getImage().setScale([parseFloat(newScale),parseFloat(newScale)]);
marker.changed();
}
//markerStyle.getImage().setSrc('test');
//console.log(markerStyle.getImage().getSrc());
#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'>100</span>
</div>
英文:
After some help and some more experimenting I figured it out.
The required lines of code were:
markerStyle.getImage().setScale([parseFloat(newScale),parseFloat(newScale)]);
marker.changed();
The first ling of code gets the image associated with the marker and sets the new scale ratio. The second line is required to update the change on the map output.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var london = [-0.1276474, 51.507321899999994];
var isOnMap = true;
var availableMarkers = [ ['https://testing.52weekdog.com/images/markers/marker_marker01_black.svg', 0.1, [0.5,1]],
['https://testing.52weekdog.com/images/markers/marker_marker02_black.svg', 0.1, [0,0]],
['https://testing.52weekdog.com/images/markers/marker_pin01_black.svg', 0.1, [0,0]],
['https://testing.52weekdog.com/images/markers/marker_house01_black.svg', 0.1, [0,0]]
];
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 markerStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: availableMarkers[0][2],
scale: availableMarkers[0][1],
src: availableMarkers[0][0]
})
});
const vectorSource = new ol.layer.Vector({
source: new ol.source.Vector({
features: [marker]
}),
style: markerStyle
});
marker.setStyle([markerStyle]);
const map = new ol.Map({
view: new ol.View({
center: (ol.proj.fromLonLat(london)),
zoom: 15,
}),
layers: [baseMapTile, vectorSource],
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 * 0.1;
document.getElementById('newScale').innerHTML = (newScale * 1000).toFixed();
markerStyle.getImage().setScale([parseFloat(newScale),parseFloat(newScale)]);
marker.changed();
}
//markerStyle.getImage().setSrc('test');
//console.log(markerStyle.getImage().getSrc());
/*
translate.on('translating', function (evt) {});
map.getView().on(['change:center', 'change:resolution', 'change:rotation'], function() {});
*/
<!-- language: lang-css -->
#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;;
}
<!-- language: lang-html -->
<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'>100</span>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论