Viac

Ako dynamicky pridať značku po kliknutí na mapu pomocou OpenLayers 3?


Snažím sa pridať bod (značku) na kliknutie na mape vlastným štýlom pomocou OpenLayers 3. Skúsil som tento kód, ale nič sa nestane, keď používateľ klikne na mapu:

mapa varov = nová ol.Map ({vrstvy: [nový ol.layer.Tile ({zdroj: nový ol.source.MapQuest ({vrstva: 'sat'}))}), nový ol.layer.Vector ({zdroj: vectorSource})], cieľ: 'mapa', zobrazenie: nový ol.View ({stred: [0, 0], priblíženie: 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} )}), 'trojuholník': new ol.style.Style ({image: new ol.style.RegularShape ({fill: fillColor, stroke: stroke, points: 3, radius: 10, rotation: Math.PI / 4, uhol: 0})})}; var zdvih, fillColor; map.on ("klik", funkcia (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 ({name: "Marker 01", geometry: addedMarker}); featurething.setStyle (štýly ['trojuholník']); 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); // alebo vytvorte ďalší pin} else {self.iconGeometry = new ol.geom.Point (evt.coordinate); var iconFeature = new ol.Feature ({geometry: self.iconGeometry, name: 'Null Island', populace: 4000, rainfall: 500}); var iconStyle = new ol.style.Style ({image: new ol.style.Icon (({anchor: [0,5, 46], anchorXUnits: 'zlomok', anchorYUnits: 'pixelov', veľkosť: [48, 48], krytie: 1, src: '/resources/cloud/controls/cloudMap/img/redmarker_small.png ">Zdieľať Vylepšiť túto odpoveďupravené 28. júla 16:15 o 12:58Andre Silva9,48312 zlatých odznakov46 strieborných odznakov96 bronzových odznakovodpovedal 28. júla 16:11 o 11:41mgrupmgrup111 bronzový odznak


Pozri si video: Openlayers 6 Tutorial #2 - Setting up the environment (Október 2021).