identify查询：
参数为几何图形，属于模糊查询。
使用实例：
import { identify, query } from "@/utils/map/mapUtil";
//点击地图进行查询
addMapClickEventListener() {
const layerUrl.WRP_RVR_BSIN = 'http://172.18.80.186:6080/arcgis/rest/services/Awateridrain/river/MapServer' // 水系
const clickWrpRvrBsinLayerHandler = this.mapAndView.on(
"click",
(event) => {
identify(this.mapAndView, layerUrl.WRP_RVR_BSIN, {
layerIds: [0], // 查询图层
geometry: event.mapPoint, // 几何形状
}).then((res) => {
const selectedGraphic = res?.results.find(
(item) => item.layerId === 4
);
if (selectedGraphic) {
this.ceateRiverHightLineLayer(selectedGraphic.feature);
this.mapAndView.goTo(selectedGraphic.feature);
}
});
}
);
this.$once("hook:beforeDestroy", () => {
if (clickWrpRvrBsinLayerHandler) {
clickWrpRvrBsinLayerHandler.remove();
}
});
}
query查询：
参数为几何图形或者属性，属于精准查询。
使用实例：
import { identify, query } from "@/utils/map/mapUtil";
//点击数据列表行数据进行查询地图服务
riverRowClickToMap(row) {
const layerUrl.WRP_RVR_BSIN = 'http://172.18.80.186:6080/arcgis/rest/services/Awateridrain/river/MapServer' // 水系
query(layerUrl.WRP_RVR_BSIN + "/4", {
where: "rvcd = '" + row.rvcd + "'",
}).then((res) => {
if (!res.features.length) {
return;
}
this.ceateRiverHightLineLayer(res.features[0]);
this.mapAndView.goTo(res.features[0]);
});
},
find查询：
参数为属性，属于模糊查询。
使用实例：
import { find } from "@/utils/map/mapUtil";
//点击数据列表行数据进行查询地图服务
riverRowClickToMap(row) {
const layerUrl.WRP_RVR_BSIN = 'http://172.18.80.186:6080/arcgis/rest/services/Awateridrain/river/MapServer' // 水系
find(layerUrl.WRP_RVR_BSIN,row.rvcd).then((res) => {
console.log('res:',res)
});
},
完整文件：
mapUtil.js
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import Graphic from '@arcgis/core/Graphic'
import * as identifyQuery from '@arcgis/core/rest/identify'
import IdentifyParameters from '@arcgis/core/rest/support/IdentifyParameters'
import * as queryQuery from '@arcgis/core/rest/query'
import * as findQuery from '@arcgis/core/rest/find'
import FindParameters from '@arcgis/core/rest/support/FindParameters'
/**
* 地图上点查要素操作
* @param view 地图视图
* @param layerUrl 图层URL
* @param options 点查要素的具体参数，一些属性有默认参数，其中属性geometry必传
* @returns {Promise<void>} 无返回值
*/
export function identify(view, layerUrl, options = {}) {
const defaultIdentifyOptions = {
layerIds: [0, 1], // 查询图层
// geometry: event.mapPoint, // 几何形状
mapExtent: view.extent, // 地图范围
tolerance: 10, // 容差范围
returnFieldName: true, // 是否 返回参数名
returnGeometry: true, // 是否 返回图形
symbol: true,
layerOption: 'all',
width: view.width,
height: view.height
}
const params = new IdentifyParameters(Object.assign({}, defaultIdentifyOptions, options))
return new Promise((resolve, reject) => {
identifyQuery.identify(layerUrl, params).then(res => {
resolve(res)
}, error => {
console.error('地图identify操作失败\n：', error)
reject(error)
})
})
}
/**
* 通过基本属性查询对应的地图要素信息
* @param featureLayerUrl 对应的featureLayer地址，如http://ip:port/../MapServer/0
* @param options 可传，一般会带where属性对象
* @returns {Promise<void>} 无返回值
*/
export function query(featureLayerUrl, options) {
const defaultQueryOptions = {
where: '1 = 1',
outFields: ['*'],
returnGeometry: true,
num: 1
}
let params = Object.assign({}, defaultQueryOptions, options)
return new Promise((resolve, reject) => {
queryQuery.executeQueryJSON(featureLayerUrl, params).then(res => {
resolve(res)
}, error => {
console.error('地图查询操作失败\n：', error)
reject(error)
})
})
}
/**
* 属性模糊查询要素操作
* @param layerUrl 图层URL
* @param searchValue 查询字符串内容
* @returns {Promise<void>} 无返回值
*/
export function find(layerUrl, searchValue) {
const defaultFindOptions = {
layerIds: [4],
searchFields: ['rvcd'],
contains: true,
returnGeometry: true, // 是否 返回图形
searchText:searchValue
}
const params = new FindParameters(defaultFindOptions)
return new Promise((resolve, reject) => {
findQuery.find(layerUrl, params).then(res => {
resolve(res)
}, error => {
console.log('河流行点击查找地图失败：', error)
reject(error)
})
})
}
引用文件：RiverLayer.vue
<template>
<!-- 地图 -->
<div style="display: flex; flex-direction: column;">
<div class="content" />
</div>
</template>
<script>
import { loadArcgisModules } from "@/utils/map/mapLoadUtil";
import { layerUrl } from "@/config/mapConfig";
import { identify, query } from "@/utils/map/mapUtil";
import Vue from "vue";
export default {
name: "RiverLayer",
data() {
return {
color: "#fff",
loading: false, // 地图loading
mapCursor: "grab", // 地图鼠标样式
baseMapLayer: "4Target4True", // 底图类型 vector_gzov：暗黑矢量 vector：标准矢量 4Target4True：四标四实 4Target4True_2017：四标四实(2017)
rainfallSelectedPointLayer: null, // 雨量选中图层
nineWatershedLayer: null,
curMapCoordinateData: {}, // 当前选中雨量站点
nideWatershedData: [], // 九大流域数据
pointData: [],
blingPointData: [],
districtLayer: null, // 行政区块
districtData: null, // 行政区块数据
graphicsLayer: null,
layerSelectUtil: null,
wrpRvrBsinLayer: null, // 河流图层
mapParams: {
showStaticMap: true,
showBlingMap: true,
},
};
},
beforeDestroy() {},
destroyed() {
this.$bus.$off("select-river-point");
this.$bus.$off("load-station-point");
this.$bus.$off("show-station-layer-type");
this.$bus.$off("select-station-point");
},
mounted() {
// 获取河流列表行点击数据
this.$bus.$on("select-station-point", ({ data }) => {
if (data) {
this.riverRowClickToMap(data);
}
});
// 添加地图图层
this.addLayers();
// 添加地图事件
this.addMapEventListener();
this.$bus.$on("select-river-point", ({ data }) => {
this.curMapCoordinateData = {};
if (data) {
this.curMapCoordinateData = data;
// this.addRainFallSelectedPoint()
} else {
// this.rainfallSelectedPointLayer.removeAll();
}
});
this.$bus.$on("load-station-point", ({ data }) => {
if (data) {
this.mapParams = data;
// this.getRiverData()
} else {
// this.addRacilityEditLayer()
}
});
this.$bus.$on("show-station-layer-type", async ({ data }) => {
this.curMapCoordinateData = {};
if (data) {
// await this.getRiverData()
await this.addNineWatershedLayer(this.globalWatershed);
await this.addDistrictLayer(this.globalAddvcd);
} else {
}
});
},
methods: {
async addLayers() {
// 统一加载<常用>模块
loadArcgisModules([
"esri/Map",
"esri/views/MapView",
"esri/config", // 配置
"esri/Basemap", // 底图
"esri/layers/Layer", // 图层
"esri/layers/MapImageLayer", // 图层 影像
"esri/layers/FeatureLayer", // 图层 特征
"esri/layers/GraphicsLayer", // 图层 要素
"esri/layers/TileLayer", // 图层 切片
"esri/Graphic", // 要素
"esri/widgets/Sketch", // 工具 绘制图形
"esri/widgets/Sketch/SketchViewModel",
"esri/tasks/QueryTask", // 任务 查询
"esri/tasks/support/Query", // 任务 查询 条件
"esri/tasks/IdentifyTask", // 任务 查询 (几何特征)
"esri/tasks/support/IdentifyParameters", // 任务 查询 条件
"esri/tasks/support/PrintTemplate",
"esri/tasks/PrintTask",
"esri/tasks/support/PrintParameters",
"esri/tasks/Geoprocessor", // 任务 地质处理器
"esri/tasks/support/FeatureSet", // 任务 设置特征
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/geometry/Point", // 几何 点
"esri/geometry/Polygon", // 几何 面
"esri/geometry/Polyline", // 几何 线
"esri/geometry/Circle", // 几何 圆
]);
this.nineWatershedLayer = new this.$esri.GraphicsLayer({
id: "nineWatershedLayer",
graphics: [],
visible: true,
});
this.districtLayer = new this.$esri.GraphicsLayer({
id: "districtLayer",
graphics: [],
visible: true,
});
this.wrpRvrBsinLayer = new this.$esri.MapImageLayer({
id: "wrpRvrBsinLayer",
url: layerUrl.WRP_RVR_BSIN,
});
this.mapAndView.map.add(this.nineWatershedLayer);
this.mapAndView.map.add(this.districtLayer);
await this.getNineWatershedData();
await this.getDistrictData();
this.mapAndView.map.add(this.wrpRvrBsinLayer);
},
addMapEventListener() {
this.addMapClickEventListener();
},
addMapClickEventListener() {
const clickWrpRvrBsinLayerHandler = this.mapAndView.on(
"click",
(event) => {
identify(this.mapAndView, layerUrl.WRP_RVR_BSIN, {
layerIds: [0], // 查询图层
geometry: event.mapPoint, // 几何形状
}).then((res) => {
const selectedGraphic = res?.results.find(
(item) => item.layerId === 4
);
if (selectedGraphic) {
this.ceateRiverHightLineLayer(selectedGraphic.feature);
this.mapAndView.goTo(selectedGraphic.feature);
// 弹框展示
const { rvnm, rvcd } = selectedGraphic.feature.attributes;
this.$store.commit("map/setActivePopupItem", {
title: rvnm,
rowId: rvcd,
id: this.id,
});
}
});
}
);
this.$once("hook:beforeDestroy", () => {
if (clickWrpRvrBsinLayerHandler) {
clickWrpRvrBsinLayerHandler.remove();
}
});
},
ceateRiverHightLineLayer(graphic) {
let highlightLayer = this.mapAndView.map.findLayerById(
"highlightGraphicLayer"
);
if (highlightLayer) {
this.mapAndView.map.remove(highlightLayer);
}
highlightLayer = new this.$esri.GraphicsLayer({
id: "highlightGraphicLayer",
});
this.mapAndView.map.add(highlightLayer);
let feature = new this.$esri.Graphic({
attributes: graphic.attributes,
geometry: graphic.geometry,
symbol: {
type: "simple-fill",
color: "rgba(0,0,0,.1)",
style: "solid",
outline: { color: "red", width: 2 },
},
});
highlightLayer.add(feature);
},
riverRowClickToMap(row) {
query(layerUrl.WRP_RVR_BSIN + "/4", {
where: "rvcd = '" + row.rvcd + "'",
}).then((res) => {
if (!res.features.length) {
return;
}
this.ceateRiverHightLineLayer(res.features[0]);
this.mapAndView.goTo(res.features[0]);
});
},
// 获取九大流域数据
async getNineWatershedData() {
// if (this.$esri === null) { return }
const queryTask = new this.$esri.QueryTask({
url: `${layerUrl.YTH_BASE_NINE_MATERSHED}/0`,
});
const query = new this.$esri.Query({
outFields: ["*"],
returnGeometry: true,
where: "1=1",
});
await queryTask.execute(query).then((response) => {
this.nideWatershedData = response.features;
});
},
// 九大流域
addNineWatershedLayer(curData) {
if (this.nineWatershedLayer) {
this.nineWatershedLayer.removeAll();
}
this.nideWatershedData.forEach((item) => {
if (curData === item.attributes.name) {
const polygon = new this.$esri.Polygon({
rings: item.geometry.rings[0],
spatialReference: this.mapAndView.spatialReference,
});
const graphic = new this.$esri.Graphic({
geometry: polygon,
symbol: {
type: "simple-fill",
style: "solid",
color: [255, 57, 80, 0.08],
outline: {
color: "#ff3950",
width: 3,
},
},
attributes: item.attributes,
});
this.nineWatershedLayer.addMany([graphic]);
this.mapAndView.goTo(graphic.geometry.extent.expand(0.8));
}
});
},
// 获取行政区块
async getDistrictData() {
// if (this.$esri === null) { return }
const queryTask = new this.$esri.QueryTask({
url: `${layerUrl.YTH_BASE_DISTRICT}/0`,
});
const query = new this.$esri.Query({
outFields: ["*"],
returnGeometry: true,
where: "1=1",
});
await queryTask.execute(query).then((response) => {
this.districtData = response.features;
});
},
// 行政区块
addDistrictLayer(curData) {
if (this.districtLayer) {
this.districtLayer.removeAll();
}
this.districtData.forEach((item) => {
if (curData === item.attributes.ADDVCD) {
const polygon = new this.$esri.Polygon({
rings: item.geometry.rings[0],
spatialReference: this.mapAndView.spatialReference,
});
const graphic = new this.$esri.Graphic({
geometry: polygon,
symbol: {
type: "simple-fill",
style: "solid",
color: [255, 57, 80, 0.08],
outline: {
color: "#ff3950",
width: 3,
},
},
attributes: item.attributes,
});
this.districtLayer.addMany([graphic]);
this.mapAndView.goTo(graphic.geometry.extent.expand(0.8));
}
});
},
// 地图模式样式颜色
mapColor(val) {
switch (val) {
case "440114":
return "#b9c631";
case "440103":
return "#d97391";
case "440105":
return "#64ce4a";
case "440117":
return "#a051e8";
case "440112":
return "#f579e2";
case "440118":
return "#b098ef";
case "440106":
return "#2dd581";
case "440104":
return "#d5952d";
case "440115":
return "#2d73d5";
case "440113":
return "#d52d81";
case "440111":
return "#3e2dd5";
default:
break;
}
},
// 地图模式样式颜色
mapFillColor(val) {
switch (val) {
case "440114":
return [185, 198, 49, 0.7];
case "440103":
return [217, 115, 145, 0.7];
case "440105":
return [100, 206, 74, 0.7];
case "440117":
return [160, 81, 232, 0.7];
case "440112":
return [245, 121, 226, 0.7];
case "440118":
return [176, 152, 239, 0.7];
case "440106":
return [45, 213, 129, 0.7];
case "440104":
return [213, 149, 45, 0.7];
case "440115":
return [45, 115, 213, 0.7];
case "440113":
return [213, 45, 129, 0.7];
case "440111":
return [62, 45, 213, 0.7];
default:
break;
}
},
},
};
</script>
<style lang="scss" scoped>
.map {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
::v-deep .my-loading {
background: rgba(1, 10, 23, 0.4);
.el-loading-spinner {
position: absolute !important;
top: 50% !important;
width: 100% !important;
margin-top: -9% !important;
margin-left: -5% !important;
text-align: center !important;
background-image: url("../../../../../../../assets/images/map/loading.gif"); // 这个是自己想设置的 gif 加载动图
background-repeat: no-repeat; //设置背景 图 不重复
background-position: center; //设置背景 定位 为居中
background-size: 4%;
.circular {
display: none; //隐藏 之前 element-ui 默认的 loading 动画
}
.el-loading-text {
padding-top: 120px;
margin: 7px 0;
font-size: 14px;
color: white;
}
}
}
</style>
4145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
