openlayers（ol.Feature+ol.style）设置图标
<template>
<div class="myMap">
<div id="map" ></div>
</div>
</template>
<script>
import"ol/ol.css";
import Map from"ol/Map";
import Feature from"ol/Feature";
import{
OSM,
Vector as VectorSource,
}from"ol/source";
import Point from'ol/geom/Point';
import{
Tile as TileLayer,
Vector as VectorLayer
}from"ol/layer";
import View from"ol/View";
import{
Icon,
Style,
}from'ol/style';
import{
transform,
}from'ol/proj';
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,icon图标库
/
/ 限制地图缩放最⼤级别为14，最⼩级别为10
// minZoom: 10,
// maxZoom: 14
})
});
// 创建⼀个Feature，并设置好在地图上的位置
var anchor =new Feature({
geometry:new Point([104.06,30.67])
});
// 设置样式，在样式中就可以设置图标
anchor.setStyle(new Style({
image:new Icon({
src:require("../assets/fy.jpg"),
anchor:[0.5,1],// 设置图标位置
scale:0.2
})
}));
// 添加到之前的创建的layer中去
})
})
return{}
}
}
</script>
<style lang="less"scoped> .myMap{
height: 100%;
width: 100%;
#anchor{
cursor: pointer;
}
.navigate-container{
position: absolute;
bottom: 50px;
margin-left: 500px;
}
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。