<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技术,比如鼠标移动到图标上,鼠标图标变成手势。