在OpenLayers 7中放置要素后,是否有改变要素比例的方法?

huangapple go评论64阅读模式
英文:

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: &#39;OSMStandard&#39;
  	});
	
	
	const marker = new ol.Feature({
		geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
		name: &#39;Somewhere near Nottingham&#39;,
	});
	
	
	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: &#39;https://openlayers.org/en/latest/examples/data/icon.png&#39;
					})
				})
			})
		],
    target: &#39;map&#39;
    
  });

var translate = new ol.interaction.Translate({
	features: new ol.Collection([marker])
});

map.addInteraction(translate);

document.getElementById(&#39;markerSlider&#39;).oninput = function() {
	newScale = document.getElementById(&#39;markerSlider&#39;).value / 100;
  console.log(newScale);
	document.getElementById(&#39;newScale&#39;).innerHTML = newScale;
}


/*
translate.on(&#39;translating&#39;, function (evt) {});
map.getView().on([&#39;change:center&#39;, &#39;change:resolution&#39;, &#39;change:rotation&#39;], 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 -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;	
&lt;div id=&quot;info&quot; class=&quot;info&quot;&gt;
	&lt;h2&gt;Change Marker Size&lt;/h2&gt;
	&lt;input type=&#39;range&#39; min=&#39;50&#39; max=&#39;150&#39; value=&#39;100&#39; class=&#39;markerSlider&#39; id=&#39;markerSlider&#39;&gt;&lt;br&gt;
	&lt;span id=&#39;newScale&#39;&gt;1&lt;/span&gt;
&lt;/div&gt;

<!-- 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 = [ [&#39;https://testing.52weekdog.com/images/markers/marker_marker01_black.svg&#39;, 0.1, [0.5,1]],
[&#39;https://testing.52weekdog.com/images/markers/marker_marker02_black.svg&#39;, 0.1, [0,0]],
[&#39;https://testing.52weekdog.com/images/markers/marker_pin01_black.svg&#39;, 0.1, [0,0]],
[&#39;https://testing.52weekdog.com/images/markers/marker_house01_black.svg&#39;, 0.1, [0,0]]
];
const baseMapTile = new ol.layer.Tile({
source: new ol.source.OSM(),
visible: true,
title: &#39;OSMStandard&#39;
});
const marker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
name: &#39;Somewhere near Nottingham&#39;,
});
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: &#39;map&#39;
});
var translate = new ol.interaction.Translate({
features: new ol.Collection([marker])
});
map.addInteraction(translate);
document.getElementById(&#39;markerSlider&#39;).oninput = function() {
newScale = document.getElementById(&#39;markerSlider&#39;).value / 100 * 0.1;
document.getElementById(&#39;newScale&#39;).innerHTML = (newScale * 1000).toFixed();
markerStyle.getImage().setScale([parseFloat(newScale),parseFloat(newScale)]);
marker.changed();
}
//markerStyle.getImage().setSrc(&#39;test&#39;);
//console.log(markerStyle.getImage().getSrc());
/*
translate.on(&#39;translating&#39;, function (evt) {});
map.getView().on([&#39;change:center&#39;, &#39;change:resolution&#39;, &#39;change:rotation&#39;], 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 -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js&quot;&gt;&lt;/script&gt;&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;	
&lt;div id=&quot;info&quot; class=&quot;info&quot;&gt;
&lt;h2&gt;Change Marker Size&lt;/h2&gt;
&lt;input type=&#39;range&#39; min=&#39;50&#39; max=&#39;150&#39; value=&#39;100&#39; class=&#39;markerSlider&#39; id=&#39;markerSlider&#39;&gt;&lt;br&gt;
&lt;span id=&#39;newScale&#39;&gt;100&lt;/span&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月17日 09:52:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/76031230.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定