출처 : progworks.tistory.com/97 //feature 선택이 가능해야하는 레이어에 set해주기 layer2.set('selectable', true); //select 기능 함수 var selectResultFt = new ol.interaction.Select({ layers: function(layer) { return layer.get('selectable') == true; } }); map.addInteraction(selectResultFt); selectResultFt.on('select', function(evt){ alert("선택완료"); });
출처 : www.gisdeveloper.co.kr/?p=3921 jQuery의 기능 중 페이지의 구성 요소가 모두 준비되었을때 호출되는 이벤트를 아래처럼 등록합니다. $(function () { .... }); 앞으로 우리가 작성할 모든 코드는 위에서 …. 부분에 추가되는데요. 먼저 지도 화면에 표시할 원에 대한 피쳐(Feature)를 4000개 생성합니다. 이 피쳐의 지오메트리 타입은 포인트이므로 무작위 위치를 가지도록 ol.geom.Point로 지정하고 i와 size라는 속성값을 지정해 둡니다. size에는 i값에 따라 10 또는 20의 값이 지정되도록 하였습니다. var count = 4000; var features = new Array(count); var e = 18000000; for (va..
map.on('singleclick', function(evt) { var viewResolution = (map.getView().getResolution()); var url = wmsSource.getFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:5181', {'INFO_FORMAT': 'text/html'}); if (url) { fetch(url) .then(function(response) { return response.text(); }) .then(function(data) { console.log(data); }); } });
// Attribution Control const attributionControl = new ol.control.Attribution({ collapsible: true // 귀속(지도회사명) 보이지 않도록 }) controls: ol.control.defaults({ attributionOptions: ({ collapsible: false // 귀속(지도회사명) 보이도록 }) }).extend([ //new ol.control.ZoomSlider(), //new ol.control.ScaleLine(), new ol.control.MousePosition({ coordinateFormat: ol.coordinate.createStringXY(4), // 4 : 좌표소숫점이하 자리수 projecti..
출처 : www.gisdeveloper.co.kr/?p=2489 OL3에서 도형을 마우스로 그리기는 코드를 정리해 봅니다. OL3에서 마우스를 이용해 도형을 그리기 위한 목적으로 사용되는 레이어가 있는데요. 바로 ol.source.Vector를 소스(source)로 갖는 ol.layer.Vector 레이어입니다. Open Street Map을 레이어로 추가하기 위해 raster 변수를 정의합니다. var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); 다음으로 지도 위에 마우스로 도형을 생성하기 위한 레이어를 위해 vector라는 변수를 아래처럼 정의합니다. var source = new ol.source.Vector({ wrapX: false..
출처 : kithub.tistory.com/entry/Openlayers-%EB%A7%88%EC%9A%B0%EC%8A%A4-%EC%98%A4%EB%B2%84%EC%8B%9C-%ED%8A%B9%EC%A0%95-%EA%B5%AC%EC%97%AD-%ED%95%98%EC%9D%B4%EB%9D%BC%EC%9D%B4%ED%8C%85%ED%95%98%EA%B8%B0with-olinteractionselect 폴리곤 표출 시 특정지역을 하이라이팅 해야하는 경우가 있는데 이때 ol.interaction.select 객체를 활용하면 간단한 하이라이팅 효과를 줄 수 있습니다. 소스코드
[출처] OpenLayers3 와 VWORLD 를 사용해보자|작성자 곰구리 지도 서비스 하면 국내에서 유명한 것에는 네이버지도, 다음(카카오)지도, 구글지도 등이 있다. 워낙 다양하게 쓰이고 기능도 좋고.. 뭐든 다 좋다.. 검색도 엄청난 데이터를 기반으로 짜잔 하고 뿌려주니.. 정말 대단하다 라고 밖에 말할 수 없는 듯 싶다. 하지만, 이것을 내가 만든 프로그램에 넣을순 있어도 기능을 넣어보는 것은 쉽지가 않다. 특히 내가 모아놓은 좌표정보를 거기에다가 뿌리려면.... 어휴;; 이런 부분들을 공부해보려 하면.. GIS 엔진으로 어쩌구 저쩌구 하면서.. 디게 복잡한 이야기가 나오던데... 이건.. 혼자 해보기에는 너무 어렵다.. 그래서 블로그나 카페들에서 가끔 다루는 오픈소스기반 GIS 를 써서.. 맵을..
출처 : jeaha.dev/4 OpenLayers를 사용해서 HTML상에 지도를 띄우는 방법. 1. OpenLayers JS 파일과 CSS파일을 Include 한다. 선택 사항으로, 만약 지도가 IE나 안드로이드 v4 환경에서 보여지길 원한다면, OpenLayers script를 Include 하기전에 다음 파일을 Include해 준다. 2. 지도가 들어갈 div를 만들어 준다. 3. 화면에 보여질 지도의 크기를 CSS로 지정해 준다. 4. javascript로 지도를 띄워준다. let map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM({ url: 'https://maps.wikimedia.or..
- Total
- Today
- Yesterday
- DatePicker
- oracle
- draw.io
- springboot
- PostgreSQL
- border-collapse
- getter
- 진열사랑
- Javascript
- $.extend
- JQuery
- CSS
- @ExceptionHandler
- 정규식
- 프로젝트명변경
- 전후방탐색
- Keycode
- 여러 컬럼 update
- lombok
- caniuse
- element위치
- setter
- spring
- sumifs
- devtools
- $.each
- QueryDSL
- object key
- ul li로 테이블
- excel
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |