在这里用的是 7.2.2版本的
安装ol
npm install ol
代码如下
<template>
<div class="container">
<div id="vue-openlayers" class="map-x"></div>
<div
id="info-box"
class="info-box"
style="width: 100px; height: 100px"
></div>
<div id="canv" style="width: 100px; height: 100px"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View, style, Feature, geom, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import { Point, LineString } from "ol/geom";
import { Style, Icon, Stroke, Text, Fill } from "ol/style";
import logo from "@/assets/logo.png"; // 图片的地址
import * as ol from "ol";
import "ol-ext/dist/ol-ext.css";
// 引入 js 文件和css文件
export default {
name: "FirstMap",
data() {
return {
map: null,
draw: null,
maskLayer: null,
logo,
layers: [],
};
},
methods: {
initMap() {
let that = this;
// 将图标样式应用到点要素
const features = [];
const point = new Point([108.56, 34.15]); // 修改坐标格式
const feature = new Feature({
geometry: point,
custom: { data: "123", type: "icon" }, // 可以放一些自己的数据
type: "icon", // 自己设置一个标识
});
feature.setStyle([
new Style({
image: new Icon({
crossOrigin: "anonymous",
src: this.logo,
// size: [40, 40],
scale: 0.2, // 图标缩放比例
}),
}),
]);
features.push(feature);
//设置地图的数据源
const source = new VectorSource({
features,
});
let markLayerPoints = new VectorLayer({
source: source,
});
let map = new Map({
target: "vue-openlayers",
layers: [
new TileLayer({
source: new XYZ({
url: "https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}", // 网上找的图层
}),
}),
markLayerPoints, // 确保图层顺序正确
// vectorLayers,
],
view: new View({
projection: "EPSG:4326",
center: [108.56, 34.15], // 修改中心坐标格式
zoom: 6,
}),
});
this.map = map;
},
},
mounted() {
this.initMap();
},
};
</script>
<style scoped lang="scss">
.input {
position: fixed;
top: 10px;
right: 10px;
border-radius: 10px;
background: #fff;
display: flex;
flex-direction: column;
padding: 5px;
padding-bottom: 10px;
> * {
margin-top: 10px;
display: flex;
align-items: center;
}
}
</style>
<style scoped lang="scss">
.container {
position: relative;
.btn {
position: absolute;
left: 4%;
top: 1%;
}
}
#vue-openlayers {
width: 100vw;
height: 100vh;
}
h3 {
line-height: 40px;
}
/* 隐藏信息盒子的初始样式 */
#info-box {
display: none;
position: absolute;
background: white;
border: 1px solid black;
padding: 10px;
border-radius: 5px;
font-size: 14px;
pointer-events: none; /* 防止信息盒子影响鼠标事件 */
}
</style>