index.jsx 8.82 KB
Newer Older
1
import React, { useEffect, useState, useRef } from 'react';
mayongxin's avatar
mayongxin committed
2
import SiteModal from '@/components/Modal/SiteModa';
3
import { Input, Cascader, Button } from 'antd';
4
import { gcj_decrypt, exetent2AmapPoint, lngLat2WebMercator } from '@/utils/transformUtil';
邓超's avatar
邓超 committed
5
import { GetAllConfig, GetMetaData } from '@/services/gis/gis';
mayongxin's avatar
mayongxin committed
6
const { Search } = Input;
7
import styles from './index.less';
mayongxin's avatar
mayongxin committed
8
const MapScope = props => {
9
  const [options, setOptions] = useState([]);
mayongxin's avatar
mayongxin committed
10

11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
  // const [mouseTool,setMouseTool] = useState(null)
  const { confirmModal, extent, mapId, title, schemename } = props;
  const [currentExtent, setCurrentExtent] = useState();
  const [isDistrict, setIsDistrict] = useState(false);
  const [currentAreaName, setCurrentAreaName] = useState(null);
  const [areaName, setAreaName] = useState([]); // 选择的地区
  const [area, setArea] = useState([]);
  const [flag, setFlag] = useState(0);
  const mapID = useRef();
  const mouseToolID = useRef();
  useEffect(() => {
    console.log(document.getElementById(mapId), '进入组件');
    setAreaName([]);
    if (document.getElementById(mapId)) {
      console.log(mapID, '底图参数');
      if (!mapID.current) {
        // 1.加载底图
        console.log(mapId, '底图33333');
        let m = new window.AMap.Map(mapId);
        console.log(m, '底图');
        mapID.current = m;
        // 2.加载管网配置
        if (!extent) {
          GetAllConfig().then(res => {
            if (res.IsSuccess == true) {
              res.Result.forEach(item => {
                if (item.schemename === schemename) {
                  mapID.current.setCenter(exetent2AmapPoint(item.extent));
                }
              });
              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
53
                      .filter(layer => layer.subLayerIds && layer.subLayerIds.length === 0)
54 55 56 57 58 59 60 61 62 63
                      .map(layer => layer.name);
                    const paramLayers = `${workspace}:${subLayers.join(',')}`;
                    const params = {
                      LAYERS: paramLayers,
                      VERSION: '1.1.1',
                      _site: '',
                    };
                    console.log('params', params);
                    const wmsOption = {
                      tileSize: 512,
64
                      url: `${location.origin}/Cityinterface/rest/services/MapServer.svc/${
65 66 67 68 69 70 71 72 73 74 75 76
                        pipenetCofig.servicename
                      }/GeoServerProxy/wms`,
                      blend: false,
                      params: params,
                      zooms: [2, 20],
                    };
                    let wms = new window.AMap.TileLayer.WMS(wmsOption);
                    m.add(wms);
                    console.log(m);
                  }
                });
              }
mayongxin's avatar
mayongxin committed
77
            }
78
          });
mayongxin's avatar
mayongxin committed
79 80
        }

81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
        // 3.组装高德支持的数据
      }
      if (!mouseToolID.current) {
        let tool = new AMap.MouseTool(mapID.current);
        mouseToolID.current = tool;
      }
      console.log(extent, 'extent');
      extent && mapID.current.setCenter(exetent2AmapPoint(extent));
      //   distinct && onCascderChange([distinct]);
      window.AMap.plugin('AMap.DistrictSearch', function() {
        let districtSearch = new AMap.DistrictSearch({
          // 关键字对应的行政区级别,country表示国家
          level: 'country',
          //  显示下级行政区级数,1表示返回下一级行政区
          subdistrict: 3,
        });
mayongxin's avatar
mayongxin committed
97

98 99 100 101 102 103 104
        // 搜索所有省/直辖市信息
        districtSearch.search('中国', function(status, result) {
          // 查询成功时,result即为对应的行政区信息
          console.log(result, '行政区划信息');
          setOptions(result.districtList[0].districtList);
        });
      });
mayongxin's avatar
mayongxin committed
105
    }
106 107
  }, [props]);
  const resetmap = () => {};
mayongxin's avatar
mayongxin committed
108

109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126
  const getInitConfig = () => {};
  const onSubmit = () => {
    console.log(currentExtent);
    console.log(currentAreaName);
    confirmModal && confirmModal(currentExtent, currentAreaName, flag);
    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);
mayongxin's avatar
mayongxin committed
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 162 163
    mouseTool.rectangle({
      fillColor: '#00b0ff',
      strokeColor: '#80d8ff',
      // 同Polygon的Option设置
    });
    console.log(mouseTool, '进入选择范围');
    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();
      setFlag(flag + 1);
      console.log(str, 'strstr');
      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,
      });
mayongxin's avatar
mayongxin committed
164

165 166
      district.search(`${value[value.length - 1]}`, function(status, result) {
        // 获取朝阳区的边界信息
mayongxin's avatar
mayongxin committed
167

168
        let bounds = result.districtList[0].boundaries;
mayongxin's avatar
mayongxin committed
169

170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
        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();
          setAreaName(value);
          setCurrentAreaName(value[value.length - 1]);
          setIsDistrict(true);
mayongxin's avatar
mayongxin committed
189
        }
190 191 192 193
      });
    });
  };
  const filter = (inputValue, path) => {
194
    return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
195 196 197 198 199 200
  };
  return (
    <SiteModal
      {...props}
      title={
        <span>
201
          <span style={{ marginRight: '20px' }}>
皮倩雯's avatar
皮倩雯 committed
202 203
            <span style={{ fontWeight: 'blod', color: 'rgb(24, 144, 255)' }}>{title}</span>
            的范围选择
204
          </span>
205 206 207 208 209 210 211 212 213
          <span style={{ color: 'red' }}>提示:必须框选范围</span>
        </span>
      }
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: 200, borderRadius: '20px' }}
      afterClose={() => {
        setFlag(0);
      }}
      width="800px"
皮倩雯's avatar
皮倩雯 committed
214
      maskClosable={false}
215 216 217 218
      cancelText="取消"
      okText="确认"
      onOk={() => onSubmit()}
    >
219
      <div style={{ width: '750px', height: '500px' }} className={styles.indexContainer}>
220 221
        <div style={{ width: '750px', height: '500px', position: 'absolute' }}>
          <div id={mapId} style={{ width: '750px', height: '500px' }} />
222

223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249
          <div style={{ top: '10px', left: '10px', position: 'absolute' }}>
            <Cascader
              fieldNames={{
                label: 'name',
                value: 'name',
                children: 'districtList',
              }}
              options={options}
              onChange={onCascderChange}
              placeholder="请选择行政区"
              showSearch={{ filter }}
              changeOnSelect
              value={areaName}
              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',
250
            }}
251 252 253 254 255 256 257 258 259 260
          >
            <Button type="primary" onClick={onTangleClick}>
              样式调整
            </Button>
          </div>
        </div>
      </div>
    </SiteModal>
  );
};
mayongxin's avatar
mayongxin committed
261

262
export default MapScope;