本文基于騰訊課堂老胡的課《跟我學(xué)Openlayers--基礎(chǔ)實例詳解》做的學(xué)習(xí)筆記示血，使用的openlayers 5.3.x api讥蟆。
源碼 見 1058.html 疯特，對應(yīng)的 官網(wǎng)示例https://openlayers.org/en/latest/examples/translate-features.html?q=Select
image.png
image.png
<!DOCTYPE html>
<html>
<head>
<title>要素的移動</title>
<link rel="stylesheet" href="../include/ol.css" type="text/css" />
<script src="../include/ol.js"></script>
</head>
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 95%;
}
</style>
<body>
<div id="map" class="map"></div>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../data/lands.geojson',
format: new ol.format.GeoJSON()
})
});
var select = new ol.interaction.Select();
var translate = new ol.interaction.Translate({
features: select.getFeatures()
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, translate]), //同時擴充兩個交互操作兴喂，傳入一個數(shù)組
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
