地图画点标记

🤦后面在细写吧

先这样

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

<script setup>
import { ref, onMounted } from 'vue';
import { Map, View, Feature } from "ol"; // 地图实例方法、视图方法
import { Point } from 'ol/geom'
import { Style, Icon } from 'ol/style'
import { Vector as LayerVec } from 'ol/layer'
import { Vector as SourceVec } from 'ol/source'

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

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

import marker1 from "@/assets/markers/marker1.png"; // 地图标记图标
import marker2 from "@/assets/markers/marker2.png"; // 地图标记图标

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

const mapDatas = [
    { type: 'marker1', info: { text: 'hello' }, lonlats: [[104.022216800965, 30.72201672261412], [104.03852463177554, 30.706109436762695]] },
    { type: 'marker2', info: { text: 'world' }, lonlats: [[104.00344848867189, 30.716695219928575], [104.02971267934572, 30.71309033101256]] },
]

const inintMap = () => {
    map.value = new Map({
        target: "mapcontainer", // 对应页面里 id 为 map 的元素
        layers: [overlay, satellite],
        view: new View({
            projection: "EPSG:4326",
            center: [104.03228760, 30.72147313], // 地图中心点
            minZoom: 12, // 地图缩放最小级别
            maxZoom: 18, // 地图缩放最大级别
            zoom: 14, // 地图缩放级别（打开页面时默认级别）
        }),
        overlays: [],
        controls: [mousePosition]
    })
    mapClick()
}

const vectorTileLayer = () => {
    // 创建矢量容器
    var vectorSource = new SourceVec({})
    // 创建图标特性
    var iconFeature = new Feature({
        geometry: new Point([104.03228760, 30.72147313], "XY"), // 第二个参数为坐标布局
        featureInfo: { 'xxx': 234 }  // 图标特性的附加信息
    })

    // 将图标特性添加进矢量中
    vectorSource.addFeature(iconFeature)
    // 创建图标样式
    var iconStyle = new Style({
        image: new Icon({
            opacity: 0.75,
            src: marker1,
            scale: 0.3, // 控制图标大小
            anchor: [0.5, 0.96],// 锚。默认值为图标中心。
        })
    })
    //创建矢量层
    var vectorLayer = new LayerVec({
        source: vectorSource,
        style: iconStyle,
        zIndex: 2, // 图层层级
    });
    //添加进map
    map.value.addLayer(vectorLayer);
}

// 根据类型渲染不同的图标
const getIcon = (type = "") => {
    let src = "";
    if (type == "marker1") {
        src = marker1;
    } else if (type == "marker2") {
        src = marker2;
    }
    var styleIcon = new Style({
        image: new Icon({
            src: src,
            anchor: [0.5, 0.96],
            scale: 0.3, // 控制图标大小
        })
    });
    return styleIcon;
};
const addPoints = (datas) => {
    datas.forEach(item => {
        item.lonlats.forEach(inner => {
            let vectorSource = new SourceVec({});
            let iconFeature = new Feature({
                geometry: new Point(inner, "XY"), // 第二个参数为坐标布局
                featureInfo: item.info  // 图标特性的附加信息
            })
            vectorSource.addFeature(iconFeature)

            let pointLayer = new LayerVec({
                source: vectorSource,
                zIndex: 2,
                style: getIcon(item.type),
            });

            map.value.addLayer(pointLayer);
        })
    })
}

// 注册地图点击事件
const mapClick = () => {
    map.value.on('singleclick', (evt) => {
        // 过滤图层方法
        const feature = map.value.forEachFeatureAtPixel(
            evt.pixel,
            function (feature) {
                return feature;
            }
        );
    })
}

onMounted(() => {
    inintMap()
    vectorTileLayer()
    addPoints(mapDatas)
})
</script>


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

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