import { _ as _extends } from '../_rollupPluginBabelHelpers-736b301a.js';
import React__default from 'react';
import { LMConfig, Dict } from '@zenview/micro-basic-library';
import ReactDOM from 'react-dom';
import { cloneDeep } from 'lodash';
import { message, Switch, InputNumber, Popover } from 'antd';
import ImageView from '../ImageView/index.js';
import { isEqual } from '@zenview/micro-utils';
import IconFont from '../IconFont/index.js';

const mapContext = /*#__PURE__*/React__default.createContext(null);
const Provider = mapContext.Provider;
const Consumer = mapContext.Consumer;
function map(Component) {
  class MapWithComponent extends React__default.Component {
    render() {
      const {
        forwardRef,
        ...props
      } = this.props;
      return /*#__PURE__*/React__default.createElement(Consumer, null, context => {
        console.log(context, this.props);
        return /*#__PURE__*/React__default.createElement(Component, _extends({}, props, context, {
          ref: forwardRef
        }));
      });
    }
  }
  return /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(MapWithComponent, _extends({}, props, {
    forwardRef: ref
  })));
}

class CreatMap extends React__default.Component {
  constructor(props) {
    super(props);
    this.createMap = () => {
      var _LMConfig$CustomConfi;
      const {
        MapPlatForm,
        THREE
      } = window;
      const CustomConfig = ((_LMConfig$CustomConfi = LMConfig.CustomConfig) === null || _LMConfig$CustomConfi === void 0 ? void 0 : _LMConfig$CustomConfi.ZenMap) || null;
      // let url=CustomConfig?.vectorLayer[0].layerOpt.url[0].split("mapbox")[0];
      const {
        mapBoxId
      } = this.props;
      if (mapBoxId) {
        this.mapContainer = document.getElementById(mapBoxId);
        var mapConfig = new MapPlatForm.Base.MapConfig();
        var resultJson = mapConfig.createMap(this.mapContainer, CustomConfig);
        this.map = window.zenmap = resultJson.map;
        this.mapConfig = mapConfig;
        this.mapTools = new MapPlatForm.Base.MapTools(resultJson.map);
        // this.mapService = window.zenmap.mapService = new MapPlatForm.Base.MapService(this.map, "/zenmapdataservice");
        this.arrowline = new MapPlatForm.Base.ArrowLine(this.map, true);
        this.loader = new THREE.GLTFLoader();
        this.setState({
          map: resultJson.map
        });
        this.map.load(() => {
          this.props.mapReady(resultJson.map); //监听map创建状态
        });
      }
    };
    this.state = {
      map: null
    };
  }
  componentDidMount() {
    this.createMap();
  }
  componentWillUnmount() {
    const {
      map
    } = this.state;
    map && map.destroyMap();
  }
  render() {
    const {
      mapBoxId,
      children,
      height = '100%'
    } = this.props;
    return /*#__PURE__*/React__default.createElement("div", {
      id: mapBoxId,
      style: {
        width: '100%',
        height: height,
        position: 'relative'
      }
    }, /*#__PURE__*/React__default.createElement(Provider, {
      value: {
        map: this.state.map
      }
    }, this.state.map && children));
  }
}

const creatOverlayLayer = ({
  map,
  name,
  isCluster,
  callback,
  clusterOpt
}) => {
  const {
    ZenMap
  } = window;
  const hasLayer = map.getLayerByName(name);
  if (hasLayer) {
    callback && callback(hasLayer);
    return;
  }
  let layer = new ZenMap.Layers.OverlayLayer(name, isCluster);
  map && map.addLayer(layer);
  callback && callback(layer);
  return layer;
};
const addImgToMap = ({
  map,
  imgArr,
  callback
}) => {
  map.addImages([...imgArr], () => callback());
};
const validLatLon = (lat, lon, bounds = [[(_LMConfig$CustomConfi => (_LMConfig$CustomConfi = LMConfig.CustomConfig) === null || _LMConfig$CustomConfi === void 0 || (_LMConfig$CustomConfi = _LMConfig$CustomConfi.ZenMap) === null || _LMConfig$CustomConfi === void 0 ? void 0 : _LMConfig$CustomConfi.mapOpts.restrictedExtent[1])(), (_LMConfig$CustomConfi2 => (_LMConfig$CustomConfi2 = LMConfig.CustomConfig) === null || _LMConfig$CustomConfi2 === void 0 || (_LMConfig$CustomConfi2 = _LMConfig$CustomConfi2.ZenMap) === null || _LMConfig$CustomConfi2 === void 0 ? void 0 : _LMConfig$CustomConfi2.mapOpts.restrictedExtent[0])()], [(_LMConfig$CustomConfi3 => (_LMConfig$CustomConfi3 = LMConfig.CustomConfig) === null || _LMConfig$CustomConfi3 === void 0 || (_LMConfig$CustomConfi3 = _LMConfig$CustomConfi3.ZenMap) === null || _LMConfig$CustomConfi3 === void 0 ? void 0 : _LMConfig$CustomConfi3.mapOpts.restrictedExtent[3])(), (_LMConfig$CustomConfi4 => (_LMConfig$CustomConfi4 = LMConfig.CustomConfig) === null || _LMConfig$CustomConfi4 === void 0 || (_LMConfig$CustomConfi4 = _LMConfig$CustomConfi4.ZenMap) === null || _LMConfig$CustomConfi4 === void 0 ? void 0 : _LMConfig$CustomConfi4.mapOpts.restrictedExtent[2])()]]) => {
  //坐标是否合法
  return lat >= bounds[0][0] && lat <= bounds[1][0] && lon >= bounds[0][1] && lon <= bounds[1][1];
};
const typeSwitch = data => {
  const {
    ZenMap
  } = window;
  if (data && typeof data === 'string') {
    let path = cloneDeep(data);
    let pathArr = [];
    if (!path) {
      return pathArr;
    }
    if (typeof path === 'string') {
      try {
        if (Array.isArray(JSON.parse(data))) {
          pathArr = JSON.parse(data);
        } else {
          pathArr = path.split('|').map(path2 => path2.split(';').map(v => {
            let arr = v.split(',');
            return new ZenMap.Geometry.Point(arr[0], arr[1]);
          }));
        }
      } catch (error) {
        pathArr = path.split('|').map(path2 => path2.split(';').map(v => {
          let arr = v.split(',');
          return new ZenMap.Geometry.Point(arr[0], arr[1]);
        }));
      }
    }
    if (Array.isArray(path)) {
      pathArr = path;
    }
    return pathArr;
  } else {
    let path = cloneDeep(data);
    let pathArr = [];
    if (path && Array.isArray(path)) {
      pathArr = path.map(v => {
        if (Array.isArray(v)) {
          return new ZenMap.Geometry.Point(v[0], v[1]);
        }
        let arr = v.split(',');
        return new ZenMap.Geometry.Point(arr[0], arr[1]);
      });
    }
    return pathArr;
  }
};

/**新建信息窗
* @description 
* @memberof ZenviewMap
* @params 
*/
const creatInfo = (map, position, content, opt, callback) => {
  const {
    ZenMap
  } = window;
  const content1 = content ? content : '<div style="background:#fff;padding:5px 14px;font-size:14px">空信息窗<div>';
  let infoWindow = new ZenMap.Symbols.InfoWindow(position, "", content1, {
    iscommon: opt ? opt.isCommon : false,
    closeButton: opt ? opt.closeButton : false,
    offset: new ZenMap.Geometry.Size(opt ? opt.offset[0] : 0, opt ? opt.offset[1] : -40) //信息窗位置偏移值[0, -40]
  });
  infoWindow.setBackgroundColor("white");
  map.addOverlay(infoWindow);
  infoWindow.open();
  infoWindow.getBaseDiv().style.padding = '2px 5px 2px';
  callback && callback(infoWindow);
  return infoWindow;
};

Dict.device.deviceType.filter(v => v.value !== '-1').map(function (item, index) {
  return item.value;
});
const creatSingleMarker = ({
  point,
  url,
  urlName,
  iconSize = 1,
  layers,
  labelName,
  callback,
  groupName,
  map,
  context
}) => {
  const {
    ZenMap
  } = window;
  if (!point.lon || !point.lat) {
    return;
  }
  var marker;
  var pt = new ZenMap.Geometry.Point(point.lon, point.lat);
  //图片
  var icon = new ZenMap.Symbols.Icon(urlName, iconSize, {
    anchor: new ZenMap.Geometry.Size(0, -16)
  });
  //图像标注
  marker = new ZenMap.Symbols.Marker(pt);
  if (labelName) {
    //创建小标签，带小三角的冒泡标签
    creatInfoForMarker(map, marker, labelName);
  }
  if (context) {
    var label = new ZenMap.Symbols.Label(context); //一个图像标注
    //设置样式
    label.setStyle({
      fontSize: 14,
      //文字大小
      color: '#FFFFFF' //文字前景色
    });
    label.setOffset(new ZenMap.Geometry.Size(0, -18));
    marker.setLabel(label);
  }
  icon && marker.setIcon(icon);
  if (layers) {
    if (groupName) {
      //已有图层，对图层进行分组添加数据
      let group = layers.addGroup(groupName);
      group.addOverlay(marker);
    } else {
      layers.addOverlay(marker);
    }
  } else {
    map && map.addOverlay(marker);
  }
  callback && callback(marker, icon);
  return marker;
};
const creatInfoForMarker = (map, marker, content) => {
  creatInfo(map, marker.getPosition(), `${content}`, {
    isCommon: false,
    closeButton: false,
    offset: [0, -40] //信息窗位置偏移值
  }, infoWindow => {
    infoWindow.hide(); //默认收起
    marker.addEventListener('mouseover', () => {
      infoWindow.show(); //划过展示
    });
    marker.addEventListener('mouseout', () => {
      infoWindow.hide(); //滑出隐藏
    });
  });
};
const creatSinglePoint = device => {
  const {
    ZenMap
  } = window;
  var point = new ZenMap.Geometry.Point(device.longitude || device.lon, device.latitude || device.lat);
  point.title = device.deviceName;
  point.location = device;
  return point;
};

const searchRouteByMultiPoints = ({
  points,
  map,
  successCallBack,
  errorCallback,
  lineCallBack
}) => {
  var _LMConfig$CustomConfi;
  const {
    ZenMap,
    WKT
  } = window;
  var service = new ZenMap.Services.RouteService(map, ZenMap.MAPTYPE_GEOSERVER);
  var params = new ZenMap.Services.routeParams();
  let routeMultiService = null;
  ((_LMConfig$CustomConfi = LMConfig.CustomConfig) === null || _LMConfig$CustomConfi === void 0 ? void 0 : _LMConfig$CustomConfi.ZenMap) || null;
  // let url = CustomConfig?.vectorLayer[0].layerOpt.url[0].split('mapbox')[0];
  var stops = '';
  for (var i = 0; i < points.length; i++) {
    stops += points[i].lon + ',' + points[i].lat + ';';
  }
  stops = stops.substr(0, stops.length - 1);
  params.stops = stops;
  if (routeMultiService) {
    routeMultiService.abort();
    routeMultiService = null;
  }
  routeMultiService = service.routeByMultPoints("/zenmapdataservice/gis/routing", params, function (infos) {
    if (infos && infos instanceof Array) {
      var myPoints = [];
      var t = new ZenMap.GisToolKit();
      for (var i = 0; i < infos.length; i++) {
        let haveData = true;
        if (+infos[i].length === 0) {
          haveData = false;
        }
        var pstr = infos[i].expend.split(';');
        var tempPoints = []; //参与抽稀
        for (var j = 0; j < pstr.length; j++) {
          var xy = haveData ? pstr[j].split(',') : pstr[j].slice(6, -1).split(' ');
          var x = parseFloat(xy[0]);
          var y = parseFloat(xy[1]);
          tempPoints.push(new ZenMap.Geometry.Point(x, y));
        }
        //抽稀后
        tempPoints = t.covertLine(tempPoints, 175);
        for (var j = 0; j < tempPoints.length; j++) {
          let pointItem = tempPoints[j];
          if (j === 0) {
            // 每段起始点
            pointItem.imageUrl = points[i].imageUrl;
            pointItem.topIndex = points[i].topIndex;
          }
          if (points.length > 2) {
            if (i === infos.length - 1 && j === tempPoints.length - 1) {
              pointItem.imageUrl = points[i + 1].imageUrl;
              pointItem.topIndex = points[i + 1].topIndex;
            }
          } else {
            pointItem.imageUrl = points[i].imageUrl;
            pointItem.topIndex = points[i].topIndex;
          }
          myPoints.push(pointItem);
        }
      }
      successCallBack && successCallBack(myPoints);
      if (lineCallBack) {
        var polyline = new ZenMap.Geometry.Polyline(myPoints, {
          color: 'blue',
          //颜色
          weight: 5,
          //宽度，以像素为单位
          opacity: 2,
          //透明度，取值范围0 - 1
          lineStyle: ZenMap.LINE_TYPE_SOLID //样式
        });
        lineCallBack && lineCallBack(polyline);
      } else {
        return;
      }
    }
  }, errorCallback);
};

var _class$2;
const markerIndexArr$1 = getMakerIndex$1();
let AnimationLineLayer$1 = map(_class$2 = class AnimationLineLayer extends React__default.Component {
  constructor(props) {
    super(props);
    this.mapReady = map => {
      creatOverlayLayer({
        map: map,
        name: 'AnimaLineLayer',
        isCluster: false,
        callback: layer => {
          this.layer = layer;
          this.setState({
            map: map,
            isMapReady: true
          });
        }
      });
    };
    this.zoomToStart = () => {
      const {
        map
      } = this.state;
      if (!map) {
        return;
      }
      if (Array.isArray(this.state.data) && this.state.data.length > 0) {
        let headerPoint = creatSinglePoint(this.state.data[0]);
        this.searchRoute(this.state.data, headerPoint);
        this.setState({
          currentUrl: this.state.data[0].imageUrl
        });
        map.setCenter(headerPoint, 12, {
          speed: 10,
          callback: () => {
            this.createAnimationLines(this.state.data, headerPoint);
          }
        });
      }
    };
    this.searchRoute = (points, headerPoint) => {
      const {
        map
      } = this.state;
      const {
        type
      } = this.props;
      if (!map || !points) {
        return;
      }
      addImgToMap({
        map,
        imgArr: [['foot', '/micro-apps/micro-dep-librarys/images/zenMap/lastImg.png']],
        callback: () => {
          // let headMarker = creatSingleMarker({ map: map, point: points[0], urlName: 'foot', iconSize: 1.2, layers: this.layer, labelName: points[0].deviceName }); //轨迹头部marker
          creatInfo(map, headerPoint, this.popupDom, null, info => {
            this.info = info;
          });
          let dom = document.createElement('img');
          dom.src = '/micro-apps/micro-dep-librarys/images/zenMap/lastImg.png';
          dom.addEventListener('click', () => {
            this.info.isOpen() ? this.info.hide() : this.info.show();
          });
          if (type === 'default') {
            this.creatAnimationLine(points, dom, true);
          } else if (type === 'road') {
            // 路网-动画
            searchRouteByMultiPoints({
              points,
              map,
              successCallBack: pointsArr => {
                this.creatAnimationLine(points, dom, pointsArr);
              },
              errorCallback: err => {
                message.warn(err);
              }
            });
          }
        }
      });
    };
    this.creatAnimationLine = (points, dom, pointsArr) => {
      const {
        MapPlatForm
      } = window;
      const {
        map
      } = this.state;
      if (!map || !points) {
        return;
      }
      var animationLine = new MapPlatForm.Base.AnimationLine(map, pointsArr, {
        renderFirst: true,
        headerMarker: {
          element: dom
        },
        weight: 5,
        color: '#ff5d5d'
      });
      this.animatieonLine = animationLine;
      if (!animationLine) {
        return;
      }
      animationLine.setSpeed(this.props.speed);
      animationLine.trace();
      setTimeout(function () {
        animationLine.restart();
      }, 2000);
      let pointArr = cloneDeep(points);
      pointArr[0].arrIndex = 0;
      // animationLine.addEventListener("ZenMap.ANIMATION_EVENT_START",()=>{
      animationLine.addEventListener('afterStep', current => {
        this.changeInfoPosition(current.point);
        if (current.point.topIndex) {
          let getPoints = points.filter(v => +v.lon === +current.point.lon && +v.lat === +current.point.lat);
          if (getPoints.length > 1) {
            getPoints.forEach(v => {
              pointArr[v.topIndex].arrIndex = current.pointIndex;
            });
          }
          pointArr[current.point.topIndex].arrIndex = current.pointIndex;
          this.props.changeIndexCallback(current.point.topIndex);
          if (current.point.topIndex === points.length - 1) {
            this.props.setIsPlay(true);
            this.props.changeIndexCallback(0);
          }
          this.setState({
            currentUrl: current.point.imageUrl,
            currentIndex: current.point.topIndex
          });
        }
      });
      // })
      this.props.setListIndex(pointArr);
      this.props.getAnimationLine(animationLine);
    };
    this.changeImgVisible = () => {
      if (this.info) {
        this.info.isOpen() ? this.info.hide() : this.info.show();
      }
    };
    this.changeInfoPosition = point => {
      const {
        ZenMap
      } = window;

      // this.info.setOffset (array offset)
      this.info.setPosition(new ZenMap.Geometry.Point(point.lon, point.lat));
    };
    this.createAnimationLines = (points, headerPoint) => {
      //动画线，isMultiple：多条 !isMultiple：一条
      const {
        map
      } = this.state;
      if (!map || !points) {
        return;
      }
      addImgToMap({
        map,
        imgArr: [['redPoint', '/micro-apps/micro-dep-librarys/images/zenMap/defaultImg.png'], ['foot', '/micro-apps/micro-dep-librarys/images/zenMap/lastImg.png']],
        callback: () => {
          points.forEach((point, index) => {
            //渲染经过点
            if (!point.latitude || !point.longitude) {
              return;
            }
            point.lon = point.longitude;
            point.lat = point.latitude;
            point.topIndex = index;
            creatSingleMarker({
              map: map,
              point,
              urlName: 'redPoint',
              iconSize: 1,
              layers: this.layer,
              labelName: point.deviceName,
              context: markerIndexArr$1[index],
              callback: marker => {}
            });
          });
        }
      });
    };
    this.popupDom = document.createElement('div');
    this.popupDom.className = 'animationLine-popup-layout-content';
    this.state = {
      data: [],
      isDataChange: false,
      isMapReady: false,
      map: null,
      currentIndex: 0
    };
  }
  static getDerivedStateFromProps(props, state) {
    if (props.data && !isEqual(props.data, state.data)) {
      return {
        isDataChange: true,
        map: props.map,
        data: props.data
      };
    }
    return null;
  }
  componentWillUnmount() {
    const {
      map
    } = this.state;
    this.animatieonLine.removeEventListener('afterStep');
    map.destroyMap();
  }
  componentDidUpdate() {
    if (this.state.isDataChange && this.state.isMapReady) {
      this.setState({
        isDataChange: false,
        isMapReady: false
      });
      this.zoomToStart();
    }
  }
  render() {
    const {
      currentUrl,
      currentIndex
    } = this.state;
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default.createElement(ImageView, {
      src: currentUrl,
      onClick: e => this.props.onClick(currentIndex)
    }), this.popupDom));
  }
}) || _class$2;
function getMakerIndex$1() {
  let index = 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z'.split(',');
  let arr = cloneDeep(index);
  let a = cloneDeep(index);
  let b = cloneDeep(index);
  a.forEach(v1 => {
    b.forEach(v2 => {
      arr.push(`${v1}${v2}`);
    });
  });
  return arr;
}

function TrajectoryTools({
  isPause,
  reset,
  prev,
  next,
  visible,
  onChangeVisible,
  playOrPause,
  speedChange,
  speed
}) {
  return /*#__PURE__*/React__default.createElement("div", {
    className: "map-trajectory-tools"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "tool-item",
    onClick: playOrPause
  }, /*#__PURE__*/React__default.createElement(IconFont, {
    type: isPause ? 'icon-S_View_PlayerPlay' : 'icon-S_View_PlayerPause'
  }), isPause ? '开始' : '暂停'), /*#__PURE__*/React__default.createElement("div", {
    className: "tool-item",
    onClick: reset
  }, /*#__PURE__*/React__default.createElement(IconFont, {
    type: 'icon-S_Edit_Reset'
  }), "\u590D\u4F4D"), /*#__PURE__*/React__default.createElement("div", {
    className: "tool-item",
    onClick: prev
  }, /*#__PURE__*/React__default.createElement(IconFont, {
    type: 'icon-S_Arrow_Forward'
  }), "\u4E0A\u4E00\u4E2A"), /*#__PURE__*/React__default.createElement("div", {
    className: "tool-item next-btn",
    onClick: next
  }, /*#__PURE__*/React__default.createElement(IconFont, {
    type: 'icon-S_Arrow_Backward'
  }), "\u4E0B\u4E00\u4E2A"), /*#__PURE__*/React__default.createElement("div", {
    className: "tool-item"
  }, /*#__PURE__*/React__default.createElement(Switch, {
    checked: visible,
    onChange: onChangeVisible
  }), `${visible ? '关闭' : '开启'}图片`), /*#__PURE__*/React__default.createElement("div", {
    className: "tool-item speed"
  }, /*#__PURE__*/React__default.createElement(InputNumber, {
    size: 'small',
    defaultValue: speed,
    min: 0,
    step: 100,
    onChange: speedChange
  }), "\u901F\u5EA6km/h"));
}

class TrajectoryMap extends React__default.Component {
  constructor(props) {
    super(props);
    this.mapReady = map => {
      this.AnimationLine.current && map && this.AnimationLine.current.mapReady(map);
      this.setState({
        map
      });
    };
    this.getAnimationLine = animationLine => {
      this.setState({
        animationLineManager: animationLine
      });
    };
    this.destroyMap = () => {
      const {
        map
      } = this.state;
      map.destroyMap();
    };
    this.playOrPause = () => {
      const {
        animationLineManager,
        isPlay,
        speed
      } = this.state;
      if (!animationLineManager) {
        return;
      }
      if (isPlay) {
        var _this$props;
        if (((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.currentIndex) * 1 === 0) {
          this.reset();
        } else {
          animationLineManager.setSpeed(speed);
          animationLineManager.start();
          animationLineManager.trace();
        }
      } else {
        animationLineManager.pause();
      }
      this.setState({
        isPlay: !isPlay
      });
    };
    this.reset = () => {
      const {
        animationLineManager
      } = this.state;
      if (!animationLineManager) {
        return;
      }
      animationLineManager.restart();
      this.setState({
        isPlay: false
      });
    };
    this.prev = () => {
      const {
        animationLineManager,
        map
      } = this.state;
      if (!animationLineManager) {
        return;
      }
      const {
        graph,
        currentIndex,
        setCurrentIndex
      } = this.props;
      if (currentIndex < 1 || !graph.length) {
        currentIndex === 0 && this.props.changeIndexCallback(0);
        return;
      }
      animationLineManager.setPosition(graph[currentIndex - 1].arrIndex, 0);
      map.setCenter(graph[currentIndex - 1], map.getZoom(), {
        speed: 10
      });
      setCurrentIndex(currentIndex - 1);
      this.AnimationLine.current.changeInfoPosition(graph[currentIndex - 1]);
      if (graph[currentIndex - 1].topIndex) {
        this.props.changeIndexCallback(graph[currentIndex - 1].topIndex);
      }
    };
    this.next = () => {
      const {
        animationLineManager,
        map
      } = this.state;
      const {
        graph,
        currentIndex,
        setCurrentIndex
      } = this.props;
      if (!animationLineManager) {
        return;
      }
      if (currentIndex > graph.length - 2 || !graph.length) {
        return;
      }
      animationLineManager.setPosition(graph[currentIndex + 1].arrIndex, 0);
      map.setCenter(graph[currentIndex + 1], map.getZoom(), {
        speed: 10
      });
      setCurrentIndex(currentIndex + 1);
      this.AnimationLine.current.changeInfoPosition(graph[currentIndex + 1]);
      if (graph[currentIndex + 1].topIndex) {
        this.props.changeIndexCallback(graph[currentIndex + 1].topIndex);
      }
    };
    this.change = index => {
      //右侧列表点击地图回应
      const {
        animationLineManager,
        map
      } = this.state;
      const {
        graph
      } = this.props;
      if (!animationLineManager) {
        return;
      }
      animationLineManager.setPosition(graph[index].arrIndex, 0);
      this.AnimationLine.current.changeInfoPosition(graph[index]);
      map.setCenter(graph[index], map.getZoom(), {
        speed: 10
      });
    };
    this.onChangeVisible = () => {
      this.setState({
        visible: !this.state.visible
      });
      this.AnimationLine.current.changeImgVisible();
    };
    this.speedChange = speed => {
      const {
        animationLineManager
      } = this.state;
      if (!animationLineManager) {
        return;
      }
      this.setState({
        speed
      });
      animationLineManager.pause();
      animationLineManager.setSpeed(speed);
      animationLineManager.start();
    };
    this.AnimationLine = /*#__PURE__*/React__default.createRef();
    this.state = {
      isPlay: false,
      animationLineManager: null,
      visible: true,
      //默认开启图片
      map: null,
      speed: 200
    };
  }
  render() {
    const {
      mapBoxId,
      graph = [],
      data,
      type = 'default',
      ...props
    } = this.props;
    const {
      visible,
      isPlay,
      speed
    } = this.state;
    let newData = graph.filter((v, index) => {
      v.lon = v.longitude;
      v.lat = v.latitude;
      v.topIndex = index;
      return validLatLon(v.lat, v.lon);
    }); //过滤不合法的经纬度

    return /*#__PURE__*/React__default.createElement(CreatMap, {
      mapBoxId: mapBoxId,
      mapReady: this.mapReady
    }, /*#__PURE__*/React__default.createElement(AnimationLineLayer$1, _extends({
      data: newData,
      getAnimationLine: this.getAnimationLine,
      ref: this.AnimationLine,
      speed: speed,
      type: type
    }, props, {
      setIsPlay: state => this.setState({
        isPlay: state
      })
    })), /*#__PURE__*/React__default.createElement(TrajectoryTools, {
      playOrPause: this.playOrPause,
      reset: this.reset,
      prev: this.prev,
      next: this.next,
      visible: visible,
      onChangeVisible: this.onChangeVisible,
      isPause: isPlay,
      speedChange: this.speedChange,
      speed: speed
    }));
  }
}

const {
  ZenMap,
  GeoJSON,
  zenmap
} = window;
const drawPolygonByPoint = ({
  map,
  pointList,
  opt,
  isEnableEdit = false,
  callback,
  setZoom = false,
  layer,
  isRender = true
}) => {
  let polygonOpt = opt ? opt : {
    color: '#A541FF',
    //颜色
    fillColor: '#ABB7FF',
    //填充颜色
    weight: 2,
    //宽度，以像素为单位
    opacity: 0.46,
    //透明度，取值范围0 - 1
    fillOpacity: 0.46,
    //填充的透明度，取值范围0 - 1
    lineStyle: 'LINE_TYPE_DASH '
    // text: "胡写一个" //填充文案
  };
  var polygon = new ZenMap.Geometry.Polygon(pointList, polygonOpt);
  polygon.isEnableEdit = isEnableEdit;
  if (isRender) {
    layer ? layer.addOverlay(polygon) : map.addOverlay(polygon);
  }
  try {
    setZoom && map.zoomToExtent(polygon.getExtent(), null, {
      speed: 15,
      linear: false,
      duration: 1000
    });
  } catch (err) {
    console.log(err);
  }
  callback && callback(polygon);
};

var _class$1;
const markerIndexArr = getMakerIndex();
let AnimationLineLayer = map(_class$1 = class AnimationLineLayer extends React__default.Component {
  constructor(props) {
    super(props);
    this.mapReady = map => {
      creatOverlayLayer({
        map: map,
        name: 'LineLayer',
        isCluster: false,
        callback: layer => {
          this.layer = layer;
          this.setState({
            map: map,
            isMapHave: true
          });
        }
      });
    };
    this.zoomToStart = async () => {
      const {
        map,
        type
      } = this.props;
      const {
        data,
        places
      } = this.state;
      const {
        ZenMap
      } = window;
      if (!map || !this.layer) {
        return;
      }
      let points = Object.values(data);
      if (Array.isArray(points) && points.length > 0) {
        if (type && type === 'road') {
          await searchRouteByMultiPoints({
            //查路网路径
            points,
            map,
            lineCallBack: lines => {
              this.layer.addOverlay(lines);
              map.zoomToExtent(lines.getExtent(), 50); //获取路线范围，定位到该范围
            },
            successCallBack: pointArr => {
              this.setState({
                status: 'over',
                pointArr
              });
            },
            errorCallback: err => {
              this.setState({
                status: 'error'
              });
              message.warn(err);
            }
          });
        } else if (type && type === 'default') {
          let lineOpt = {
            color: 'blue',
            //颜色
            weight: 5,
            //宽度，以像素为单位
            opacity: 2,
            //透明度，取值范围0 - 1
            lineStyle: ZenMap.LINE_TYPE_SOLID //样式
          };
          let pointsArr = points.map(v => {
            return creatSinglePoint(v);
          });
          let line = new ZenMap.Geometry.Polyline(pointsArr, lineOpt);
          this.layer.addOverlay(line);
          map.zoomToExtent(line.getExtent(), 50); //获取路线范围，定位到该范围
        }
        this.createAnimationLines(points); //渲染轨迹点和路径
      } else {
        this.setState({
          status: 'over'
        });
      }
      if (Array.isArray(places) && places.length > 0) {
        this.creatPlace(places); //渲染场所图标和场所轮廓
      }
    };
    this.getTrajectory = () => {
      const {
        pointArr
      } = this.state;
      return pointArr;
    };
    this.setPlaceCenter = place => {
      const {
        map
      } = this.props;
      let dataArr = typeSwitch(place.polyline);
      drawPolygonByPoint({
        pointList: dataArr[0],
        layer: this.layer,
        map,
        isRender: false,
        callback: polygon => {
          map.zoomToExtent(polygon.getExtent(), 50);
        }
      });
    };
    this.createAnimationLines = points => {
      //绘线
      const {
        map,
        getFormatData
      } = this.props;
      if (!map || !points || !this.layer) {
        return;
      }
      addImgToMap({
        map,
        imgArr: [['redPoint', '/micro-apps/micro-dep-librarys/images/zenMap/defaultImg.png']],
        callback: () => {
          points.forEach((point, index) => {
            //渲染经过点
            if (!point.lon || !point.lat) {
              return;
            }
            point.index = markerIndexArr[index];
            point.counts = point.list.length;
            creatSingleMarker({
              map: map,
              point,
              urlName: 'redPoint',
              iconSize: 1,
              layers: this.layer,
              labelName: point.name,
              context: markerIndexArr[index],
              callback: marker => {}
            });
          });
          getFormatData && getFormatData(points); //返回 eChart关联数据
        }
      });
    };
    this.creatPlace = places => {
      const {
        map
      } = this.props;
      if (!map || !places || !this.layer) {
        return;
      }
      addImgToMap({
        map,
        imgArr: [['foot', '/micro-apps/micro-dep-librarys/images/zenMap/lastImg.png']],
        callback: () => {
          places.forEach(place => {
            place.lon = place.center.split(',')[0];
            place.lat = place.center.split(',')[1];
            creatSingleMarker({
              //渲染场所中心点
              map: map,
              point: place,
              urlName: 'foot',
              iconSize: 1,
              layers: this.layer,
              labelName: place.placeName,
              callback: marker => {}
            });
            if (place.polyline) {
              //渲染场所轮廓
              let dataArr = typeSwitch(place.polyline);
              drawPolygonByPoint({
                pointList: dataArr[0],
                layer: this.layer,
                map
              });
            }
          });
        }
      });
    };
    const {
      data: _data,
      places: _places,
      type: _type
    } = this.props;
    this.state = {
      data: [],
      isDataChange: false,
      isMapHave: false,
      map: null,
      places: cloneDeep(_places) || [],
      status: 'loading',
      pointArr: null
    };
  }
  static getDerivedStateFromProps(props, state) {
    if (props.data && !isEqual(props.data, state.data)) {
      return {
        isDataChange: true,
        data: props.data
      };
    }
    if (props.places && !isEqual(props.places, state.places)) {
      return {
        isDataChange: true,
        places: props.places
      };
    }
    return null;
  }
  componentDidUpdate() {
    if (this.state.isDataChange && this.state.isMapHave) {
      this.setState({
        isDataChange: false,
        isMapHave: false
      });
      this.zoomToStart();
    }
  }
  setPointCenter(cid) {
    //与eCharts点击关联
    const {
      data,
      map
    } = this.state;
    let target = data.find(v => +v.cid === +cid);
    if (!target) {
      return;
    }
    const {
      position
    } = target;
    if (!position) {
      return;
    }
    let targetPoint = creatSinglePoint(target);
    map.setCenter(targetPoint, 17, {
      speed: 10
    });
  }
  render() {
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
  }
}) || _class$1;
function getMakerIndex() {
  let index = 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z'.split(',');
  let arr = cloneDeep(index);
  let a = cloneDeep(index);
  let b = cloneDeep(index);
  a.forEach(v1 => {
    b.forEach(v2 => {
      arr.push(`${v1}${v2}`);
    });
  });
  return arr;
}

var _class;
let MapResetTools = map(_class = class MapResetTools extends React__default.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const {
      mapReset,
      mapZoom
    } = this.props;
    return /*#__PURE__*/React__default.createElement(MapResetLayout, _extends({}, this.props, {
      mapReset: mapReset,
      mapZoom: mapZoom
    }));
  }
}) || _class;
function MapResetLayout({
  mapReset,
  mapZoom,
  className = ''
}) {
  return /*#__PURE__*/React__default.createElement("div", {
    className: `map-reset-tool ${className}`
  }, /*#__PURE__*/React__default.createElement(Popover, {
    placement: "left",
    content: "\u590D\u4F4D",
    overlayClassName: "map-rest-tools-popup"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "map-reset map-tool-icon",
    onClick: mapReset
  }, /*#__PURE__*/React__default.createElement(IconFont, {
    type: "icon-S_Bar_Reduction"
  }))), /*#__PURE__*/React__default.createElement("div", {
    className: "map-zoom"
  }, /*#__PURE__*/React__default.createElement(Popover, {
    placement: "left",
    content: "\u653E\u5927",
    overlayClassName: "map-rest-tools-popup"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "map-tool-icon",
    onClick: () => mapZoom(1)
  }, /*#__PURE__*/React__default.createElement(IconFont, {
    type: "icon-S_Edit_LinePlus"
  }))), /*#__PURE__*/React__default.createElement(Popover, {
    placement: "left",
    content: "\u7F29\u5C0F",
    onClick: () => mapZoom(-1),
    overlayClassName: "map-rest-tools-popup"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "map-tool-icon"
  }, /*#__PURE__*/React__default.createElement(IconFont, {
    type: "icon-S_Edit_LineMinus"
  })))));
}

class RoadMap extends React__default.Component {
  constructor(props) {
    super(props);
    this.mapReady = map => {
      this.roadMap.current && this.roadMap.current.mapReady(map);
      this.setState({
        map
      });
    };
    this.setPointCenter = cid => {
      this.roadMap.current.setPointCenter(cid);
    };
    this.mapZoom = zoom => {
      const {
        map
      } = this.state;
      if (!map) {
        return;
      }
      map.setZoom(map.getZoom() + zoom);
    };
    this.getTrajectory = () => {
      this.roadMap.current.getTrajectory();
    };
    this.fitPlaceView = id => {
      const {
        places
      } = this.props;
      let centerPlace = places.find(v => +v.placeId === +id);
      this.roadMap.current.setPlaceCenter(centerPlace);
    };
    this.mapReset = () => {
      const {
        map
      } = this.state;
      if (!map) {
        return;
      }
      map.reset();
    };
    this.roadMap = /*#__PURE__*/React__default.createRef();
    this.state = {
      map: null
    };
  }
  render() {
    const {
      mapBoxId,
      height,
      data,
      graph = [],
      graphKey = 'cid',
      graphNameKey = 'name',
      feqType,
      onPolygonClick,
      places,
      type = 'default',
      ...props
    } = this.props;
    let newGraph = graph.filter(v => {
      v.lon = v.position[0];
      v.lat = v.position[1];
      return validLatLon(v.lat, v.lon);
    }); //过滤不合法的经纬度
    return /*#__PURE__*/React__default.createElement(CreatMap, {
      mapBoxId: mapBoxId,
      mapReady: this.mapReady,
      height: height
    }, /*#__PURE__*/React__default.createElement(AnimationLineLayer, _extends({
      data: newGraph,
      dataKey: graphKey,
      dataNameKey: graphNameKey,
      ref: this.roadMap,
      places: places,
      type: type
    }, props)), /*#__PURE__*/React__default.createElement(MapResetTools, {
      className: "person-map-reset",
      mapZoom: this.mapZoom,
      mapReset: this.mapReset
    }));
  }
}

var Trajectory = /*#__PURE__*/React__default.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(Trajectory$1, _extends({}, props, {
  forwardRef: ref
})));
class Trajectory$1 extends React__default.Component {
  render() {
    const {
      forwardRef,
      ...props
    } = this.props;
    const type = this.props.graph && this.props.graph.length > 200 ? 'default' : 'road';
    console.log(type, props);
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, props.dataAnimation && /*#__PURE__*/React__default.createElement(RoadMap, _extends({
      type: type
    }, props, {
      ref: forwardRef
    })), !props.dataAnimation && /*#__PURE__*/React__default.createElement(TrajectoryMap, _extends({
      type: type
    }, props, {
      ref: forwardRef
    })));
  }
}
Trajectory$1.defaultProps = {
  dataAnimation: true
};

var index = {
  Trajectory
};

export { index as default };
//# sourceMappingURL=index.js.map
