<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
})
});
var anchor = new Feature({
geometry: new Point([104.06, 30.67])
});
// 构建svg的Image对象
var svg =
'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">' +
'<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>' +
'<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';
var mysvg = new Image();
mysvg.src = 'data:image/svg+xml,' + escape(svg);
anchor.setStyle(new Style({
image: new Icon({
img: mysvg, // 设置Image对象
imgSize: [30, 30] // 及图标大小
// src: 'http://www.williambuck.com/portals/0/Skins/WilliamBuck2014/images/location-icon.svg',
// size: [30, 30]
})
}));
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>
openplayers使用svg图标
最新推荐文章于 2024-05-20 09:49:35 发布