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);//绘制工具drawmap.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) {//构造polygonpolygon = "";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不公开
