Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var container = document.getElementById('popup');
- var content = document.getElementById('popup-content');
- var closer = document.getElementById('popup-closer');
- var overlay = new ol.Overlay({
- element: container,
- autoPan: true,
- autoPanAnimation: {
- duration: 250
- }
- });
- closer.onclick = function(){
- overlay.setPosition(undefined);
- closer.blur();
- return false;
- }
- var vectorSource2 = new ol.source.Vector({
- format: new ol.format.GeoJSON(),
- url: function(extent) {
- return 'http://152.7.99.134:8080/geoserver/link_to_postgres/wfs?service=WFS'+
- '&version=1.0.0&request=GetFeature'+
- '&typeName=link_to_postgres:a_1845disease0' +
- '&outputFormat=application/json&srsname=EPSG:3857' +
- '&bbox=' + extent.join(',') + ',EPSG:3857';
- },
- });
- var pointLayer = new ol.layer.Vector({
- source: vectorSource2,
- style: new ol.style.Style({
- image: new ol.style.Circle({
- radius: 5,
- fill: new ol.style.Fill({
- color: 'orange'
- }),
- stroke: new ol.style.Stroke({
- color:'grey',
- width: 0.5
- })
- })
- }),
- });
- var mapLayers = [
- new ol.layer.Tile({
- source: new ol.source.OSM()
- }),
- pointLayer,
- ];
- var map = new ol.Map({
- target: 'map',
- loadTilesWhileAnimating: true,
- loadTilesWhileInteracting: true,
- controls:[
- new ol.control.OverviewMap(),
- new ol.control.Zoom(),
- new ol.control.ScaleLine(),
- ],
- layers: mapLayers,
- overlays:[overlay],
- view: new ol.View({
- center: ol.proj.fromLonLat([-25.922388,30.193475]),
- zoom: 3
- })
- });
- function setContent(pointID,locationname, paragraph, status, comment){
- var popupContent = `<b>Ponit ID: `+ pointID + `</b>: ` + locationname +
- `<br>` + paragraph +
- `<br>
- <select id='status'>
- <option value='default' selected='selected' disabled>`+ status + `</option>
- </select><br>
- Comments: <input type='text' id='commentsOnPoint' placeholder="` + comment +`">
- <button>Submit</button>`;
- return popupContent;
- };
- vectorSource2.on('change', function(evt){
- var source=evt.target;
- if(source.getState() === 'ready'){
- }
- });
- function generatePointsCircle(count, centerPixel) {
- var
- radius = 25,
- twoPi = Math.PI * 2,
- start_angle = 0,
- circumference = radius * 2 * Math.PI,
- angleStep = twoPi / count,
- res = [],
- i, angle;
- for (i = count - 1; i >= 0; i--) {
- angle = start_angle + i * angleStep;
- res[i] = [
- centerPixel[0] + radius * Math.cos(angle),
- centerPixel[1] + radius * Math.sin(angle)
- ];
- }
- return res;
- };
- var stroke = new ol.style.Stroke({color:[0,0,0,1]});
- var fill = new ol.style.Fill({color:[255,255,255,1]});
- var style_parada = [
- new ol.style.Style({
- image: new ol.style.Circle({
- radius: 5, fill: fill, stroke: stroke
- }),
- zIndex: 4
- })
- ];
- var style_cluster = [
- new ol.style.Style({
- image: new ol.style.Circle({
- radius: 7, fill: fill, stroke: stroke
- }),
- zIndex: 14
- })
- ];
- var style_cluster_hover = [
- new ol.style.Style({
- image: new ol.style.Circle({
- radius: 7, stroke: stroke,
- fill: new ol.style.Fill({color:[46,52,54,1]})
- }),
- zIndex: 1
- })
- ];
- map.on('singleclick', function(evt){
- var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
- return feature;
- });
- if (feature){
- var coordinate = evt.coordinate;
- // This works
- var multiFeatures = map.getFeaturesAtPixel(evt.pixel);
- for ( i = 0; i < multiFeatures.length; i ++){
- f = multiFeatures[i]
- console.log(f.get('id') +':'+ f.get('matchednam'));
- };
- var pointID = feature.get('id');
- var locationname = feature.get('matchednam');
- var paragraph = feature.get('paragragh');
- var status = feature.get('status');
- var comment = feature.get('comment');
- container.innerHTML = setContent(pointID,locationname, paragraph, status, comment);
- overlay.setPosition(coordinate);
- } else {
- overlay.setPosition(undefined);
- }
- });
- map.on('pointermove', function(e) {
- if (e.dragging) {
- return;
- }
- var pixel = map.getEventPixel(e.originalEvent);
- var hit = map.hasFeatureAtPixel(pixel);
- e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
- // getViewport().style.cursor = hit ? 'pointer' : '';
- if (hit) displayOverlapping(pixel);
- });
- var displayOverlapping = function(pixel) {
- var multift = map.getFeaturesAtPixel(pixel);
- // console.log(multift);
- if (multift.length > 1){
- var geom = multift[0].getGeometry(),
- coord = geom.getCoordinates(),
- px = map.getPixelFromCoordinate(coord),
- extent = [coord[0], coord[1], coord[0], coord[1]];
- console.log(multift);
- var points = generatePointsCircle(multift.length, px);
- multift[0].setStyle(style_cluster_hover);
- var sourceFeatures = new ol.source.Vector(),
- layerFeatures = new ol.layer.Vector({
- source: sourceFeatures
- });
- var rows = [];
- multift.forEach(function(row, index){
- var cd_end = map.getCoordinateFromPixel(points[index]);
- row.setGeometry(new ol.geom.Point(cd_end));
- row.setStyle(style_parada);
- rows.push(row);
- });
- sourceFeatures.addFeatures(rows);
- map.addLayer(layerFeatures);
- }
- };
Add Comment
Please, Sign In to add comment