静态地图指定是非地图投影的普通地图,比如平面图,规划图,室内建筑等。偶尔会添加简单标注,定位,文字等。openlayer中的source类:ol.source.ImageStatic可以满足此需求。但本次例子只涉及imageStatic的地址切换。大致思路:判断是否是imageStatic实例,若有则删除原先存在的,再把最新的进行赋值。本例子仅供参考,建议多去官网查询api。官网地址:https://openlayers.org/ 及openlayers3例子:http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm。
本次例子实例:
源码:
<template>
<div class="openlayermap">
<div>
<el-button @click="changePic()">点我</el-button>
<el-button @click="hideImage()">隐藏</el-button>
</div>
<div
:id="olmapId"
ref="map"
style="width: 100%; height: 600px; border: 1px solid red"
/>
</div>
</template>
<script>
import "ol/ol.css";
import olMap from "ol/Map";
import olView from "ol/View";
import TileLayer from "ol/layer/Tile";
import ImageLayer from "ol/layer/Image";
import Projection from "ol/proj/Projection";
import { defaults as defaultControls } from "ol/control";
import { closestOnCircle, createStringXY } from "ol/coordinate";
import MousePosition from "ol/control/MousePosition";
import { getCenter } from "ol/extent";
import {
Draw,
Modify,
Snap,
Select,
Translate,
Interaction,
defaults as defaultInteractions,
DragRotateAndZoom,
} from "ol/interaction.js";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";
import { Style, Icon, Text, Fill, Stroke, Circle } from "ol/style";
import Overlay from "ol/Overlay";
import { Image } from "ol/layer.js";
import { OSM, Vector, ImageStatic } from "ol/source";
import { GeoJSON } from "ol/format.js";
import Feature from "ol/Feature";
import { Circle as CircleFeature, Point, LineString, Polygon } from "ol/geom";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import $ from "jquery";
export default {
props: {
mapurls: {
type: String,
default:
"https://scpic2.chinaz.net/Files/pic/pic9/202107/apic34087_s.jpg",
},
// 地图map唯一id值
olmapId: {
type: String,
require: true,
default: function () {
return (
// "map-self-" + new Date().getTime()
"map-self"
);
},
},
},
data() {
return {
map: null,
curMap: null,
mapUrl: this.mapurls,
pictureLayer: null,
projectionPro: null,
order: 0,
mapUrlList: [
"https://scpic3.chinaz.net/Files/pic/pic9/202107/apic34088_s.jpg",
"https://scpic2.chinaz.net/Files/pic/pic9/202107/hpic4220_s.jpg",
"https://scpic.chinaz.net/Files/pic/pic9/202107/hpic4223_s.jpg",
"https://scpic1.chinaz.net/Files/pic/pic9/202107/bpic23746_s.jpg",
"https://scpic1.chinaz.net/Files/pic/pic9/202107/bpic23750_s.jpg",
],
};
},
watch: {
mapurls(value, oldvalue) {
this.mapUrl = value;
// console.log(this.map.getLayers());
// console.log(typeof this.map.getLayers(), this.map.getLayers().array_[0]);
this.initPicture();
},
},
mounted() {
this.initMap();
this.initPicture(true);
},
methods: {
//点击切换图片地址
changePic() {
this.mapUrl = this.mapUrlList[this.order];
++this.order;
if (this.order >= this.mapUrlList.length) {
this.order = 0;
}
this.initPicture();
},
//初始化地图
initMap() {
//绘制一条蓝色线
var iconFeature3 = new Feature(
new LineString([
[0, 0],
[600, 600],
])
);
var source = new VectorSource({
wrapX: false,
features: [iconFeature3],
});
iconFeature3.set(
"style",
new Style({
stroke: new Stroke({
color: "rgb(28 127 82)",
width: 2,
}),
zIndex: 100,
})
);
// 定义坐标系
this.projectionPro = new Projection({
// code: "EPSG:900931", // 用“米”做单位的x/y坐标的投影
code: "xkcd-image",
units: "pixels", // 单位:像素
extent: [0, 0, 1200, 600], // 图片图层四至,分别是静态图片左下角和右上角的基于基站的坐标
});
this.map = new olMap({
target: this.olmapId,
// target: "map",
controls: defaultControls({
zoom: true,
}).extend([]),
layers: [
new VectorLayer({
source: source,
zIndex: 10,
}),
],
view: new olView({
// center: [0, 0],
center: getCenter([0, 0, 1200, 600]), //设置居中显示
projection: this.projectionPro,
zoom: 2,
}),
});
},
initPicture(type) {
this.pictureLayer = new Image({
source: new ImageStatic({
url: this.mapUrl,
// url: "https://scpic.chinaz.net/files/pic/pic9/202102/hpic3599.jpg",
// imageSize: [1300, 980], // 图片尺寸(px) [长,宽]
projection: this.projectionPro,
imageExtent: [-500, -100, 1200, 600], // // 映射到地图的范围
zIndex: 1,
}),
});
// this.map.getLayers()=== this.map.getLayerGroup().getLayers()
console.log(
this.map.getLayers(),
this.map.getLayerGroup().getLayers()
);
if (type) {
this.map.addLayer(this.pictureLayer);
} else {
console.log(
"判断是否此类型",
this.map.getLayers().array_[0] instanceof ImageLayer
);
let layerList = this.map.getLayers().array_;
//避免重复添加imagestatic
this.map.getLayers().array_.forEach((item, index) => {
if (item instanceof ImageLayer) {
layerList.splice(index, 1);
}
});
this.map.getLayers().array_ = layerList;
this.map.addLayer(this.pictureLayer);
}
},
// 默认隐藏第一个图层
hideImage() {
console.log(this.map.getLayers().array_[0].getVisible()); //获取ImageStatic是否显示
this.map.getLayers().array_[0].setVisible(false); //隐藏当前ImageStatic
},
},
};
</script>
<style>
</style>