五章-58-要素的移动

2020-03-27 本文已影响0人彩云飘过

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1058.html ，对应的官网示例https://openlayers.org/en/latest/examples/translate-features.html?q=Select

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]), //同时扩充两个交互操作，传入一个数组
       layers: [raster, vector],
       target: 'map',
       view: new ol.View({
         center: [0, 0],
         zoom: 2
       })
     });

   </script>
</body>

</html>

五章-58-要素的移动

猜你喜欢

热点阅读