712 lines
37 KiB
HTML
712 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GSIM Viewer</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
<link rel="stylesheet" href="./reset.css">
|
|
<link rel="stylesheet" href="./system.css">
|
|
<!-- <link rel="icon" href=""> -->
|
|
</head>
|
|
|
|
<body style="overflow: hidden; user-select: none;">
|
|
<div id="mapContainer"></div>
|
|
|
|
<!-- 헤더부분 ===== ===== ===== ===== ===== -->
|
|
<header>
|
|
<div class="header-left">
|
|
<img class="icon" src="./svg/gsim-logo.svg" alt="gsim-logo">
|
|
<h3 id="project-title">건설공사</h3>
|
|
</div>
|
|
</header>
|
|
<!-- 320px 이하 오류 메시지 ===== ===== ===== ===== ===== -->
|
|
<div class="notice">
|
|
<img class="icon" src="./svg/error.svg" alt="error">
|
|
<h5>이 해상도는 지원하지 않습니다.</h5>
|
|
</div>
|
|
|
|
<!-- [[[[[ [[[[[ [[[[[ [[[[[ [[[[[ 작성하는 곳 ]]]]] ]]]]] ]]]]] ]]]]] ]]]]] -->
|
|
<!-- 분할비교 slider -->
|
|
<div class="split-slider" id="slider" style="display: none;">
|
|
<div class="split-icon" id="slider-icon">
|
|
<img class="icon" src="./svg/icon-split.svg" alt="icon-split">
|
|
</div>
|
|
</div>
|
|
|
|
<main>
|
|
<!-- 상단부분 -->
|
|
<div class="top">
|
|
|
|
<!-- 상단 왼쪽 부분 -->
|
|
<div class="top-left">
|
|
<!-- 모델기반 left -->
|
|
<div class="window-big" id="model-list">
|
|
<div class="window-header">
|
|
<h3 id="left-list-title">모델기반(3D)</h3>
|
|
<img class="icon" src="./svg/icon-sign-down-fff.svg" alt="icon-sign-down-fff">
|
|
</div>
|
|
<div class="window-body">
|
|
<ul></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 상단 오른쪽 부분 -->
|
|
<div class="top-right">
|
|
|
|
<!-- 모델기반 right -->
|
|
<div class="window-big" id="model-list-right" style="display: none;">
|
|
<div class="window-header">
|
|
<h3 id="right-list-title">우측화면 모델</h3>
|
|
<img class="icon" src="./svg/icon-sign-down-fff.svg" alt="icon-sign-down-fff">
|
|
</div>
|
|
<div class="window-body">
|
|
<ul></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 라벨 가져오기 -->
|
|
<div class="window-big" id="label-get">
|
|
<div class="window-header">
|
|
<h3>라벨 가져오기</h3>
|
|
<img class="icon" src="./svg/icon-close.svg" alt="icon-close">
|
|
</div>
|
|
<div class="window-body">
|
|
<div class="dropdown">
|
|
<button class="dropdown-toggle">
|
|
<h4 id="label-get-selected">라벨을 가져올 모델을 선택하세요.</h4>
|
|
<img class="icon" src="./svg/icon-sign-down-fff.svg" alt="icon-sign-down-fff">
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<ul id="label-get-list">
|
|
<li>[공사중] 2공구 중간태</li>
|
|
<li>[공사중] 1공구 중간태</li>
|
|
<li>[공사중] 4공구 설계 시설</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="window-btn-wrap">
|
|
<!-- <div class="big-btn" id="">
|
|
<h3>삭제</h3>
|
|
</div> -->
|
|
<div class="big-btn" id="label-get-submit">
|
|
<h3>적용</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 라벨추가 -->
|
|
<div class="window-big" id="func-label-add" style="display: none;">
|
|
<div class="window-header">
|
|
<h3>라벨 속성</h3>
|
|
<img class="icon" src="./svg/icon-close.svg" alt="icon-close">
|
|
</div>
|
|
<div class="window-body">
|
|
<div class="window-content">
|
|
<h4>라벨 텍스트</h4>
|
|
<input type="text" id="modal-label-text" name="label-text" placeholder="라벨 내용 입력" />
|
|
</div>
|
|
<div class="window-content">
|
|
<h4>라벨크기</h4>
|
|
<div class="font-size" id="modal-label-size">
|
|
<label>
|
|
<input type="radio" name="fontsize" value="10">
|
|
<span class="btn">10pt</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="fontsize" value="15">
|
|
<span class="btn">12pt</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="fontsize" value="20">
|
|
<span class="btn">14pt</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="fontsize" value="25" checked>
|
|
<span class="btn">16pt</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="window-content">
|
|
<h4>배경색</h4>
|
|
<div class="color-picker" id="modal-label-color">
|
|
<label>
|
|
<input type="radio" name="color" value="#F21D0D" />
|
|
<span class="color-swatch" style="background-color: var(--color-red);"></span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="color" value="#B92ED1" />
|
|
<span class="color-swatch" style="background-color: var(--color-magenta);"></span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="color" value="#6D3DC2" />
|
|
<span class="color-swatch" style="background-color: var(--color-purple);"></span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="color" value="#03AEFC" />
|
|
<span class="color-swatch" style="background-color: var(--color-cyan);"></span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="color" value="#4DB251" />
|
|
<span class="color-swatch" style="background-color: var(--color-green);"></span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="color" value="#FFBF00" />
|
|
<span class="color-swatch" style="background-color: var(--color-yellow);"></span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="color" value="#A0705F" />
|
|
<span class="color-swatch" style="background-color: var(--color-brown);"></span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="color" value="#7F7F7F" />
|
|
<span class="color-swatch" style="background-color: var(--color-iron);"></span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="color" value="#688897" />
|
|
<span class="color-swatch" style="background-color: var(--color-steel);"></span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="color" id="last-swatch" value="#000000" checked/>
|
|
<span class="color-swatch"
|
|
style="background-color: #000000;"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="window-content">
|
|
<h4>배경 투명도</h4>
|
|
<div class="z-scaleBar-gauge">
|
|
<input type="range" min="0" max="1" step="0.25" value="0" class="slider" id="modal-label-alpha">
|
|
</div>
|
|
<img class="label-opacity-number" src="./svg/label-opacity-number.svg"
|
|
alt="label-opacity-number">
|
|
</div>
|
|
<div class="window-btn-wrap">
|
|
<div class="big-btn" id="modal-label-delete">
|
|
<h3>삭제</h3>
|
|
</div>
|
|
<div class="big-btn" id="modal-label-submit">
|
|
<h3>적용</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 라벨 -->
|
|
<div class="window-big" id="func-label" style="display: none;">
|
|
<div class="window-header">
|
|
<h3>라벨</h3>
|
|
<img class="icon" src="./svg/icon-close.svg" alt="icon-close" style="display: none;">
|
|
</div>
|
|
<div class="window-body" style="display: none;">
|
|
<h4>라벨을 적용할 모델</h4>
|
|
<div class="file-click">
|
|
<h4 class="file-title">[공사 중] 설계 변경</h4>
|
|
<img class="icon" src="./svg/icon-sign-down-fff.svg" alt="icon-sign-down-fff">
|
|
</div>
|
|
</div>
|
|
<div class="window-footer">
|
|
<ul>
|
|
<li>
|
|
<img class="icon" src="./svg/icon-label-dot-white.svg" alt="icon-label-dot-white">
|
|
<h4>인주JCT 1교, L=25m</h4>
|
|
</li>
|
|
<li>
|
|
<img class="icon" src="./svg/icon-label-dot-white.svg" alt="icon-label-dot-white">
|
|
<h4>인주JCT 1교, L=25m</h4>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 이슈추가 -->
|
|
<div class="window-big" id="func-issue-add" style="display: none;">
|
|
<div class="window-header">
|
|
<h3>이슈 속성</h3>
|
|
<img class="icon" src="./svg/icon-close.svg" alt="icon-close">
|
|
</div>
|
|
<div class="window-body">
|
|
<div class="window-content">
|
|
<h4>작성자와 날짜</h4>
|
|
<div class="file-click">
|
|
<h4 id="modal-issue-writer">이동호 선임연구원</h4>
|
|
<h4 id="modal-issue-date">2025-00-00</h4>
|
|
</div>
|
|
</div>
|
|
<div class="window-content">
|
|
<h4>제목</h4>
|
|
<input type="text" id="modal-issue-text" name="label-text" placeholder="제목 입력" />
|
|
<!-- <img class="icon" src="./svg/icon-calendar.svg" alt="icon-calendar"> -->
|
|
</div>
|
|
<div class="window-content">
|
|
<h4>상세내용</h4>
|
|
<textarea class="issue-txt" id="modal-issue-content" name="issue-txt" id="/"
|
|
placeholder="상세 내용 입력"></textarea>
|
|
</div>
|
|
<div class="window-content" style="display: none;"><!-- 첨부파일 임시 제거 -->
|
|
<div class="window-content-header">
|
|
<h4>첨부파일</h4>
|
|
<div class="xs-icon-btn" id="">
|
|
<img class="icon" src="./svg/icon-add.svg" alt="icon-add">
|
|
<p style="color: var(--grayscale-lv0-background) !important;">파일추가</p>
|
|
</div>
|
|
</div>
|
|
<div class="file-click">
|
|
<ul>
|
|
<li>
|
|
<h4>사용자 시방서.pdf</h4>
|
|
<img class="icon" src="./svg/icon-delete.svg" alt="icon-delete">
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="window-btn-wrap">
|
|
<div class="big-btn" id="modal-issue-cancel">
|
|
<h3>삭제</h3>
|
|
</div>
|
|
<div class="big-btn" id="modal-issue-submit">
|
|
<h3>적용</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 이슈 -->
|
|
<div class="window-big" id="func-issue" style="display: none;">
|
|
<div class="window-header">
|
|
<h3>이슈</h3>
|
|
<img class="icon" src="./svg/icon-close.svg" alt="icon-close" style="display: none;">
|
|
</div>
|
|
<div class="window-body" style="display: none;">
|
|
<h4>이슈를 적용할 모델</h4>
|
|
<div class="file-click">
|
|
<h4 class="file-title">[공사 중] 설계 변경</h4>
|
|
<img class="icon" src="./svg/icon-sign-down-fff.svg" alt="icon-sign-down-fff">
|
|
</div>
|
|
</div>
|
|
<div class="window-footer">
|
|
<ul>
|
|
<li>
|
|
<img class="icon" src="./svg/icon-label-dot-white.svg" alt="icon-label-dot-white">
|
|
<h4>이슈1</h4>
|
|
</li>
|
|
<li>
|
|
<img class="icon" src="./svg/icon-label-dot-white.svg" alt="icon-label-dot-white">
|
|
<h4>이슈 추가2</h4>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 창뜨는 부분 -->
|
|
<div class="bottom-up">
|
|
<div class="bottom-up-left">
|
|
<!-- 좌표변환 창 -->
|
|
<div class="window" id="select-coordi" style="display: none;">
|
|
<div class="window-header">
|
|
<h3>좌표변환</h3>
|
|
<img class="icon" src="./svg/icon-close.svg" alt="icon-close" id="select-coordi-close">
|
|
</div>
|
|
<div class="window-body">
|
|
<div class="window-body-content">
|
|
<p>위치표시</p>
|
|
<label class="radio-label">
|
|
<input type="radio" name="gcs" id="gcs1" checked><span
|
|
class="radio-custom-inbox"></span>위도,
|
|
경도
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="gcs" id="gcs2"><span class="radio-custom-inbox"></span>토목좌표
|
|
(x,y)
|
|
</label>
|
|
</div>
|
|
<div class="window-body-content">
|
|
<p>투영원점</p>
|
|
<label class="radio-label" style="opacity: 25%; cursor: not-allowed;">
|
|
<input type="radio" name="pcs" id="5185" disabled><span class="radio-custom-inbox"></span>서부
|
|
</label>
|
|
<label class="radio-label" style="opacity: 25%; cursor: not-allowed;">
|
|
<input type="radio" name="pcs" id="5186" disabled><span class="radio-custom-inbox"></span>중부
|
|
</label>
|
|
<label class="radio-label" style="opacity: 25%; cursor: not-allowed;">
|
|
<input type="radio" name="pcs" id="5187" disabled><span class="radio-custom-inbox"></span>동부
|
|
</label>
|
|
<label class="radio-label" style="opacity: 25%; cursor: not-allowed;">
|
|
<input type="radio" name="pcs" id="5188" disabled><span class="radio-custom-inbox"></span>동해
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 선형클리핑 상단 뜨는 곳 -->
|
|
<div class="window-relative" style="display: none;" id="clipping-key-map">
|
|
<div class="window-footer">
|
|
<ul id="key-map-list">
|
|
<li>
|
|
<img class="icon" src="./svg/icon-label-dot-red.svg" alt="icon-label-dot-red">
|
|
<h4>인주JCT 1교, L=25m</h4>
|
|
</li>
|
|
<li>
|
|
<img class="icon" src="./svg/icon-label-dot-red.svg" alt="icon-label-dot-red">
|
|
<h4>인주JCT 1교, L=25m</h4>
|
|
</li>
|
|
<li>
|
|
<img class="icon" src="./svg/icon-label-dot-red.svg" alt="icon-label-dot-red">
|
|
<h4>인주JCT 1교, L=25m</h4>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="window-img-container">
|
|
<img class="icon" src="./svg/icon-close-aaa.svg" alt="icon-close-aaa">
|
|
<svg id="key-map" width="512" height="512"></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 아래 상단 가운데 -->
|
|
<div class="bottom-up-center">
|
|
|
|
<!-- 선형클리핑 -->
|
|
<div class="window-fit" id="func-clipping" style="display: none;">
|
|
<div class="xs-icon-btn" id="clipping-camera-follow">
|
|
<img class="icon" src="./svg/icon-vision.svg" alt="icon-vision">
|
|
<p>카메라 따라가기</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="clipping-inverse">
|
|
<img class="icon" src="./svg/icon-rotate.svg" alt="icon-rotate">
|
|
<p>카메라 반전</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="clipping-camera-play">
|
|
<img class="icon" src="./svg/icon-play.svg" alt="icon-play">
|
|
</div>
|
|
<div class="xs-icon-btn">
|
|
<img class="icon" src="./svg/icon-sign-down-fff.svg" alt="icon-sign-down-fff" id="compare-road2">
|
|
<p id="compare-road">지방도628호선1</p>
|
|
<div class="z-scaleBar-gauge" id="compare-toolbar">
|
|
<input type="range" min="0" max="100" step="1" value="0" class="slider">
|
|
</div>
|
|
<p class="fixed-width" id="station-number">4+300</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 투명도 -->
|
|
<div class="window-fit" id="func-opacity" style="display: none;">
|
|
<div class="xs-icon-btn">
|
|
<div class="z-scaleBar-gauge">
|
|
<input type="range" min="0" max="100" step="1" value="0" class="slider">
|
|
</div>
|
|
<p class="fixed-width">0%</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 측정 -->
|
|
<div class="window-fit" id="func-measurement" style="display: none;">
|
|
<div class="xs-icon-btn" id="slope-btn">
|
|
<img class="icon" src="./svg/icon-slope.svg" alt="icon-slope">
|
|
<p>경사도</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="location-btn">
|
|
<img class="icon" src="./svg/icon-locate.svg" alt="icon-locate">
|
|
<p>좌표</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="distance-btn">
|
|
<img class="icon" src="./svg/icon-beeline.svg" alt="icon-beeline">
|
|
<p>직선거리</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="horizontal-btn">
|
|
<img class="icon" src="./svg/icon-horizon.svg" alt="icon-horizon">
|
|
<p>수평거리</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="vertical-btn">
|
|
<img class="icon" src="./svg/icon-vertical.svg" alt="icon-vertical">
|
|
<p>수직거리</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="measure-delete-btn">
|
|
<p class="type-em-red">측정 전체삭제</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 라벨생성 -->
|
|
<div class="window-fit" id="func-label-bar" style="display: none;">
|
|
<div class="xs-icon-btn" id="label-add-btn">
|
|
<img class="icon" src="./svg/icon-add.svg" alt="icon-add">
|
|
<p>라벨 추가</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="label-get-btn">
|
|
<img class="icon" src="./svg/icon-download.svg" alt="icon-download">
|
|
<p>라벨 가져오기</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="label-delete-btn">
|
|
<p class="type-em-red">라벨 전체삭제</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 이슈생성 -->
|
|
<div class="window-fit" id="func-issue-bar" style="display: none;">
|
|
<div class="xs-icon-btn" id="issue-add-btn">
|
|
<img class="icon" src="./svg/icon-add.svg" alt="icon-add">
|
|
<p>이슈 추가</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="issue-delete-btn">
|
|
<p class="type-em-red">이슈 전체삭제</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 아래 상단 오른쪽부분 -->
|
|
<div class="bottom-up-right">
|
|
<!-- 레이어창 -->
|
|
<div class="window" id="layer-modal" style="display: none;">
|
|
<div class="window-header">
|
|
<h3>레이어</h3>
|
|
<img class="icon modal-close" src="./svg/icon-close.svg" alt="icon-close">
|
|
</div>
|
|
<div class="window-body">
|
|
<label class="checkbox-label layer" id="wpb-layer-btn">
|
|
<div class="checkbox-label-left">
|
|
<input type="checkbox" name="layer" id="linear"
|
|
data-icon-visible="./svg/icon-visibility.svg"
|
|
data-icon-invisible="./svg/icon-invisibility.svg" />
|
|
<span class="checkbox-custom-inbox"></span>
|
|
<img class="icon" src="./svg/icon-linear.svg" alt="icon-linear" />
|
|
선형중심선
|
|
</div>
|
|
<img class="icon visibility-icon" src="./svg/icon-invisibility.svg" alt="icon-visibility" />
|
|
</label>
|
|
<label class="checkbox-label layer" id="plane-layer-btn">
|
|
<div class="checkbox-label-left">
|
|
<input type="checkbox" name="layer" id="linear"
|
|
data-icon-visible="./svg/icon-visibility.svg"
|
|
data-icon-invisible="./svg/icon-invisibility.svg" />
|
|
<span class="checkbox-custom-inbox"></span>
|
|
<img class="icon" src="./svg/icon-cad.svg" alt="icon-cad" />
|
|
계획평면
|
|
</div>
|
|
<img class="icon visibility-icon" src="./svg/icon-invisibility.svg" alt="icon-visibility" />
|
|
</label>
|
|
<label class="checkbox-label layer" id="siteLine-layer-btn">
|
|
<div class="checkbox-label-left">
|
|
<input type="checkbox" name="layer" id="linear"
|
|
data-icon-visible="./svg/icon-visibility.svg"
|
|
data-icon-invisible="./svg/icon-invisibility.svg" />
|
|
<span class="checkbox-custom-inbox"></span>
|
|
<img class="icon" src="./svg/icon-dottedLine.svg" alt="icon-dottedLine" />
|
|
용지라인
|
|
</div>
|
|
<img class="icon visibility-icon" src="./svg/icon-invisibility.svg" alt="icon-visibility" />
|
|
</label>
|
|
<label class="checkbox-label layer" id="label-layer-btn">
|
|
<div class="checkbox-label-left">
|
|
<input type="checkbox" name="layer" id="linear"
|
|
data-icon-visible="./svg/icon-visibility.svg"
|
|
data-icon-invisible="./svg/icon-invisibility.svg" />
|
|
<span class="checkbox-custom-inbox"></span>
|
|
<img class="icon" src="./svg/icon-label.svg" alt="icon-label" />
|
|
라벨
|
|
</div>
|
|
<img class="icon visibility-icon" src="./svg/icon-invisibility.svg" alt="icon-visibility" />
|
|
</label>
|
|
<label class="checkbox-label layer" id="issue-layer-btn">
|
|
<div class="checkbox-label-left">
|
|
<input type="checkbox" name="layer" id="linear"
|
|
data-icon-visible="./svg/icon-visibility.svg"
|
|
data-icon-invisible="./svg/icon-invisibility.svg" />
|
|
<span class="checkbox-custom-inbox"></span>
|
|
<img class="icon" src="./svg/icon-issue.svg" alt="icon-issue" />
|
|
이슈
|
|
</div>
|
|
<img class="icon visibility-icon" src="./svg/icon-invisibility.svg" alt="icon-visibility" />
|
|
</label>
|
|
<label class="checkbox-label layer" style="display: none;">
|
|
<div class="checkbox-label-left">
|
|
<input type="checkbox" name="layer" id="linear"
|
|
data-icon-visible="./svg/icon-visibility.svg"
|
|
data-icon-invisible="./svg/icon-invisibility.svg" />
|
|
<span class="checkbox-custom-inbox"></span>
|
|
<img class="icon" src="./svg/icon-photo.svg" alt="icon-photo" />
|
|
촬영이미지
|
|
</div>
|
|
<img class="icon visibility-icon" src="./svg/icon-invisibility.svg" alt="icon-visibility" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 기본지도창 -->
|
|
<div class="window" id="baseMap-modal" style="display: none;">
|
|
<div class="window-header">
|
|
<h3>기본지도</h3>
|
|
<img class="icon modal-close" src="./svg/icon-close.svg" alt="icon-close">
|
|
</div>
|
|
<div class="window-body">
|
|
<div class="window-body-content">
|
|
<p>국토교통부</p>
|
|
<label class="radio-label">
|
|
<input type="radio" name="map" id="molit-nomal" value="vworld-normal"><span
|
|
class="radio-custom-inbox"></span>일반
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="map" id="molit-hybrid" value="vworld-hybrid"><span
|
|
class="radio-custom-inbox"></span>하이브리드
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="map" id="molit-satellite" value="vworld-satellite"><span
|
|
class="radio-custom-inbox"></span>위성
|
|
</label>
|
|
</div>
|
|
<div class="window-body-content">
|
|
<p>Carto</p>
|
|
<label class="radio-label">
|
|
<input type="radio" name="map" id="carto-nomal" value="carto-normal" checked><span
|
|
class="radio-custom-inbox"></span>일반
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="map" id="carto-light" value="carto-light"><span
|
|
class="radio-custom-inbox"></span>일반(라이트)
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="map" id="carto-dark" value="carto-dark"><span
|
|
class="radio-custom-inbox"></span>일반(다크)
|
|
</label>
|
|
</div>
|
|
<div class="window-body-content">
|
|
<p>Google</p>
|
|
<label class="radio-label">
|
|
<input type="radio" name="map" id="google-nomal" value="google-normal"><span
|
|
class="radio-custom-inbox"></span>일반
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="map" id="google-hybrid" value="google-hybrid"><span
|
|
class="radio-custom-inbox"></span>하이브리드
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="map" id="google-satellite" value="google-satellite"><span
|
|
class="radio-custom-inbox"></span>위성
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 하단 툴킷 모음 부분 ===== ===== ===== ===== ===== -->
|
|
<div class="bottom">
|
|
|
|
<!-- z-스케일창 -->
|
|
<div class="z-scaleBar">
|
|
<div class="z-scaleBar-gauge">
|
|
<input type="range" min="0" max="10" step="1" value="1" class="slider" id="zScale-slider"
|
|
style="background: linear-gradient(to right, #fff 10%, #aaa 10%);">
|
|
</div>
|
|
<img src="./svg/z-scale-number.svg" alt="z-scale-number">
|
|
</div>
|
|
|
|
<!-- 가운데 하단 툴킷 창 -->
|
|
<div class="center-tool-kit" id="func-btns" style="display: none;">
|
|
<div class="xs-icon-btn" id="func-split-btn">
|
|
<img class="icon" src="./svg/icon-division.svg" alt="icon-division">
|
|
<p>분할비교</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="func-clipping-btn">
|
|
<img class="icon" src="./svg/icon-cliping.svg" alt="icon-cliping">
|
|
<p>선형 클리핑</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="func-opacity-btn" style="display: none;">
|
|
<img class="icon" src="./svg/icon-opacity.svg" alt="icon-opacity">
|
|
<p>투명도</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="func-measurement-btn">
|
|
<img class="icon" src="./svg/icon-measurement.svg" alt="icon-measurement">
|
|
<p>측정</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="func-label-btn" style="display: none;">
|
|
<img class="icon" src="./svg/icon-newLabel.svg" alt="icon-newLabel">
|
|
<p>라벨 생성</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="func-issue-btn" style="display: none;">
|
|
<img class="icon" src="./svg/icon-newIssue.svg" alt="icon-newIssue">
|
|
<p>이슈 생성</p>
|
|
</div>
|
|
<div class="xs-icon-btn" style="display: none;">
|
|
<img class="icon" src="./svg/icon-newPhoto.svg" alt="icon-newPhoto">
|
|
<p>큐피트 수정</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 오른쪽 하단 툴킷 창 -->
|
|
<div class="right-tool-kit">
|
|
<div class="xs-icon-btn" id="set-location">
|
|
<img class="icon" src="./svg/icon-originLocate.svg" alt="icon-originLocate">
|
|
<p>원래위치</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="set-north">
|
|
<img class="icon" src="./svg/icon-northface.svg" alt="icon-northface">
|
|
<p>정북표시</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="set-topView">
|
|
<img class="icon" src="./svg/icon-topView.svg" alt="icon-topView">
|
|
<p>탑뷰</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="set-layer" style="display: none;">
|
|
<img class="icon" src="./svg/icon-layer.svg" alt="icon-layer">
|
|
<p>레이어</p>
|
|
</div>
|
|
<div class="xs-icon-btn" id="set-baseMap">
|
|
<img class="icon" src="./svg/icon-map.svg" alt="icon-map">
|
|
<p>기본지도</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
<!-- [[[[[ [[[[[ [[[[[ [[[[[ [[[[[ 작성하는 끝 ]]]]] ]]]]] ]]]]] ]]]]] ]]]]] -->
|
|
|
|
|
|
<!-- 푸터부분 ===== ===== ===== ===== ===== -->
|
|
<footer>
|
|
<div class="footer-left">
|
|
<!-- <a href="/">
|
|
<p>사용법</p>
|
|
</a>
|
|
<img class="icon" src="/svg/dot-777.svg" alt="dot-777">
|
|
<p>오류 문의 : 홍길동A 수석연구원</p> -->
|
|
<div class="footer-middle">
|
|
<button class="coordinate">
|
|
<p>좌표변환</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="footer-right">
|
|
<img class="icon" src="./svg/hanmaceng-logo.svg" alt="hanmaceng-logo">
|
|
<p>Copyright Ⓒ Hanmaceng Corp. All Rights Reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<div id="progress">
|
|
<img src="./loading.gif">
|
|
<div>loading...<br>잠시만 기다려주세요.</div>
|
|
</div>
|
|
|
|
<div id="changeCursor"></div>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<!-- <script src="../../lib/Cesium/Build/Cesium/Cesium.js"></script>
|
|
<link href="../../lib/Cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
|
<script src="../../lib/axios/dist/axios.js"></script>
|
|
<script src="../../lib/proj4/dist/proj4.js"></script> -->
|
|
<script src="http://gsim.hanmaceng.co.kr:5151/data/lib/lib/Cesium/Build/Cesium/Cesium.js"></script>
|
|
<link href="http://gsim.hanmaceng.co.kr:5151/data/lib/lib/Cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
|
<script src="http://gsim.hanmaceng.co.kr:5151/data/lib/lib/axios/dist/axios.js"></script>
|
|
<script src="http://gsim.hanmaceng.co.kr:5151/data/lib/lib/proj4/dist/proj4.js"></script>
|
|
|
|
<script src="./main.js" type="module"></script>
|
|
<script src="./style.js"></script> |