103 lines
3.1 KiB
JavaScript
103 lines
3.1 KiB
JavaScript
import React from "react";
|
|
import { RotateCcw, Ruler, Scan, ZoomIn, ZoomOut } from "lucide-react";
|
|
import GisApp from "./lib/gis.core";
|
|
import GisOlMeasure from "./lib/gis.measure";
|
|
import { useContext } from "react";
|
|
import { useGisContext } from "./Gis";
|
|
export default React.memo(function GisToolBar({ iconSize }) {
|
|
const { gisMap } = useGisContext();
|
|
const useVectorIcons = Number.isFinite(iconSize) && iconSize > 0;
|
|
if (!gisMap) return <></>;
|
|
const gisMeasuer = new GisOlMeasure(gisMap);
|
|
GisApp.Module.measure = gisMeasuer;
|
|
const zoomIn = () => {
|
|
if (gisMap.getView().getMaxZoom() > gisMap.getView().getZoom()) {
|
|
gisMap.getView().animate({
|
|
zoom: gisMap.getView().getZoom() + 1,
|
|
duration: 250,
|
|
});
|
|
}
|
|
};
|
|
const zoomOut = () => {
|
|
if (gisMap.getView().getMaxZoom() > gisMap.getView().getZoom()) {
|
|
gisMap.getView().animate({
|
|
zoom: gisMap.getView().getZoom() - 1,
|
|
duration: 250,
|
|
});
|
|
}
|
|
};
|
|
|
|
const measure = (type) => {
|
|
gisMeasuer.addInteraction(type);
|
|
};
|
|
|
|
const reset = () => {
|
|
gisMeasuer.removeFeature();
|
|
};
|
|
return (
|
|
<>
|
|
<div className="custom-toolbar">
|
|
<div
|
|
className={`tool-bar ${useVectorIcons ? "tool-bar-vector-icons" : ""}`}
|
|
>
|
|
<h3>toolbar 영역</h3>
|
|
<ul>
|
|
<li>
|
|
<div className="btn_control_zoomin" title="확대" onClick={zoomIn}>
|
|
{useVectorIcons && (
|
|
<ZoomIn size={iconSize} aria-hidden="true" />
|
|
)}
|
|
<span>확대</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
className="btn_control_zoomout"
|
|
title="축소"
|
|
onClick={zoomOut}
|
|
>
|
|
{useVectorIcons && (
|
|
<ZoomOut size={iconSize} aria-hidden="true" />
|
|
)}
|
|
<span>축소</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
className="btn_control_ruler btn_control_measure"
|
|
title="거리 측정"
|
|
onClick={() => measure(GisApp.measure.LineString)}
|
|
>
|
|
{useVectorIcons && <Ruler size={iconSize} aria-hidden="true" />}
|
|
<span>거리측정</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
className="btn_control_area btn_control_measure"
|
|
title="면적 측정"
|
|
onClick={() => measure(GisApp.measure.Polygon)}
|
|
>
|
|
{useVectorIcons && <Scan size={iconSize} aria-hidden="true" />}
|
|
<span>면적측정</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
className="sprite_gis icon4 btn_select_cancel"
|
|
title="리셋"
|
|
onClick={() => reset()}
|
|
>
|
|
{useVectorIcons && (
|
|
<RotateCcw size={iconSize} aria-hidden="true" />
|
|
)}
|
|
<span>리셋</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
});
|