|
|
@@ -1,161 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
- <head>
|
|
|
- <meta charset="UTF-8" />
|
|
|
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
|
|
|
- <title>Map Test</title>
|
|
|
-
|
|
|
- <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=9e3f10da48feed8cdebc55db091b8ad6"></script>
|
|
|
- <script src="/libs/proj4/proj4.js"></script>
|
|
|
- <script src="/libs/v6.14.1-dist/ol.js"></script>
|
|
|
- <script src="/libs/v6.14.1-dist/ol-ext/ol-ext.js"></script>
|
|
|
- <link rel="stylesheet" href="/libs/v6.14.1-dist/ol.css" />
|
|
|
- <link rel="stylesheet" href="/libs/v6.14.1-dist/ol-ext/ol-ext.css" />
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <div style="position: absolute; left: 0px; right: 0px; height: 100%; width: 100%">
|
|
|
- <div id="map-kakao" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1"></div>
|
|
|
- <div id="map" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 0"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <script>
|
|
|
- const epsg3857 = "EPSG:3857"; // ol.Map, google
|
|
|
- const epsg5181 = "EPSG:5181"; // kakao map
|
|
|
- const epsg5179 = "EPSG:5179"; // naver map
|
|
|
- const epsg4326 = "EPSG:4326"; // wgs84, gps
|
|
|
-
|
|
|
- initProj();
|
|
|
-
|
|
|
- let center = [127.109873, 37.283203];
|
|
|
-
|
|
|
- // naver
|
|
|
- //const extent = [90112, 1192896, 2187264, 2765760]; // 4 * 3
|
|
|
- //const resolutions = [2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25];
|
|
|
-
|
|
|
- // kakao
|
|
|
- const extent = [107516.3257, 45569.7688, 292483.6743, 537099.1393];
|
|
|
- const resolutions = [2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25];
|
|
|
- const epsgCode = epsg5181;
|
|
|
- const projection = new ol.proj.Projection({
|
|
|
- code: epsgCode,
|
|
|
- extent: [-30000, -60000, 1018576, 988576],
|
|
|
- units: "m",
|
|
|
- });
|
|
|
- const projectionExtent = projection.getExtent();
|
|
|
- center = ol.proj.transform(center, epsg4326, epsg5181);
|
|
|
- //center = new ol.geom.Point(center).transform(epsg4326, epsg5181).getCoordinates();
|
|
|
- console.log(center);
|
|
|
- // 1km (1000m) 축척 기준
|
|
|
- // 카카오 : 7(1~14), 네이버 : 13
|
|
|
- // 지도 확대: 카카오는 감소, 네이버는 증가
|
|
|
-
|
|
|
- const minZoom = 1;
|
|
|
- const maxZoom = 14; // 다음지도 1 ~ 14레벨 사용
|
|
|
- const view = new ol.View({
|
|
|
- center: center, //[127.109873, 37.283203],
|
|
|
- projection: epsg5181,
|
|
|
- resolutions: resolutions,
|
|
|
- zoom: 7,
|
|
|
- minZoom: minZoom,
|
|
|
- maxZoom: maxZoom,
|
|
|
- });
|
|
|
-
|
|
|
- let interactions = ol.interaction.defaults().extend([]);
|
|
|
- //interactions = ol.interaction.defaults().extend([new app.Drag()]);
|
|
|
- interactions = ol.interaction
|
|
|
- .defaults({
|
|
|
- dragPan: false,
|
|
|
- mouseWheelZoom: false,
|
|
|
- constrainResolution: true,
|
|
|
- })
|
|
|
- .extend([
|
|
|
- new ol.interaction.DragPan({ kinetic: false }),
|
|
|
- new ol.interaction.MouseWheelZoom({
|
|
|
- duration: 0,
|
|
|
- constrainResolution: true,
|
|
|
- }),
|
|
|
- ]);
|
|
|
-
|
|
|
- //Map
|
|
|
- const map = new ol.Map({
|
|
|
- interactions: interactions,
|
|
|
- target: "map",
|
|
|
- renderer: "canvas",
|
|
|
- controls: ol.control.defaults({ attribution: false }).extend([
|
|
|
- //new ol.control.Zoom({ duration: -1000, constrainResolution: true }),
|
|
|
- //new ol.control.ZoomSlider({ duration: -1000, constrainResolution: true }),
|
|
|
- //new ol.control.ScaleLine(),
|
|
|
- new ol.control.MousePosition({
|
|
|
- projection: epsg4326,
|
|
|
- coordinateFormat: ol.coordinate.createStringXY(4),
|
|
|
- undefinedHTML: " ",
|
|
|
- }),
|
|
|
- ]),
|
|
|
- logo: false,
|
|
|
- view: view,
|
|
|
- });
|
|
|
-
|
|
|
- center = view.getCenter();
|
|
|
- const centerKakao = ol.proj.transform(center, epsg5181, epsg4326);
|
|
|
- const container = document.getElementById("map-kakao");
|
|
|
- const kakaoMap = new kakao.maps.Map(container, {
|
|
|
- center: new kakao.maps.LatLng(centerKakao[1], centerKakao[0]), //지도의 중심좌표.
|
|
|
- level: 14 - Math.round(view.getZoom()), //지도의 레벨(확대, 축소 정도)
|
|
|
- });
|
|
|
-
|
|
|
- map.on("moveend", (e) => {
|
|
|
- //지도 변경 여기서 처리
|
|
|
- console.log("map moved................");
|
|
|
- });
|
|
|
- view.on("change:center", () => {
|
|
|
- moveKakaoMap(false);
|
|
|
- });
|
|
|
- view.on("change:resolution", () => {
|
|
|
- moveKakaoMap(true);
|
|
|
- //kakaoMap.relayout(); // 지도표출하는 영역이 변경되면 반드시 호출해야함....
|
|
|
- });
|
|
|
- //console.log(kakaoMap);
|
|
|
- //console.log(view.getZoom(), kakaoMap.getLevel());
|
|
|
-
|
|
|
- function moveKakaoMap(changeZoom) {
|
|
|
- if (changeZoom && view.getZoom() != undefined) {
|
|
|
- const zoom = Math.round(view.getZoom());
|
|
|
- kakaoMap.setLevel(14 - zoom);
|
|
|
- }
|
|
|
- const c = ol.proj.transform(view.getCenter(), epsg5181, epsg4326);
|
|
|
- kakaoMap.setCenter(new kakao.maps.LatLng(c[1], c[0]));
|
|
|
- }
|
|
|
-
|
|
|
- function initProj() {
|
|
|
- // google 좌표계
|
|
|
- proj4.defs("EPSG:3857", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs");
|
|
|
- // UTM-K 좌표계, NAVER
|
|
|
- //proj4.defs("EPSG:5179", "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
|
|
|
- proj4.defs("EPSG:5179", "+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +axis=neu +no_defs");
|
|
|
-
|
|
|
- proj4.defs(
|
|
|
- "EPSG:5174",
|
|
|
- "+proj=tmerc +lat_0=38 +lon_0=127.0028902777778 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +towgs84=-115.8,474.99,674.11,1.16,-2.31,-1.63,6.43 +units=m +axis=neu +no_defs"
|
|
|
- );
|
|
|
-
|
|
|
- // 중부원점(GRS80) [200,000 500,000], KAKAO
|
|
|
- //proj4.defs("EPSG:5181", "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +units=m +no_defs");
|
|
|
- proj4.defs("EPSG:5181", "+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
|
|
|
-
|
|
|
- proj4.defs("EPSG:4326", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
|
|
|
- ol.proj.proj4.register(proj4);
|
|
|
-
|
|
|
- // 5181 : '+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +units=m +no_defs',
|
|
|
- // 5185 : '+proj=tmerc +lat_0=38 +lon_0=125 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs',
|
|
|
- // 5186 : '+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs',
|
|
|
- // 5187 : '+proj=tmerc +lat_0=38 +lon_0=129 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs',
|
|
|
- // 5188 : '+proj=tmerc +lat_0=38 +lon_0=131 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs',
|
|
|
- // 5174 : '+proj=tmerc +lat_0=38 +lon_0=127.0028902777778 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +units=m +no_defs +towgs84=-115.80,474.99,674.11,1.16,-2.31,-1.63,6.43',
|
|
|
- // 5179 : '+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +units=m +no_defs',
|
|
|
- // 4019 : '+proj=longlat +ellps=GRS80 +no_defs',
|
|
|
- }
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|