vue+leaflet示例:结合geoserver实现地图空间查询(附源码下载)

demo源码运行环境以及配置

• 运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。
• 运行工具：vscode或者其他工具。
• 配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：
  （1）下载demo环境依赖包命令：npm i
  （2）启动demo命令：npm run dev
  （3）打包demo命令： npm run build:release

示例效果

本篇主要是leaflet通过调用geoserver发布的地图服务WFS，来达到地图空间查询的目的。具体是构造rest服务url参数形式来请求WFS服务，获取到地图数据源，然后利用leaflet来叠加显示在地图上展示。
利用leaflet插件绘制图形工具draw的回调函数获取绘制图形，作为空间查询过滤条件，绘制工具的github地址：
https://github.com/geoman-io/leaflet-geoman

• 核心源码

<template>
  <div id="map"></div>
  <div class="titleContainer center">
    <span>vue+leaflet示例:结合geoserver实现地图空间查询</span>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import "proj4";
import "proj4leaflet";
import "@geoman-io/leaflet-geoman-free";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
import config from "../config";
import { useRouter } from "vue-router";
const router = useRouter();
//绘制geojson图层样式
const geoJsonStyle = {
  color: "#e6d933",
  weight: 3,
  opacity: 0.8,
  fillColor: "#e6d933",
  fillOpacity: 0.1,
};
//绘制geojson图层高亮样式
const geoJsonHLightStyle = {
  color: "#33CCFF",
  weight: 3,
  opacity: 1,
  fillColor: "#33CCFF",
  fillOpacity: 0,
};
const geoserverUrl = "http://localhost:8080/geoserver/ZKYGIS";
let map = null;
let geojsonLayer = null;
onMounted(() => {
  initMap();
});
const initMap = () => {
  // 创建地图对象
  map = L.map("map", {
    attributionControl: false,
  }).setView(L.latLng(37.550339, 104.114129), 4);
  //创建底图切换数据源
  const baseLayer = L.tileLayer(
    "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
  );
  map.addLayer(baseLayer); //地图默认加载的底图
  geojsonLayer = L.Proj.geoJson(null, {
    style: geoJsonStyle,
  });
  map.addLayer(geojsonLayer);
  //L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}').addTo(map);
  //监听图层鼠标事件
  geojsonLayer.on("mouseover", onMoveoverGeojsonLayer);
  geojsonLayer.on("mouseout", onMoveoutGeojsonLayer);
  //绘制工具draw
  map.pm.addControls({
    position: "topleft",
    drawMarker: false,
    drawCircleMarker: false,
    drawCircle: false,
    drawPolyline: false,
    editMode: false,
    dragMode: false,
    cutPolygon: false,
    drawText: false
  });
  //绘制图形之前
  map.on("pm:drawstart", ({ workingLayer }) => {
    clearGeojsonLayer();
  });
  map.on("pm:create", (e) => {
    //console.log(e);
    let polygon = null;
    if (e.layer && e.layer._latlngs && e.layer._latlngs.length > 0) {
      //构造polygon
      polygon = "";
      const data = e.layer._latlngs[0];
      for (var i = 0; i < data.length; i++) {
        const item = data[i];
        polygon += item.lng + "," + item.lat + " ";
      }
      polygon += data[0].lng + "," + data[0].lat;
    }
    console.log("polygon", polygon);
    if (polygon) {
      queryByPolygon(polygon, "bs_spot_t", callbackLastQueryWFSService);
    }
  });
};
/*空间查询图层
 *@method queryByPolygon
 *@param polygon 空间范围
 *@param typeName 图层名称
 *@return null
 */
const queryByPolygon = async (polygon, typeName, callback) => {
  let filter =
    '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
  filter += "<Intersects>";
  filter += "<PropertyName>geom</PropertyName>";
  filter += "<gml:Polygon>";
  filter += "<gml:outerBoundaryIs>";
  filter += "<gml:LinearRing>";
  filter += "<gml:coordinates>" + polygon + "</gml:coordinates>";
  filter += "</gml:LinearRing>";
  filter += "</gml:outerBoundaryIs>";
  filter += "</gml:Polygon>";
  filter += "</Intersects>";
  filter += "</Filter>";
  const urlString = geoserverUrl + "/ows";
  const param = {
    service: "WFS",
    version: "1.0.0",
    request: "GetFeature",
    typeName: typeName,
    outputFormat: "application/json",
    filter: filter,
  };
  const geojsonUrl = urlString + L.Util.getParamString(param, urlString);
  $.ajax({
    url: geojsonUrl,
    async: true,
    type: "GET",
    dataType: "json",
    success(result) {
      callback(result);
    },
    error(err) {
      console.log(err);
    },
  });
};
……
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
.titleContainer {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  height: 50px;
  width: 100vw;
  z-index: 999;
  font-size: 14px;
  color: #fff;
  font-size: 28px;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>

由于单位的geoserver地图服务数据保密性，geoserver发布的地图服务真实url不公开

下载源码：GIS之家的学习交流圈