使用OpenLayers 画一块区域 并且将该区域展示到图层上

先看效果

安装

npm install -s ol@7.4.0 --save-dev

引入

	import 'ol/ol.css'
	import {
		Map,
		View
	} from 'ol'
  import TileLayer from 'ol/layer/Tile'
  import XYZ from 'ol/source/XYZ'
	// import Tile from 'ol/layer/Tile'
	import OSM from 'ol/source/OSM'
  import { Vector as VectorSource } from 'ol/source'
  import VectorLayer from 'ol/layer/Vector'
  import Draw, {createRegularPolygon, createBox} from 'ol/interaction/Draw';
import { Projection, addProjection } from "ol/proj";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { getTopLeft, getWidth } from "ol/extent";

整体代码如下

<template>
  <div class="container">
    <div id="vue-openlayers" class="map-x"></div>
    <div id="canv" style="width: 100px;height:100px;"></div>
    <div class="btn">
      <!-- <el-button type="primary"> 按钮1 </el-button>
      <el-button type="primary" @click="drawLine"> 画塘口</el-button>
      <el-button type="primary"> 按钮3 </el-button> -->
    </div>
  </div>
</template>
<script>

import 'ol/ol.css'
import {
  Map,
  View
} from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
// import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import { Vector as VectorSource } from 'ol/source'
import VectorLayer from 'ol/layer/Vector'
import Draw, { createRegularPolygon, createBox } from 'ol/interaction/Draw';
import { Projection, addProjection } from "ol/proj";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { getTopLeft, getWidth } from "ol/extent";
export default {
  name: 'FirstMap',
  data() {
    return {
      map: null,
      layers: []
    }
  },
  methods: {
    initMap() {
      let map = new Map({
        target: "vue-openlayers",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: 'https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}',
            }),
            
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [114.064839, 22.548857],
          zoom: 8
        })
      })
      this.map = map
      // 添加绘制控件
      const draw = new Draw({
        source: new VectorSource(),
        type: 'Polygon',
        name: 'huizong'
      });
      map.addInteraction(draw);
      // 监听绘制完成事件
      draw.on('drawend', (event) => {
        const polygon = event.feature.getGeometry();
        this.clipMap(polygon);
      });
    },



    clipMap(polygon) {
      const extent = polygon.getExtent();
      // 设置图层的可见范围
      const layer = this.map.getLayers().item(0); // 获取第一个图层
      console.log(layer, 'layerlayerlayer');
      layer.setExtent(extent);
      // 更新地图视图以适应绘制的区域
      this.map.getView().fit(extent, { padding: [50, 50, 50, 50] });


    },
    drawLine() {
      // 创建绘制交互控件
      const draw = new Draw({
        map: this.map,
        type: 'LineString', // 可以设置为'Circle', 'LineString', 'Polygon'等
        geometryFunction: createRegularPolygon(60), // 创建一个正多边形，这里以40边为例
        // maxPoints: 4 // 绘制时最多点击的点数
      });
      this.map.addInteraction(draw);
      draw.on('drawend', function (event) {
        const polygon = event.feature.getGeometry();
        const extent = polygon.getExtent();

        // 设置图层的可见范围
        const layer = this.map.getLayers().item(0); // 获取第一个图层
        layer.setExtent(extent);

        // 更新地图视图以适应绘制的区域
        this.map.getView().fit(extent, { padding: [50, 50, 50, 50] });
      });
    }
  },
  mounted() {
    this.initMap();
  }
}
</script>

<style scoped lang="scss">
.container {
  position: relative;

  .btn {
    position: absolute;
    left: 4%;
    top: 1%;
  }
}

#vue-openlayers {
  width: 100vw;
  height: 100vh;
}

h3 {
  line-height: 40px;
}
</style>