javascript 有没有一种方法可以改变一个要素的比例后,它已被放置在openlayers 7?

sxpgvts3  于 2023-04-19  发布在  Java
关注(0)|答案(1)|浏览(124)

有没有一种方法可以在一个图标被放置在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>
nhhxz33t

nhhxz33t1#

经过一些帮助和更多的实验,我弄明白了。所需的代码行是:

markerStyle.getImage().setScale([parseFloat(newScale),parseFloat(newScale)]);
marker.changed();

第一行代码获取与标记相关联的图像并设置新的比例,第二行代码用于更新Map输出中的更改。

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() {});
*/
#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>

相关问题