<!-- -->
<template>
<div class="map" id="olmap">333</div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { Map, View, interaction, source, Feature } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { OSM, Source, XYZ } from 'ol/source';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';
import { Point } from 'ol/geom';
import VectorLayer from 'ol/layer/Vector';
//初始化
const state = reactive({
map: null as any,
});
/**
* 模块名:初始化地图
* 代码描述:
* 作者:Fant
* 创建时间:2024/07/20 21:16:24
*/
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 21:21:19
*/
const mapPoint = () => {
// 创建点特征
const pointFeature = new Feature({
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.8,
}),
}),
);
// 创建矢量图层
const vectorSource = new VectorSource({
features: [pointFeature], // 添加点特征到图层
});
const vectorLayer = new VectorLayer({
source: vectorSource,
});
state.map.addLayer(vectorLayer);
};
//------------------------当前模块结束------------------------
onMounted(() => {
getMap();
mapPoint();
});
console.log(state);
</script>
<style scoped>
.map {
width: 100vw;
height: 100vh;
}
</style>
vue3+openLayers9标记点位
2024-07-20 22:34:02 24 阅读