I have tried to create a circle of desired range using following code but not working. Please guide me.
function createBuffer(lat, lon, range) {var extent = [ 66.9973, 19.4081, 75.5887, 24.9398 ];extent = ol.extent.applyTransform(extent, ol.proj.getTransform( "EPSG:4326", "EPSG:4326")); map.getView().fitExtent(extent, map.getSize()); map.getView().setCenter(ol.proj.transform([parseFloat(lat), parseFloat(lon)], 'EPSG:4326', 'EPSG:4326')); map.getView().setZoom(10); //CenterMap(lon, lat); bufferrange = range; var style = new ol.style.Style({ fill : new ol.style.Fill({ color : 'yellow', opacity : 0.6, color : 'rgba(255,255,204,0.3)'}),stroke : new ol.style.Stroke({ width : 2, // color: 'rgba(255, 100, 50, 0.8)' color : 'red', radius : 1}),image : new ol.style.Circle({ fill : new ol.style.Fill({ // color: 'rgba(55, 200, 150, 0.5)' color : 'rgba(51, 204, 255,0.3)'}),stroke : new ol.style.Stroke({ width : 1, color : 'blue' // color:'rgb(230, 184, 0,0)'}),radius : 3}), });var features = [];var point = new ol.geom.Circle(ol.proj.transform([parseFloat(lat),parseFloat(lon)], 'EPSG:4326', 'EPSG:4326'),range*1210);console.log(point.getCenter());console.log(point); // Featuresvar pointFeature = new ol.Feature(point);features.push(pointFeature);// Source and vector layervar vectorSource = new ol.source.Vector({ projection: 'EPSG:4326', features: features});var vectorLayer = new ol.layer.Vector({ source : vectorSource, style : style});map.renderSync();map.addLayer(vectorLayer);window.open('viewBufferedData?lat=' + lat + '&lon=' + lon + '&range=' + range,'Buffered Data').focus();map.unByKey(key); }
أكثر...
function createBuffer(lat, lon, range) {var extent = [ 66.9973, 19.4081, 75.5887, 24.9398 ];extent = ol.extent.applyTransform(extent, ol.proj.getTransform( "EPSG:4326", "EPSG:4326")); map.getView().fitExtent(extent, map.getSize()); map.getView().setCenter(ol.proj.transform([parseFloat(lat), parseFloat(lon)], 'EPSG:4326', 'EPSG:4326')); map.getView().setZoom(10); //CenterMap(lon, lat); bufferrange = range; var style = new ol.style.Style({ fill : new ol.style.Fill({ color : 'yellow', opacity : 0.6, color : 'rgba(255,255,204,0.3)'}),stroke : new ol.style.Stroke({ width : 2, // color: 'rgba(255, 100, 50, 0.8)' color : 'red', radius : 1}),image : new ol.style.Circle({ fill : new ol.style.Fill({ // color: 'rgba(55, 200, 150, 0.5)' color : 'rgba(51, 204, 255,0.3)'}),stroke : new ol.style.Stroke({ width : 1, color : 'blue' // color:'rgb(230, 184, 0,0)'}),radius : 3}), });var features = [];var point = new ol.geom.Circle(ol.proj.transform([parseFloat(lat),parseFloat(lon)], 'EPSG:4326', 'EPSG:4326'),range*1210);console.log(point.getCenter());console.log(point); // Featuresvar pointFeature = new ol.Feature(point);features.push(pointFeature);// Source and vector layervar vectorSource = new ol.source.Vector({ projection: 'EPSG:4326', features: features});var vectorLayer = new ol.layer.Vector({ source : vectorSource, style : style});map.renderSync();map.addLayer(vectorLayer);window.open('viewBufferedData?lat=' + lat + '&lon=' + lon + '&range=' + range,'Buffered Data').focus();map.unByKey(key); }
أكثر...