vue3+openLayers9标记点位

<!--  -->
<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>

在这里插入图片描述

相关推荐

  1. OpenLayers学习笔记-聚合

    2024-07-20 22:34:02       24 阅读
  2. Vue3使用百度地图marker实现水波纹动效

    2024-07-20 22:34:02       52 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 22:34:02       106 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 22:34:02       116 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 22:34:02       95 阅读
  4. Python语言-面向对象

    2024-07-20 22:34:02       103 阅读

热门阅读

  1. 获取磁盘剩余容量-----c++

    2024-07-20 22:34:02       29 阅读
  2. springboot3.2 RedisCacheManager配置

    2024-07-20 22:34:02       28 阅读
  3. springSecurity学习之springSecurity简介

    2024-07-20 22:34:02       30 阅读
  4. 分布式锁-redisson锁重试和WatchDog机制

    2024-07-20 22:34:02       20 阅读
  5. Photoshop图层类型

    2024-07-20 22:34:02       25 阅读
  6. (一)js前端开发中设计模式前篇之对象

    2024-07-20 22:34:02       27 阅读
  7. 网络安全-网络安全及其防护措施6

    2024-07-20 22:34:02       25 阅读
  8. [C++ 入门基础 - 命名空间]

    2024-07-20 22:34:02       21 阅读