动态更换openlayer中ImageStatic的url地址

本文主要是介绍动态更换openlayer中ImageStatic的url地址，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

静态地图指定是非地图投影的普通地图，比如平面图，规划图，室内建筑等。偶尔会添加简单标注，定位，文字等。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>

这篇关于动态更换openlayer中ImageStatic的url地址的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！