五章-58-要素的移动

作者: 彩云飘过 | 来源:发表于2020-03-27 17:55 被阅读0次

五章-58-要素的移动
智能终端让世界腾飞，移动互有哪些联网特点，移动互联网了解一下
《图像的命运》06
iOS图片拉伸技巧
iOS图片伸缩技巧
Openlayers API-Translate
移动应用架构初探
Day 58 Hit the sack
篆刻习作58
麦子金服：“创新”与“安全”成为移动金融主阵地

本文基于腾讯课堂老胡的课《跟我学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>