<template>
<!--地图-->
<div class="distributeMap" id="distributeMap"></div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { Feature, Map, View } from "ol";
import OSM from "ol/source/OSM";
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
import { Point } from "ol/geom";
import CircleStyle from "ol/style/Circle";
import { Fill, Icon, Style } from "ol/style";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
const state = reactive({
map: null as any,
});
/**
* 模块名:初始化地图
* 代码描述:
* 作者:Fant
* 创建时间:2024/07/19 16:03:21
*/
const getMap = () => {
let layer = new TileLayer({
source: new XYZ({
url: 'http://t4.tianditu.com/DataServer?T=vec_w&tk=4a76fd399e76e3e984e82953755c3410&x={x}&y={y}&l={z}',
}),
});
state.map = new Map({
target: 'olmap',
layers: [layer],
view: new View({
projection: 'EPSG:4326', //使用WGS 84坐标系
center: [114.31, 30.62048],
zoom: 12,
}),
});
};
/**
* 模块名:添加点标记
* 代码描述:
* 作者:Fant
* 创建时间:2024/07/20 15:59:48
*/
const mapPoint = () => {
// 创建点特征
const pointFeature = new Feature({
name: "点位",
id: 1,
geometry: new Point([114.31, 30.62048]),
});
//创建style
pointFeature.setStyle(
new Style({
image: new Icon({
src: "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/shexiangtou.png",
scale: 0.3, //图片大小比例
}),
})
);
// 创建矢量图层
const vectorSource = new VectorSource({
features: [pointFeature], // 添加点特征到图层
});
const vectorLayer = new VectorLayer({
source: vectorSource,
});
state.map.addLayer(vectorLayer);
};
/**
* 模块名:点击icon事件
* 代码描述:
* 作者:Fant
* 创建时间:2024/07/23 20:15:50
*/
const iconClick = () => {
state.map.on("singleclick", (e: any) => {
console.log(e);
let point = state.map.forEachFeatureAtPixel(
e.pixel,
(feature: any) => feature
) as any;
//如果没有点击到标记 这里会打印出undefined
console.log(point);
if (point) {
let params = point.getProperties();
console.log("当前标点参数", params);
}
});
};
onMounted(() => {
getMap();
mapPoint();
iconClick();
});
</script>
<style lang="scss" scoped>
@import url("./style.scss");
</style>