vue openlayers——图层控制 切换底图

已于 2022-08-16 14:35:09 修改
阅读量2.4k 收藏 8
点赞数 7
分类专栏： openlayers 文章标签： vue.js javascript 前端
于 2022-08-16 14:14:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M__O__M/article/details/126364761
版权

openlayers官网：

OpenLayers - Welcomehttps://openlayers.org/

1、创建地图

获取页面节点放置地图的节点元素，设置地图中心点，创建地图

const mapContainer = shallowRef<HTMLDivElement | null>(null);
const map = shallowRef<olMapType | null>(null);
const center = [115.428784, 23.088291];

const initMap = () => {
  const target = mapContainer.value;
  const _map = createMap(target!, center); //创建地图
  map.value = _map;
  // 当鼠标移入到marker上时 鼠标显示手的样式
  _map.on("pointermove", (e) => {
    const pixel = _map.getEventPixel(e.originalEvent);
    const hit = _map.hasFeatureAtPixel(pixel);
    (_map.getTarget() as HTMLElement).style.cursor = hit ? "pointer" : "";
  });
  _map.addControl(
    new ScaleLine({
      units: "metric",
      className: "ol-scale-line",
    })
  );
};

2、地图图标以及坐标数据（坐标点数据可以通过百度地图坐标拾取器获取）

//图层1
const imgSrc1 =
  "https://img1.baidu.com/it/u=2973931732,461284785&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200";

//坐标点
const infoList1 = [
  {
    lng: "105.428784",
    lat: "23.088291",
  },
  {
    lng: "135.428784",
    lat: "24.088291",
  },
];

//图层2
const imgSrc2 =
  "https://img0.baidu.com/it/u=1011815455,1718073395&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256";
const infoList2 = [
  { lng: "107.927905", lat: "33.378945" },
  { lng: "128.227905", lat: "44.478945" },
  { lng: "139.327905", lat: " 34.578945" },
  { lng: "124.227905", lat: "35.578945" },
];

const imgSrc3 =
  "https://img2.baidu.com/it/u=552603751,2471267685&fm=253&fmt=auto&app=120&f=PNG?w=220&h=150";
const infoList3 = [
  { lng: "101.927905", lat: "32.378945" },
  { lng: "92.227905", lat: "22.478945" },
  { lng: "113.327905", lat: "23.578945" },
  { lng: "72.227905", lat: "25.578945" },
];

3、添加地图标记markers图层

//添加地图标记
const showMarkets = (
  infoList: any,
  imgSrc: string,
  name: string,
  scale: number
) => {
  //判断地图是否有该图层，图层控制，移出之后再添加时避免重复添加使用的
  const addLayers = getLayerInfo(name);
  if (map.value && !addLayers) {
    addMarkers(map.value, infoList, imgSrc, { name: name }, { scale: scale });
  }
};

const addMarkersLayers = () => {
  showMarkets(infoList1, imgSrc1, "infoList1", 0.2); //蓝色
  showMarkets(infoList2, imgSrc2, "infoList2", 0.2); //红色
  showMarkets(infoList3, imgSrc3, "infoList3", 0.4); //绿色
};

4、判断地图图层是否包含某一个图层的方法

const getLayerInfo = (name: string) => {
  const layers = map.value?.getAllLayers();
  if (layers) {
    return layers.find((item: any) => item?.getProperties().name == name);
  }
};

5、地图图标图层控制，勾选显示，取消则移除图层

首先要判断地图是否已经存在了该图层，存在时勾选不添加，不存在时则添加图层；取消勾选移除图层

const checkList = ref(["红色图层", "蓝色图层", "绿色图层"]);
const checkboxGroup1 = ref(["红色图层", "蓝色图层", "绿色图层"]);

//该部分可以优化，这里不是简写
const handleChange = function (value: any) {
  const redLayer = getLayerInfo("infoList2");
  if (value.includes("红色图层")) {
    if (redLayer) {
      //已存在
    } else {
      //添加
      showMarkets(infoList2, imgSrc2, "infoList2", 0.2);
    }
  } else {
    //@ts-ignore
    map.value?.removeLayer(redLayer);
  }

  const blueLayer = getLayerInfo("infoList1");
  if (value.includes("蓝色图层")) {
    if (blueLayer) {
      //已存在
    } else {
      //添加
      showMarkets(infoList1, imgSrc1, "infoList1", 0.2);
    }
  } else {
    //@ts-ignore
    map.value?.removeLayer(blueLayer);
  }

  const greenLayer = getLayerInfo("infoList3");
  if (value.includes("绿色图层")) {
    if (greenLayer) {
      //已存在
    } else {
      //添加
      showMarkets(infoList3, imgSrc3, "infoList3", 0.4);
    }
  } else {
    //@ts-ignore
    map.value?.removeLayer(greenLayer);
  }
};

6、切换地图底图

const changeLayer = (type: "street" | "satellite" | "dark") => {
  let layerUrl = "";
  switch (type) {
    case "street":
      layerUrl = streetUrl;
      break;
    case "satellite":
      layerUrl = satelliteUrl;
      break;
    case "dark":
      layerUrl = darkUrl;
      break;
    default:
      return;
  }
  if (map.value) setLayer(layerUrl, map.value as olMapType);
};

7、页面效果图

取消勾选

切换底图 

 8、完整代码

map.vue

<template>
  <button @click="changeLayer('dark')">切换暗色底图</button>
  <button @click="changeLayer('street')">切换街道底图</button>
  <button @click="changeLayer('satellite')">切换卫星底图</button>
  <div ref="mapContainer" class="mapContainer">
    <div class="content">
      <el-checkbox-group
        v-model="checkboxGroup1"
        size="large"
        @change="handleChange"
      >
        <el-checkbox
          v-for="(item, index) in checkList"
          :key="index"
          :label="item"
          border
        />
      </el-checkbox-group>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { onMounted, shallowRef } from "vue";
import { createMap, setLayer, addMarkers } from "./map";
import type { Map as olMapType } from "ol";
import { ScaleLine } from "ol/control";

import { streetUrl, satelliteUrl, darkUrl } from "@/config";
onMounted(function () {
  initMap();
  addMarkersLayers();
});

const mapContainer = shallowRef<HTMLDivElement | null>(null);
const map = shallowRef<olMapType | null>(null);
const center = [115.428784, 23.088291];

const initMap = () => {
  const target = mapContainer.value;
  const _map = createMap(target!, center); //创建地图
  map.value = _map;
  // 当鼠标移入到marker上时 鼠标显示手的样式
  _map.on("pointermove", (e) => {
    const pixel = _map.getEventPixel(e.originalEvent);
    const hit = _map.hasFeatureAtPixel(pixel);
    (_map.getTarget() as HTMLElement).style.cursor = hit ? "pointer" : "";
  });
  _map.addControl(
    new ScaleLine({
      units: "metric",
      className: "ol-scale-line",
    })
  );
};

//图层1
const imgSrc1 =
  "https://img1.baidu.com/it/u=2973931732,461284785&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200";

//坐标点
const infoList1 = [
  {
    lng: "105.428784",
    lat: "23.088291",
  },
  {
    lng: "135.428784",
    lat: "24.088291",
  },
];

//图层2
const imgSrc2 =
  "https://img0.baidu.com/it/u=1011815455,1718073395&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256";
const infoList2 = [
  { lng: "107.927905", lat: "33.378945" },
  { lng: "128.227905", lat: "44.478945" },
  { lng: "139.327905", lat: " 34.578945" },
  { lng: "124.227905", lat: "35.578945" },
];

const imgSrc3 =
  "https://img2.baidu.com/it/u=552603751,2471267685&fm=253&fmt=auto&app=120&f=PNG?w=220&h=150";
const infoList3 = [
  { lng: "101.927905", lat: "32.378945" },
  { lng: "92.227905", lat: "22.478945" },
  { lng: "113.327905", lat: "23.578945" },
  { lng: "72.227905", lat: "25.578945" },
];
//添加地图标记
const showMarkets = (
  infoList: any,
  imgSrc: string,
  name: string,
  scale: number
) => {
  //判断地图是否有该图层，图层控制，移出之后再添加时避免重复添加使用的
  const addLayers = getLayerInfo(name);
  if (map.value && !addLayers) {
    addMarkers(map.value, infoList, imgSrc, { name: name }, { scale: scale });
  }
};

const addMarkersLayers = () => {
  showMarkets(infoList1, imgSrc1, "infoList1", 0.2); //蓝色
  showMarkets(infoList2, imgSrc2, "infoList2", 0.2); //红色
  showMarkets(infoList3, imgSrc3, "infoList3", 0.4); //绿色
};

const getLayerInfo = (name: string) => {
  const layers = map.value?.getAllLayers();
  if (layers) {
    return layers.find((item: any) => item?.getProperties().name == name);
  }
};

const checkList = ref(["红色图层", "蓝色图层", "绿色图层"]);
const checkboxGroup1 = ref(["红色图层", "蓝色图层", "绿色图层"]);

//该部分可以优化，这里不是简写
const handleChange = function (value: any) {
  const redLayer = getLayerInfo("infoList2");
  if (value.includes("红色图层")) {
    if (redLayer) {
      //已存在
    } else {
      //添加
      showMarkets(infoList2, imgSrc2, "infoList2", 0.2);
    }
  } else {
    //@ts-ignore
    map.value?.removeLayer(redLayer);
  }

  const blueLayer = getLayerInfo("infoList1");
  if (value.includes("蓝色图层")) {
    if (blueLayer) {
      //已存在
    } else {
      //添加
      showMarkets(infoList1, imgSrc1, "infoList1", 0.2);
    }
  } else {
    //@ts-ignore
    map.value?.removeLayer(blueLayer);
  }

  const greenLayer = getLayerInfo("infoList3");
  if (value.includes("绿色图层")) {
    if (greenLayer) {
      //已存在
    } else {
      //添加
      showMarkets(infoList3, imgSrc3, "infoList3", 0.4);
    }
  } else {
    //@ts-ignore
    map.value?.removeLayer(greenLayer);
  }
};

const changeLayer = (type: "street" | "satellite" | "dark") => {
  let layerUrl = "";
  switch (type) {
    case "street":
      layerUrl = streetUrl;
      break;
    case "satellite":
      layerUrl = satelliteUrl;
      break;
    case "dark":
      layerUrl = darkUrl;
      break;
    default:
      return;
  }
  if (map.value) setLayer(layerUrl, map.value as olMapType);
};
</script>
<style lang="scss" scoped>
.content {
  background-color: white;
  border-radius: 0.25rem;
  padding: 1rem;
  position: absolute;
  left: 1.5rem;
  top: 1rem;
  z-index: 9999;
  width: 150px;
  min-width: 150px;
  .el-checkbox {
    width: 100%;
    margin-bottom: 10px;
  }
}

.mapContainer {
  width: 100%;
  height: 800px;

  position: relative;
}
</style>

map.ts

import { Feature, Map, View } from "ol";
import { defaults as defaultControls } from "ol/control";
import { Point } from "ol/geom";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import { Cluster, Vector as VectorSource, XYZ } from "ol/source";
import OSM from "ol/source/OSM";
import { Icon, Style } from "ol/style";
import { MapOptions } from "ol/PluggableMap";
import { satelliteUrl } from "@/config";

/**
 * @description 创建一个地图实例
 * @param {Document | DocumentId} target 地图挂载到的容器
 * @param {Array} center 地图中心点
 * @param {Object} config 其他配置项
 * @returns 地图对象
 */
export const createMap = function (
  target: HTMLElement | string,
  center: number[],
  config: MapOptions = {}
): Map {
  const view = new View({
    projection: "EPSG:4326",
    center: center, // 需要
    zoom: 14,
    maxZoom: 18,
    // minZoom: 16,
    constrainResolution: true, //自动缩放到距离最近的一个整数级别，因为当缩放在非整数级别时地图会糊
  });
  // 创建地图对象
  const map = new Map({
    target,
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    controls: defaultControls({
      zoom: false, //不显示放大放小按钮；
      rotate: false, //不显示指北针控件；
      attribution: false, //不显示右下角的地图信息控件；
    }).extend([]),
    view,
    ...config,
  });
  setLayer(satelliteUrl, map);
  return map;
};
/**
 * @description 设置地图的地图
 * @param {String} layerUrl 地图地址
 * @param {Objcet} map 当前的地图实例
 */
export const setLayer = function (layerUrl: string, map: Map) {
  const satelliteE = new XYZ({
    crossOrigin: "anonymous",
    url: layerUrl,
  });
  const baseLayer2 = map.getLayers().item(0);
  // FIXME
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  baseLayer2.setSource(satelliteE);
};
/**
 * @description 循环创建marker
 * @param {Object} map 绑定的地图对象
 * @param {Array} el 含有经纬度的数组
 */
export function addMarkers(
  map: Map,
  lnglats: any,
  imgSrc: string,
  options = {},
  styleConfig = {}
) {
  // 创建Feature对象集合
  const features1 = [];
  for (let i = 0; i < lnglats.length; i++) {
    const numAry = new Feature({
      geometry: new Point([Number(lnglats[i].lng), Number(lnglats[i].lat)]),
      ...lnglats[i],
    });
    features1.push(numAry);
  }
  // 矢量要素数据源
  const source1 = new VectorSource({
    features: features1,
  });
  const clusterSource = new Cluster({
    distance: 5, //标注之间
    source: source1,
  });

  const iconStyle = markerStyle(imgSrc, styleConfig);

  const clusters = new VectorLayer({
    source: clusterSource,
    style: iconStyle,
    zIndex: 999,
    ...options,
  });
  map.addLayer(clusters);
  return source1;
}

const markerStyle = (imgSrc: any, styleConfig: {}) => {
  const img = imgSrc ? imgSrc : ``;
  return new Style({
    image: new Icon({
      opacity: 1,
      src: img,
      anchor: [0.5, 3], // 偏移位置
      anchorOrigin: "bottom-left",
      anchorXUnits: "fraction",
      anchorYUnits: "pixels",
      offsetOrigin: "top-right",
      offset: [0, 1], //偏移量设置
      scale: 1, //图标缩放比例
      ...styleConfig,
    }),
  });
};

config/index.ts

// 街景地图地址
export const streetUrl =
  "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}";
// 卫星图地址
export const satelliteUrl =
  "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6";

//暗色地图
export const darkUrl =
  "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}";

Vue应用openLayers实现图层数据切换显示，图层加载
总结前端开发中遇到的问题，分享前端知识
07-06 2634
🔜本篇文章介绍图层设置航标、港口码头、锚地停泊区数据的获取，以及以天地图作为底图添加到上航道图层上面；点击图层可以选择控制图层数据隐藏显示以及数据的处理。.🔜技术应用：vue + vant-ui + openlayers 图层设置： data定义图层显示列表数据shipLayerList： mounted加载数据： 这里主要讲航标、港口图层，其他的图层方法和数据获取类似。methods中定义:初始化方法 动态显示图层方法 手动调整图层，点击图层显示切换 获取航标数据，获取港口数据是一样的操作，参照航..
OpenLayers6入门，OpenLayers多图层切换显示隐藏，支持多个Layer同时显示和隐藏，以百度地图和高德地图为例实现vue的Layer图层管理组件
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-20 2452
OpenLayers默认并没有提供图层管理组件，本章就讲一下在vue中如何使用ElementUI的下拉框做一个简单的图层管理组件。话不多说，直接开始。
Openlayers切换底图，并保持原有矢量数据显示
11-05
在做webgis应用过程中，难免遇到使用多种地图作为底图，比如天地图、谷歌地图、高德地图等，由于各地图使用的坐标系不一致，所以在动态切换底图时，通常需要处理地图容器中已存在的矢量数据，接下来我们以天地图和谷歌地图的切换，并保持地图容器中的矢量数据正常显示为例来说明。本文仅使用HTML+JS+CSS+Openlayers进行演示。 博客介绍地址：https://blog.csdn.net/qq_27358213/article/details/109503745
openlayer实现切换底图功能
weixin_59855825的博客
03-06 605
在 OpenLayers 中，如果您想要将新添加的图层放在当前地图中的所有图层的第一个位置，可以使用 insertAt() 方法来实现。需要注意的是，insertAt() 方法的第一个参数是插入的位置，可以是任何数字，表示新的图层应该插入到当前图层集合的哪个位置。在这个示例中，我们通过 getLayers() 方法来获取当前地图中的所有图层，并使用 insertAt() 方法将新的图层对象插入到第一个位置。使用上述方法，您可以将新的图层添加到当前地图中所有图层的第一个位置，以实现切换底图的功能。
【Openlayers】绘制和编辑图形（完整示例）
最新发布
weixin_43180565的博客
08-17 1387
OpenLayers是一个开源的JavaScript库，它用于在Web页面中创建交互式地图应用程序。使用OpenLayers可以绘制各种类型的图形，如点、线、面等。以上是一个基本的使用OpenLayers绘制图形的示例。你可以根据自己的需求，修改代码中的地图配置、绘制交互类型等。
vue3 + openlayers---底图切换
QDxin_xyz的博客
05-17 195
【代码】vue3 + openlayers---底图切换。
Openlayers layer 切换底图
技术分享
03-26 2350
我的openLayers案例地址：http://cyclv.gitee.io/openlayers/ 主要记录一个地图切换 layer setSource （推荐） 设置图层源。 let google = new XYZ({ url:'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBl...
openlayers自定义图层控制的实现
weixin_30278237的博客
09-20 870
好久没写博文了，今天出来冒个泡。 最近一直在考虑一件事情，那就是openlayers中自定义wms的图层控制。用过openlayers的人都知道，在openlayers中有自带的图层控制的控件，调用方法也很简单： map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':true}));//图层控制 但是...
OpenLayers实现图层切换控件
10-14
在OpenLayers中，图层切换控件是用于让用户在多个图层之间自由切换的重要功能。由于OpenLayers库本身并未直接提供这样的控件，开发者需要自定义来实现这一功能。本文将详细介绍如何利用OpenLayers创建一个图层切换...
使用Vue和OpenLayers根据图层可见性切换底图
laugh666的博客
09-06 164
然后，根据图层的可见性创建一个新的底图图层。根据图层的可见性，我们选择添加不同的底图图层。最后，我们将新的底图图层插入到图层集合的第一个位置。本文将介绍如何利用Vue和OpenLayers根据图层的可见性来实现底图的切换，并提供相应的源代码示例。通过使用Vue和OpenLayers，我们可以轻松实现这一功能，并根据实际需求选择不同的底图。然后，我们添加一个初始的底图图层，这里使用了OpenStreetMap的瓦片源。在Vue组件的模板中，我们只需创建一个简单的容器元素，用于显示地图。事件来实时更新底图。
openlayers：天地图底图矢量图层影像图层切换
qq_34752068的博客
05-10 797
【代码】openlayers：天地图底图矢量图层影像图层切换。
openlayers3切换wms服务底图控件
09-03
openlayers3切换wms服务底图控件
ol-layerswitcher:OpenLayers的图层控制
04-27
OpenLayers LayerSwitcher OpenLayer地图的分组图层列表控件。 要显示在LayerSwitcher图层中，应具有title属性； 基本层应将type属性设置为base 。 LayerGroup层（ LayerGroup ）可用于将图层可视地分组在一起； fold属性设置为“ open或“ close将显示为带有切换开关。 有关用法，请参见和。 与OpenLayers版本3、4、5和6兼容（有关安装适用于OpenLayers的ol-layerswitcher版本的信息请参阅中ol-layerswitcher ）。 例子 这些示例演示了用法，并且可以通过在线查看这些示例： 创建一个图层切换器控件。 图层切换器中要显示的每个图层都具有title属性，每个组也是如此。 每个基础地图图层都有一个type: 'base'属性。 见评价其他层/组选择，包括combi
openlayers3-切换WMSsupermap服务底图
09-04
openlayers3-切换WMSsupermap服务底图 openlayers3-切换WMSsupermap服务底图 openlayers3-切换WMSsupermap服务底图
openlayers图层控制加入group layer功能
12-09
开发时,有时候图层很多,需要有同时打开关闭多个图层的功能,但是正式版的layerSwitcher不支持group layer功能. 从网上搜到layerSwitcher的扩展,是在源代码里添加对grouplayer的操作和事件支持. 对layerSwitcher.js进行修改后,需要重新build一下,生成新的openlayers.js
OpenLayers图层组控制
07-19
iClient for OpenLayers控制图层组显隐方式的实现步骤。 下载后直接运行目录下：example\示例\图层组控制.html(需要修改里面的服务地址url为自己发布的服务信息)
openlayers学习三：切换底图（天地图）
weixin_39520640的博客
07-19 4108
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>底图切换</title> <script src="dist/ol.js"></script> <link rel="styl...
Openlayers实战：多地图底图切换
大剑师兰特的GIS世界
07-15 1205
在实际的地图项目中，不管是我们看到的百度地图还是高德地图等，都会有地图切换这一项。在Openlayers实战中，我们用三种地图做demo，分别是谷歌地图。Openstreetmap，stamen地图。切换的主要原则是设置三个底图层，设定其显示状态，用到了visible这一个属性。
vue openlayers 图层控制
05-10
在Vue中使用OpenLayers可以使用Vue-Openlayers组件库来简化开发。要实现图层控制，可以使用Vue的组件化思想来实现。 首先，你需要在Vue项目中安装Vue-Openlayers组件库。可以使用npm或yarn进行安装： ``` npm install --save vue-openlayers ``` 或者 ``` yarn add vue-openlayers ``` 然后在Vue组件中引入Vue-Openlayers组件： ```javascript <template> <div> <vue-map :center="center" :zoom="zoom"> <vue-layer-tile :source="osm" /> <vue-layer-tile :source="wms" v-if="showWMS" /> </vue-map> <button @click="toggleWMS">Toggle WMS layer</button> </div> </template> <script> import { VueMap, VueLayerTile } from 'vue-openlayers'; export default { components: { VueMap, VueLayerTile, }, data() { return { center: [0, 0], zoom: 2, osm: { type: 'OSM', }, wms: { type: 'ImageWMS', url: 'http://localhost:8080/geoserver/wms', params: { LAYERS: 'topp:states', }, }, showWMS: false, }; }, methods: { toggleWMS() { this.showWMS = !this.showWMS; }, }, }; </script> ``` 在上面的代码中，我们在Vue组件中定义了一个地图和两个图层：一个是OpenStreetMap瓦片图层，另一个是GeoServer WMS图层。当我们点击“Toggle WMS layer”按钮时，WMS图层会显示或隐藏。 你可以根据自己的需求来定义更多的图层，并在Vue组件中实现图层控制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值