OpenLayers Map marker coordinates

0

Good morning, I'm trying to show a marker on an OpenLayers map, but I can not do it.

The error I reviewed is in:

var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([13.866291, -90.204114], 'EPSG:4326', 'EPSG:3857')),
    name: 'nombre',
    population: 4000,
    rainfall: 500
});

Because if I do it this way:

var iconFeature = new ol.Feature({
     geometry: new ol.geom.Point([0, 0])
});

If the marker appears. If someone can tell me how to correctly place the coordinates in iconfeature thank you very much.

var iconFeature = new ol.Feature({
	    geometry: new ol.geom.Point(ol.proj.transform([13.866291, -90.204114], 'EPSG:4326', 'EPSG:3857')),
	    name: 'nombre',
	    population: 4000,
	    rainfall: 500
    });

    var iconStyle = new ol.style.Style({
	    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
		    anchor: [0.5, 46],
		    anchorXUnits: 'fraction',
		    anchorYUnits: 'pixels',
		    opacity: 0.75,
		    src: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png'
	    }))
    });
    iconFeature.setStyle(iconStyle);

    var vectorSource = new ol.source.Vector({
			features: [iconFeature]
    });
    //console.log(vectorSource);

    //vectorSource.addFeature(iconFeature);

    var vectorLayer = new ol.layer.Vector({
	    source: vectorSource
    });
   // console.log("vectorLayer:");
    //console.log(vectorLayer);
   // vectorLayer.setZIndex(5);

var coordenadas = [
  {lat: 13.866291, lng: -90.204114},
  {lat: 13.866325, lng: -90.204115},
  {lat: 13.866325, lng: -90.204115},
  {lat: 13.866365, lng: -90.20413},
  {lat: 13.86639,  lng: -90.20416},
  {lat: 13.86639,  lng: -90.20416},
  {lat: 13.866434, lng: -90.204177}, 
  {lat: 13.866457, lng: -90.204189}, 
  {lat: 13.866457, lng: -90.204189},
  {lat: 13.866494, lng: -90.204192},
  {lat: 13.866512, lng: -90.204298},
  {lat: 13.866507, lng: -90.204353},
  {lat: 13.866479, lng: -90.204402},
  {lat: 13.866479, lng: -90.204402},
  {lat: 13.86642,  lng: -90.204426},
  {lat: 13.86642,  lng: -90.204426},
  {lat: 13.86642,  lng: -90.204426},
  {lat: 13.866385, lng: -90.204396},
  {lat: 13.86636,  lng: -90.204366},
  {lat: 13.866353, lng: -90.204334},
  {lat: 13.866324, lng: -90.20429},
  {lat: 13.866303, lng: -90.204236},
  {lat: 13.866293, lng: -90.204177},
  {lat: 13.866282, lng: -90.20415},
  {lat: 13.866282, lng: -90.20415},
  {lat: 13.866291, lng: -90.204114}
];

var parserJSTS = new jsts.io.OL3Parser();

var poly = new ol.Feature({
        geometry: new ol.geom.Polygon([coordenadas.map(function (_ref) {
                var lng = _ref.lng,
                    lat = _ref.lat;
                return [lng, lat];
        })])
});

var boundingBox = poly.getGeometry().getExtent()
var polybbox = new ol.Feature({
  geometry: ol.geom.Polygon.fromExtent(boundingBox)
})

var [xmin, ymin, xmax, ymax] = boundingBox
var porcentaje = 0.25
var newXmax = xmin + ((xmax - xmin) * porcentaje)

var newBoundingBox = [xmin, ymin, newXmax, ymax]

var polybbox50 = new ol.Feature({
  geometry: ol.geom.Polygon.fromExtent(newBoundingBox)
})

var polybbox50jsts = parserJSTS.read(polybbox50.getGeometry())

var polyjsts = parserJSTS.read(poly.getGeometry())

var intersectionJSTSGeometry = polyjsts.intersection(polybbox50jsts)

var intersectionGeometry = parserJSTS.write(intersectionJSTSGeometry)

var newPoly = new ol.Feature({ geometry: intersectionGeometry })
//console.log(boundingBox)

newPoly.setStyle(new ol.style.Style({
  fill: new ol.style.Fill({
    color: '#ffbb00'
  })
}))

var layer = new ol.layer.Vector({
  source: new ol.source.Vector()
})

// Descomentar para ver los bounding boxes
//layer.getSource().addFeature(polybbox)
//layer.getSource().addFeature(polybbox50)
layer.getSource().addFeature(poly)
layer.getSource().addFeature(newPoly)


var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    layer,vectorLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions:({
      collapsible: false
    })
  }),
  view: new ol.View({
    center: [0, 0],
    zoom: 2,
    projection: 'EPSG:4326'
  })
});

map.getView().fit(boundingBox)
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsts/1.5.0/jsts.js"></script>
<script src="https://openlayers.org/en/v4.5.0/build/ol-debug.js"></script>
<link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet"/>

<div id="map" class="map" tabindex="0"></div>
    
asked by raintrooper 04.12.2017 в 19:01
source

1 answer

1

The problem is here:

ol.geom.Point(ol.proj.transform([13.866291, -90.204114], 'EPSG:4326', 'EPSG:3857'))

The order of the coordinates is [longitud, latitud] and not vice versa. Nor is it necessary to transform the coordinates to the reference system EPSG:3857 since the map is already in the coordinate reference system EPSG:4326 . The correct thing would be:

ol.geom.Point([-90.204114, 13.866291])

var iconFeature = new ol.Feature({
	    geometry: new ol.geom.Point([-90.204114, 13.866291]),
	    name: 'nombre',
	    population: 4000,
	    rainfall: 500
    });

    var iconStyle = new ol.style.Style({
	    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
		    anchor: [0.5, 46],
		    anchorXUnits: 'fraction',
		    anchorYUnits: 'pixels',
		    opacity: 0.75,
		    src: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png'
	    }))
    });
    iconFeature.setStyle(iconStyle);

    var vectorSource = new ol.source.Vector({
			features: [iconFeature]
    });
    //console.log(vectorSource);

    //vectorSource.addFeature(iconFeature);

    var vectorLayer = new ol.layer.Vector({
	    source: vectorSource
    });
   // console.log("vectorLayer:");
    //console.log(vectorLayer);
   // vectorLayer.setZIndex(5);

var coordenadas = [
  {lat: 13.866291, lng: -90.204114},
  {lat: 13.866325, lng: -90.204115},
  {lat: 13.866325, lng: -90.204115},
  {lat: 13.866365, lng: -90.20413},
  {lat: 13.86639,  lng: -90.20416},
  {lat: 13.86639,  lng: -90.20416},
  {lat: 13.866434, lng: -90.204177}, 
  {lat: 13.866457, lng: -90.204189}, 
  {lat: 13.866457, lng: -90.204189},
  {lat: 13.866494, lng: -90.204192},
  {lat: 13.866512, lng: -90.204298},
  {lat: 13.866507, lng: -90.204353},
  {lat: 13.866479, lng: -90.204402},
  {lat: 13.866479, lng: -90.204402},
  {lat: 13.86642,  lng: -90.204426},
  {lat: 13.86642,  lng: -90.204426},
  {lat: 13.86642,  lng: -90.204426},
  {lat: 13.866385, lng: -90.204396},
  {lat: 13.86636,  lng: -90.204366},
  {lat: 13.866353, lng: -90.204334},
  {lat: 13.866324, lng: -90.20429},
  {lat: 13.866303, lng: -90.204236},
  {lat: 13.866293, lng: -90.204177},
  {lat: 13.866282, lng: -90.20415},
  {lat: 13.866282, lng: -90.20415},
  {lat: 13.866291, lng: -90.204114}
];

var parserJSTS = new jsts.io.OL3Parser();

var poly = new ol.Feature({
        geometry: new ol.geom.Polygon([coordenadas.map(function (_ref) {
                var lng = _ref.lng,
                    lat = _ref.lat;
                return [lng, lat];
        })])
});

var boundingBox = poly.getGeometry().getExtent()
var polybbox = new ol.Feature({
  geometry: ol.geom.Polygon.fromExtent(boundingBox)
})

var [xmin, ymin, xmax, ymax] = boundingBox
var porcentaje = 0.25
var newXmax = xmin + ((xmax - xmin) * porcentaje)

var newBoundingBox = [xmin, ymin, newXmax, ymax]

var polybbox50 = new ol.Feature({
  geometry: ol.geom.Polygon.fromExtent(newBoundingBox)
})

var polybbox50jsts = parserJSTS.read(polybbox50.getGeometry())

var polyjsts = parserJSTS.read(poly.getGeometry())

var intersectionJSTSGeometry = polyjsts.intersection(polybbox50jsts)

var intersectionGeometry = parserJSTS.write(intersectionJSTSGeometry)

var newPoly = new ol.Feature({ geometry: intersectionGeometry })
//console.log(boundingBox)

newPoly.setStyle(new ol.style.Style({
  fill: new ol.style.Fill({
    color: '#ffbb00'
  })
}))

var layer = new ol.layer.Vector({
  source: new ol.source.Vector()
})

// Descomentar para ver los bounding boxes
//layer.getSource().addFeature(polybbox)
//layer.getSource().addFeature(polybbox50)
layer.getSource().addFeature(poly)
layer.getSource().addFeature(newPoly)


var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    layer,vectorLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions:({
      collapsible: false
    })
  }),
  view: new ol.View({
    center: [0, 0],
    zoom: 2,
    projection: 'EPSG:4326'
  })
});

map.getView().fit(boundingBox)
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsts/1.5.0/jsts.js"></script>
<script src="https://openlayers.org/en/v4.5.0/build/ol-debug.js"></script>
<link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet"/>

<div id="map" class="map" tabindex="0"></div>
    
answered by 04.12.2017 / 22:00
source