openlayers+vue3+turf实现地图画多边形然后计算面积

首先引入ol用到的东西

//ol相关函数
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import {
    TileWMS, XYZ
} from "ol/source";
import { Tile as TileLayer } from "ol/layer.js";
import View from "ol/View.js";
import VectorSource from "ol/source/Vector.js";
import VectorLayer from "ol/layer/Vector.js";
import {
    Stroke,
    Style,
    Icon,
    Fill
} from "ol/style.js";
import { Draw } from "ol/interaction";
import Feature from "ol/Feature.js";
import { LineString, Point, Polygon } from 'ol/geom.js';
import { get as getProjection } from 'ol/proj';
import { getTopLeft, getWidth } from 'ol/extent';
import makerUrl from '../assets/map/qizhi.png'

然后创建图层，初始化地图等； 我用的天地图的图层，自己百度天地图去注册一个key就好了

let tiandiLayer = new TileLayer({
    source: new WMTS({
        url: 'http://t0.tianditu.gov.cn/img_c/wmts?tk=天地图的KEY',//图层地址
        wrapX: false,
        layer: 'img', //注意每个图层这里不同
        matrixSet: 'c',
        format: 'tiles',
        style: 'default',
        projection: projection,
        tileGrid: new WMTSTileGrid({
            origin: getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds,
        }),
        wrapX: true,
    }),
    zIndex: 1
});
const initMap = () => {
    let layerRemark = new TileLayer({
        opacity: 1,
        source: new WMTS({
            url: 'http://t4.tianditu.gov.cn/cva_c/wmts?tk=天地图的KEY',
            layer: 'cva', //注意每个图层这里不同
            matrixSet: 'c',
            format: 'tiles',
            style: 'default',
            projection: projection,
            tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds,
            }),
            wrapX: true,
        }),
        zIndex: 1
    });
    mapref = new Map({
        target: "olMap",//获取到挂在dom
        view: new View({
            //视图
            projection: "EPSG:4326",
            center: [122.149837582622, 46.0175202631657],
            zoom: 18,//地图初始缩放层级
            maxZoom: 20,//最大缩放层级
        }),
        controls: [],
        moveTolerance: 1, //光标必须移动的最小距离(以像素为单位)才能被检测为map move事件，而不是单击。
    });


    mapref.addLayer(shiliangLayer)
    mapref.addLayer(tiandiLayer)
    mapref.addLayer(layerRemark)
    shiliangLayer.setVisible(false) //这里做图层切换，正常不用写
}

之后是画多边形；思路是用ol的draw功能， 监听draw结束后会拿到一个经纬度数组；然后在地图上添加多边形，经纬度填这个数组就可以了

之后拿到经纬度数组需要算一下面积;我最开始用的ol的getArea函数不知道为什么算出来的结果跟真实数据差别很大；

引入turf

$ npm install @turf/turf

//在页面引入
import * as turf from '@turf/turf'  //这样是引入全部的 包体积略大；在乎体积的话自己去官网查有单独引入的方式


//引入完成后
    draw.on('drawend', function (event) {
        let coord = event.feature.getGeometry().getCoordinates()  //这个就是画 的经纬度数组，画多边形也用这个数组即可

        let polygon=turf.polygon(coord)
        let area = turf.area(polygon)
        area=area.toFixed(2)
        console.log('面积为',area)  //单位是平方米 有需求自己转
    }