openlayers图标(ol.Overlay)

<template>
    <div class="myMap">
        <div id="map" style="height: 100%; width: 100%;"></div>
        <!--下面就是传统的显示一个图片图标的方式,用img-->
        <div id="anchor"><img src="../assets/fy.jpg" alt="示例锚点" /></div>
    </div>
</template>
<script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import {
        OSM,
        Vector as VectorSource,
    } from "ol/source";
    import {
        Tile as TileLayer,
        Vector as VectorLayer
    } from "ol/layer";
    import View from "ol/View";
    import Overlay from "ol/Overlay";
    import {
        onMounted,
    } from 'vue';
    export default {
        setup() {
            let map = null;
            onMounted(() => {
                var osmLayer = new TileLayer({
                    source: new OSM()
                });
                var pointLayer = new VectorLayer({
                    source: new VectorSource()
                });
                map = new Map({
                    layers: [
                        osmLayer,
                        pointLayer,
                    ],
                    target: "map",
                    view: new View({
                        // center: transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
                        // 设置地图中心范围
                        // extent: [102, 29, 104, 31],
                        // 设置成都为地图中心
                        center: [104.06, 30.67],
                        // 指定投影使用EPSG:4326
                        projection: 'EPSG:4326',
                        zoom: 10,
                        // 限制地图缩放最大级别为14,最小级别为10
                        // minZoom: 10,
                        // maxZoom: 14
                    })
                });
                // 下面把上面的图标附加到地图上,需要一个ol.Overlay
                var anchor = new Overlay({
                    element: document.getElementById('anchor')
                });
                // 关键的一点,需要设置附加到地图上的位置
                anchor.setPosition([104.06, 30.67]);
                // 然后添加到map上
                map.addOverlay(anchor);
            })

            return {}
        }
    }
</script>

<style lang="less" scoped>
    .myMap {
        height: 100%;
        width: 100%;

        #anchor {
            cursor: pointer;
        }

        .navigate-container {
            position: absolute;
            bottom: 50px;
            margin-left: 500px;
        }
    }
</style>

缺点:当图标比较多的情况下,如果采用这种方式,那么我们会加入非常多的HTML元素,从而造成效率降低。 关于效率的测试,大家可以自行测试。 为什么会这样呢? 因为界面上元素的遍历在数量比较多的情况下,会变慢,基于此基础上的渲染,鼠标事件都会变慢。
有点:这种使用传统的方式显示图标可以应用传统的HTML技术,比如鼠标移动到图标上,鼠标图标变成手势。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值