Mer

Hvordan legge til markør dynamisk når du klikker på kartet ved hjelp av OpenLayers 3?


Jeg prøver å legge til punkt (markør) på kartklikk med tilpasset stil ved hjelp av OpenLayers 3. Jeg prøvde denne koden, men ingenting skjer når brukeren klikker på kartet:

var map = nytt ol.Map ({lag: [nytt ol.layer.Tile ({kilde: ny ol.source.MapQuest ({lag: 'sat'})}}), nytt ol.layer.Vector ({kilde: vectorSource})], target: 'map', view: new ol.View ({center: [0, 0], zoom: 2})}); var styles = {'square': new ol.style.Style ({image: new ol.style.RegularShape ({fill: fillColor, stroke: stroke, points: 4, radius: 10, angle: Math.PI / 4} )}), 'trekant': ny ol.style.Style ({image: new ol.style.RegularShape ({fill: fillColor, stroke: stroke, points: 3, radius: 10, rotation: Math.PI / 4, vinkel: 0})})}}; var slag, fillColor; map.on ("klikk", funksjon (evt) {stroke = new ol.style.Stroke ({color: 'black', width: 1}); var coords = evt.coordinate; var addedMarker = new ol.geom. Point ([ol.proj.transform (coords, 'EPSG: 4326', 'EPSG: 3857')]); fillColor = 'blue'; var featurething = new ol.Feature ({navn: "Marker 01", geometri: addedMarker}); featurething.setStyle (styles ['triangel']); vectorSource.addFeature (featurething);});

self.map.on ("singleclick", function (evt) {setPinOnMap (evt);}) setPinOnMap: function (evt) {var self = this; var latLong = ol.proj.transform (evt.coordinate, 'EPSG: 3857', 'EPSG: 4326'); var lat = latLong [1]; var long = latLong [0]; self.params.options.mapClick ({lat: lat, long: long}); if (self.dinamicPinLayer! == undefined) {console.log ("moove") self.iconGeometry.setCoordinates (evt.coordinate); // eller opprett en annen pin} else {self.iconGeometry = new ol.geom.Point (evt.coordinate); var iconFeature = ny ol.Feature ({geometri: self.iconGeometry, navn: 'Null Island', befolkning: 4000, nedbør: 500}); var iconStyle = new ol.style.Style ({image: new ol.style.Icon (({anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', size: [48, 48], opacity: 1, src: '/resources/cloud/controls/cloudMap/img/redmarker_small.png ">Forbedre dette svaretredigert 28. juli '16 kl. 12:58Andre Silva9,48312 gullmerker46 sølvmerker96 bronsemerkersvarte 28. juli '16 kl. 11:41mgrupmgrup111 bronsemerke