Commit @0dc1f6acef2453f5a5516148c044d8d1413c728e

김성원 2023-09-06

맵레벨 처리

@0dc1f6acef2453f5a5516148c044d8d1413c728e

88f9f28

0dc1f6a

client/views/component/OpenLayers.vue

--- client/views/component/OpenLayers.vue

+++ client/views/component/OpenLayers.vue


 import proj4 from "proj4";
 import { register } from "ol/proj/proj4";
 import { Cluster } from 'ol/source';
+import { defaults } from 'ol/interaction';
 import { fromExtent } from 'ol/geom/Polygon';
 import OSM from 'ol/source/OSM.js';
 import Stamen from 'ol/source/Stamen.js';

     loadTilesWhileInteracting : true,
     view : new View({
         projection: this.baseSource,
-        resolutions: r,
+        resolutions:  r,
         zoom: 8,
         center : transform([339979.82131209393, 265331.9344441357], "EPSG:5181", vm.baseSource), //126.9757184, 37.564388 
+        constrainResolution: true
     }),
     target: "map",
-    constrainResolution: false,
+    interactions: defaults({ zoomDuration: 0 }),
     moveTolerance: 5
 	});
   this.mouse_ev();

88f9f28

0dc1f6a

client/views/component/OpenLayersNewMap.js

--- client/views/component/OpenLayersNewMap.js

+++ client/views/component/OpenLayersNewMap.js


     resolutions: r,
   });
 
+  var daumTileGrid = new ol.tilegrid.TileGrid({
+    extent : [(-30000-524288), (-60000-524288), (494288+524288), (988576+524288)],
+    tileSize : 256,
+    resolutions : [4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25], 
+    minZoom : 1
+  });
+
   var _utils = {
     selectDefaulyMapLayer: function (map) {
       let mapLayer = new TileLayer({
         source: new XYZ({  
-          url: 'https://api.vworld.kr/req/wmts/1.0.0/' + API_KEY + '/Base/{z}/{y}/{x}.png',
+          //url: 'https://api.vworld.kr/req/wmts/1.0.0/' + API_KEY + '/Base/{z}/{y}/{x}.png',
+          projection : 'EPSG:5179',
+          tileGrid: tileGrid,
+          // ilePixelRatio: 2,  
           tileSize: 256,
+          tileLoadFunction: function (imageTile, src) {
+            console.log(src)        
+            imageTile.getImage().src = src ;
+          },
+          tileUrlFunction: function (tileCoord, pixelRatio, projection) {
+            if (tileCoord == null) return undefined;                  
+         
+            var map_src = 'https://api.vworld.kr/req/wmts/1.0.0/' + API_KEY + '/Base/'
+            // let tileCoord = imageTile.getTileCoord();  
+            var bounds = tileGrid.getTileCoordExtent(tileCoord);
+            // console.log('bounds' , bounds)
+            //바로emap의 x,y,z 이미지파일이름을 구함
+            let res =  map.getView().getResolution();
+
+      //      console.log('res',res);
+            let f = res * 256;
+            let x = Math.round((bounds[0] - mapBounds[0]) / f);
+            let y = Math.round((bounds[1] - mapBounds[1]) / f);
+            let z = map.getView().getZoom() + 6;
+
+            z = (z < 10 ? "0" + z : z);
+            map_src = map_src + 'L' + z + '/' + x + '/' + y + '.png';
+        
+            return map_src
+          },
         }),          
         properties: { name: 'base-Layer' },      
         zIndex: 2,

Add a comment

Open 0
Closed 0

List

...	...	@@ -23,6 +23,7 @@
23	23	import proj4 from "proj4";
24	24	import { register } from "ol/proj/proj4";
25	25	import { Cluster } from 'ol/source';
	26	+import { defaults } from 'ol/interaction';
26	27	import { fromExtent } from 'ol/geom/Polygon';
27	28	import OSM from 'ol/source/OSM.js';
28	29	import Stamen from 'ol/source/Stamen.js';
...	...	@@ -109,12 +110,13 @@
109	110	loadTilesWhileInteracting : true,
110	111	view : new View({
111	112	projection: this.baseSource,
112		- resolutions: r,
	113	+ resolutions: r,
113	114	zoom: 8,
114	115	center : transform([339979.82131209393, 265331.9344441357], "EPSG:5181", vm.baseSource), //126.9757184, 37.564388
	116	+ constrainResolution: true
115	117	}),
116	118	target: "map",
117		- constrainResolution: false,
	119	+ interactions: defaults({ zoomDuration: 0 }),
118	120	moveTolerance: 5
119	121	});
120	122	this.mouse_ev();

...	...	@@ -33,12 +33,47 @@
33	33	resolutions: r,
34	34	});
35	35
	36	+ var daumTileGrid = new ol.tilegrid.TileGrid({
	37	+ extent : [(-30000-524288), (-60000-524288), (494288+524288), (988576+524288)],
	38	+ tileSize : 256,
	39	+ resolutions : [4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25],
	40	+ minZoom : 1
	41	+ });
	42	+
36	43	var _utils = {
37	44	selectDefaulyMapLayer: function (map) {
38	45	let mapLayer = new TileLayer({
39	46	source: new XYZ({
40		- url: 'https://api.vworld.kr/req/wmts/1.0.0/' + API_KEY + '/Base/{z}/{y}/{x}.png',
	47	+ //url: 'https://api.vworld.kr/req/wmts/1.0.0/' + API_KEY + '/Base/{z}/{y}/{x}.png',
	48	+ projection : 'EPSG:5179',
	49	+ tileGrid: tileGrid,
	50	+ // ilePixelRatio: 2,
41	51	tileSize: 256,
	52	+ tileLoadFunction: function (imageTile, src) {
	53	+ console.log(src)
	54	+ imageTile.getImage().src = src ;
	55	+ },
	56	+ tileUrlFunction: function (tileCoord, pixelRatio, projection) {
	57	+ if (tileCoord == null) return undefined;
	58	+
	59	+ var map_src = 'https://api.vworld.kr/req/wmts/1.0.0/' + API_KEY + '/Base/'
	60	+ // let tileCoord = imageTile.getTileCoord();
	61	+ var bounds = tileGrid.getTileCoordExtent(tileCoord);
	62	+ // console.log('bounds' , bounds)
	63	+ //바로emap의 x,y,z 이미지파일이름을 구함
	64	+ let res = map.getView().getResolution();
	65	+
	66	+ // console.log('res',res);
	67	+ let f = res * 256;
	68	+ let x = Math.round((bounds[0] - mapBounds[0]) / f);
	69	+ let y = Math.round((bounds[1] - mapBounds[1]) / f);
	70	+ let z = map.getView().getZoom() + 6;
	71	+
	72	+ z = (z < 10 ? "0" + z : z);
	73	+ map_src = map_src + 'L' + z + '/' + x + '/' + y + '.png';
	74	+
	75	+ return map_src
	76	+ },
42	77	}),
43	78	properties: { name: 'base-Layer' },
44	79	zIndex: 2,

Delete comment