From: prashantgosai11 Date: Tue, 12 Jan 2021 17:59:03 +0530 Subject: gis sidebar --- gis sidebar --- --- 'a/src/main/java/com/GisSatellite/Server/Controller/SatelliteController.java' +++ b/src/main/java/com/GisSatellite/Server/Controller/SatelliteController.java @@ -64,6 +64,12 @@ public class SatelliteController { } + @GetMapping("/map") + public String map() { + return "map"; + + + } /* * @RequestMapping("/attributenew") public String homenew() { return --- 'a/src/main/resources/static/assets/css/style.css' +++ b/src/main/resources/static/assets/css/style.css @@ -2197,7 +2197,7 @@ form label { .shw-rside { right: 0px; - width: 240px; + width: 360px; display: block } @@ -4306,7 +4306,7 @@ table.dataTable thead .sorting:after { .vtabs .tab-content { display: table-cell; - padding: 20px; + padding: 10px; vertical-align: top } --- 'a/src/main/resources/static/customol/js/identify.js' +++ b/src/main/resources/static/customol/js/identify.js @@ -38,7 +38,7 @@ var Groupcountt=0; // - groupcontentt +='
'; + groupcontentt +='
'; $('#groupss').append($(groupcontentt)); @@ -51,7 +51,7 @@ var Groupcountt=0; var basecontentt = ''; let layernamee=sublayerr.get('name'); - basecontentt += '
'; + basecontentt += '
'; $('#layerr'+i).append($(basecontentt)); --- 'a/src/main/resources/static/customol/js/layerSwitcher.js' +++ b/src/main/resources/static/customol/js/layerSwitcher.js @@ -12,7 +12,7 @@ var Groupcount=0; groupcontent+=''; // - groupcontent +='
'; + groupcontent +='
'; $('#groups').append($(groupcontent)); @@ -25,7 +25,7 @@ var Groupcount=0; var basecontent = ''; let layername=sublayer.get('name'); - basecontent += '
'; + basecontent += '
'; $('#layer'+i).append($(basecontent)); --- 'a/src/main/resources/static/customol/js/main.js' +++ b/src/main/resources/static/customol/js/main.js @@ -96,8 +96,8 @@ var map = new ol.Map({ //CommonlayersGroup, //measure(map); controllers(map); -//navigation(map); -//switchlayers(map); +navigation(map); +switchlayers(map); getMousePosition(map); scaleline(map); //exportpdf(map); --- /dev/null +++ b/src/main/resources/static/customol/js/mainn.js @@ -0,0 +1,79 @@ +/** + * Elements that make up the popup. + */ +var container = document.getElementById('popup'); +var content = document.getElementById('popup-content'); +var closer = document.getElementById('popup-closer'); + +/** + * Create an overlay to anchor the popup to the map. + */ +var overlay = new ol.Overlay({ + element: container, + autoPan: true, + autoPanAnimation: { + duration: 250, + }, +}); + +/** + * Add a click handler to hide the popup. + * @return {boolean} Don't follow the href. + */ +closer.onclick = function () { + overlay.setPosition(undefined); + closer.blur(); + return false; +}; +window.onload=init; + + +function init() +{ + let india=[ 81.191694, 23.8086 ]; +let jalandhar=[75.57917,31.32556]; +var map = new ol.Map({ + overlays: [overlay], + target: 'target-maps', + + view: new ol.View({ + center : ol.proj.transform(india, 'EPSG:4326','EPSG:3857'), + zoom:4.0, + // zoom :9.5, + minZoom:4, + maxZoom: 17 + }), + layers:[ + z + ], + controls: ol.control.defaults({ + zoom: false, + attribution: true, + rotate: false + }).extend([]), + // new ol.control.FullScreen() + + + }); + +legend(map); +geom(map); +//buffer(map); +controllers(map); +navigation(map); +switchlayers(map); +getMousePosition(map); +scaleline(map); +exportpdf(map); +identify(map); +//addGeom(map); +commonfunctions(map); +//swipe(map); +//geocoder(map); + + + + + + +} --- /dev/null +++ b/src/main/resources/static/customol/jsnew/LayersGroup/IdentifyLayerGroup.js @@ -0,0 +1,29 @@ +//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS'; +//var wmsurl='https://gis.ncog.gov.in/GISWeb/wms' +var wmsurl='https://gis.ncog.gov.in/GeoserverWebAPI/wms62' +var IdentifyLayerGroup = new ol.layer.Group({ + layers : [ + + + + new ol.layer.Tile({ + source : new ol.source.TileWMS({ + url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms', + crossOrigin: 'anonymous', + params : { + 'LAYERS' : 'park_boundary_iis', + format_options:'dpi:180', + version : '1.1.1', + STYLES:'' + } + }), + showLegend: true, + //maxResolution : 256, + name : 'Park Boundry', + visible:false + }), + + + ], + name : 'Identify' + }); --- /dev/null +++ b/src/main/resources/static/customol/jsnew/LayersGroup/commonlayersGroup.js @@ -0,0 +1,43 @@ +var CommonlayersGroup = new ol.layer.Group({ + layers : [ + + new ol.layer.Tile({ + visible : false, + preload : Infinity, + opacity: 1, + source : new ol.source.BingMaps( + { + key : 'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF', + imagerySet : 'Aerial' + // use maxZoom 19 to see stretched tiles instead of the BingMaps + // "no photos at this zoom level" tiles + // maxZoom: 19 + }), + name : 'Aerial' + }), + new ol.layer.Tile({ + visible : false, + preload : Infinity, + source : new ol.source.BingMaps({ + key :'Auw0s19PwLEd-w-GFNBPzqs2lekVJE5KjKtxg0EwzB6nuvocKYwMJ7ZJnfnltPgM', //'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF', + imagerySet : 'AerialWithLabels', + // use maxZoom 19 to see stretched tiles instead of the BingMaps + // "no photos at this zoom level" tiles + // maxZoom: 19 + }), + name : 'Aerial+Labels' + }), + new ol.layer.Tile({ + visible : false, + source : new ol.source.OSM(), + name : 'OSM' + }), + new ol.layer.Tile({ + visible : true, + source: new ol.source.TileImage({url: 'http://maps.google.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i375060738!3m9!2spl!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0'}), + name : 'Google Map' + }) + + ], + name : 'Basemaps' + }); --- /dev/null +++ b/src/main/resources/static/customol/jsnew/LayersGroup/geomGroup.js @@ -0,0 +1,27 @@ +//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS'; +var wmsurl='http://localhost:8080/geoserver/PostgresSql/wms' +var geomLayerGroup = new ol.layer.Group({ + layers : [ + + + new ol.layer.Tile({ + source : new ol.source.TileWMS({ + url :'http://localhost:8080/geoserver/PostgresSql/wms', + // crossOrigin: 'anonymous', + params : { + 'LAYERS' : 'geom', + format_options:'dpi:180', + version : '1.1.1', + STYLES:'' + } + }), + showLegend: false, + //maxResolution : 256, + name : 'Geom', + visible:true + }), + + + ], + name : 'GeomGroup' + }); --- /dev/null +++ b/src/main/resources/static/customol/jsnew/LayersGroup/indianmapLayersGroup.js @@ -0,0 +1,86 @@ +//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS'; +var wmsurl='https://gis.ncog.gov.in/GISWeb/wms'; +//var wmsurl='https://gis.ncog.gov.in/GeoserverWebAPI/wms62' +var st="STCODE11='03'"; +var di="dtcode11 ='037'"; +var ta="dtcode11 ='037'"; +var vil="DT_2011 ='037'"; + +var indianMapLayersGroup = new ol.layer.Group({ + layers : [ + + + new ol.layer.Tile({ + source : new ol.source.TileWMS({ + url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms', + crossOrigin: 'anonymous', + params : { + 'LAYERS' : 'VillageIndia', + format_options:'dpi:180', + version : '1.1.1', + // CQL_FILTER : vil + } + }), + showLegend: true, + maxResolution : 256, + name : 'Village', + visible:true + }), + + new ol.layer.Tile({ + source : new ol.source.TileWMS({ + url : wmsurl,//'http://192.168.1.89:8090/geoserver/cite/wms', + crossOrigin: 'anonymous', + params : { + layers : 'TalukaIndia', + version : '1.1.1',format_options:'dpi:110', + // CQL_FILTER : ta + } + }), + showLegend: true, + maxResolution : 1024, + name : 'Taluka', + visible:true + }), + + new ol.layer.Tile({ + source : new ol.source.TileWMS({ + url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms', + crossOrigin: 'anonymous', + params : { + layers : 'DistrictIndia', + // CQL_FILTER : di, + version : '1.1.1',format_options:'dpi:110' + //version : '1.1.1',CQL_FILTER : 'dtcode11 IN (001,003,004)' ,format_options:'dpi:110' + } + }), + showLegend: true, + maxResolution : 2048, + name : 'District', + visible:true + + }) + , + + + + new ol.layer.Tile({ + source : new ol.source.TileWMS({ + url : wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms', + crossOrigin: 'anonymous', + params : { + layers : 'StateIndia', + // CQL_FILTER : st, + version : '1.1.1',format_options:'dpi:110', + //CQL_FILTER : di + //version : '1.1.1',CQL_FILTER : 'STCODE11 IN (01,02,004)' ,format_options:'dpi:110' + } + }), + styles:'IndiaState', + showLegend: true, + visible:true, + name : 'State' + }), + ], + name : 'India Boundaries' + }); --- /dev/null +++ b/src/main/resources/static/customol/jsnew/LayersGroup/transportGroup.js @@ -0,0 +1,58 @@ +//var wmsurl='https://gis.ncog.gov.in/CoronaAPI/CoronaWMS'; +var wmsurl='https://gis.ncog.gov.in/GISWeb/wms' +var transportLayerGroup = new ol.layer.Group({ + layers : [ + + + new ol.layer.Tile({ + source : new ol.source.TileWMS({ + url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms', + crossOrigin: 'anonymous', + params : { + 'LAYERS' : 'india_airport_location_basemap', + format_options:'dpi:180', + version : '1.1.1', + STYLES:'' + } + }), + showLegend: false, + //maxResolution : 256, + name : 'Airport', + visible:false + }), + + new ol.layer.Tile({ + source : new ol.source.TileWMS({ + url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms', + crossOrigin: 'anonymous', + params : { + 'LAYERS' : 'india_nhai', + format_options:'dpi:180', + version : '1.1.1', + STYLES:'' + } + }), + showLegend: true, + //maxResolution : 256, + name : 'National Highway', + visible:false + }), + // new ol.layer.Tile({ + // source : new ol.source.TileWMS({ + // url :wmsurl,// 'http://192.168.1.89:8090/geoserver/cite/wms', + // crossOrigin: 'anonymous', + // params : { + // 'LAYERS' : 'plot_boundary_new', + // format_options:'dpi:180', + // version : '1.1.1', + // STYLES:'' + // } + // }), + // showLegend: true, + // //maxResolution : 256, + // name : 'Dehgam', + // visible:true + // }) + ], + name : 'Transport' + }); --- /dev/null +++ b/src/main/resources/static/customol/jsnew/buffer/buffer.js @@ -0,0 +1,185 @@ +var map; +var clickEvent; +var range = document.getElementById('range'); +var value=document.getElementById('bufferrange').defaultValue; +var selecterange=value; + +function buffer(m) +{ + map=m; +range.innerHTML=value; + + + +} +$("#buffer").bind("click", function() { + + activatebuffer(); +}); +function activatebuffer() +{ + + deactivateClick(); + setCursor(cursorStyle); + + clickEvent = (evt) => { + // map.removeLayer(vectorLayer_buffer); + // vectorSource.getSource().clear(); + var features=[]; + var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'); + + var lat= lonlat[0]; + var lon=lonlat[1]; + var coordMin = ol.proj.fromLonLat([lon,lat], 'EPSG:3857'); + var coordMax = ol.proj.fromLonLat([lon,lat], 'EPSG:3857'); + var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]]; + + + + extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857'); + + + map.getView().fit(extent); + map.getView().setCenter(ol.proj.transform([lat, lon], 'EPSG:4326', 'EPSG:3857')); + + map.getView().setZoom(12); + + + getvillagebuffer(lat,lon,selecterange); + console.log(value) + var point = new ol.geom.Circle(ol.proj.transform([lat,lon],'EPSG:4326', 'EPSG:3857'),selecterange*1210); + console.log(point.getCenter()); + console.log(point); + var pointFeature = new ol.Feature(point); + features.push(pointFeature); + + + var vectorSource = new ol.source.Vector({ + projection: 'EPSG:4326', + features: features + }); + var vectorLayer_buffer = new ol.layer.Vector({ + source : vectorSource, + style : customStyleFunction() + }); + console.log(vectorLayer_buffer) + map.addLayer(vectorLayer_buffer); + + + + + + }; + + + + + map.on('singleclick', clickEvent); +} +function customStyleFunction() +{ + return [ new ol.style.Style({ + fill : new ol.style.Fill({ + + opacity : 0.6, + color : 'rgba(255,255,204,0.3)' + }), + stroke : new ol.style.Stroke({ + width : 2, + + color : 'red', + radius : 1 + }), + image : new ol.style.Circle({ + fill : new ol.style.Fill({ + + color : 'rgba(51, 204, 255,0.3)' + }), + stroke : new ol.style.Stroke({ + width : 1, + color : 'blue' + + }), + radius : 3 + }), + })]; + + +} +var bufferrange=$('#bufferrange'); +bufferrange.on('change', function () { + + range.innerHTML = ''; + + if(this.value!=="") + { + range.innerHTML = this.value ; + selecterange=this.value; + } + + + + + + + + + }); + function getvillagebuffer(lat,lon,value) + { + + var features = []; + var j=getBuffer(lat,lon,value); + + if(j!="") { + + var data={"lat":lat,"lon":lon,"range":value}; + var dataObjectString = JSON.stringify(data); + + console.log(dataObjectString); + + var enc = Base64.encode(dataObjectString); + + window.open('bufferReport?data='+enc,"_blank"); + + console.log(j); + var geomP, feature; + + + + for (var i = 0; i < j.length; i++) { + latitude=j[i].lon; + longitude=j[i].lat; + geomP = new ol.geom.Point(ol.proj.transform([latitude, longitude ], 'EPSG:4326', 'EPSG:3857')); + feature = new ol.Feature(geomP); + features.push(feature); + } + + var point_geom = new ol.geom.Point( + [20, 20] + ); + point_feature.setGeometry(point_geom); + var vector_layer = new ol.layer.Vector({ + source: new ol.source.Vector({ + features: [point_feature] + }) + }) + map.addLayer(vector_layer); + + var vectorSource = new ol.source.Vector({ + + features : features + }); + + var vectorLayer = new ol.layer.Vector({ + source : vectorSource, + style : customStyleFunction() + }); + console.log(vectorLayer); + map.addLayer(vectorLayer); + + + }; + + + } \ No newline at end of file --- /dev/null +++ b/src/main/resources/static/customol/jsnew/buffer/bufferReport.js @@ -0,0 +1,126 @@ +$(document).ready(function() { + var url_string = window.location; + var url = new URL(url_string); + var data = url.searchParams.get("data"); + var d=JSON.parse(Base64.decode(data)); +console.log(d); + let lat=d.lat; + let lon=d.lon; + let range=d.range; + + var j=getBuffer(lat,lon,range); + + if(j) { + + loadtable(j); + + + + + + + }; + +}); + + + + function loadtable(data) +{ + + + if ( $.fn.DataTable.isDataTable( '#BufferReportList' ) ) { + $("#BufferReportList").dataTable().fnDestroy(); + $('#BufferReportList').empty(); + } + var gid=data.map(x=>x.gid); + + console.log(gid); + var table=$('#BufferReportList').DataTable({ + pageLength : 10, + dom: 'Bfrtip', + + 'processing': true, + + "data":data , + + columns : [{ + title : 'SR_NO', + data : 'gid' + + }, { + title : 'First Name', + data : 'firstname' + }, { + title : 'Last Name', + data : 'lastname' + }, { + title : 'STATE', + data : 'statename' + }, { + title : 'DISTRICT', + data : 'distictname', + + }, { + title : 'TALUKA', + data : 'talukaname', + + },{ + title : 'VILLAGE', + data : 'villagename', + + } + ,{title : 'Action', + data: null, + className: "center", + defaultContent: '' + },{title : 'Action', + data: null, + className: "center", + defaultContent: '' + } + + ] + + }); + + $('#BufferReportList tbody').on('click', 'button#update', function () + { + + var data = table.row( $(this).closest('tr') ).data(); + + + id=data['gid']; + + $("#editId").val(id); + $("#editASIMonumentFrom").submit(); + + + + } ) + + + $('#BufferReportList tbody').on('click', 'button#delete', function () + { + + var data = table.row( $(this).closest('tr') ).data(); + + + id=data['gid']; + + + var data=DeleteGeomreportbyId(id); + loadtable(data); + location.reload(); + } ) + + + + +} + + + + + + --- /dev/null +++ b/src/main/resources/static/customol/jsnew/commonfunctions/Base64.js @@ -0,0 +1,125 @@ +var Base64 = { + _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", + encode: function(input) { + var output = ""; + var chr1, chr2, chr3, enc1, enc2, enc3, enc4; + var i = 0; + input = Base64._utf8_encode(input); + while (i < input.length) { + chr1 = input.charCodeAt(i++); + chr2 = input.charCodeAt(i++); + chr3 = input.charCodeAt(i++); + enc1 = chr1 >> 2; + enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); + enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); + enc4 = chr3 & 63; + + if (isNaN(chr2)) { + enc3 = enc4 = 64; + } else if (isNaN(chr3)) { + enc4 = 64; + } + + output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4); + + } + + return output; + }, + + + decode: function(input) { + var output = ""; + var chr1, chr2, chr3; + var enc1, enc2, enc3, enc4; + var i = 0; + + input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); + + while (i < input.length) { + + enc1 = this._keyStr.indexOf(input.charAt(i++)); + enc2 = this._keyStr.indexOf(input.charAt(i++)); + enc3 = this._keyStr.indexOf(input.charAt(i++)); + enc4 = this._keyStr.indexOf(input.charAt(i++)); + + chr1 = (enc1 << 2) | (enc2 >> 4); + chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); + chr3 = ((enc3 & 3) << 6) | enc4; + + output = output + String.fromCharCode(chr1); + + if (enc3 != 64) { + output = output + String.fromCharCode(chr2); + } + if (enc4 != 64) { + output = output + String.fromCharCode(chr3); + } + + } + + output = Base64._utf8_decode(output); + + return output; + + }, + + _utf8_encode: function(string) { + string = string.replace(/\r\n/g, "\n"); + var utftext = ""; + + for (var n = 0; n < string.length; n++) { + + var c = string.charCodeAt(n); + + if (c < 128) { + utftext += String.fromCharCode(c); + } + else if ((c > 127) && (c < 2048)) { + utftext += String.fromCharCode((c >> 6) | 192); + utftext += String.fromCharCode((c & 63) | 128); + } + else { + utftext += String.fromCharCode((c >> 12) | 224); + utftext += String.fromCharCode(((c >> 6) & 63) | 128); + utftext += String.fromCharCode((c & 63) | 128); + } + + } + + return utftext; + }, + + _utf8_decode: function(utftext) { + var string = ""; + var i = 0; + var c = c1 = c2 = 0; + + while (i < utftext.length) { + + c = utftext.charCodeAt(i); + + if (c < 128) { + string += String.fromCharCode(c); + i++; + } + else if ((c > 191) && (c < 224)) { + c2 = utftext.charCodeAt(i + 1); + string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); + i += 2; + } + else { + c2 = utftext.charCodeAt(i + 1); + c3 = utftext.charCodeAt(i + 2); + string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); + i += 3; + } + + } + + return string; + } + + } + + \ No newline at end of file --- /dev/null +++ b/src/main/resources/static/customol/jsnew/commonfunctions/clear.js @@ -0,0 +1,24 @@ +var map; + +function clear(m) +{ +map=m; +} + +function deactivateClick() +{ + + setCurser(''); + if (clickEvent) { + map.un('singleclick', clickEvent); + } +} +function setCurser(cursorType){ + if (map) { + + const target = map.getTarget(); + // jQuery hack to convert the mouse cursor to a crosshair + const jTarget = typeof target === 'string' ? $('#' + target) : $(target); + jTarget.css('cursor', cursorType); + } +} \ No newline at end of file --- /dev/null +++ b/src/main/resources/static/customol/jsnew/commonfunctions/commonfunctions.js @@ -0,0 +1,15 @@ +var map; +function commonfunctions(m) +{ +map=m; + +} +function setCursor(cursorType) + { + if (map) { + const target = map.getTarget(); + // jQuery hack to convert the mouse cursor to a crosshair + const jTarget = typeof target === 'string' ? $('#' + target) : $(target); + jTarget.css('cursor', cursorType); + } + } \ No newline at end of file --- /dev/null +++ b/src/main/resources/static/customol/jsnew/controllers/controllers.js @@ -0,0 +1,100 @@ + +var map; +function controllers(maps) +{ + map=maps; +} + +function zoomIn() +{ + +map.getView().animate({ + zoom: map.getView().getZoom() + 1, + duration: 500 + }); + + + + +} + +function zoomOut() +{ + map.getView().animate({ + zoom: map.getView().getZoom() - 1, + duration: 500 + }); +} + +function defaultmap() +{ + //for Gujarat +// var extent = [ 66.9973, 19.4081, 75.5887, 24.9398]; + //for India + var extent = [68.17665, 7.96553, 97.40256, 35.49401]; +extent = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857'); +map.getView().fit(extent); + map.getView().animate({ + zoom: 4.7, + duration: 600 + }); + +} +function fullscreen() +{ + + var elem = document.getElementById('target-map'); + if (elem.requestFullscreen) { + elem.requestFullscreen(); + } else if (elem.msRequestFullscreen) { + elem.msRequestFullscreen(); + } else if (elem.mozRequestFullScreen) { + elem.mozRequestFullScreen(); + } else if (elem.webkitRequestFullscreen) { + elem.webkitRequestFullscreen(); + } +} +function geolocation() +{ + + // if (navigator.geolocation) { + // navigator.geolocation.getCurrentPosition(showPosition); + // } else { + // alert( "Geolocation is not supported by this browser."); + // } + + + + + var geolocation = new ol.Geolocation({ + tracking: true + }); + + + geolocation.on('change:position', function() { + var coordinate = geolocation.getPosition(); + let lat=coordinate[1]; + let lon=coordinate[0]; + if(lat!=null && lon!=null) + { + var coordMin = ol.proj.fromLonLat([lon,lat], 'EPSG:3857'); + var coordMax = ol.proj.fromLonLat([lon,lat], 'EPSG:3857'); + var extent=[coordMin[0],coordMin[1],coordMax[0],coordMax[1]]; + map.getView().fit(extent,map.getSize()); + } + else + { + alert("Position not found"); + } + + // map.getView().setCenter(coordinate); + + }); + + +} +function showPosition(position) { +alert(position) + var l= "Latitude: " + position.coords.latitude ; + var lon="
Longitude: " + position.coords.longitude; + } --- /dev/null +++ b/src/main/resources/static/customol/jsnew/controllers/mouse-position.js @@ -0,0 +1,36 @@ +function getMousePosition(map) +{ + var latnong=fromLotlong(map.getView().getCenter()); + + var pointerMoveListener = map.on('pointermove', (evt) => { + if (evt.dragging) + { + return; + } + else + { + + + latnong = fromLotlong(evt.coordinate); + + document.getElementById("latlon").innerHTML=latnong; + } + + }); + document.getElementById("latlon").innerHTML=latnong; + + + + function fromLotlong(coords) + { + + let lonlat = ol.proj.transform(coords, 'EPSG:3857', 'EPSG:4326'); + let formattedLatlong= []; + return formattedLatlong=lonlat.map(x=>x.toFixed(4)); + + + + } + + +} \ No newline at end of file --- /dev/null +++ b/src/main/resources/static/customol/jsnew/controllers/scaleline.js @@ -0,0 +1,13 @@ +function scaleline(map) +{ + let target = map.getTarget(); + console.log(target); + const scaleLineControl = new ol.control.ScaleLine({ + target: document.getElementById(scale), + + }); + map.addControl(scaleLineControl); + + +} + --- /dev/null +++ b/src/main/resources/static/customol/jsnew/export/exportpdf.js @@ -0,0 +1,129 @@ +function exportpdf(map) +{ + + var dims = { + a0: [1189, 841], + a1: [841, 594], + a2: [594, 420], + a3: [420, 297], + a4: [297, 210], + a5: [210, 148] + }; + var exportButton = document.getElementById('export-pdf'); + + exportButton.addEventListener('click', function() { + + exportButton.disabled = true; + document.body.style.cursor = 'progress'; + + var format = document.getElementById('format').value; + var resolution = document.getElementById('resolution').value; + var dim = dims[format]; + var width = Math.round(dim[0] * resolution / 25.4); + var height = Math.round(dim[1] * resolution / 25.4); + var size = map.getSize(); + var viewResolution = map.getView().getResolution(); + + map.once('rendercomplete', function() { + var mapCanvas = document.createElement('canvas'); + mapCanvas.width = width; + mapCanvas.height = height; + var mapContext = mapCanvas.getContext('2d'); + Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) { + if (canvas.width > 0) { + var opacity = canvas.parentNode.style.opacity; + mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); + var transform = canvas.style.transform; + // Get the transform parameters from the style's transform matrix + var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number); + // Apply the transform to the export map context + CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix); + mapContext.drawImage(canvas, 0, 0); + } + }); + var pdf = new jsPDF('landscape', undefined, format); + pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]); + pdf.save('map.pdf'); + // Reset original map size + map.setSize(size); + map.getView().setResolution(viewResolution); + exportButton.disabled = false; + document.body.style.cursor = 'auto'; + }); + + // Set print size + var printSize = [width, height]; + map.setSize(printSize); + var scaling = Math.min(width / size[0], height / size[1]); + map.getView().setResolution(viewResolution / scaling); + + }, false); + + + + +}function exportpdf(map) +{ + + var dims = { + a0: [1189, 841], + a1: [841, 594], + a2: [594, 420], + a3: [420, 297], + a4: [297, 210], + a5: [210, 148] + }; + var exportButton = document.getElementById('export-pdf'); + + exportButton.addEventListener('click', function() { + + exportButton.disabled = true; + document.body.style.cursor = 'progress'; + + var format = document.getElementById('format').value; + var resolution = document.getElementById('resolution').value; + var dim = dims[format]; + var width = Math.round(dim[0] * resolution / 25.4); + var height = Math.round(dim[1] * resolution / 25.4); + var size = map.getSize(); + var viewResolution = map.getView().getResolution(); + + map.once('rendercomplete', function() { + var mapCanvas = document.createElement('canvas'); + mapCanvas.width = width; + mapCanvas.height = height; + var mapContext = mapCanvas.getContext('2d'); + Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) { + if (canvas.width > 0) { + var opacity = canvas.parentNode.style.opacity; + mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); + var transform = canvas.style.transform; + // Get the transform parameters from the style's transform matrix + var matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number); + // Apply the transform to the export map context + CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix); + mapContext.drawImage(canvas, 0, 0); + } + }); + var pdf = new jsPDF('landscape', undefined, format); + pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]); + pdf.save('map.pdf'); + // Reset original map size + map.setSize(size); + map.getView().setResolution(viewResolution); + exportButton.disabled = false; + document.body.style.cursor = 'auto'; + }); + + // Set print size + var printSize = [width, height]; + map.setSize(printSize); + var scaling = Math.min(width / size[0], height / size[1]); + map.getView().setResolution(viewResolution / scaling); + + }, false); + + + + +} \ No newline at end of file --- /dev/null +++ b/src/main/resources/static/customol/jsnew/findbylocation/findbylocation.js @@ -0,0 +1,206 @@ +var map; +var maxFeatures =10; +var cursorStyle = 'crosshair'; +var placeholder = 'Select query layer'; +var zoomOnRowClick = true; +var hlightFeatures = true; + +var clickEvent; +var vectorLayer6= new ol.layer.Vector; +var features= new ol.Feature; +var hoverLayer = new ol.layer.Vector({ + source: new ol.source.Vector() + }); +var latitude; +var logitude; +var geojson=new ol.format.GeoJSON(); +var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo; + +function findbylocation(maps) +{ + + map=maps; + + + + + var layer = findlayeByName(map.getLayerGroup(), 'name','Village'); + + activateClick(layer); +} + +function findlayeByName(layer, key, value) { + + if (layer.get(key) === value) { + return layer; + } + // Find recursively if it is a group + if (layer.getLayers) { + var layers = layer.getLayers().getArray(), len = layers.length, result; + for (var i = 0; i < len; i++) { + result = findlayeByName(layers[i], key, value); + if (result) { + return result; + } + } + } + return null; +} + +function addHoverLayer() +{ + + + if (placeholder) { + hoverLayer.setStyle(hoverStyle); + } + if (highlightFeatures) { + + map.addLayer(hoverLayer); + } +} +function activateClick(layer) +{ + hoverLayer.getSource().clear(); + deactivateClick(); + + + + + + + + + + + clickEvent = (evt) => { +console.log(vectorLayer6); + // if(layer!=null) + /* { + features = layer.getSource().getFeatures(); + features.forEach((feature) => { + layer.getSource().removeFeature(feature); + }); */ + // } + + + + let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'); + + latitude= lonlat[0]; + logitude=lonlat[1]; + + + // this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,); + + + + + + features = []; + filterdata=[]; + + if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile) + { + + const url = _getFeatureInfoUrl( + layer.getSource(), + evt.coordinate, + map.getView().getResolution(), + map.getView().getProjection(), + + ); + } + +/* if (url) + { + + + + $.get(url, function(response) + + { + response = JSON.parse(response); + + var a= response.features[0].properties.vill_id + + + + + + + if (data.hasOwnProperty('features')) + { + + // convert the GeoJSON response to Feature array + features = geojson.readFeatures(data); + + + + features.forEach((feat) => { + const props = { ...feat.getProperties() }; + console.log(props.dist_id); + + }); + + + + + } + }); + + + } + } + else + + { + alert('Currently only WMS query is supported. Please select another layer!') + + + + }*/ + }; + map.on('singleclick', clickEvent); + + +} + +function deactivateClick() { + setCursor(''); + if (clickEvent) { + map.un('singleclick', sclickEvent); + } + } + +function setCursor(cursorType) { + if (map) { + const target = map.getTarget(); + // jQuery hack to convert the mouse cursor to a crosshair + const jTarget = typeof target === 'string' ? $('#' + target) : $(target); + jTarget.css('cursor', cursorType); + } + } + +function _getFeatureInfoUrl( source,coordinate,resolution, srs) + { + + const styles = source.getParams().hasOwnProperty('STYLES') + ? source.getParams().STYLES + : ''; + /* const url = source.getSource().getGetFeatureInfoUrl( + coordinate, resolution, 'EPSG:3857', + {'INFO_FORMAT': 'application/json'}); */ + + const url = source.getGetFeatureInfoUrl(coordinate, resolution, srs,{ + INFO_FORMAT: 'application/json', + FEATURE_COUNT: maxFeatures, + STYLES: styles + + }); + + /* const url = source.getGetFeatureInfoUrl(coordinate, resolution, 'EPSG:3857', + {'INFO_FORMAT': 'application/json'})*/ + + return url; + } \ No newline at end of file --- /dev/null +++ b/src/main/resources/static/customol/jsnew/geocoder/geocoder.js @@ -0,0 +1,40 @@ +var map; +function geocoder(m) + { + map=m; + + + + + +var geocoder = new Geocoder('nominatim', { + provider : 'osm', + key : ' AIzaSyClQ0GOW55zhw4PvFh73FyGLHdSd4bJfpM', + lang : 'en', + //targetType: 'text-input', + placeholder : 'Search location', + autoComplete: true, + limit : 5, + keepOpen : false +}); +map.addControl(geocoder); + + + + + +//Listen when an address is chosen +geocoder.on('addresschosen', function(evt){ + var feature = evt.feature, + coord = evt.coordinate, + address = evt.address; + geocoder.getSource().clear(); + geocoder.getSource().addFeature(feature); + // some popup solution + content.innerHTML = '

'+ address.formatted +'

'; + overlay.setPosition(coord); +}); + + + + } --- /dev/null +++ b/src/main/resources/static/customol/jsnew/geom/addGeom.js @@ -0,0 +1,317 @@ +var map; +var clickEvent; +var vectorLayer6=ol.layer.Vector; +var features= ol.Feature[10]; +var geojson = new ol.format.GeoJSON; +var hoverLayer =ol.layer.Vector; +var vectorSource; +var zoomOnRowClick; +var maxFeatures; + var highlightFeatures; + var cursorStyle; + var hoverStyle= [ + new ol.style.Style({ + fill: new ol.style.Fill({ + color: [255, 255, 0, 0.5] + }), + stroke: new ol.style.Stroke({ + color: [0,204,0,1], + width: 4 + }) + }) + ]; + + var pointStyle =[ + + new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255, 0.2)' + }), + stroke: new ol.style.Stroke({ + color: 'red', + width: 1 + }), + image: new ol.style.Circle({ + radius: 3, + fill: new ol.style.Fill({ + color: 'red' + }) + }) + }) + ]; + + + +function addGeom(m) +{ +map=m; +maxFeatures = 1; +cursorStyle = 'crosshair'; +zoomOnRowClick = true; +highlightFeatures = true; + +addHoverLayer(); + var layer = findlayeByName(map.getLayerGroup(), 'name','Village'); +activateGeomLayer(layer); +} +$("#geom").bind("click", function() { + + + }); +function addHoverLayer() + { + + hoverLayer = new ol.layer.Vector({ + source: new ol.source.Vector() + }); + + pointLayer = new ol.layer.Vector({ + source: new ol.source.Vector() + }); + if(pointStyle) + { + pointLayer.setStyle(pointStyle); + } + if (hoverStyle) { + + hoverLayer.setStyle(hoverStyle); + } + map.addLayer(pointLayer); + if (highlightFeatures) { + + map.addLayer(hoverLayer); + + } + + + + + } + function customStyleFunction () + { + return [ + new ol.style.Style({ + fill: new ol.style.Fill({ + color: [255, 255, 0, 0.5] + }), + stroke: new ol.style.Stroke({ + color: [0,204,0,1], + width: 4 + }) + }) + ]; + } +function activateGeomLayer(layer) +{ +console.log(layer); +hoverLayer.getSource().clear(); +pointLayer.getSource().clear(); + + + +deactivateClick(); +setCursor(cursorStyle); + + + +clickEvent = (evt) => +{ + +// onFeatureSelected(evt); + +// if(vectorLayer6!=null) +// { + +// var f = vectorLayer6.getSource().getFeatures(); +// f.forEach((fe) => { +// vectorLayer6.getSource().removeFeature(fe); +// }); +//} + + + + + var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'); + + latitude= lonlat[0]; + logitude=lonlat[1]; + + +// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,); + + + + + + features = []; + filterdata=[]; + + if (layer instanceof ol.layer.Tile ||layer instanceof layer.Image || layer instanceof layer.Vector || layer instanceof layer.Heatmap || layer instanceof layer.Vector || layer instanceof layer.Layer || layer instanceof layer.VectorTile) + { + + + + const styles = layer.getSource().getParams().STYLES; + + +const url = layer.getSource().getFeatureInfoUrl( + + evt.coordinate, + map.getView().getResolution(), + map.getView().getProjection(), + { + 'INFO_FORMAT' : 'application/json', + 'FEATURE_COUNT': maxFeatures, + 'STYLES': styles + + } + + ); + + + + if (url) { + + $.get(url, function(response) { + + hoverLayer.getSource().clear(); + pointLayer.getSource().clear(); + + + features = geojson.readFeatures(response); + features.forEach((feat) => { + console.log(feat) + const extent=feat.getGeometry().getExtent(); + + hoverLayer.getSource().addFeature(feat); + + + map.getView().fit(extent,{ duration: 600}); + + const props = { ...feat.getProperties() }; + console.log(props) + }); + var response = JSON.parse(response); + + + const a=response.features.map(x=>x.properties)[0]; + console.log(a); + let lat=latitude; + let lon=logitude; + let stateCode=a.ST_2011; + let districtCode=a.DT_2011; + let talukaCode=a.SDT_2011; + let villageCode=a.VIL_2011; + let villageName=a.VIL_NAME11; + + + document.getElementById("lat").value =lat; + document.getElementById("lon").value =lon; + loadstate(stateCode); + loaddistrict(stateCode,districtCode); + loadtaluka(districtCode,talukaCode); + loadvillage(talukaCode,villageCode); + + + + + + + + + + + + }) + + + + } + } +else + + { + alert( + 'Currently only WMS query is supported. Please select another layer!' + + ); + } + + +} +map.on('singleclick', clickEvent); + + + + + + + + +} + + function onFeatureSelected(evt= ol.Feature) { +console.log(evt); + hoverLayer.getSource().clear(); + + if (evt !== null) + { + + // const projCode: string = this.selected.getLayer().getSource().getProjection().getCode(); + const viewProjCode = map.getView().getProjection().getCode(); + const projCode='EPSG:3857'; + // const projCode='EPSG:4326'; + + + const feat = evt.clone(); + + feat.setGeometry(feat.getGeometry().transform(projCode, viewProjCode)); + + hoverLayer.getSource().addFeature(feat); + + + + + map.getView().fit(feat.getGeometry().getExtent(), { + duration: 500 + }); + } + + + + } +function removeHoverLayer() { + + map.removeLayer(hoverLayer); + + } +function setCursor(cursorType) { + if (map) { + const target = map.getTarget(); + // jQuery hack to convert the mouse cursor to a crosshair + const jTarget = typeof target === 'string' ? $('#' + target) : $(target); + jTarget.css('cursor', cursorType); + } + } + + +function findlayeByName(layer, key, value) { + + if (layer.get(key) === value) { + return layer; + } + // Find recursively if it is a group + if (layer.getLayers) { + var layers = layer.getLayers().getArray(), len = layers.length, result; + for (var i = 0; i < len; i++) { + result = findlayeByName(layers[i], key, value); + if (result) { + return result; + } + } + } + return null; +} + + + --- /dev/null +++ b/src/main/resources/static/customol/jsnew/geom/addGeomNew.js @@ -0,0 +1,319 @@ +var map; +var clickEvent; +var vectorLayer6=ol.layer.Vector; +var features= ol.Feature[10]; +var geojson = new ol.format.GeoJSON; +var hoverLayer =ol.layer.Vector; +var vectorSource; +var zoomOnRowClick; +var maxFeatures; + var highlightFeatures; + var cursorStyle; + var hoverStyle= [ + new ol.style.Style({ + fill: new ol.style.Fill({ + color: [255, 255, 0, 0.5] + }), + stroke: new ol.style.Stroke({ + color: [0,204,0,1], + width: 4 + }) + }) + ]; + + var pointStyle =[ + + new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255, 0.2)' + }), + stroke: new ol.style.Stroke({ + color: 'red', + width: 1 + }), + image: new ol.style.Circle({ + radius: 3, + fill: new ol.style.Fill({ + color: 'red' + }) + }) + }) + ]; + + + +function addGeom(m) +{ +map=m; +maxFeatures = 1; +cursorStyle = 'crosshair'; +zoomOnRowClick = true; +highlightFeatures = true; + +addHoverLayer(); +} +$("#geom").bind("click", function() { + var layer = findlayeByName(map.getLayerGroup(), 'name','Village'); +activateGeomLayer(layer); + + }); +function addHoverLayer() + { + + hoverLayer = new ol.layer.Vector({ + source: new ol.source.Vector() + }); + + pointLayer = new ol.layer.Vector({ + source: new ol.source.Vector() + }); + if(pointStyle) + { + pointLayer.setStyle(pointStyle); + } + if (hoverStyle) { + + hoverLayer.setStyle(hoverStyle); + } + map.addLayer(pointLayer); + if (highlightFeatures) { + + map.addLayer(hoverLayer); + + } + + + + + } + function customStyleFunction () + { + return [ + new ol.style.Style({ + fill: new ol.style.Fill({ + color: [255, 255, 0, 0.5] + }), + stroke: new ol.style.Stroke({ + color: [0,204,0,1], + width: 4 + }) + }) + ]; + } +function activateGeomLayer(layer) +{ +console.log(layer); +hoverLayer.getSource().clear(); +pointLayer.getSource().clear(); + + + +deactivateClick(); +setCursor(cursorStyle); + + + +clickEvent = (evt) => +{ + +// onFeatureSelected(evt); + +// if(vectorLayer6!=null) +// { + +// var f = vectorLayer6.getSource().getFeatures(); +// f.forEach((fe) => { +// vectorLayer6.getSource().removeFeature(fe); +// }); +//} + + + + + var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'); + + latitude= lonlat[0]; + logitude=lonlat[1]; + + +// this.geomService.getstaelistmap(latong,'Point').subscribe(data => this.statlistmap = data,); + + + + + + features = []; + filterdata=[]; + + if (layer instanceof ol.layer.Tile ||layer instanceof layer.Image || layer instanceof layer.Vector || layer instanceof layer.Heatmap || layer instanceof layer.Vector || layer instanceof layer.Layer || layer instanceof layer.VectorTile) + { + + + + const styles = layer.getSource().getParams().STYLES; + + +const url = layer.getSource().getFeatureInfoUrl( + + evt.coordinate, + map.getView().getResolution(), + map.getView().getProjection(), + { + 'INFO_FORMAT' : 'application/json', + 'FEATURE_COUNT': maxFeatures, + 'STYLES': styles + + } + + ); + + + + if (url) { + + $.get(url, function(response) { + + hoverLayer.getSource().clear(); + pointLayer.getSource().clear(); + + + features = geojson.readFeatures(response); + demo.showSwal('success-message'); + features.forEach((feat) => { + console.log(feat) + const extent=feat.getGeometry().getExtent(); + + hoverLayer.getSource().addFeature(feat); + + + map.getView().fit(extent,{ duration: 600}); + + const props = { ...feat.getProperties() }; + console.log(props) + }); + var response = JSON.parse(response); + + + const a=response.features.map(x=>x.properties)[0]; + console.log(a); + let lat=latitude; + let lon=logitude; + let stateCode=a.ST_2011; + let districtCode=a.DT_2011; + let talukaCode=a.SDT_2011; + let villageCode=a.VIL_2011; + let villageName=a.VIL_NAME11; + //selectedstate(stateCode); + //selecteddistrict(districtCode); + //selectedtaluka(talukaCode); + //selectedvillage(villageCode); + + + var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode}; + var dataObjectString = JSON.stringify(data); + //var b=$.base64.encode("hello"); + //console.log(b); + + var enc = Base64.encode(dataObjectString); + console.log(enc); + window.open('addgeom?id='+enc,"_blank"); + + + + + + + + }) + + + + } + } +else + + { + alert( + 'Currently only WMS query is supported. Please select another layer!' + + ); + } + + +} +map.on('singleclick', clickEvent); + + + + + + + + +} + + function onFeatureSelected(evt= ol.Feature) { +console.log(evt); + hoverLayer.getSource().clear(); + + if (evt !== null) + { + + // const projCode: string = this.selected.getLayer().getSource().getProjection().getCode(); + const viewProjCode = map.getView().getProjection().getCode(); + const projCode='EPSG:3857'; + // const projCode='EPSG:4326'; + + + const feat = evt.clone(); + + feat.setGeometry(feat.getGeometry().transform(projCode, viewProjCode)); + + hoverLayer.getSource().addFeature(feat); + + + + + map.getView().fit(feat.getGeometry().getExtent(), { + duration: 500 + }); + } + + + + } +function removeHoverLayer() { + + map.removeLayer(hoverLayer); + + } +function setCursor(cursorType) { + if (map) { + const target = map.getTarget(); + // jQuery hack to convert the mouse cursor to a crosshair + const jTarget = typeof target === 'string' ? $('#' + target) : $(target); + jTarget.css('cursor', cursorType); + } + } + + +function findlayeByName(layer, key, value) { + + if (layer.get(key) === value) { + return layer; + } + // Find recursively if it is a group + if (layer.getLayers) { + var layers = layer.getLayers().getArray(), len = layers.length, result; + for (var i = 0; i < len; i++) { + result = findlayeByName(layers[i], key, value); + if (result) { + return result; + } + } + } + return null; +} + + + --- /dev/null +++ b/src/main/resources/static/customol/jsnew/geom/geom.js @@ -0,0 +1,389 @@ +var map; +var layers=new ol.layer.Vector; +var feature=new ol.Feature; +var geometryType='Point'; +var precision = 2; +var cursorStyle = 'pointer'; +var fillColor = [255, 255, 255, 0.5]; +var strokeColor = [72, 72, 72, 1]; +var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1]; +var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7]; +var font = 'normal 14px Arial'; + +var draw; + +var displaylength = document.getElementById('distance'); +var displayarea = document.getElementById('area'); + + +var sourceDraw = new ol.source.Vector(); + +var vectorDraw = new ol.layer.Vector({ + source: sourceDraw, + style: new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255, 0.2)' + }), + stroke: new ol.style.Stroke({ + color: 'red', + width: 1 + }), + image: new ol.style.Circle({ + radius: 3, + fill: new ol.style.Fill({ + color: 'red' + }) + }) + }) + }); + + +function geom(m) +{ +map=m + + + units= map.getView().getProjection().getUnits(); + + +layers = new ol.layer.Vector({ + source: new ol.source.Vector(), + style: (feature ) => { + return getStyle(feature); + } + }); + +// activateDraw(); + + + +} +function selectedType(gtype) +{ + displaylength.innerHTML = ''; + displayarea.innerHTML = ''; + +geometryType=gtype; + +activateDraw(); + +} + +function activateDraw() +{ + +deactivateDraw(); + +map.addLayer(layers); +var wkt = new ol.format.WKT(); +//setCursor(cursorStyle); +draw= new ol.interaction.Draw({ + source: vectorDraw.getSource(), + type: geometryType, + +}); + + + +draw.on('drawstart', (e) => { + + map.removeLayer(vectorDraw); + sourceDraw.clear();// + + layers.getSource().clear(); +}); +draw.on('drawend', (e) => { + + + let feature = e.feature; + let featureClone = feature.clone(); + featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326'); + + modifiedWKT = wkt.writeFeature(featureClone); + map.addLayer(vectorDraw); + + + + + let area=getLengthOrArea(feature); +let cords=Addpolygongeometry(feature); + + addGeom(cords,modifiedWKT,area); + + + + const feat = new ol.Feature({ + + geometry: e.target + } + + ); + + + getLengthOrArea(feat); + +}); +draw.setActive(true); +map.addInteraction(draw); +} + + +function deactivateDraw() { + + setCursor(''); +value = null; +try { +map.removeInteraction(draw); +layers.getSource().clear(); +map.removeLayer(layers); +sourceDraw.clear(); + +} catch (error) {} +} + + + + + + +function getStyle(feature) +{ + return [ + new ol.style.Style({ + fill: new ol.style.Fill({ + color:fillColor + }) + }), + new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: strokeColor, + width: 2, + lineDash: [5, 5] + }), + text: new ol.style.Text({ + textAlign: 'center', + textBaseline: 'middle', + text: getLengthOrArea(feature), + font: font, + fill: new ol.style.Fill({ + color: textColor + }), + offsetX: 0, + offsetY: 0, + rotation: 0, + stroke: new ol.style.Stroke({ + color: textOutlineColor, + width: 3 + }) + }) + }) + ]; + } + + + + + + +function Addpolygongeometry(feature) +{ + + + let cordinate = ''; + + switch (geometryType) { + + + case 'LineString': + try { + cordinate = feature.getGeometry().getFirstCoordinate(); + + + } catch (error) {} + break; + case 'Polygon': + try { + cordinate =feature.getGeometry().getFirstCoordinate(); + + + } catch (error) {} + break; + case 'Square': + try { + cordinate =feature.getGeometry().getFirstCoordinate(); + + + } catch (error) {} + break; + + default: + try { + cordinate = feature.getGeometry().getCoordinates(); + + + } catch (error) {} + break; + } + // if (cordinate !== '') { + + // cordinate += cordinate; + + + // } + + return cordinate; + } +function addGeom(cords,wkt,area) +{ + console.log(cords); + var layer = findlayeByName(map.getLayerGroup(), 'name','Village'); + + var lonlat = ol.proj.transform(cords, 'EPSG:3857', 'EPSG:4326'); + +latitude= lonlat[0]; +logitude=lonlat[1]; + + +features = []; +filterdata=[]; + + +const styles = layer.getSource().getParams().STYLES; + + +const url = layer.getSource().getFeatureInfoUrl( + + cords, + map.getView().getResolution(), + map.getView().getProjection(), + { + 'INFO_FORMAT' : 'application/json', + 'FEATURE_COUNT': maxFeatures, + 'STYLES': styles + +} + +); + + + +if (url) { + +$.get(url, function(response) { + + + features = geojson.readFeatures(response); + features.forEach((feat) => { + console.log(feat) + // const extent=feat.getGeometry().getExtent(); + + // hoverLayer.getSource().addFeature(feat); + + + //map.getView().fit(extent,{ duration: 600}); + + const props = { ...feat.getProperties() }; + console.log(props) + }); + + + //const extent=a.getGeometry().getExtent(); + ////alert(extent); + + var response = JSON.parse(response); + +const a=response.features.map(x=>x.properties)[0]; +console.log(a); + +let lat=latitude; +let lon=logitude; +let stateCode=a.ST_2011; +let districtCode=a.DT_2011; +let talukaCode=a.SDT_2011; +let villageCode=a.VIL_2011; + + + +var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt}; +var dataObjectString = JSON.stringify(data); +//var b=$.base64.encode("hello"); +console.log(dataObjectString); + +var enc = Base64.encode(dataObjectString); + + window.open('addgeom?id='+enc,"_blank"); + + + + + + + + }) + + + +} + +} + +function getLengthOrArea(feature) + { + + let value = ''; + const geom= feature.getGeometry(); + + + + + + + switch (geometryType) + { + + case 'LineString': + try { + value = parseFloat(geom.getLength().toString()) + .toFixed(precision) + .toString(); + } catch (error) {} + break; + case 'Polygon': + try { + value = parseFloat(geom.getArea().toString()) + .toFixed(precision) + .toString(); + } catch (error) {} + break; + + default: + try { + value = parseFloat(geom.getRadius().toString()) + .toFixed(precision) + .toString(); + } catch (error) {} + break; + } + + + if (value !== '') + { + + + value = value; + displaylength.innerHTML = value + ' m'; + displayarea.innerHTML = value + ' m ²'; + + + } + + + + + + + + + + return value; + } --- /dev/null +++ b/src/main/resources/static/customol/jsnew/geom/geomForm.js @@ -0,0 +1,121 @@ +$(document).ready(function() { + var url_string = window.location; + var url = new URL(url_string); + var data = url.searchParams.get("id"); + var d=JSON.parse(Base64.decode(data)); +console.log(d); + let stateCode=d.stateCode; + let districtCode=d.districtCode; + let talukaCode=d.talukaCode; + let villageCode=d.villageCode; + let lat=d.lat; + let lon=d.lon; + let wkt=d.wkt; + + loadstate(stateCode); + loaddistrict(stateCode,districtCode); + loadtaluka(districtCode,talukaCode); + loadvillage(talukaCode,villageCode); + + document.getElementById("lat").value =lat.toFixed(4); + document.getElementById("lon").value =lon.toFixed(4); + document.getElementById("wktGeom").value = wkt; + + +}); +function loadstate(stateCode) +{ +var stateId_Hidden=stateCode; +var j=getState(); + +var options = ''; + +for (var i = 0; i < j.length; i++) { + + + if (stateId_Hidden == j[i].statecode) + { + + options += ''; + + + } + else { + options += ''; + } +} +$("select#selectedstate").html(options); +} + +function loaddistrict(stateCode,districtCode) +{ +var distictId_Hidden=districtCode; +var j=getDistrict(stateCode); + +var options = ''; + +for (var i = 0; i < j.length; i++) { + // alert( " j[i].stcode11 == " + j[i].stcode11); + + if (distictId_Hidden == j[i].districtcode) + { + // alert("if"+stateId_Hidden); + options += ''; + + // loadDistrict(j[i].stcode11); + } + else { + options += ''; + } +} +$("select#selecteddistrict").html(options); +} +function loadtaluka(districtCode,talukaCode) +{ +var talukaId_Hidden=talukaCode; +var j=getTalukas(districtCode); + +var options = ''; + +for (var i = 0; i < j.length; i++) { + // alert( " j[i].stcode11 == " + j[i].stcode11); + + if (talukaId_Hidden == j[i].talukacode) + { + // alert("if"+stateId_Hidden); + options += ''; + + // loadDistrict(j[i].stcode11); + } + else { + options += ''; + } +} +$("select#selectedtaluka").html(options); + +} +function loadvillage(talukaCode,villageCode) +{ + +var villageId_Hidden=villageCode; +var j=getVillage(talukaCode); + +var options = ''; + +for (var i = 0; i < j.length; i++) { + // alert( " j[i].stcode11 == " + j[i].stcode11); + + if (villageId_Hidden == j[i].villagecode) + { + // alert("if"+stateId_Hidden); + options += ''; + + // loadDistrict(j[i].stcode11); + } + else { + options += ''; + } +} +$("select#selectedvillage").html(options); + +} \ No newline at end of file --- /dev/null +++ b/src/main/resources/static/customol/jsnew/geom/measureNEW.js @@ -0,0 +1,415 @@ +var map; +var layers=new ol.layer.Vector; +var feature=new ol.Feature; +var geojson = new ol.format.GeoJSON; +var geometryType = 'Point'; +var precision = 2; +var cursorStyle = 'crosshair'; +var fillColor = [255, 255, 255, 0.5]; +var strokeColor = [72, 72, 72, 1]; +var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1]; +var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7]; +var font = 'normal 14px Arial'; +var maxFeatures=1; +var draw; + +var displaylength = document.getElementById('distance'); +var displayarea = document.getElementById('area'); +var displayradious = document.getElementById('radious'); + + +function selectedType(gtype) +{ + displaylength.innerHTML = ''; + displayarea.innerHTML = ''; + displayradious.innerHTML = ''; +geometryType=gtype; + +activateDraw(geometryType); + +} + +function activateDraw(geometryType) +{ + + + hoverLayer.getSource().clear(); + + // vectorDraw.getSource().clear(); + + var wkt = new ol.format.WKT(); + +//deactivateDraw(); + +map.addLayer(layers); + +setCursor(cursorStyle); + + + + + +var sourceDraw = new ol.source.Vector(); + +var vectorDraw = new ol.layer.Vector({ + source: sourceDraw, + style: new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255, 0.2)' + }), + stroke: new ol.style.Stroke({ + color: 'red', + width: 1 + }), + image: new ol.style.Circle({ + radius: 3, + fill: new ol.style.Fill({ + color: 'red' + }) + }) + }) + }); + + var hoverStyle= [ + new ol.style.Style({ + fill: new ol.style.Fill({ + color: [255, 255, 0, 0.5] + }), + stroke: new ol.style.Stroke({ + color: [0,204,0,1], + width: 4 + }) + }) + ]; + + + draw= new ol.interaction.Draw({ + source: vectorDraw.getSource(), + type: geometryType, + // style: (feature) => { + // return getStyle(feature); + // } + }); + map.addInteraction(draw); + +draw.on('drawstart', (e) => { + + + + layers.getSource().clear(); + +}); + + +draw.on('drawend', (e) => { + + + + + + + let feature = e.feature; + let featureClone = feature.clone(); + featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326'); + + modifiedWKT = wkt.writeFeature(featureClone); + map.addLayer(vectorDraw); + + let coords= feature.getGeometry().getCoordinates(); +let firstcoords= feature.getGeometry().getFirstCoordinate(); +let area=getLengthOrArea(feature); + + +//console.log(wkt); +alctivateLayer(modifiedWKT,area,firstcoords) + + + + const feat = new ol.Feature({ + + geometry: e.target + } + + ); + + + + + + + + + + +map.removeInteraction(draw); + + +}); +draw.setActive(true); + + +} +function alctivateLayer(wkt,area,firstcoords) +{ +var layer = findlayeByName(map.getLayerGroup(), 'name','Village'); +var lonlat = ol.proj.transform(firstcoords, 'EPSG:3857', 'EPSG:4326'); + +latitude= lonlat[0]; +logitude=lonlat[1]; + + +features = []; +filterdata=[]; + + +const styles = layer.getSource().getParams().STYLES; + + +const url = layer.getSource().getFeatureInfoUrl( + + firstcoords, + map.getView().getResolution(), + map.getView().getProjection(), + { + 'INFO_FORMAT' : 'application/json', + 'FEATURE_COUNT': maxFeatures, + 'STYLES': styles + +} + +); + + + +if (url) { + +$.get(url, function(response) { + + + features = geojson.readFeatures(response); + features.forEach((feat) => { + console.log(feat) + const extent=feat.getGeometry().getExtent(); + + hoverLayer.getSource().addFeature(feat); + + + map.getView().fit(extent,{ duration: 600}); + + const props = { ...feat.getProperties() }; + console.log(props) + }); + + + //const extent=a.getGeometry().getExtent(); + ////alert(extent); + + var response = JSON.parse(response); + +const a=response.features.map(x=>x.properties)[0]; + +let lat=latitude; +let lon=logitude; +let stateCode=a.ST_2011; +let districtCode=a.DT_2011; +let talukaCode=a.SDT_2011; +let villageCode=a.VIL_2011; + + + +var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt}; +var dataObjectString = JSON.stringify(data); +//var b=$.base64.encode("hello"); +console.log(dataObjectString); + +var enc = Base64.encode(dataObjectString); + +window.open('monument?id='+enc,"_blank"); + + + + + + + + }) + + + +} +} + + + + + + +function deactivateDraw() { + + setCursor(''); +value = null; +try { +map.removeInteraction(draw); +layers.getSource().clear(); +map.removeLayer(layers); + +} catch (error) {} +} + + + +function measure(m) +{ +map=m + // Read user-defined parameters + + units= map.getView().getProjection().getUnits(); + + +layers = new ol.layer.Vector({ + source: new ol.source.Vector(), + style: (feature ) => { + return getStyle(feature); + } + }); + addHoverLayer(); + // activateDraw(geometryType) + + + +} +function addHoverLayer() + { + + + hoverLayer = new ol.layer.Vector({ + source: new ol.source.Vector() + }); + + + + if (hoverStyle) { + + hoverLayer.setStyle(hoverStyle); + } + map.addLayer(pointLayer); + if (highlightFeatures) { + + map.addLayer(hoverLayer); + + } + + + + + } + +function getStyle(feature) +{ + return [ + new ol.style.Style({ + fill: new ol.style.Fill({ + color:fillColor + }) + }), + new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: strokeColor, + width: 2, + lineDash: [5, 5] + }), + text: new ol.style.Text({ + textAlign: 'center', + textBaseline: 'middle', + text: getLengthOrArea(feature), + font: font, + fill: new ol.style.Fill({ + color: textColor + }), + offsetX: 0, + offsetY: 0, + rotation: 0, + stroke: new ol.style.Stroke({ + color: textOutlineColor, + width: 3 + }) + }) + }) + ]; + } + + + + +function setCursor(cursorType) +{ + if (map) { + const target = map.getTarget(); + // jQuery hack to convert the mouse cursor to a crosshair + const jTarget = typeof target === 'string' ? $('#' + target) : $(target); + jTarget.css('cursor', cursorType); + } +} + + +function getLengthOrArea(feature) + { + + let value = ''; + const geom= feature.getGeometry(); + + + + + + + switch (geometryType) + { + + case 'LineString': + try { + value = parseFloat(geom.getLength().toString()) + .toFixed(precision) + .toString(); + } catch (error) {} + break; + case 'Polygon': + try { + value = parseFloat(geom.getArea().toString()) + .toFixed(precision) + .toString(); + } catch (error) {} + break; + case 'Circle': + try { + value = parseFloat(geom.getRadius().toString()) + .toFixed(precision) + .toString(); + } catch (error) {} + break; + default: + break; + } + + + if (value !== '') + { + + + value = value; + displaylength.innerHTML = value + ' m'; + displayarea.innerHTML = value + ' m ²'; + displayradious.innerHTML = value+ ' m'; + + } + + + + + + + + + + return value; + } --- /dev/null +++ b/src/main/resources/static/customol/jsnew/geom/measureold.js @@ -0,0 +1,335 @@ +var map; +var layers=new ol.layer.Vector; +var feature=new ol.Feature; +var geojson = new ol.format.GeoJSON; +var geometryType='Point'; +var precision = 2; +var cursorStyle = 'crosshair'; +var fillColor = [255, 255, 255, 0.5]; +var strokeColor = [72, 72, 72, 1]; +var textColor = [strokeColor[0], strokeColor[1], strokeColor[2], 1]; +var textOutlineColor = [fillColor[0], fillColor[1], fillColor[2], 0.7]; +var font = 'normal 14px Arial'; +var maxFeatures=1; +var draw; + +var displaylength = document.getElementById('distance'); +var displayarea = document.getElementById('area'); +var displayradious = document.getElementById('radious'); + + +function selectedType(gtype) +{ + displaylength.innerHTML = ''; + displayarea.innerHTML = ''; + displayradious.innerHTML = ''; +geometryType=gtype; + + + +} + +function activateDraw() +{ + + + + + var wkt = new ol.format.WKT(); + +deactivateDraw(); + +map.addLayer(layers); + +setCursor(cursorStyle); +draw= new ol.interaction.Draw({ + source: layers.getSource(), + type: geometryType, + style: (feature) => { + return getStyle(feature); + } +}); + + + +draw.on('drawstart', (e) => { + + + + layers.getSource().clear(); + +}); + map.addInteraction(draw); + +draw.on('drawend', (e) => { + + + + + + + let feature = e.feature; + let featureClone = feature.clone(); + featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326'); + + modifiedWKT = wkt.writeFeature(featureClone); + let coords= feature.getGeometry().getCoordinates(); +let firstcoords= feature.getGeometry().getFirstCoordinate(); +let area=getLengthOrArea(feature); + + +//console.log(wkt); +alctivateLayer(modifiedWKT,area,firstcoords) + + + + const feat = new ol.Feature({ + + geometry: e.target + } + + ); + + + + + + + + + + +map.removeInteraction(draw); + + +}); +draw.setActive(true); + + +} +function alctivateLayer(wkt,area,firstcoords) +{ +var layer = findlayeByName(map.getLayerGroup(), 'name','Village'); +var lonlat = ol.proj.transform(firstcoords, 'EPSG:3857', 'EPSG:4326'); + +latitude= lonlat[0]; +logitude=lonlat[1]; + + +features = []; +filterdata=[]; + + +const styles = layer.getSource().getParams().STYLES; + + +const url = layer.getSource().getFeatureInfoUrl( + + firstcoords, + map.getView().getResolution(), + map.getView().getProjection(), + { + 'INFO_FORMAT' : 'application/json', + 'FEATURE_COUNT': maxFeatures, + 'STYLES': styles + +} + +); + + + +if (url) { + +$.get(url, function(response) { + + + + + + var response = JSON.parse(response); + + +const a=response.features.map(x=>x.properties)[0]; + +let lat=latitude; +let lon=logitude; +let stateCode=a.ST_2011; +let districtCode=a.DT_2011; +let talukaCode=a.SDT_2011; +let villageCode=a.VIL_2011; + + + +var data={"lat":lat,"lon":lon,"stateCode":stateCode,"districtCode":districtCode,"talukaCode":talukaCode,"villageCode":villageCode,"area":area,"wkt":wkt}; +var dataObjectString = JSON.stringify(data); +//var b=$.base64.encode("hello"); +console.log(dataObjectString); + +var enc = Base64.encode(dataObjectString); + +window.open('monument?id='+enc,"_blank"); + + + + + + + + }) + + + +} +} + + + + + + +function deactivateDraw() { + + setCursor(''); +value = null; +try { +map.removeInteraction(draw); +layers.getSource().clear(); +map.removeLayer(layers); + +} catch (error) {} +} + + + +function measure(m) +{ +map=m + // Read user-defined parameters + + units= map.getView().getProjection().getUnits(); + + +layers = new ol.layer.Vector({ + source: new ol.source.Vector(), + style: (feature ) => { + return getStyle(feature); + } + }); + + +activateDraw(); + + +} + + +function getStyle(feature) +{ + return [ + new ol.style.Style({ + fill: new ol.style.Fill({ + color:fillColor + }) + }), + new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: strokeColor, + width: 2, + lineDash: [5, 5] + }), + text: new ol.style.Text({ + textAlign: 'center', + textBaseline: 'middle', + text: getLengthOrArea(feature), + font: font, + fill: new ol.style.Fill({ + color: textColor + }), + offsetX: 0, + offsetY: 0, + rotation: 0, + stroke: new ol.style.Stroke({ + color: textOutlineColor, + width: 3 + }) + }) + }) + ]; + } + + + + +function setCursor(cursorType) +{ + if (map) { + const target = map.getTarget(); + // jQuery hack to convert the mouse cursor to a crosshair + const jTarget = typeof target === 'string' ? $('#' + target) : $(target); + jTarget.css('cursor', cursorType); + } +} + + +function getLengthOrArea(feature) + { + + let value = ''; + const geom= feature.getGeometry(); + + + + + + + switch (geometryType) + { + + case 'LineString': + try { + value = parseFloat(geom.getLength().toString()) + .toFixed(precision) + .toString(); + } catch (error) {} + break; + case 'Polygon': + try { + value = parseFloat(geom.getArea().toString()) + .toFixed(precision) + .toString(); + } catch (error) {} + break; + case 'Circle': + try { + value = parseFloat(geom.getRadius().toString()) + .toFixed(precision) + .toString(); + } catch (error) {} + break; + default: + break; + } + + + if (value !== '') + { + + + value = value; + displaylength.innerHTML = value + ' m'; + displayarea.innerHTML = value + ' m ²'; + displayradious.innerHTML = value+ ' m'; + + } + + + + + + + + + + return value; + } --- /dev/null +++ b/src/main/resources/static/customol/jsnew/googleapi/googlemaps copy.js @@ -0,0 +1,38 @@ + +// function myMap() { + +// var directionsDisplay = new google.maps.DirectionsRenderer(); +// var map; +// var mapProp= { +// center:new google.maps.LatLng(23.232683,72.641768), +// zoom:4.5, +// }; +// map = new google.maps.Map(document.getElementById("googleMap"),mapProp); + +// directionsDisplay.setMap(map); + + +// google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); + + +// } +// function calcRoute() +// { +// var directionsService = new google.maps.DirectionsService(); +// var directionsDisplay = new google.maps.DirectionsRenderer(); +// var start = new google.maps.LatLng(23.1508, 72.3600); +// var end = new google.maps.LatLng(23.1642, 72.6549); +// var request = { +// origin: start, +// destination: end, +// travelMode: google.maps.TravelMode.DRIVING +// }; +// directionsService.route(request, function(response, status) { +// if (status == google.maps.DirectionsStatus.OK) { +// directionsDisplay.setDirections(response); +// directionsDisplay.setMap(map); +// } else { +// alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); +// } +// }); +// } \ No newline at end of file --- /dev/null +++ b/src/main/resources/static/customol/jsnew/googleapi/googlemaps.js @@ -0,0 +1,43 @@ +function mapLocation() { + var directionsDisplay; + var directionsService = new google.maps.DirectionsService(); + var map; + + function initialize() { + directionsDisplay = new google.maps.DirectionsRenderer(); + + var mapOptions = { + zoom: 4.5 , + center:new google.maps.LatLng(23.232683,72.641768), + }; + map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); + directionsDisplay.setMap(map); + google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); + } + + function calcRoute() { + var start = new google.maps.LatLng(23.1508, 72.3600); + var end = new google.maps.LatLng(23.1642, 72.6549); + + var bounds = new google.maps.LatLngBounds(); + bounds.extend(start); + bounds.extend(end); + map.fitBounds(bounds); + var request = { + origin: start, + destination: end, + travelMode: google.maps.TravelMode.DRIVING + }; + directionsService.route(request, function (response, status) { + if (status == google.maps.DirectionsStatus.OK) { + directionsDisplay.setDirections(response); + directionsDisplay.setMap(map); + } else { + alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); + } + }); + } + + google.maps.event.addDomListener(window, 'load', initialize); +} +mapLocation(); \ No newline at end of file --- /dev/null +++ b/src/main/resources/static/customol/jsnew/identify/identify.js @@ -0,0 +1,261 @@ +var map; +var maxFeatures =1; +var cursorStyle = 'crosshair'; +var placeholder = 'Select query layer'; +var zoomOnRowClick = true; +var hlightFeatures = true; + +var clickEvent; +var vectorLayer6= new ol.layer.Vector; +var features= new ol.Feature; +var hoverLayer = new ol.layer.Vector({ + source: new ol.source.Vector() + }); +var latitude; +var logitude; +var geojson=new ol.format.GeoJSON(); +var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo; + +function identify(maps) +{ + + map=maps; + + var layer = findlayeByName(map.getLayerGroup(), 'name','Airport'); + + + +var Groupcountt=0; + + map.getLayers().forEach(function (layerr, i) { + Groupcountt=i+1; + var groupnamee=layerr.get('name'); + if(groupnamee=='Identify') + { + var groupcontentt=''; + + groupcontentt+=''; + // + + + groupcontentt +='
'; + + $('#groupss').append($(groupcontentt)); + + bindInputs('#layerr' + i, layerr); + var subGroupcountt=0; + if (layerr instanceof ol.layer.Group) { + + layerr.getLayers().forEach(function (sublayerr, j) { + subGroupcountt=j+1; + var basecontentt = ''; + let layernamee=sublayerr.get('name'); + + basecontentt += '
'; + + $('#layerr'+i).append($(basecontentt)); + + bindInputss('#layerr' + i + j, sublayerr); + }); + $('#layerscountt'+i).append(subGroupcountt); + + } + } + + }); + + $('#groupscountt').append(Groupcountt); + + + + + + + +} +function bindInputss(layerid, layer) +{ + var visibilityInput = $(layerid + ' input.visible'); + + visibilityInput.on('change', function () { + + layer.setVisible(this.checked); + + if(layer.getVisible()==true) + { + + activateClick(layer); + } + else{ + deactivateClick(); + } + }); + visibilityInput.prop('checked', layer.getVisible()); + + +} +function findlayeByName(layer, key, value) { + + if (layer.get(key) === value) { + return layer; + } + // Find recursively if it is a group + if (layer.getLayers) { + var layers = layer.getLayers().getArray(), len = layers.length, result; + for (var i = 0; i < len; i++) { + result = findlayeByName(layers[i], key, value); + if (result) { + return result; + } + } + } + return null; +} + +function addHoverLayer() +{ + + + if (placeholder) { + hoverLayer.setStyle(hoverStyle); + } + if (highlightFeatures) { + + map.addLayer(hoverLayer); + } +} +function activateClick(layer) +{ + + console.log(layer) + var layername=layer.get('name'); +// hoverLayer.getSource().clear(); + + // deactivateClick(); + + + clickEvent = (evt) => + { + + + + var coordinate = evt.coordinate; + + + + + + let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'); + + latitude= lonlat[0]; + logitude=lonlat[1]; + + features = []; + filterdata=[]; + + if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile) + { + + const styles = layer.getSource().getParams().STYLES; + var url = layer.getSource().getFeatureInfoUrl( + evt.coordinate, + map.getView().getResolution(), + 'EPSG:3857', { + 'INFO_FORMAT' : 'application/json', + FEATURE_COUNT: maxFeatures, + STYLES: styles + + }); + + if (url) + { + + + $.get(url, function(response) { + + + + + response = JSON.parse(response); + + { + { + const a=response.features.map(x=>x.properties)[0]; + console.log(a); + + if(layername=='Rail') + { + + + + content.innerHTML = '

ID:' + a.bsid + '

Name:' + a.name + '

'; + } + if(layername=='National Highway') + { + + + + content.innerHTML = '

ID:' + a.objectid + '

Name:' + a.name + '

'; + } + if(layername=='Park Boundry') + { + + content.innerHTML = '

Statename:' + a.st_name + '

District:' + a.dist_name + '

Taluka:' + a.sub_dist + '

Village:' + a.vname + '

Park Name:' + a.park_name + '

Park Type:' + a.park_type + '

'; + } + overlay.setPosition(coordinate); + // overlay.setPosition(evt.coordinate); + + } + + } + + }); + + + } + else{ + alert("NOt Suported"); + } + + + } + else + + { + alert('Currently only WMS query is supported. Please select another layer!') + + + + } + }; + map.on('singleclick', clickEvent); + +} + + + + +function setCursor(cursorType) { + if (map) { + const target = map.getTarget(); + // jQuery hack to convert the mouse cursor to a crosshair + const jTarget = typeof target === 'string' ? $('#' + target) : $(target); + jTarget.css('cursor', cursorType); + } + } + +function getFeatureInfoUrl( source,coordinate,resolution, srs) + { + + const styles = source.getParams().hasOwnProperty('STYLES') + ? source.getParams().STYLES + : ''; + return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{ + INFO_FORMAT: 'application/json', +// FEATURE_COUNT: maxFeatures, +// STYLES: styles + }); + + // return url; + + } --- /dev/null +++ b/src/main/resources/static/customol/jsnew/identify/identifyfortwo.js @@ -0,0 +1,255 @@ +var map; +var maxFeatures =10; +var cursorStyle = 'crosshair'; +var placeholder = 'Select query layer'; +var zoomOnRowClick = true; +var hlightFeatures = true; + +var clickEvent; +var vectorLayer6= new ol.layer.Vector; +var features= new ol.Feature; +var hoverLayer = new ol.layer.Vector({ + source: new ol.source.Vector() + }); +var latitude; +var logitude; +var geojson=new ol.format.GeoJSON(); +var WMSGetFeatureInfo=ol.format.WMSGetFeatureInfo; + +function identify(maps) +{ + + map=maps; + + var layer = findlayeByName(map.getLayerGroup(), 'name','Airport'); + + + +var Groupcountt=0; + + map.getLayers().forEach(function (layerr, i) { + Groupcountt=i+1; + var groupnamee=layerr.get('name'); + if(groupnamee=='Identify') + { + var groupcontentt=''; + + groupcontentt+=''; + // + + + groupcontentt +='
'; + + $('#groupss').append($(groupcontentt)); + + bindInputs('#layerr' + i, layerr); + var subGroupcountt=0; + if (layerr instanceof ol.layer.Group) { + + layerr.getLayers().forEach(function (sublayerr, j) { + subGroupcountt=j+1; + var basecontentt = ''; + let layernamee=sublayerr.get('name'); + + basecontentt += '
'; + + $('#layerr'+i).append($(basecontentt)); + + bindInputss('#layerr' + i + j, sublayerr); + }); + $('#layerscountt'+i).append(subGroupcountt); + + } + } + + }); + + $('#groupscountt').append(Groupcountt); + + + + + + + +} +function bindInputss(layerid, layer) +{ + var visibilityInput = $(layerid + ' input.visible'); + + visibilityInput.on('change', function () { + + layer.setVisible(this.checked); + + if(layer.getVisible()==true) + { + + activateClick(layer); + } + else{ + deactivateClick(); + } + }); + visibilityInput.prop('checked', layer.getVisible()); + + +} +function findlayeByName(layer, key, value) { + + if (layer.get(key) === value) { + return layer; + } + // Find recursively if it is a group + if (layer.getLayers) { + var layers = layer.getLayers().getArray(), len = layers.length, result; + for (var i = 0; i < len; i++) { + result = findlayeByName(layers[i], key, value); + if (result) { + return result; + } + } + } + return null; +} + +function addHoverLayer() +{ + + + if (placeholder) { + hoverLayer.setStyle(hoverStyle); + } + if (highlightFeatures) { + + map.addLayer(hoverLayer); + } +} +function activateClick(layer) +{ + + console.log(layer) + var layername=layer.get('name'); +// hoverLayer.getSource().clear(); +console.log(layername); + deactivateClick(); + + + clickEvent = (evt) => + { + + + + + + let lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'); + + latitude= lonlat[0]; + logitude=lonlat[1]; + + features = []; + filterdata=[]; + + if (layer instanceof ol.layer.Tile ||layer instanceof ol.layer.Image || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Heatmap || layer instanceof ol.layer.Vector || layer instanceof ol.layer.Layer || layer instanceof ol.layer.VectorTile) + { + + + var url = layer.getSource().getFeatureInfoUrl( + evt.coordinate, + map.getView().getResolution(), + 'EPSG:3857', { + 'INFO_FORMAT' : 'application/json', + + + }); + + if (url) + { + + + $.get(url, function(response) { + + + + + response = JSON.parse(response); + + { + { + const a=response.features.map(x=>x.properties)[0]; + console.log(a); + + if(layername=='Rail') + { + + + + content.innerHTML = '

ID:' + a.bsid + '

Name:' + a.name + '

'; + } + if(layername=='National Highway') + { + + + + content.innerHTML = '

ID:' + a.objectid + '

Name:' + a.name + '

'; + } + if(layername=='Park Boundry') + { + + content.innerHTML = '

Statename:' + a.st_name + '

District:' + a.dist_name + '

Taluka:' + a.sub_dist + '

Village:' + a.vname + '

Park Name:' + a.park_name + '

Park Type:' + a.park_type + '

'; + } + overlay.setPosition(evt.coordinate); + + } + + } + + }); + + + } + else{ + alert("NOt Suported"); + } + + + } + else + + { + alert('Currently only WMS query is supported. Please select another layer!') + + + + } + }; + map.on('singleclick', clickEvent); + +} + + + + +function setCursor(cursorType) { + if (map) { + const target = map.getTarget(); + // jQuery hack to convert the mouse cursor to a crosshair + const jTarget = typeof target === 'string' ? $('#' + target) : $(target); + jTarget.css('cursor', cursorType); + } + } + +function getFeatureInfoUrl( source,coordinate,resolution, srs) + { + + const styles = source.getParams().hasOwnProperty('STYLES') + ? source.getParams().STYLES + : ''; + return source.getGetFeatureInfoUrl(coordinate, resolution, srs,{ + INFO_FORMAT: 'application/json', +// FEATURE_COUNT: maxFeatures, +// STYLES: styles + }); + + // return url; + + } --- /dev/null +++ b/src/main/resources/static/customol/jsnew/layerswitcher/layerSwitcher old.js @@ -0,0 +1,95 @@ + + + function switchlayers(map) + { + + + const layerGroups = map.getLayers().getArray(); + const groupCount=layerGroups.length + $('#groupscount').append(groupCount); + + const groupcount=layerGroups.length; + + for(var j=0;j