openlayers拖拽、旋转、缩放、拉伸变形 (十二)

雨点打透心脏的1/2处 2022-11-26 15:54 1596阅读 0赞

gis应用中拖动旋转和缩放是编辑中比较常见的功能，在openlayers中拖拽可以通过ol.interaction.Translate来实现，但是其他功能没有，所以要用的openlayers的一个扩展**ol-ext**。

# 1. ol-ext #

ol-ext是openlayers的扩展，他主要包含控件，交互，弹出窗口等功能。类似于WEB前端的UI框架。他是一个成熟的扩展，可以让你省去很多时间，避免很多问题。

**注意区分一下使用方式对应的包名：**

## 在webpack中使用 ##

npm install ol-ext

## 在web中使用 ##

npm install openlayers-ext

[ol-ext官网链接][ol-ext]  
[ol-ext在线示例][ol-ext 1]  
注意3.1.0版本之前某些功能会需要依赖jQuery。

# 2. 创建地图 #

const tileLayer = new Tile({ 
      source: new XYZ({ 
        url: `http://192.168.0.98:5000/tiles/world-base/{z}/{x}/{y}.png`,
      }),
    })
    const map = new Map({ 
      view: new View({ 
        center: transform([121.507291, 31.235963], 'EPSG:4326', 'EPSG:3857'),
        zoom: 15,
        maxZoom: 18,
        minZoom: 11,
      }),
      layers: [tileLayer],
      target: 'map'
    })
    this.map = map

# 3. 添加几何图形 #

const polygon = new Feature({ 
      geometry: new Polygon([
        [
          transform([121.501842, 31.239204], 'EPSG:4326', 'EPSG:3857'),
          transform([121.506337, 31.238305], 'EPSG:4326', 'EPSG:3857'),
          transform([121.506606, 31.235846], 'EPSG:4326', 'EPSG:3857'),
          transform([121.500243, 31.236103], 'EPSG:4326', 'EPSG:3857'),
        ]
      ]),
    })
    polygon.setStyle(new Style({ 
      stroke: new Stroke({ 
        width: 4,
        color: [255, 0, 0, 1],
      }),
    }))
    this.map.addLayer(new VectorLayer({ 
      source: new VectorSource({ 
        features: [polygon],
      }),
    }))

# 4. 添加交互 #

关键代码在这，new一个ExtTransform对象，再通过map对象的addInteraction方法添加进去。  
ExtTransform是ol-ext/interaction/Transform。

const transform = new ExtTransform({ 
      enableRotatedTransform: false,
      hitTolerance: 2,
      translate: true, // 拖拽
      stretch: false, // 拉伸
      scale: true, // 缩放
      rotate: true, // 旋转
      translateFeature: false,
      noFlip: true,
      // layers: [],
    })
    this.map.addInteraction(transform)

这里单独记一下配置中的layers，当你需要指定哪些矢量层才能编辑，那么在这里填入对应的矢量层对象就行。

layers: [ VectorLayer ]

VectorLayer是new ol/layer/Vector的对象。

# 5. 效果展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70_pic_center]

# 6. 完整代码 #

<template>
      <div class="map" id="map"></div>
    </template>
    
    <script>
    import {  Map, View, Feature } from 'ol'
    import {  Tile, Vector as VectorLayer } from 'ol/layer'
    import {  XYZ, Vector as VectorSource } from 'ol/source'
    import {  Style, Stroke } from 'ol/style'
    import {  Polygon } from 'ol/geom'
    import {  transform } from 'ol/proj'
    import ExtTransform from 'ol-ext/interaction/Transform'
    export default { 
      data() { 
        return { 
          map: null,
        }
      },
      computed: { },
      watch: { },
      beforeCreate() { },
      created() { },
      beforeMount() { },
      mounted() { 
        this.createMap()
        this.createPolygon()
        this.onEdit()
      },
      activated() { },
      deactivated() { },
      beforeUpdate() { },
      updated() { },
      beforeDestroy() { },
      methods: { 
        createMap() { 
          const tileLayer = new Tile({ 
            source: new XYZ({ 
              url: `http://192.168.0.98:5000/tiles/world-base/{z}/{x}/{y}.png`,
            }),
          })
          const map = new Map({ 
            view: new View({ 
              center: transform([121.507291, 31.235963], 'EPSG:4326', 'EPSG:3857'),
              zoom: 15,
              maxZoom: 18,
              minZoom: 11,
            }),
            layers: [tileLayer],
            target: 'map'
          })
          this.map = map
        },
        createPolygon() { 
          const polygon = new Feature({ 
            geometry: new Polygon([
              [
                transform([121.501842, 31.239204], 'EPSG:4326', 'EPSG:3857'),
                transform([121.506337, 31.238305], 'EPSG:4326', 'EPSG:3857'),
                transform([121.506606, 31.235846], 'EPSG:4326', 'EPSG:3857'),
                transform([121.500243, 31.236103], 'EPSG:4326', 'EPSG:3857'),
              ]
            ]),
          })
          polygon.setStyle(new Style({ 
            stroke: new Stroke({ 
              width: 4,
              color: [255, 0, 0, 1],
            }),
          }))
          this.map.addLayer(new VectorLayer({ 
            source: new VectorSource({ 
              features: [polygon],
            }),
          }))
        },
        onEdit() { 
          const transform = new ExtTransform({ 
            enableRotatedTransform: false,
            hitTolerance: 2,
            translate: true, // 拖拽
            stretch: false, // 拉伸
            scale: true, // 缩放
            rotate: true, // 旋转
            translateFeature: false,
            noFlip: true,
            // layers: [],
          })
          this.map.addInteraction(transform)
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
      .map{  width: 100%; height: 100vh; }
    </style>

# 7. 补充 #

通过上面例子的思路，除了几何图形的编辑，同样图片，canvas，svg一样也可以，等有空再来补充demo。

[ol-ext]: http://viglino.github.io/ol-ext/doc/doc-pages/
[ol-ext 1]: http://viglino.github.io/ol-ext/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/6fcf4d37e26e4a98927e08a6009342f9.png