@mint-ui/map/dist/components/mint-map/core/advanced/MapBuildingProjection.js

- React map library - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var MapTypes = require('../../types/MapTypes.js');
var geo = require('../util/geo.js');
var MapMarkerWrapper = require('../wrapper/MapMarkerWrapper.js');
var MapPolygonWrapper = require('../wrapper/MapPolygonWrapper.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function getMaxLat(items) {
  var max;

  for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
    var item = items_1[_i];

    if (!max || max.lat < item.lat) {
      max = item;
    }
  }

  return max;
}

function getLngMinMaxPos(items, maxFlag) {
  var data = tslib.__spreadArray([], items, true);

  data.sort(function (a, b) {
    var maxA = getLngMinMax(a.position, maxFlag);
    var maxB = getLngMinMax(b.position, maxFlag);
    return maxA.lat < maxB.lat ? maxFlag ? 1 : -1 : maxFlag ? -1 : 1;
  });
  return data[0];
}

function getLngMinMax(items, maxFlag) {
  var val;

  for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
    var item = items_2[_i];

    if (!val || maxFlag && val.lat < item.lat || !maxFlag && val.lat > item.lat) {
      val = item;
    }
  }

  return val;
}

function MapBuildingProjection(props) {
  var basePolygonPath = props.basePolygonPath,
      numberOfFloor = props.numberOfFloor,
      _a = props.heightOfFloor,
      heightOfFloor = _a === void 0 ? 4 : _a,
      _b = props.lineColor,
      lineColor = _b === void 0 ? 'blue' : _b,
      _c = props.lineOpacity,
      lineOpacity = _c === void 0 ? 1 : _c,
      _d = props.fillColor,
      fillColor = _d === void 0 ? 'lightblue' : _d,
      _e = props.fillOpacity,
      fillOpacity = _e === void 0 ? 1 : _e,
      _f = props.title,
      title = _f === void 0 ? '빌딩11' : _f,
      titleElement = props.titleElement;

  var _g = React.useState(),
      basePolygon = _g[0],
      setBasePolygon = _g[1];

  var roofPolygon = React.useRef();
  var wallPolygons = React.useRef();
  var titlePosition = React.useRef();
  React.useEffect(function () {
    //베이스 폴리곤
    var base = {
      position: basePolygonPath
    };
    var height = numberOfFloor * heightOfFloor;
    var projectionHeight = geo.GeoCalulator.convertMeterToLatitudeValue(height); //roof

    var roofPaths = [];

    for (var _i = 0, basePolygonPath_1 = basePolygonPath; _i < basePolygonPath_1.length; _i++) {
      var pos = basePolygonPath_1[_i];
      roofPaths.push(new MapTypes.Position(pos.lat + projectionHeight, pos.lng));
    }

    roofPolygon.current = {
      position: roofPaths
    }; //walls

    wallPolygons.current = [];

    for (var i = 0; i < basePolygonPath.length; i++) {
      var start = basePolygonPath[i];
      var startNext = basePolygonPath[i + 1] || basePolygonPath[0];
      var end = roofPaths[i];
      var endNext = roofPaths[i + 1] || roofPaths[0];
      wallPolygons.current.push({
        position: [start, startNext, endNext, end]
      });
    } //latitude 기준으로 배열 재정렬


    wallPolygons.current.sort(function (a, b) {
      var maxA = getMaxLat(a.position);
      var maxB = getMaxLat(b.position);
      return maxA.lat < maxB.lat ? 1 : -1;
    }); //latitude 가장 높은값과 longitude 중간값으로 타이틀 위치 결정

    if (title || titleElement) {
      var maxPos = getMaxLat(wallPolygons.current[0].position);
      var maxLngPos = getLngMinMaxPos(wallPolygons.current, true);
      var minLngPos = getLngMinMaxPos(wallPolygons.current, false);
      var maxLng = getLngMinMax(maxLngPos.position, true);
      var minLng = getLngMinMax(minLngPos.position, false);
      var mid = minLng.lng + (maxLng.lng - minLng.lng) / 2;
      titlePosition.current = {
        position: new MapTypes.Position(maxPos.lat, mid)
      };
    } else {
      titlePosition.current = undefined;
    }

    setBasePolygon(base);
  }, [props]);
  return React__default["default"].createElement(React__default["default"].Fragment, null, basePolygon && React__default["default"].createElement(MapPolygonWrapper.MapPolygonWrapper, tslib.__assign({}, basePolygon, {
    lineColor: lineColor,
    lineOpacity: lineOpacity,
    fillColor: fillColor,
    fillOpacity: fillOpacity
  })), wallPolygons.current && wallPolygons.current.map(function (poly, idx) {
    return React__default["default"].createElement(MapPolygonWrapper.MapPolygonWrapper, tslib.__assign({
      key: "walls-".concat(idx)
    }, poly, {
      lineColor: lineColor,
      lineOpacity: lineOpacity,
      fillColor: fillColor,
      fillOpacity: fillOpacity
    }));
  }), roofPolygon.current && React__default["default"].createElement(MapPolygonWrapper.MapPolygonWrapper, tslib.__assign({}, roofPolygon.current, {
    lineColor: lineColor,
    lineOpacity: lineOpacity,
    fillColor: fillColor,
    fillOpacity: fillOpacity
  })), titlePosition.current && React__default["default"].createElement(MapMarkerWrapper.MapMarkerWrapper, tslib.__assign({}, titlePosition.current), titleElement ? titleElement : React__default["default"].createElement("div", {
    style: {
      width: '150px',
      height: '30px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      position: 'absolute',
      left: 'calc(50% - 75px)',
      top: '-35px'
    }
  }, React__default["default"].createElement("div", {
    style: {
      maxWidth: '150px',
      border: '1px solid gray',
      borderRadius: '5px',
      padding: '2px 5px',
      background: 'white',
      fontSize: '12px',
      fontWeight: 600,
      color: '#006fd1'
    }
  }, "".concat(title, " (").concat(numberOfFloor, "\uCE35)")))));
}

exports.MapBuildingProjection = MapBuildingProjection;