tsg-web/src/views/Home/setMapStation/wxq.js

import React, { useEffect, useState } from "react";
import {useDispatch, useSelector} from "react-redux";
import { message } from 'antd';
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import Text from "ol/style/Text";
import Feature from "ol/Feature";
import Point from 'ol/geom/Point.js';
import Circle from 'ol/style/Circle';
import Stroke from "ol/style/Stroke";
import FillStyle from "ol/style/Fill";
import GeoJSONFormat from 'ol/format/GeoJSON';
import StrokeStyle from "ol/style/Stroke";

import { transform } from 'ol/proj';
import { httppost2 } from "../../../utils/request";
import { geometryCenter } from '../../../utils/tools'
import apiurl from "../../../service/apiurl";

export default function SetDrpStation({tms}) {
    const dispatch = useDispatch();
    let mapObj = useSelector(s => s.map.map)

    const getData = async (tms) =>{
        const { data, code, msg } = await httppost2(apiurl.home.wxq)
        if (code !== 200) {
            message.error(msg || '请求失败');
        }
    }
    useEffect(()=>{
        addLayer()
        return ()=>{
            mapObj && mapObj.getLayers().getArray().forEach(layer => {
            if ( layer.values_.name && (layer.values_.name.indexOf('ZHZS_WXQ') > -1)) {
                    layer.getSource().clear()
                }
            })
        }
    },[])

    const getGeoJsonData = async () => {
      const radarRangeData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/wxq.geojson`)
        .then(resp => resp.json())
        .then(data => data.features)
        .catch(() => []);

      const wxq = {}
      radarRangeData.map((item)=>{
        wxq[item.properties.ADCD] = item
      })
      sessionStorage.setItem('wxq',JSON.stringify(wxq))
      return [...radarRangeData];
    };



    const addLayer = ()=>{
      getGeoJsonData().then((data) => {
        var layer =  new VectorLayer({
          // @ts-ignore
          name:"ZHZS_WXQ",
          source: new VectorSource(),
          style: new Style({
            stroke: new StrokeStyle({
              color: 'rgba(255,0,0,0.9)',
              width: 2,
            }),
            fill: new FillStyle({
              color: 'rgba(255,0,0,0.3)',
            }),
          })
        });

        const features = data.map((item)=>{
          // debugger
          const geojsonFormat = new GeoJSONFormat();
          let geometry = geojsonFormat.readGeometry(item.geometry, {
            featureProjection: 'EPSG:3857',
          });
          const feature = new Feature({
            geometry,
            data:{...item.properties,geometry:item.geometry},
          });
    
          return feature
        })

        features.forEach(feature => layer.getSource().addFeature(feature));
        mapObj && mapObj.addLayer(layer);

        mapObj && mapObj.on('click', function(evt) {
    
          //console.log("271++++",postmessageData);
    
          var feature = mapObj && mapObj.forEachFeatureAtPixel(evt.pixel, function(feature) {
            return feature;
          });
          if (feature) {
            const data = feature.values_.data

            const center = geometryCenter(data.geometry);

            if(data){

              dispatch.runtime.setCameraTarget({
                center: [center[0], center[1]],
                zoom: 18,
                pitch: 60
              })
              dispatch.runtime.setFeaturePop({
                id: data.PID,
                data:{...data},
                type: 'wxq',
                lgtd: center[0],
                lttd: center[1],
              })
            }
          }
        });

      });
      }

}