admin管理员组文章数量:1650765
<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>
本文标签: 图标olOpenLayersstylefeature
版权声明:本文标题:openlayers(ol.Feature + ol.style)设置图标 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729532778a1205019.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论