Ich möchte die Koordinaten entfernen und die Informationen über die Ortsdaten

AsslamOAlikum zeigen. Hi ich erstelle Openlayer Map mit Hilfe von Geoserver. Meine Kartenanwendung basiert auf Javascript und Openlayern (OSM, WMS). In meiner Anwendung verwende ich mehrere Ebenen, Maus Handhabung & Positionierung und Popup-Funktion. Aber ich möchte etwas in meiner Popup-Funktion ändern. In meiner Popup-Funktion, wenn ich die Maustaste drücke, dann zeigen Sie die Koordinaten von 'E, W, Degree' ETC. Ich möchte ändern, um zu ersetzen, um die Informationen über den Ort zu bekommen. HIER ist mein Code ......ich will die Koordinaten entfernen und die Informationen über die Ortsdaten zeigen

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Overlay</title> 
    <link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css"> 
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> 
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> 
    <script src="https://openlayers.org/en/v4.4.2/build/ol.js"></script> 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <style> 
     #marker { 
     width: 20px; 
     height: 20px; 
     border: 1px solid #088; 
     border-radius: 10px; 
     background-color: #0FF; 
     opacity: 0.5; 
     } 
     #vienna { 
     text-decoration: none; 
     color: white; 
     font-size: 11pt; 
     font-weight: bold; 
     text-shadow: black 0.1em 0.1em 0.2em; 
     } 
     .popover-content { 
     min-width: 180px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map" class="map"></div> 
    <div style="display: none;"> 
     <!-- Popup --> 
     <div id="popup" title="Welcome to OpenLayers"></div> 
    </div> 

    <div id="nodelist"> 
     <em>Click on the map to get feature info</em> 
    </div> 
    <div id="mouse-position"></div> 
    <form> 
     <label>Projection </label> 
     <select id="projection"> 
     <option value="EPSG:4326">EPSG:4326</option> 
     </select> 
     <label>Precision </label> 
     <input id="precision" type="number" min="0" max="12" value="4"/> 
    </form> 

    <script> 

     //MOUSE HANDLING 
     var mousePositionControl = new ol.control.MousePosition({ 
     coordinateFormat: ol.coordinate.createStringXY(4), 
     className: 'custom-mouse-position', 
     target: document.getElementById('mouse-position'), 
     undefinedHTML: '&nbsp;' 
     }); 



     var LonLat = [69.3451, 30.3753]; 
    var pos = ol.proj.fromLonLat(LonLat); 

     var layer =[ 
     new ol.layer.Tile({ 
     source: new ol.source.OSM() 
     }), 
     new ol.layer.Tile({ 
      //extent: [68.107725, 23.744288, 73.622861, 36.878836], 
      source: new ol.source.TileWMS({ 
      url: 'http://gulraiz-pc:8080/geoserver/test/wms', 
      params: {LAYERS: 'test:pak_ad3_gaul_ply_15072010', 'TILED': true}, 
      serverType: 'geoserver' 

      }) 
     }), 
     new ol.layer.Tile({ 
      //extent: [68.107725, 23.744288, 73.622861, 36.878836], 
      source: new ol.source.TileWMS({ 
      url: 'http://gulraiz-pc:8080/geoserver/test/wms', 
      params: {'LAYERS': ' test:longlist', 'TILED': true}, 
      serverType: 'geoserver' 

      }) 
     }) 
    ]; 
     var map = new ol.Map({ 
      controls: ol.control.defaults({ 
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ 
//   collapsible: false 
      }) 
     }).extend([mousePositionControl]), 
     layers: layer, 
     target: 'map', 
     view: new ol.View({ 
      center: pos, 
      zoom: 5 
     }) 
     }); 



     // Popup showing the position the user clicked 
     var popup = new ol.Overlay({ 
     element: document.getElementById('popup') 
     }); 
     map.addOverlay(popup); 



     map.on('click', function(evt) { 
     var element = popup.getElement(); 
     var coordinate = evt.coordinate; 
     var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
      coordinate, 'EPSG:4326', 'EPSG:4326')); 

     $(element).popover('destroy'); 
     popup.setPosition(coordinate); 
     // the keys are quoted to prevent renaming in ADVANCED mode. 
     $(element).popover({ 
      'placement': 'top', 
      'animation': false, 
      'html': true, 
      'content': '<p>The location you clicked was:</p><code>' + hdms + '</code>' 
     }); 
     $(element).popover('show'); 
     }); 


    </script> 
    </body> 
</html>

Quelle

2017-10-28 Muahmmad Ahmad

Koordinaten zeigen, aber ich möchte Informationen im Format der Tabelle. in welcher Tabelle wie dieser Link https://openlayers.org/en/latest/examples/getfeatureinfo-image.html –

Nicht ganz verstehen, was Sie verlangen. Gehen wir davon aus, dass Sie die Koordinaten des Features und nicht den Klick möchten.

forEachFeatureAtPixel(pixel, (f) => { coordinate = f.getGeometry().getCoordinates(); }

Quelle

2017-10-29 13:40:38

Koordinaten werden angezeigt, aber ich möchte Informationen im Format der Tabelle. in welcher Tabelle wie dieser Link https://openlayers.org/en/latest/examples/getfeatureinfo-image.html –

Koordinaten funktionieren, aber ich brauche Informationen in der Tabelle, die ich über den Link senden bitte Link beobachten und mein Problem zu lösen. ich versuche aber seine throw-ausnahme. –

Nein. Führen Sie entweder genau das aus, was das Beispiel tut, und verwenden Sie eine WMS-Informations-URL, oder extrahieren Sie die Informationen aus dem Feature, und erstellen Sie eine Tabelle. 'var title = f.get ('TITLE'); var html = '

Titel
' + Titel + '

'; ' –

ich will die Koordinaten entfernen und die Informationen über die Ortsdaten zeigen

Ich möchte die Koordinaten entfernen und die Informationen über die Ortsdaten

Antwort

Verwandte Themen