Vue + Openlayers入门教程（一）：WMS、WFS、WKT、WMTS、GeoJSON、天地图加载与GeoServer安装、发布图层

已于 2023-08-21 17:12:34 修改
阅读量640 收藏 2
点赞数 2
分类专栏： WebGIS 文章标签： vue gis
于 2023-06-29 11:56:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48607161/article/details/131453402
版权

多源数据加载功能

一、技术栈、预览

Vue 3 + Typescript +Openlayers 7 + GeoServer + Element plus
在这里插入图片描述

二、GeoServer安装

1、GeoServer简介

GeoServer 是一个采用 Java EE 技术，且低成本、易扩展、功能完整的开源地图服务器，支持与 OpenLayers 前端框架高效融合，GeoServer 是一个符合开源地理信息系统网络服务规范的 GIS 服务器，它遵循 OGC（Open Geospatial Consortium）规范，允许用户发布符合 WCS（Web Coverage Service）、WMS（Web Map Service）或 WFS（Web Feature Service）标准的地理信息服务。用户可以通过向 GeoServer 发送请求来获取各种类型的地图和要素等服务。作为一个开放的社区项目，GeoServer 提供了开放的源代码，使用户能够根据自己的需求对源代码进行扩展和定制。用户可以使用 GeoServer 提供的各种服务来添加、修改和删除数据，发布地图、地图数据和地图瓦片。此外，GeoServer 还提供了便捷的功能，使用户能够快速共享地理空间信息。通过 GeoServer，用户可以轻松地在用户之间共享地理空间数据，促进地理信息的交流和共享。

2、GeoServer下载安装

  1. GeoServer官网：http://geoserver.org/

  2. GeoServer下载：

    1. 进入官网，进入官网点击Stable版本标签进入下载页面；
      在这里插入图片描述

    2. 选择二进制文件进行下载；
      在这里插入图片描述

    3. 下载后进行解压；
      在这里插入图片描述

    4. 修改GeoServer端口号，找到解压目录下start.ini文件，右键编辑，找到jetty.port，将端口号修改为8000；
      在这里插入图片描述

    5. 启动GeoServer，找到bin目录下的startup.bat文件，双击启动，如果控制台没有报错，则保持命令行开启。
      在这里插入图片描述

    6. 登录GeoServer，打开浏览器，在地址栏输入：http://localhost:8000/GeoServer，用户名：admin,密码：geoserver
      在这里插入图片描述

三、GeoServe发布地图服务

1、新建工作区

  1. 点击工作区->添加新的工作区；
    在这里插入图片描述

  2. 配置工作区信息；
    在这里插入图片描述

    注意：工作区名称是描述项目的标识符。它不能超过10个字符或包含空格。名称空间URI(统一资源标识符)通常可以是与项目相关联的URL，其中添加了一个表示工作区的尾随标识符。归档的名称空间URI不需要解析为实际的有效web地址。

2、添加数据存储

  1. 点击数据存储->添加新的数据存储；
    在这里插入图片描述
  2. 选择数据类型；
    在这里插入图片描述
  3. 选择要发布的数据；
    在这里插入图片描述
  4. 修改字符集；
    在这里插入图片描述

3、发布图层

  1. 在新建图层页面，点击上面新建图层，然后点击添加图层的下拉框，选择上面新建的数据源，然后在下面会出现图层，点击后面的发布，会进入图层发布前的编辑
    在这里插入图片描述

  2. 更改发布设置；
    在这里插入图片描述
    在这里插入图片描述

4、图层预览

  1. 找到菜单中Layer Preview，找到上面刚保存的图层，点击后面的OpenLayers
    在这里插入图片描述
    2、进入预览页；
    在这里插入图片描述
    其地址栏中的URL可以用来给前端使用。

四、组件编写

1、SpatialAnalysis2D页面代码

  1. 使用element container布局容器完成页面布局

    <template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-container>
        <el-aside :width="asideWidth ? '65px' : '160px'">
          <Menu></Menu>
        </el-aside>
        <el-main>
          <OLBaseMap></OLBaseMap>
          <OLDataLoading></OLDataLoading>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

  2. 导入menu状态仓库，监听state的变化，实现侧边栏的关闭与开启。

    import { menuStore } from "../store/menu";

const menustore = menuStore(); //接收pinia仓库
const asideWidth = ref(false); //aside宽度的状态
//监听订阅state的变化
const subscribe = menustore.$subscribe(
  (mutation, state) => {
    asideWidth.value = menustore.$state.isCollapse;
  },
  { detached: false }
);

  3. 完整代码如下：

    <template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-container>
        <el-aside :width="asideWidth ? '65px' : '160px'">
          <Menu></Menu>
        </el-aside>
        <el-main>
          <OLBaseMap></OLBaseMap>
          <OLDataLoading></OLDataLoading>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Header from "../components/Header.vue";
import Menu from "../components/Menu.vue";
import OLBaseMap from "../components/OLBaseMap.vue";
import OLDataLoading from "../components/OLDataLoading.vue";

import { ref } from "vue";

import { menuStore } from "../store/menu";

const menustore = menuStore(); //接收pinia仓库
const asideWidth = ref(false); //aside宽度的状态
//监听订阅state的变化
const subscribe = menustore.$subscribe(
  (mutation, state) => {
    asideWidth.value = menustore.$state.isCollapse;
  },
  { detached: false }
);
</script>
<style scoped>
/*深度选择器*/
:deep(.el-header) {
  --el-header-padding: 0px;
  --el-header-height: 50px;
}
:deep(.el-main) {
  --el-main-padding: 0px;
}
</style>

    注意：vue 3中使用:deep()深度选择器实现样式穿透。当<style>标签中有 scoped属性时，它的CSS只作用于当前组件中的元素，父组件的样式将不会渗透到子组件，如果希望scoped中的样式的一个选择器能作用的更深，例如影响子组件，可以使用深度选择器。

2、OLBaseMap组件代码

  1. 定义一个地图容器。

    <template>
  <div id="mapContent" class="mapContent"></div>
</template>

  2. 引入openlayers的Map对象。

    import { Map, View } from "ol";

  3. 创建初始化地图实例。

    注意：

    • 无论是Cesium还是Openlayers，其创建的地图实例均不采用响应式，因为Vue会对其进行监听，而地图实例的属性几乎一直在变化，每次变化都会触发Vue的监听事件，造成性能降低。
    • 地图容器必须有具体的大小尺寸，否则会报错或者无内容显示。
    • 因为本地图采用的EPSG：4548坐标系，所以地图中心的的坐标经纬度也需要投影到EPSG：4548。

    从https://epsg.io/上获取坐标系定义信息。

    //坐标系EPSG：4548
proj4.defs(
  "EPSG:4548",
  "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs"
);
//注册EPSG:4548
register(proj4);

let map:Map//定义一个Map类型的变量，接收地图实例
//定义初始化地图实例函数
const initMap=()=>{
    map = new Map({
        target:"mapContent",//绑定地图容器
        view: new View({
            //将坐标从经度/纬度转换为其他投影。
            center: fromLonLat([108.84, 34.26], "EPSG:4548"), 
      		zoom: 4.5, //缩放级别
      		projection: "EPSG:4548", //设置投影坐标为自定义坐标EPSG:4548
        }) ,
        controls: [],//地图控件
    })
}

  4. 利用OpenLayers的API进行图层创建与添加。

    //利用ol自带的接口进行属性添加
//矢量图层
//GeoJSON数据加载
const geojsonMap = new VectorLayer({
  source: new Vectorsource({
    url: "/geoserver/Dome/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Dome%3Acity_CS&maxFeatures=50&outputFormat=application%2Fjson", //湖南省GeoJSON
    format: new GeoJSON(), //指定格式
    wrapX: true,
  }),
  style: new Style({
    fill: new Fill({
      color: "rgba(255, 255, 255, 0.2)",
    }),
    stroke: new Stroke({
      color: "#ffcc33",
      width: 2,
    }),
  }),
  visible: false,
  properties: {
    title: "GeoJSON",
    name: "GeoJSON图层",
    type: "VectorLayer",
  },
});

//WFS的GML2格式数据加载
const wfsVectoreSource = new Vectorsource({
  url: "/geoserver/Dome/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Dome%3Acity_GZ&outputFormat=text%2Fxml%3B%20subtype%3Dgml%2F2.1.2",
  format: new GML2(), //指定格式
  strategy: bbox,
});
//将GML2数据源传入矢量图层
const wfsMap = new VectorLayer({
  source: wfsVectoreSource,
  style: new Style({
    image: new Circle({
      radius: 5,
      fill: new Fill({
        color: "#3885ff",
      }),
    }),
    stroke: new Stroke({
      color: "blue",
      width: 2,
    }),
  }),
  visible: false,
  properties: {
    title: "WFS",
    name: "WFS图层",
    type: "VectorLayer",
  },
});

//WKT图层
const wktFormat = new WKT();
//需要进行坐标转换
const wktFearure = wktFormat.readFeature(HKWKT, {
  dataProjection: "EPSG:4326",//读取的数据的投影
  featureProjection: "EPSG:4548",//要素几何的投影
});
const wktVectorSource = new Vectorsource({
  features: [wktFearure],
});
const wktMap = new VectorLayer({
  source: wktVectorSource,
  style: new Style({
    fill: new Fill({
      color: "rgba(255, 255, 255, 0.2)",
    }),
    stroke: new Stroke({
      color: "#ab4bfe",
      width: 2,
    }),
  }),
  visible: false,
  properties: {
    title: "WKT",
    name: "WKT图层",
    type: "VectorLayer",
  },
});

// 栅格图层
// 计算EPSG:3857矩阵集
const projectionExtent = get("EPSG:3857")?.getExtent();
const size = getWidth(projectionExtent as Extent) / 256;
const resolutions: number[] = [];
const matrixIds: string[] = [];
for (let z = 0; z < 9; ++z) {
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = "EPSG:3857:" + z;
}

//WMTS图层
//此处采用从GetCapabilities中响应访问WMTS的配置。
fetch("/geoserver/gwc/service/wmts?Request=GetCapabilities")
  .then((res) => res.text())
  .then((txt) => new WMTSCapabilities().read(txt))
  .then((capabilities) =>
    optionsFromCapabilities(capabilities, {
      layer: "Dome:tiff_GX", //在Geoserver预览页面，右键进入源代码进行查看配置信息。
    })
  )
  .then((options) => {
    const wmtsMap = new TileLayer({
      source: new WMTS(options as Options),
      properties: {
        title: "WMTS",
        name: "WMTS图层",
        type: "VectorLayer",
      },
      visible:false,
    });

    map.addLayer(wmtsMap);
  });

//WMS图层
const wmsMap = new ImageLayer({
  //参数直接查看geoserver预览查看源码
  source: new ImageWMS({
    url: "/geoserver/Dome/wms", //访问参数采用KVP
    params: {
      FORMAT: "image/png",
      VERSION: "1.1.1",
      STYLES: "",
      LAYERS: "Dome:city_WH",
      exceptions: "application/vnd.ogc.se_inimage",
    },
    ratio: 1,
    serverType: "geoserver",
  }),
  visible: false,
  properties: {
    title: "WMS",
    name: "WMS图层",
    type: "ImageLayer",
  },
});

//底图
const tdtSource = new XYZ({
  url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9f9a02030489ce88dd322ca2ebe77cd2", //网址模板
  wrapX: true,
});
const tdtMapLayer = new TileLayer({
  source: tdtSource,
  visible: true,
  properties: {
    title: "tdtMapLayer",
    name: "天地图底图",
    type: "TileLayer",
  },
});

//注记底图
const tdtMapNote = new TileLayer({
  source: new XYZ({
    url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=9f9a02030489ce88dd322ca2ebe77cd2", //网址模板
    wrapX: true,
  }),
  visible: true,
  properties: {
    title: "tdtMapNote",
    name: "天地图标注",
    type: "TileLayer",
  },
});

//底图图层组
const baseLayerGroup = new LayerGroup({
  layers: [tdtMapLayer, tdtMapNote],
});
//矢量图层组
const vectorLayerGroup = new LayerGroup({
  layers: [geojsonMap, wfsMap, wktMap],
});
//栅格图层组
const gridLayerGroup = new LayerGroup({
  layers: [wmsMap],
});

    注意：

    • 直接使用geoserver的地图服务URL会存在跨域问题。可以在Geoserver中进行配置，也可以在vite.config.ts中配置Proxy代理。例如：

      import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { vitePluginMars3d } from "vite-plugin-mars3d";

import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vitePluginMars3d()],
  //配置Proxy跨域
  server: {
    proxy: {
      "/geoserver": {
        target: "http://localhost:8000/geoserver",
          //将原链接上的geoserver替换为空
        rewrite: (path) => path.replace(/^\/geoserver/, ""),
      },
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), //定义路径别名
    },
  },
});

  5. 完整代码：

    <template>
  <div id="mapContent" class="mapContent"></div>
  <OLPopup></OLPopup>
</template>
<script setup lang="ts">
import OLPopup from "./OLPopup.vue"; //弹窗组件

import { onMounted } from "vue";
import { Map, View } from "ol";
import { Tile as TileLayer, Image as ImageLayer } from "ol/layer";
import VectorLayer from "ol/layer/Vector.js";
import XYZ from "ol/source/XYZ";
import Vectorsource from "ol/source/Vector";
import { fromLonLat, get } from "ol/proj";
import { register } from "ol/proj/proj4";
import GeoJSON from "ol/format/GeoJSON";
import GML2 from "ol/format/GML2.js";
import LayerGroup from "ol/layer/Group.js";
import { bbox } from "ol/loadingstrategy";
import { Style, Stroke, Circle, Fill } from "ol/style";
import bus from "@/utils/bus.ts"; //定义声明文件再引入
import { Extent, getWidth } from "ol/extent";
import WMTS from "ol/source/WMTS";
import WMTSCapabilities from "ol/format/WMTSCapabilities";
import { optionsFromCapabilities } from "ol/source/WMTS";
import { Options } from "ol/source/WMTS";
import ImageWMS from "ol/source/ImageWMS.js";
import { OverviewMap } from "ol/control.js";
import HKWKT from "../static/data/HKWKT.txt?raw"; //引入海南WKT文本
import WKT from "ol/format/WKT.js";
import proj4 from "proj4";

//坐标系EPSG：4548
proj4.defs(
  "EPSG:4548",
  "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs"
);

register(proj4);

let map: Map; //存放地图实例

//利用ol自带的接口进行属性添加
//矢量图层
const geojsonMap = new VectorLayer({
  //GeoJSON数据加载
  source: new Vectorsource({
    url: "/geoserver/Dome/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Dome%3Acity_CS&maxFeatures=50&outputFormat=application%2Fjson", //湖南省GeoJSON
    format: new GeoJSON(), //指定格式
    wrapX: true,
  }),
  style: new Style({
    fill: new Fill({
      color: "rgba(255, 255, 255, 0.2)",
    }),
    stroke: new Stroke({
      color: "#ffcc33",
      width: 2,
    }),
  }),
  visible: false,
  properties: {
    title: "GeoJSON",
    name: "GeoJSON图层",
    type: "VectorLayer",
  },
});

const wfsVectoreSource = new Vectorsource({
  //WFS的GML2格式数据加载
  url: "/geoserver/Dome/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Dome%3Acity_GZ&outputFormat=text%2Fxml%3B%20subtype%3Dgml%2F2.1.2",
  format: new GML2(), //指定格式
  strategy: bbox,
});
const wfsMap = new VectorLayer({
  //将GML2数据源传入矢量图层
  source: wfsVectoreSource,

  style: new Style({
    image: new Circle({
      radius: 5,
      fill: new Fill({
        color: "#3885ff",
      }),
    }),
    stroke: new Stroke({
      color: "blue",
      width: 2,
    }),
  }),
  visible: false,
  properties: {
    title: "WFS",
    name: "WFS图层",
    type: "VectorLayer",
  },
});

//WKT图层
// const hnWKT = HNWKT();
const wktFormat = new WKT();
const wktFearure = wktFormat.readFeature(HKWKT, {
  dataProjection: "EPSG:4326",
  featureProjection: "EPSG:4548",
});
const wktVectorSource = new Vectorsource({
  features: [wktFearure],
});
const wktMap = new VectorLayer({
  source: wktVectorSource,
  style: new Style({
    fill: new Fill({
      color: "rgba(255, 255, 255, 0.2)",
    }),
    stroke: new Stroke({
      color: "#ab4bfe",
      width: 2,
    }),
  }),
  visible: false,
  properties: {
    title: "WKT",
    name: "WKT图层",
    type: "VectorLayer",
  },
});

// 栅格图层
// 计算EPSG:3857矩阵集
const projectionExtent = get("EPSG:3857")?.getExtent();
const size = getWidth(projectionExtent as Extent) / 256;
const resolutions: number[] = [];
const matrixIds: string[] = [];
for (let z = 0; z < 9; ++z) {
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = "EPSG:3857:" + z;
}
//WMTS图层

fetch("/geoserver/gwc/service/wmts?Request=GetCapabilities")
  .then((res) => res.text())
  .then((txt) => new WMTSCapabilities().read(txt))
  .then((capabilities) =>
    optionsFromCapabilities(capabilities, {
      layer: "Dome:tiff_GX",
    })
  )
  .then((options) => {
    const wmtsMap = new TileLayer({
      source: new WMTS(options as Options),
      properties: {
        title: "WMTS",
        name: "WMTS图层",
        type: "VectorLayer",
      },
      visible:false,
    });

    map.addLayer(wmtsMap);
  });

//WMS图层
const wmsMap = new ImageLayer({
  //参数直接查看geoserver预览查看源码
  source: new ImageWMS({
    url: "/geoserver/Dome/wms", //访问参数采用KVP
    params: {
      FORMAT: "image/png",
      VERSION: "1.1.1",
      STYLES: "",
      LAYERS: "Dome:city_WH",
      exceptions: "application/vnd.ogc.se_inimage",
    },
    ratio: 1,
    serverType: "geoserver",
  }),
  visible: false,
  properties: {
    title: "WMS",
    name: "WMS图层",
    type: "ImageLayer",
  },
});

//底图
const tdtSource = new XYZ({
  url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9f9a02030489ce88dd322ca2ebe77cd2", //网址模板
  wrapX: true,
});
const tdtMapLayer = new TileLayer({
  source: tdtSource,
  visible: true,
  properties: {
    title: "tdtMapLayer",
    name: "天地图底图",
    type: "TileLayer",
  },
});

//注记底图
const tdtMapNote = new TileLayer({
  source: new XYZ({
    url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=9f9a02030489ce88dd322ca2ebe77cd2", //网址模板
    wrapX: true,
  }),
  visible: true,
  properties: {
    title: "tdtMapNote",
    name: "天地图标注",
    type: "TileLayer",
  },
});

//底图图层组
const baseLayerGroup = new LayerGroup({
  layers: [tdtMapLayer, tdtMapNote],
});
//矢量图层组
const vectorLayerGroup = new LayerGroup({
  layers: [geojsonMap, wfsMap, wktMap],
});
//栅格图层组
const gridLayerGroup = new LayerGroup({
  layers: [wmsMap],
});
//控件：鹰眼图
const overviewMapControl = new OverviewMap({
  //鹰眼控件的样式名称
  className: "olOverviewmap",
  view: new View({
    center: fromLonLat([112.994818, 28.131583], "EPSG:4548"),
    zoom: 1,
    minZoom: 1,
    projection: "EPSG:4548",
  }),
  layers: [
    new TileLayer({
      source: tdtSource,
    }),
  ],
  //鹰眼控件一开始展开方式
  collapsed: false,
});

//初始化地图实例
const initMap = () => {
  map = new Map({
    target: "mapContent", //地图容器
    view: new View({
      center: fromLonLat([112.994818, 28.131583], "EPSG:4548"), //将坐标从经度/纬度转换为其他投影。
      zoom: 16, //缩放级别
      projection: "EPSG:4548", //设置投影坐标为自定义坐标EPSG:4548
    }),
    controls: [],
  });
  map.addLayer(baseLayerGroup);
  map.addLayer(vectorLayerGroup);
  map.addLayer(gridLayerGroup);
  map.addControl(overviewMapControl);
};

const sendMitt = () => {
  //将map提交到事件总线
  bus.emit("mapToChecked", map);
};
onMounted(() => {
  initMap();
  sendMitt();
});
</script>

<style>
.mapContent {
  /* flex: 1; */
  width: 100vw;
  height: calc(100vh - 50px);
}

.olPopup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 350px;
}

.olPopup:after,
.olPopup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.olPopup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.olPopup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.olPopupCloser {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.olPopupCloser:after {
  content: "✖";
}

/*自定义鹰眼样式*/
.olOverviewmap {
  position: absolute;
  bottom: 5px;
  left: 5px;
}

/*鹰眼控件地图容器边框样式*/
.ol-overviewmap-map {
  border: 1px solid #083a20;
}

/*鹰眼控件中显示当前窗口区域的边框样式*/
.ol-overviewmap-box {
  border: 2px solid red;
}

/*鹰眼控件展开时其控件按钮图标的样式*/
.olOverviewmap:not(.ol-collapsed) button {
  display: none;
}

.ol-overviewmap-map {
  width: 150px;
  height: 200px;
}
</style>

    注意：其中将map提交到事件总线是为了方便其他子组件之间进行传值，确保操作的是同一个地图实例。按以下方式实现bus.ts。

    • 安装mitt；
    npm install mitt -S
    • 封装mitt；
    //封装mitt
import mitt from 'mitt'
const bus = mitt()
export default bus
    • 在需要用的地方按需引入使用；
    //将map提交到事件总线
bus.emit("mapToChecked", map);

    //监听map数据
bus.on("mapToChecked", (res: Map) => {
  // 传参由回调函数中的形参接受
  mapCopy = res;
});

    //移除指定事件
bus.off("mapToChecked")

3、OLDataLoading组件代码

1、完整代码：

<template>
  <div class="controlDiv">
    <el-button class="dataButton" @click="dialog = true">加载数据源</el-button>
    <OLLayerManage></OLLayerManage>
    <OLSearch></OLSearch>
    <OLDraw></OLDraw>
    <OLAnalyst></OLAnalyst>
  </div>
  <el-drawer v-model="dialog" direction="rtl" size="20%">
    <h2>数据类型</h2>
    <div class="sidebar" v-for="(item, index) in listData" :key="index">
      <input
        type="checkbox"
        name="gridLayerCheckBox"
        v-model="checkedArr"
        :value="item.name"
      />{{ item.name }}<br />
    </div>
    <el-button @click="loading">更新</el-button>
  </el-drawer>
</template>

<script lang="ts" setup>
import OLAnalyst from "./OLAnalyst.vue";  //缓冲区分析功能
import OLDraw from "./OLDraw.vue";   //绘制几何功能
import OLSearch from "./OLSearch.vue";   //矢量要素搜素功能
import OLLayerManage from "./OLLayerManage.vue";    //图层管理功能
  
import { ref } from "vue";
import { Map } from "ol";
import bus from "@/utils/bus.ts";

let mapCopy: Map; //接收地图实例的Map对象
let checkedArr = ref<String[]>([]); //响应式数组，接收复选框传递的值
const dialog = ref<boolean>(false);
//图层名称与id
type ListData = {
  id: number;
  name: string;
};
//复选框的值
const listData: ListData[] = [
  {
    id: 1,
    name: "GeoJSON",
  },
  {
    id: 2,
    name: "WFS",
  },
  {
    id: 3,
    name: "WKT",
  },
  {
    id: 4,
    name: "WMTS",
  },
  {
    id: 5,
    name: "WMS",
  },
];

//监听map数据
bus.on("mapToChecked", (res: Map) => {
  // 传参由回调函数中的形参接受
  mapCopy = res;
});

//图层加载
const loading = () => {
  let length: number = mapCopy.getAllLayers().length; //获取map图层数组长度
  //遍历mapCopy图层
  for (let i = 0; i < length; i++) {
    let mapCopyLayerName = mapCopy.getAllLayers()[i].get("title"); //通过getAllLayers方法获取图层title
    if (mapCopyLayerName != "tdtMapLayer" && mapCopyLayerName != "tdtMapNote") {
      //底图不进入循环
      if (checkedArr.value.length == 0) {
        //复选框都未选中状态不进入循环
        mapCopy.getAllLayers()[i].setVisible(false);
      }
      for (let checkedLayerName of checkedArr.value) {
        //遍历复选框状态
        if (checkedLayerName === mapCopyLayerName) {
          //如果选中的复选框的值与地图图层title相同，就将图层可视性设为true
          mapCopy.getAllLayers()[i].setVisible(true);
          break; //if判断成功则跳出for of循环
        } else {
          mapCopy.getAllLayers()[i].setVisible(false);
        }
      }
    }
  }
};
</script>

<style scoped>
.controlDiv {
  position: absolute;
  display: flex;
  top: 50px;
  align-items: flex-start;
}
</style>
梭影の
关注
专栏目录
012：vue+openlayers 加载Stamen地图（3种形式）
大剑师兰特的GIS世界
08-09 761
本示例的目的是介绍演示如何在vue+openlayers中添加Stamen地图，并含多种的表现形式。
Vue+Openlayers实现加载天地图WMTS服务显示
BADAO_LIUMANG_QIZHI的博客
12-29 7347
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图： Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 上面在Vue中使用Openlayers加载OSM地图显示。 如果要加载天地图显示流程类似。 天地图 国家地理信息公共服务平台 国家地理信息公共服务平台 天地图 中国推出了自主开发的网络地图服务，旨在与谷歌地球（GoogleEarth）的卫星地图服务
vue2使用天地图
最新发布
请叫我欧皇！的博客
08-20 1988
需求：用vue2使用天地图展示对应点位数据以及开发中出现的问题等，其实天地图的写法和百度地图差不多注意！！！天地图的接口不稳定，时常报错418，官网也是一样的情况，推荐还是使用百度或者高德吧。以下是拷贝的网上的地图坐标系，仅作参考（1）天地图：CGCS2000，2000国家大地坐标系；我们其实很多时候直接用WGS84的坐标来代替CGCS2000坐标。因为CGCS2000的定义与WGS84实质一样。采用的参考椭球非常接近。扁率差异引起椭球面上的纬度和高度变化最大达0.1mm。
WMS、WFS、WMTS、TMS
qq_47099087的博客
03-01 1785
几种地图服务详解
【总结整理】WMS、WMTS、WFS
weixin_34409741的博客
03-21 599
参考：http://www.cnblogs.com/naaoveGIS/p/5508882.html WMTS:WMTS是OGC制定的一种发布瓦块地图的Web服务规范，wms主要是动态地图，wmts是地图服务器预先制作好的瓦块 在GIS领域，金字塔技术一直是一个基础性技术,WMTS规范专门制定了针对切片请求的格式。利用这种技术，前端可以快速展示出指定级别的地图或影像。 但是，由于切图本...
vue中利用openlayers加载天地图
xuerwang的博客
09-19 1万+
首先在vue中安装openlayes依赖，现在推荐使用ol，ol需要一个一个的引入，我嫌麻烦就直接用的openlayers，我把openlayrs定义为全局变量，下载完openlayers依赖包后，在main.js里面引入， import ol from 'openlayers; 然后设置成全局属性 Vue.prototype.$ol=ol; 使用ol时，只需要使用this.$ol就可以了...
vue+openlayers学习：加载天地图
p1758133202的博客
10-19 1421
vue+openlayers学习：加载天地图创建项目1.创建webpack2.安装openlayers的依赖写代码更改App.vue运行 笔者本人是纯新手，学习的过程记录一下，也可以给像我一样学习openlayers的同学一些思路，欢迎各位大佬前来指正 创建项目 在创建项目之前，需安装node js和vue-cli，可以直接百度，上面介绍的安装很细 1.创建webpack 推荐使用vscode 打开vscode，然后【文件】>【打开文件夹】打开需要创建项目的文件夹 打开【终端】，在终端输入界面里
Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-21 9555
OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 3414
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
vue集成openlayers加载geojson并实现点击弹窗教程
01-22
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下 第一步：安装vue-cli cnpm install -g @vue/cli 第二步：新建一个项目 1.新建项目 （vue-openlayers为项目名）,并...
026：vue+openlayers加载WMTS数据（示例代码）
大剑师兰特的GIS世界
08-10 761
本示例的目的是介绍演示如何在vue+openlayers中加载WMTS数据，并显示图形。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果
vue+openLayers入门教程
热门推荐
ScoloveCode的博客
09-14 2万+
介绍: OpenLayers官网 OpenLayers插件类型 可以理解为专门处理地图的一个库 其中有两大类 map和view,map是ol中的核心组件,初始化一副地图(map),时,至少需要一个可视化区域(view),一个或多个图层(layer)和一个地图加载的挂载点(target) 1.vue中使用Openlayers 注意:地图容器需要设置宽高,否则看不到初始化的地图效果 地图介绍 一.关于投影 ​ 1.投影,地球不是正圆的球体,是一个不规则的椭圆体,所以我们要是想让它展开在桌面上,就会发现地图都会和
Openlayer - vue中加载天地图（入门篇）
人与人之间最小的差别是智商，最大的差别是坚持。
08-15 411
基于Vue脚手架构建的，按照教程天地图就可以显示出来了。
vue-----openlayers
一星程序饲养员
10-31 417
重点：引入src时，需要在components中定义一个createElement。
Vue中openlayers加载天地图
u011671747的专栏
03-30 1620
<template> <div id="map" ref="rootmap"> <div id="mouse-position"></div> </div> </template> <script> import 'ol/ol.css' import {get as getProjection} f...
(vue)openLayer加载天地图 实现切换地图类型（地图影像）、更改地图色调（蓝色）等效果
night43的博客
01-03 4443
package.json文件中出现版本号即安装成功。一、 首先安装openLayer。二、在地图页面中引用加载天地图。根据要求填写完成后复制key值。②在页面中引入，代码如下。进入页面后选择右上角。
天地图开发实战：Vue结合OpenLayers实现动态点位地图
小金子J的博客
06-13 1630
本篇文章详细介绍了如何使用Vue.js和OpenLayers库结合天地图API，开发一个具有点位图标渲染和点击地图获取经纬度功能的地图组件。文章从环境搭建到具体代码实现，逐步引导读者完成地图组件的开发。首先，介绍了必要的库安装和组件模板设置。随后，深入讲解了脚本部分，包括地图初始化、图层添加、坐标转换、事件监听等关键技术点。通过实践，我们学习了如何创建地图实例、添加天地图图层、设置点位图标样式，并实现了点击地图更新点位经纬度的功能。文章最后提供了对组件进行进一步扩展和定制的建议，以满足更广泛的应用需求。
vue3-openlayers 使用tianditu,wmts和xyz等source加载天地图切片服务
无心使然云中漫步
06-18 557
加载注记图层后，切片虽然显示png，但是好像不是透明的,只能在注记图层增加透明度控制。主要是不同类型source的使用。
Vue+OpenLayers6实战进阶专栏目录，Vue+OpenLayers实战案例，Vue+OpenLayers6实战教程
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-31 1923
本篇作为Vue整合OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。
Vue+OpenLayers：实现场景地图测距测面与交互操作
本文主要介绍了如何在Vue-cli 3.0项目中使用OpenLayers库来实现地图上的测距和测面功能。OpenLayers是一个强大的JavaScript库，用于在Web页面上创建交互式地图。在这个例子中，作者将地图作为一个公共组件，并利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值