ming-demo3/lib/components/basic/amap.js

mdf metaui web

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _reactAmap = require("react-amap");

var _label = _interopRequireDefault(require("./label"));

var _text = _interopRequireDefault(require("./text"));

var _row = _interopRequireDefault(require("./row"));

var _baseui = require("@mdf/baseui");

var defaultPosition = ['116.238822', '40.068734'];

var AMap = function (_Component) {
  (0, _inherits2["default"])(AMap, _Component);

  function AMap(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, AMap);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(AMap).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "PolyEditorCreated", function (ins) {
      _this.PolyEditorInstance = ins;

      _this.mapInstance.setFitView(_this.mapInstance.getAllOverlays());
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "circleEditorCreated", function (ins) {
      _this.circleEditorInstance = ins;

      _this.mapInstance.setFitView(_this.mapInstance.getAllOverlays());
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "mapCreated", function (ins) {
      _this.mapInstance = ins;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "PolyEditorClose", function (obj) {
      var currentPathCollect = obj.target.getPath();
      if (_this.props.model && obj.type !== 'end') _this.props.model.execute('polygonPath', currentPathCollect);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "circleEditorClose", function (obj) {
      var currentRadius = obj.target.getRadius();
      if (_this.props.model) _this.props.model.execute('circleRadius', currentRadius);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addressToLngLat", function (address) {
      if (!address) return;
      var proxy = cb.rest.DynamicProxy.create({
        geocoder: {
          url: 'geocoder',
          method: 'GET',
          options: {
            token: false,
            uniform: false
          }
        }
      });
      proxy.geocoder({
        address: address
      }, function (err, result) {
        if (err) {
          console.error(err.message);
          return;
        }

        if (!result) return;
        var position = result.geocodes[0].location;
        var lng = position.split(',')[0];
        var lat = position.split(',')[1];
        console.log(lng);
        console.log(lat);

        if (this.props.model) {
          this.props.model.setValue({
            longitude: lng,
            latitude: lat,
            address: address
          }, true);
          var path = this.getDefaultPolygonPath();
          var collectPath = path.map(function (ele) {
            return {
              Q: ele.latitude,
              N: ele.longitude,
              lng: ele.longitude,
              lat: ele.latitude
            };
          });
          this.props.model.execute('polygonPath', collectPath);
        }
      }, (0, _assertThisInitialized2["default"])(_this));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "locationToAddress", function (location, longitude, latitude) {
      if (!location) return;
      var proxy = cb.rest.DynamicProxy.create({
        geocoder: {
          url: 'geoaddress',
          method: 'GET',
          options: {
            token: false,
            uniform: false
          }
        }
      });
      proxy.geocoder({
        location: location
      }, function (err, result) {
        if (err) {
          console.error(err.message);
          return;
        }

        this.props.model.setValue({
          longitude: longitude,
          latitude: latitude,
          address: result.regeocode.formatted_address
        }, true);
      }, (0, _assertThisInitialized2["default"])(_this));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "mapEvents", function (e) {
      var location = e.lnglat.lng + ',' + e.lnglat.lat;

      _this.locationToAddress(location, e.lnglat.lng, e.lnglat.lat);
    });
    _this.state = {
      bIsNull: props.bIsNull,
      address: '',
      position: props.position || ['116.238822', '40.068734'],
      inputChangeAddress: null,
      isBig: false,
      smallStyles: {
        position: 'relative',
        marginTop: '10px',
        height: '160px'
      },
      colNumber: props.iColWidth,
      deliveryMethod: '',
      circleRadius: 5000
    };
    _this.editorEvents = {
      created: _this.PolyEditorCreated,
      addnode: _this.PolyEditorClose,
      adjust: _this.PolyEditorClose,
      removenode: _this.PolyEditorClose,
      end: _this.PolyEditorClose
    };
    _this.circleEditorEvents = {
      created: _this.circleEditorCreated,
      addnode: _this.circleEditorClose,
      adjust: _this.circleEditorClose,
      removenode: _this.circleEditorClose,
      end: _this.circleEditorClose
    };
    _this.polygonStyle = {
      fillOpacity: 0.3,
      fillColor: '#588CE9',
      strokeColor: '#588CE9'
    };
    return _this;
  }

  (0, _createClass2["default"])(AMap, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      if (nextState.deliveryMethod === 'circle' && this.state.deliveryMethod === 'polygon') {
        this.PolyEditorInstance && this.PolyEditorInstance.close();
      }

      return true;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.model) this.props.model.addListener(this);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (prevState.flag === this.state.flag) return;
      this.props.model.getParent().execute('afterRenderComponent');
    }
  }, {
    key: "setListenerState",
    value: function setListenerState(params) {
      var value = params.value;
      delete params.value;
      this.setState(params);
      if (value) this.setValue(value);
    }
  }, {
    key: "setValue",
    value: function setValue(value) {
      if (!value || this.isValueEqual(value.longitude, value.latitude, value.address)) return;
      var locationX = value.longitude || '116.238822';
      var locationY = value.latitude || '40.068734';
      var address = value.address;
      this.setState({
        position: [locationX, locationY],
        address: address
      });
    }
  }, {
    key: "isValueEqual",
    value: function isValueEqual(longitude, latitude, address1) {
      var _this$state = this.state,
          position = _this$state.position,
          address = _this$state.address;
      return longitude === position[0] && latitude === position[1] && address1 === address;
    }
  }, {
    key: "getAmap",
    value: function getAmap() {
      var _this2 = this;

      var position = this.state.position;
      var markerCenter = {
        longitude: position[0],
        latitude: position[1]
      };
      var events = {
        click: this.mapEvents,
        created: this.mapCreated
      };
      var innerContent = this.getInnerAmap(markerCenter);
      return _react["default"].createElement("div", {
        style: this.state.isBig ? this.state.bigStyles : this.state.smallStyles
      }, _react["default"].createElement(_reactAmap.Map, {
        center: markerCenter,
        zoom: 14,
        events: events
      }, _react["default"].createElement(_reactAmap.Marker, {
        position: markerCenter
      }), innerContent), _react["default"].createElement("button", {
        onClick: function onClick() {
          return _this2.handleButtonClick();
        },
        style: {
          position: 'absolute',
          top: '3px',
          right: '2px',
          zIndex: '99'
        }
      }, this.state.isBig ? '缩小' : '展开'));
    }
  }, {
    key: "getInnerAmap",
    value: function getInnerAmap(markerCenter) {
      var defaultPolygonPath = this.getDefaultPolygonPath();

      if (this.state.deliveryMethod === 'polygon') {
        return _react["default"].createElement(_reactAmap.Polygon, {
          path: defaultPolygonPath,
          style: this.polygonStyle
        }, _react["default"].createElement(_reactAmap.PolyEditor, {
          active: true,
          events: this.editorEvents
        }));
      } else if (this.state.deliveryMethod === 'circle') {
        return _react["default"].createElement(_reactAmap.Circle, {
          radius: this.state.circleRadius || 5000,
          center: markerCenter,
          style: this.polygonStyle,
          events: this.circleEditorEvents
        });
      } else {
        return null;
      }
    }
  }, {
    key: "getDefaultPolygonPath",
    value: function getDefaultPolygonPath() {
      var defaultPosition = this.state.position;
      if (this.state.polygonPath) return this.state.polygonPath;
      return [{
        longitude: Number(defaultPosition[0]) - 0.05,
        latitude: Number(defaultPosition[1]) - 0.04
      }, {
        longitude: Number(defaultPosition[0]) - 0.05,
        latitude: Number(defaultPosition[1]) + 0.04
      }, {
        longitude: Number(defaultPosition[0]) + 0.05,
        latitude: Number(defaultPosition[1]) + 0.04
      }, {
        longitude: Number(defaultPosition[0]) + 0.05,
        latitude: Number(defaultPosition[1]) - 0.04
      }];
    }
  }, {
    key: "handleButtonClick",
    value: function handleButtonClick() {
      this.setState({
        isBig: !this.state.isBig,
        bigStyles: {
          position: 'relative',
          width: this.state.colNumber == 2 ? document.body.clientWidth - 342 - 67 : (document.body.clientWidth - 390) * 0.8 - 204,
          height: this.state.colNumber == 2 ? (document.body.clientWidth - 342 - 67) * 0.5 : ((document.body.clientWidth - 390) * 0.8 - 204) * 0.5,
          marginTop: '10px'
        }
      });
    }
  }, {
    key: "baseControl",
    value: function baseControl() {
      var _this3 = this;

      var _this$state2 = this.state,
          inputChangeAddress = _this$state2.inputChangeAddress,
          address = _this$state2.address;
      return _react["default"].createElement(_row["default"], null, this.state.readOnly ? (0, _text["default"])(address) : _react["default"].createElement(_baseui.Input, {
        value: address,
        onChange: function onChange(e) {
          return _this3.handleInputChange(e);
        },
        onPressEnter: function onPressEnter(e) {
          return _this3.onPressEnter(e);
        },
        onBlur: function onBlur(e) {
          return _this3.handleInputBlur(e);
        }
      }), this.getAmap());
    }
  }, {
    key: "handleInputChange",
    value: function handleInputChange(e) {
      this.setState({
        address: e.target.value
      });
    }
  }, {
    key: "onPressEnter",
    value: function onPressEnter(e) {
      var value = e.target.value;
      this.addressToLngLat(value);
    }
  }, {
    key: "handleInputBlur",
    value: function handleInputBlur(e) {
      var value = e.target.value;
      if (value === this.state.address) return;
      this.addressToLngLat(value);
    }
  }, {
    key: "getControl",
    value: function getControl() {
      var cShowCaption = this.props.cShowCaption;
      var title = !this.state.readOnly && this.state.bIsNull === false && cShowCaption ? _react["default"].createElement("label", null, _react["default"].createElement(Icon, {
        type: "star"
      }), cShowCaption) : _react["default"].createElement("label", null, cShowCaption);
      var control = cShowCaption ? _react["default"].createElement(_label["default"], {
        control: this.baseControl(),
        title: title
      }) : this.baseControl();
      return control;
    }
  }, {
    key: "render",
    value: function render() {
      var control = this.getControl();
      return _react["default"].createElement("div", {
        className: "map"
      }, control);
    }
  }]);
  return AMap;
}(_react.Component);

exports["default"] = AMap;
//# sourceMappingURL=amap.js.map