identify、query、find查询地图服务要素(arcgis api for js)

9 篇文章 0 订阅
6 篇文章 0 订阅

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>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值