React Leaflet Esri交互式空间查询：实现方法

任务准备

1. 安装AntD并实现按需加载
2. 安装esri-leaflet和leaflet

具体任务

1. 主组件中加载一个矢量地图并确定三个功能按钮：
      
2. 查询结果以AntD-drawer组件为容器，展示结果的属性表

运行效果

基本 代码

组件css

#map_interactspatialquerytask {
   
   
    width: 100%;
    height: 800px;
    position: relative;
}

.toolbar {
   
   
    position: absolute;
    top: 50px;
    right: 50px;
}

组件 jsx

import React, {
   
    useEffect, useState } from 'react';
import L from "leaflet";
import * as esri from "esri-leaflet"
import {
   
    Button } from 'antd';
import PropertiesTable  from "../testPopup/PropertiesTable";
import DrawCircleGraphHandler from './DrawCircleGraphHandler';
import DrawPolygonGraphHandler from "./DrawPolygonGraphHandler";

import "./InteractSpatialQueryTask.css"

function InteractSpatialQueryTask(props) {
   
   

    const [layer, setLayer] = useState(undefined);
    const [tablevisuable, setTablevisuale] = useState(undefined);
    const [features,setFeatures] = useState(undefined);
    const [circleHandler, setCircleHandler] = useState(undefined);
    const [polygonHandler, setPolygonHandler] = useState(undefined);

    useEffect(()=>{
   
   
        let map = L.map("map_interactspatialquerytask", {
   
   crs : L.CRS.EPSG3395}).setView([29.779, 106.384],12)
        let layer = esri.featureLayer({
   
   url: "http://localhost:6080/arcgis/rest/services/02_Tky_GDCGK/FeatureServer/4", 
                pointToLayer: (geojson, latlng)=> {
   
   
                    return L.circleMarker(latlng, {
   
   radius : 5, color:"#567495"})
                }})
        layer.addTo(map)
        setLayer(layer)
        //创建交互绘制帮助类
        let circleHandler = new DrawCircleGraphHandler(map)
        setCircleHandler(circleHandler)
        let polygonHandler = new DrawPolygonGraphHandler(map)
        setPolygonHandler(polygonHandler);
    },[])


    const _clear_selection = () => {
   
   
        //清除已有的绘制选区
        if(circleHandler)
            circleHandler.clearCircle()
        if(polygonHandler)
            polygonHandler.clearPolygon()
    }

    const _draw_cricle = () => {
   
   
        _clear_selection();
        //开启交互绘制，并指定结果选区的样式和回调
        circleHandler.drawCircle({
   
   color: '#ff0000'
免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删