openlayers(ol.Feature + ol.style)设置图标

<template>
<div class="myMap">
<div id="map" style="height: 100%; width: 100%;"></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,
// 限制地图缩放最大级别为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中去
pointLayer.getSource().addFeature(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>

最后

以上就是欣慰百褶裙为你收集整理的openlayers(ol.Feature + ol.style)设置图标的全部内容，希望文章能够帮你解决openlayers(ol.Feature + ol.style)设置图标所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。