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来叠加显示在地图上展示。

• 核心源码

<template>
  <div id="map"></div>
  <div class="titleContainer center">
    <span>vue+leaflet示例:结合geoserver实现地图属性查询</span>
  </div>
  <div style="position: absolute; top: 50px; left: 60px; z-index: 999">
    <input type="text" id="textName" placeholder="输入关键字" />
    <button type="button" id="research_btn">搜索</button>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import "proj4";
import "proj4leaflet";
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);

  $("#research_btn").click(function () {
    const keyword = $("#textName").val();
    //queryByProperty('201808_450702_0372','map_num','bs_spot_t',callbackLastQueryWFSService);
    queryByProperty(
      keyword,
      "map_num",
      "bs_spot_t",
      callbackLastQueryWFSService
    );
  });
};
/*属性查询图层
 *@method queryByProperty
 *@param propertyValue 属性值
 *@param propertyName 属性名称
 *@param typeName 图层名称
 *@return null
 */
const queryByProperty = async (
  propertyValue,
  propertyName,
  typeName,
  callback
) => {
  let filter =
    '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
  filter += '<PropertyIsLike wildCard="*" singleChar="#" escapeChar="!">';
  filter += "<PropertyName>" + propertyName + "</PropertyName>";
  filter += "<Literal>*" + propertyValue + "*</Literal>";
  filter += "</PropertyIsLike>";
  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之家的学习交流圈