stackoom
  简体   繁体   中英

How can I plot Point type geometry in OpenLayers from a JSON file

 原文  2018-08-21 10:49:29  0   2    javascript/ openlayers/ openlayers-3/ openlayers-5

Question

I have a web page which contains a MAP instance which is created using OpenLayers . It is supposed to display all straits in the world by Point type geometry. The data (Latitude,Longitude) is available in JSON format. I was able to draw a single Point on map and give it a Style like red dot etc. but since I am naive in openlayers I quiet couldn't figure out a way to do the same for all the Points in JSON file. So my question is how can I draw all the points from JSON file on the map and provide some styling to them like coloring and showing the name beside the point from JSON data. I am using OpenLayers 5.1.3 with jQuery 2.3, my code 

<body> 
<div id="map" class="map"></div>

<script type="text/javascript">
     var raster = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

    var vectorSource = new ol.source.Vector({
                wrapX: false
            });

    function styleFunction(feature) { 
                var geometry = feature.getGeometry();
                console.log(feature);

                var styles = [
                    new ol.style.Style({   
                        image: new ol.style.Circle({
                            radius: 3,
                            stroke: new ol.style.Stroke({
                                color: [180, 0, 0, 1]
                            }),
                            fill: new ol.style.Fill({
                                color: [180, 0, 0, 0.3]
                            })
                        })
                    })
                ];
               return styles;
    }

     var vectorPoints = new ol.layer.Vector({
                source: vectorSource,
                style: styleFunction
            });
     const map = new ol.Map({
            layers: [raster,vectorPoints],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
     });
</script>
</body>

and the json data 

[{
    "gazetteerSource": "ASFA thesaurus",
    "placeType": "Strait",
    "latitude": 67.259166666667,
    "longitude": 26.082222222222,
    "minLatitude": null,
    "minLongitude": null,
    "maxLatitude": null,
    "maxLongitude": null,
    "precision": 280000,
    "preferredGazetteerName": "Denmark Strait",
    "preferredGazetteerNameLang": "English",
    "status": "standard"
  },
  {
    "gazetteerSource": "ASFA thesaurus",
    "placeType": "Strait",
    "latitude": 55.31,
    "longitude": 14.49,
    "minLatitude": null,
    "minLongitude": null,
    "maxLatitude": null,
    "maxLongitude": null,
    "precision": 35000,
    "preferredGazetteerName": "Bornholm Strait",
    "preferredGazetteerNameLang": "English",
    "status": "standard"
  }]

How to show the preferredGazetteerName along marker 

var features = data.map(item => { //iterate through array...
        let longitude = item.longitude,
            latitude = item.latitude,
            iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
                    'EPSG:3857')),
                name: item.preferredGazetteerName

            }),
iconStyle = new ol.style.Style({
                image: new ol.style.Icon ({
                    anchor: [0.3, 10],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: '//openlayers.org/en/v3.20.1/examples/data/icon.png'
                }),
                text: new ol.style.text({
                    text: "sample"
                })
            });
iconFeature.setStyle(iconStyle);
        return iconFeature;

2 answers

solution1
 2 ACCPTED  2018-08-21 12:38:32

For this you need to use ol.Feature() and also need to do looping for your json data.

DEMO 

 var raster = new ol.layer.Tile({ source: new ol.source.OSM() }), vectorSource = new ol.source.Vector({ wrapX: false }), json = [{ "gazetteerSource": "ASFA thesaurus", "placeType": "Strait", "latitude": 67.259166666667, "longitude": 26.082222222222, "minLatitude": null, "minLongitude": null, "maxLatitude": null, "maxLongitude": null, "precision": 280000, "preferredGazetteerName": "Denmark Strait", "preferredGazetteerNameLang": "English", "status": "standard" }, { "gazetteerSource": "ASFA thesaurus", "placeType": "Strait", "latitude": 55.31, "longitude": 14.49, "minLatitude": null, "minLongitude": null, "maxLatitude": null, "maxLongitude": null, "precision": 35000, "preferredGazetteerName": "Bornholm Strait", "preferredGazetteerNameLang": "English", "status": "standard" }], /** * Elements that make up the popup. */ container = document.getElementById('popup'), content = document.getElementById('popup-content'), closer = document.getElementById('popup-closer'), /** * Create an overlay to anchor the popup to the map. */ 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; }; function styleFunction(feature) { var geometry = feature.getGeometry(); console.log(feature); var styles = [ new ol.style.Style({ image: new ol.style.Circle({ radius: 3, stroke: new ol.style.Stroke({ color: [180, 0, 0, 1] }), fill: new ol.style.Fill({ color: [180, 0, 0, 0.3] }) }) }) ]; return styles; } var vectorPoints = new ol.layer.Vector({ source: vectorSource, style: styleFunction }); const map = new ol.Map({ layers: [raster, vectorPoints], target: 'map', view: new ol.View({ center: [0, 0], zoom: 1 }), overlays: [overlay] }); /** * Add a click handler to the map to render the popup. */ map.on('singleclick', function(evt) { let f = map.forEachFeatureAtPixel( evt.pixel, function(ft, layer) { return ft; } ); if (f && f.get('type') == 'click') { let coordinate = evt.coordinate; content.innerHTML = '<p>You clicked here:</p><code>' + f.get('desc'); overlay.setPosition(coordinate); } }); function addMarker(data) { var features = data.map(item => { //iterate through array... let longitude = item.longitude, latitude = item.latitude, iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857')), type: 'click', desc: item.preferredGazetteerName, }), iconStyle = new ol.style.Style({ image: new ol.style.Icon( /** @type {module:ol/style/Icon~Options} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: '//openlayers.org/en/v3.20.1/examples/data/icon.png' })), text: new ol.style.Text({ text: item.preferredGazetteerName }) }); iconFeature.setStyle(iconStyle); return iconFeature; }); var vectorSource = new ol.source.Vector({ features: features //add an array of features }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); } addMarker(json); 
 .ol-popup { position: absolute; background-color: white; -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; min-width: 280px; } .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; } .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; } .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; } .ol-popup-closer:after { content: "✖"; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet" /> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <div id="map" class="map"></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div>

For showing popup on click of marker follow this popup.html

solution2
 0  2018-08-22 09:03:55

I got it, I was missing use of style class 

   text : new ol.style.Text({
                        font: '10px Verdana',
                        text: item.preferredGazetteerName,
                        fill: new ol.style.Fill({
                            color: [64, 64, 64, 1]
                        })
                    })

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Projections and OpenLayers.Geometry.Point in openlayers OpenLayers Point Geometry never resizes How can I get the point coordinates from a vector layer in openlayers3? How can i draw a lineString between two point in OpenLayers3 how can i dynamically update a ol.Features geometry property ( coordinates ) in OpenLayers 3 How can OpenLayers 3 be forced to use new geometry on each zoom with VectorTile How do i join an external json file with features from Vectortile source in OpenLayers? How can I plot data from an external JSON file to a chart.js graph? How can I serialize all features on a layer to json using openlayers 3 How can I use OpenLayers3 to put an icon on a selected point of interest in my map?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM