动态更换openlayer中ImageStatic的url地址

最新推荐文章于 2024-05-14 17:29:51 发布

原创

最新推荐文章于 2024-05-14 17:29:51 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍如何使用 OpenLayers 实现静态地图的加载与切换功能，并提供了一个实际的 Vue 示例代码。通过 ImageStatic 类，可以轻松地为地图指定不同的静态图片作为背景，并实现图片间的平滑切换。

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