标签：Draw Vue Openlayer area self output ol new import

场景

Vue+Openlayer使用Draw实现交互式绘制线段：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121287934

在上面的基础上实现的交互式绘制线段，还可以实现绘制多边形并直接计算出面积。

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、导入基本模块

//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Fill,Style,Stroke} from "ol/style";
//导入相关模块
import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { TileWMS ,Vector as VectorSource } from 'ol/source'
import { Select, Draw } from 'ol/interaction'
import { getArea } from "ol/sphere";

2、与前面博客相比，绘图工具传递的类型为Polygon

this.onAddInteraction('Polygon')

3、绘制结束时触发的事件中获取所绘制面积

        //绘制结束时触发的事件
        this.draw.on('drawend', function(e) {
            const geometry = e.feature.getGeometry()
            var area = getArea(geometry);
            console.log("area="+area)
            var output;
              if (area > 10000) {
                output = (Math.round(area / 1000000 * 100) / 100) +
                  ' ' + 'km<sup>2</sup>';
              } else {
                output = (Math.round(area * 100) / 100) +
                  ' ' + 'm<sup>2</sup>';
              }
            console.log("output="+output)
            let pointArr = geometry.getCoordinates()
            self.coordinate.push(pointArr)
            console.log("self.coordinate="+self.coordinate);
            self.removeDraw()
        })

这里在绘制结束事的回调方法中直接获取geometry，然后调用ol自带的getArea方法，计算出面积

计算面积在线演示地址

https://codesandbox.io/s/ol-measure-u3yob?file=/src/measure.ts:8795-8825

4、完整示例代码

<template>
    <div id="app">
      <div id="map" class="map"></div>
    </div>
</template>

<script>
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Fill,Style,Stroke} from "ol/style";
//导入相关模块
import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { TileWMS ,Vector as VectorSource } from 'ol/source'
import { Select, Draw } from 'ol/interaction'
import { getArea } from "ol/sphere";
export default {
  name: "olMapTileWMSDrawPolygon",
  data() {
    return {
      map: null, // map地图
      layer:null, //地图图层
      lineLayer:null, //线图层
      draw: null,
      lineSource:null,
      coordinate: [],
   };
  },
  mounted() {
    this.initMap();
  },
  methods: {

    // 绘图工具
    onAddInteraction(type) {
        let self = this
        //勾绘矢量图形的类
        this.draw = new Draw({
            //source代表勾绘的要素属于的数据集
            source: self.lineSource,
            //type 表示勾绘的要素包含的 geometry 类型
            type: type
        })

        //绘制结束时触发的事件
        this.draw.on('drawend', function(e) {
            const geometry = e.feature.getGeometry()
            var area = getArea(geometry);
            console.log("area="+area)
            var output;
              if (area > 10000) {
                output = (Math.round(area / 1000000 * 100) / 100) +
                  ' ' + 'km<sup>2</sup>';
              } else {
                output = (Math.round(area * 100) / 100) +
                  ' ' + 'm<sup>2</sup>';
              }
            console.log("output="+output)
            let pointArr = geometry.getCoordinates()
            self.coordinate.push(pointArr)
            console.log("self.coordinate="+self.coordinate);
            self.removeDraw()
        })
        self.map.addInteraction(this.draw)
    },
    //删除交互
    removeDraw() {
        this.map.removeInteraction(this.draw)
    },
    initMap() {
      //地图图层
      this.layer = new TileLayer({
        source: new TileWMS({
          //不能设置为0，否则地图不展示。
          ratio: 1,
          url: "http://localhost:8000/geoserver/nyc/wms",
          params: {
            LAYERS: "nyc:nyc_roads",
            STYLES: "",
            VERSION: "1.1.1",
            tiled: true
          },
          serverType: "geoserver",
        }),
      });

      //线的图层
      this.lineSource = new VectorSource({ wrapX: false });
      this.lineLayer = new VectorLayer({
          source: this.lineSource,
      });

      this.map = new Map({
        //地图容器ID
        target: "map",
        //引入地图
        layers: [this.layer,this.lineLayer],
        view: new View({
          //地图中心点
          center: [987777.93778, 213834.81024],
          zoom: 14,
          minZoom:6, // 地图缩放最小级别
          maxZoom:19,
        }),
      });

      // 获取点击地图的坐标(选中样式)
      let selectedStyle = new Style({
          fill: new Fill({
              color: 'rgba(1, 210, 241, 0.2)'
          }),
          stroke: new Stroke({
              color: 'yellow',
              width: 4
          })
      })
      // 选择线的工具类
      this.selectTool = new Select({
          multi: true,
          hitTolerance: 10, // 误差
          style: selectedStyle // 选中要素的样式
      })
      //添加交互
      this.map.addInteraction(this.selectTool)
      //调用绘图工具并传递类型为线，其他类型有Point,LineString,Polygon,Circle
      this.onAddInteraction('Polygon')

    },
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 800px;
}
</style>

 

标签：Draw,Vue,Openlayer,area,self,output,ol,new,import
来源： https://www.cnblogs.com/badaoliumangqizhi/p/15547392.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。