index.jsx 8.98 KB
Newer Older
mayongxin's avatar
mayongxin committed
1 2 3
import React, { useEffect, useState, useRef } from 'react'
import SiteModal from '@/components/Modal/SiteModa';
import { Input, Cascader, Button } from 'antd'
4 5
import { gcj_decrypt, exetent2AmapPoint, lngLat2WebMercator } from '@/utils/transformUtil'
import { GetAllConfig, GetMetaData } from '@/services/platform/gis'
mayongxin's avatar
mayongxin committed
6 7 8 9 10 11 12
const { Search } = Input;
const MapScope = props => {


    const [options, setOptions] = useState([])

    //const [mouseTool,setMouseTool] = useState(null)
mayongxin's avatar
mayongxin committed
13
    const { confirmModal,  extent,mapId } = props
mayongxin's avatar
mayongxin committed
14 15
    const [currentExtent, setCurrentExtent] = useState()
    const [isDistrict, setIsDistrict] = useState(false)
16
    const [currentAreaName, setCurrentAreaName] = useState(null)
mayongxin's avatar
mayongxin committed
17 18 19
    const mapID = useRef();
    const mouseToolID = useRef();
    useEffect(() => {
mayongxin's avatar
mayongxin committed
20
        if (document.getElementById(mapId)) {
mayongxin's avatar
mayongxin committed
21
            if (!mapID.current) {
22
                //1.加载底图
mayongxin's avatar
mayongxin committed
23
                let m = new window.AMap.Map(mapId);
mayongxin's avatar
mayongxin committed
24
                mapID.current = m
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
                //2.加载管网配置
                GetAllConfig().then(
                    res => {
                        if (res.IsSuccess == true) {
                            let pipenetCofig;
                            res.Result.map((item) => {
                                if (item.type == "pipenet") {
                                    pipenetCofig = item
                                }
                            })
                            if (pipenetCofig) {
                                GetMetaData(pipenetCofig.servicename).then(
                                    res2 => {
                                        if (res2 && res2.units) {
                                            const layers = res2.layers || [];
                                            const workspace = res2.mapName.split('_')[0];
                                            const subLayers = layers.filter(layer => layer.subLayerIds && layer.subLayerIds.length === 0).map(layer => layer.name);
                                            const paramLayers = `${workspace}:${subLayers.join(',')}`;
                                            const params = {
                                                'LAYERS': paramLayers,
                                                'VERSION': '1.1.1',
                                                '_site':''
                                            };
48
                                            console.log('params',params);
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
                                            const wmsOption = {
                                                tileSize: 512,
                                                url: `${location.origin}/Cityinterface/rest/services/MapServer.svc/${pipenetCofig.servicename}/GeoServerProxy/wms`,
                                                blend: false,
                                                params: params,
                                                zooms: [2, 20],
                                            }
                                            let wms = new window.AMap.TileLayer.WMS(wmsOption)
                                            m.add(wms);

                                        }
                                    }
                                )
                            }

                        }
                    }
                )

                //3.组装高德支持的数据
mayongxin's avatar
mayongxin committed
69 70 71 72 73
            }
            if (!mouseToolID.current) {
                let tool = new AMap.MouseTool(mapID.current)
                mouseToolID.current = tool
            }
74 75 76
            extent && mapID.current.setCenter(exetent2AmapPoint(extent))
            //distinct&&onCascderChange([distinct])

mayongxin's avatar
mayongxin committed
77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95

            window.AMap.plugin('AMap.DistrictSearch', function () {
                let districtSearch = new AMap.DistrictSearch({
                    // 关键字对应的行政区级别,country表示国家
                    level: 'country',
                    //  显示下级行政区级数,1表示返回下一级行政区
                    subdistrict: 3
                })

                // 搜索所有省/直辖市信息
                districtSearch.search('中国', function (status, result) {
                    // 查询成功时,result即为对应的行政区信息
                    console.log(result, "行政区划信息")
                    setOptions(result.districtList[0].districtList)
                })
            })
        }

    }, [props])
96
    const resetmap = () => {
mayongxin's avatar
mayongxin committed
97 98 99 100 101 102 103

    }

    const getInitConfig = () => {

    }
    const onSubmit = () => {
104
        confirmModal && confirmModal(currentExtent, currentAreaName)
mayongxin's avatar
mayongxin committed
105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161
        let mouseTool = mouseToolID.current;
        mouseTool.close(true)
        let map = mapID.current
        map.clearMap()

    }
    const handleSearch = () => {

    }
    const onTangleClick = () => {

        // if(!mouseTool){
        //     let tool = new AMap.MouseTool(map)
        //     setMouseTool(tool)
        // }

        let mouseTool = mouseToolID.current
        mouseTool.close(true)

        mouseTool.rectangle({
            fillColor: '#00b0ff',
            strokeColor: '#80d8ff'
            //同Polygon的Option设置
        });
        mouseTool.on('draw', function (event) {
            mouseTool.close(false)
            //console.log(event.obj.getBounds(),"矩形对象")
            let bounds = event.obj.getBounds()
            let ne = bounds.northEast.pos
            let sw = bounds.southWest.pos

            let str = (sw.concat(ne)).toString()
            setCurrentExtent(str)
        })
    }
    const onCascderChange = (value) => {

        let map = mapID.current
        map.clearMap()
        console.log(value, "选中的行政区")
        let dic = {
            "1": "province",
            "2": "city",
            "3": "district"
        }
        let level = dic[value.length.toString]
        AMap.plugin('AMap.DistrictSearch', function () {
            // 创建行政区查询对象
            let district = new AMap.DistrictSearch({
                // 返回行政区边界坐标等具体信息
                extensions: 'all',
                // 设置查询行政区级别为 区 
                level: level
            })

            district.search(`${value[value.length - 1]}`, function (status, result) {
                // 获取朝阳区的边界信息
162

mayongxin's avatar
mayongxin committed
163
                let bounds = result.districtList[0].boundaries
164

mayongxin's avatar
mayongxin committed
165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180
                let polygons = []
                if (bounds) {
                    for (let i = 0, l = bounds.length; i < l; i++) {
                        //生成行政区划polygon
                        let polygon = new AMap.Polygon({
                            map: map,
                            strokeWeight: 1,
                            path: bounds[i],
                            fillOpacity: 0.7,
                            fillColor: '#CCF3FF',
                            strokeColor: '#CC66CC'
                        })
                        polygons.push(polygon)
                    }
                    // 地图自适应
                    map.setFitView()
181
                    setCurrentAreaName(value[value.length - 1])
mayongxin's avatar
mayongxin committed
182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204
                    setIsDistrict(true)
                }
            })
        })

    }
    const filter = (inputValue, path) => {
        return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    }
    return (
        <SiteModal
            {...props}
            title={"范围选择"}
            bodyStyle={{ width: '100%', minHeight: '100px' }}
            style={{ top: 200, borderRadius: '20px' }}
            width="800px"
            cancelText="取消"
            okText="确认"
            onOk={() => onSubmit()}

        >
            <div style={{ width: "750px", height: "500px" }}>
                <div style={{ width: "750px", height: "500px", position: "absolute" }} >
mayongxin's avatar
mayongxin committed
205
                    <div id={mapId} style={{ width: "750px", height: "500px" }}></div>
mayongxin's avatar
mayongxin committed
206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231

                    <div style={{ top: "10px", left: "10px", position: "absolute" }}>
                        <Cascader
                            fieldNames={{ label: 'name', value: 'name', children: 'districtList' }}
                            options={options}
                            onChange={onCascderChange}
                            placeholder="请选择行政区"
                            showSearch={{ filter }}
                            changeOnSelect
                            style={{ width: "200px" }}
                        />
                    </div>
                    <div style={{ top: "10px", right: "10px", position: "absolute" }}>
                        <Button type="primary" onClick={onTangleClick}>框选范围</Button>
                    </div>
                    <div style={{ display: `${isDistrict ? "inline" : "none"}`, top: "10px", left: "220px", position: "absolute" }}>
                        <Button type="primary" onClick={onTangleClick}>样式调整</Button>
                    </div>
                </div>
            </div>

        </SiteModal>
    )
}

export default MapScope