地图画区域

🤦后面在细写吧

先这样

<template>
    <div id="mapcontainer" class="mapcontainer"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Map, View, Feature } from "ol"; // 地图实例方法、视图方法
import { MultiPolygon } from 'ol/geom'
import { Style, Fill, Stroke } from 'ol/style'
import { Vector as SourceVector } from 'ol/source'
import { Vector as LayerVector } from 'ol/layer'
import jinniu from '@/mock/jinniu.json'

import {
    overlay,
    mousePosition
} from './mapconfig.js'

import "ol/ol.css"; // 地图样式

const map = ref(null); // 存放地图实例

let areaLayer = null;
const addArea = (geo = []) => {
    if (geo.length == 0) return false;
    let areaFeature = null;
    // 设置图层
    areaLayer = new LayerVector({
        source: new SourceVector({
            features: [],
        }),
        zIndex: 2
    });
    // 添加图层
    map.value.addLayer(areaLayer);
    geo.forEach(g => {
        let lineData = g.features[0];
        if (lineData.geometry.type == "MultiPolygon") {
            areaFeature = new Feature({
                geometry: new MultiPolygon(
                    lineData.geometry.coordinates
                )
                // .transform("EPSG:4326", "EPSG:3857")
            });
        } else if (lineData.geometry.type == "Polygon") {
            areaFeature = new Feature({
                geometry: new Polygon(
                    lineData.geometry.coordinates
                )
            });
        }
    });

    areaFeature.setStyle(
        new Style({
            fill: new Fill({ color: "#4e98f444" }),
            stroke: new Stroke({
                width: 3,
                color: [71, 137, 227, 1]
            })
        })
    );
    areaLayer.getSource().addFeatures([areaFeature]);
}

const inintMap = () => {
    map.value = new Map({
        target: "mapcontainer", // 对应页面里 id 为 map 的元素
        layers: [overlay],
        view: new View({
            projection: "EPSG:4326",
            center: [104.03228760, 30.72147313], // 地图中心点
            minZoom: 12, // 地图缩放最小级别
            maxZoom: 18, // 地图缩放最大级别
            zoom: 14, // 地图缩放级别（打开页面时默认级别）
        }),
        overlays: [],
        controls: [mousePosition]
    })
    mapClick()
}
// 注册地图点击事件
const mapClick = () => {
    map.value.on('singleclick', (evt) => {
        // 过滤图层方法
        const feature = map.value.forEachFeatureAtPixel(
            evt.pixel,
            function (feature) {
                return feature;
            }
        );
    })
}

onMounted(() => {
    inintMap()
    addArea(jinniu)
})
</script>


<style lang="scss" scoped>
.mapcontainer {
    width: 100%;
    height: 100vh;
}

.point-layer {
    width: 30px;
    height: 30px;
}
</style>