Kreise Zeichnen?

t-i · 2010-09-27T12:16:21.000Z

Als Erweiterer des Distance-O-Meters muss ich jetzt auch was dazu sagen…

Meine Karte nimmt die Punkte aus der Datenbank und berechnet die Kreislinie direkt im PHP-Script, z.B. hier. Wenn Du nur wenige Antennen-Standorte hast, dann kannst Du die Punkte direkt ins Java-Script einbauen:

var circle =
OpenLayers.Geometry.Polygon.createRegularPolygon(feature.geometry,
10000, 50)
layer.addFeatures(new OpenLayers.Feature.Vector(circle));

the function expects 4 parameters of which I supply 3:

1. The point where circlecenter must be at
1. The radius in unit’s of the map (in my case meters)
1. The number of sides (50 makes a nice circle)

Quelle

antispeer · 2010-09-27T13:02:13.000Z

Hallo t-i,

magst du mir die PHP scripte geben?

weil ich möchte das unbedingt dynamisch haben.
es soll halt autonom arbeiten ohne das ich immerwieder was anpassen muss.

ich würde halt gerne einpaar gute beispiele dazu finden wie ich das denn umsetzen kann. sprich wie ich mit den openlayers umgehe

t-i · 2010-09-27T15:44:33.000Z

Das Script greift auf die toolserver-Datenbank zu, um dort die amenities ‘live’ aus dem System zu holen - das wäre bei Dir aber nicht nötig, da Du die Antennen ja nicht in die Datenbank schreiben möchtest?! Bei weniger als 100 Koordinaten lohnt sich mMn auch der Umweg über eine lokale Datenbank nicht.

Was meinst Du mit ‘dynamisch’ genau? Wer fügt die Antennen hinzu? Wie oft? …

antispeer · 2010-09-28T08:55:10.000Z

ach antennen werden mehr mals wöchentlich geändert hinzugefügt oder gelöscht

das soll dann von den usern selber gemacht werden.

datenbank etc ist kein problem
ich habe schon eine datenbank aufgebaut wo die user das selber einpflegen können
die geben einfach die adresse der antenne an und fertig

nun gibt es noch zwei offene todo’s

aus der adresse die koordinate ermitteln
und den kreis zeichnen

mir würde hier ein beispiel reichen

antispeer · 2010-09-28T10:49:10.000Z

hmm ich habe nun echt alles fertig

nur das mit den kreis bekomme ich nicht hin
hat hier jemand etwas code schnipsel für mich

also ein beispiel

ich möchte gern per Openlayer einen kreis zeichnen der einen radius von 2 km hat
und das um die adresse

Schliemannstraße 36 22609 Hamburg (ist nur ein beispiel)

kann mir da jemand weiterhelfen?
einfach mal das per script fertig machen?

So meine eigenen Versuche

Test html, body, #basicMap { width: 100%; height: 100%; margin: 0; }

mit der Funktion createRegularPolygon sollte ich doch einfach ein Polygon erstellen
und den füge ich dann mit addlayer ein?
oder ?

zur Funktion
createRegularPolygon

OpenLayers.Geometry.Polygon.createRegularPolygon = function(	origin,
	radius,
	sides,
	rotation	)

erleuterung:
origin Position des punktes x und y
radius durchmesser
sides ecken (anbesten 20 angeben)
rotation ???

aber irgendwie geht bei mir garnix

wo ist das problem?
was übersehe ich ?

wie kann ich so schöne kreise zeichnen wie bei den anderen?

ich glaub ich bin zublond

fx99 · 2010-09-28T15:49:37.000Z

Hier ist ein Schnipsel aus http://hwri.hw.funpic.de/OSM_circle/GPXCIRC.js , der Kreise berechnet und darstellt.

	var pointList = [];
	var radius=this.radius /(Math.cos(3.14159* llat/180));   
        var npoin=32;
	for (var k = 0; k < npoin; k++ ) {
			var ff= new OpenLayers.Geometry.Point(feature.x + Math.cos(2.0*3.14159/npoin * k)* radius ,
									  feature.y + Math.sin(2.0*3.14159/npoin * k)* radius  );
			pointList.push(ff);  //	alert (k+":"+ff);
		}
	var ff= new OpenLayers.Geometry.Point(feature.x + radius, feature.y ); // alert (npoin+":"+ff);
	pointList.push(ff);
	if ( bifill == true ) { 
	    featureRTE.push(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LinearRing(pointList),null,style_green));
        } else {
	    featureRTE.push(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_green)); 
        }       
    };
this.addFeatures(featureRTE);

Ich würde aber empfehlen, die Kreise extern zu halten, z.B. als GPX ode SVG Datei, dann kannst Du die Form einfacher an die Realität anpassen,
ähnlich wie im distance-o-meter.

antispeer · 2010-09-28T15:56:48.000Z

ja ich möchte das ja so machen wie beim distance-o-meter

aber ich finde nirgendswo code schnipsel
das ist ja grad mein problem

und ich muss morgen fertig sein
ich hab es versprochen

ach mensch
alles drum herrum ist schon fertig nur die kreise nicht

efred · 2010-09-28T16:04:55.000Z

@antispeer… fx99 hat ja jetzt den Codeschnipsel angefügt um die Kreise zu machen. Siehe:

fx99:

Hier ist ein Schnipsel aus http://hwri.hw.funpic.de/OSM_circle/GPXCIRC.js , der Kreise berechnet und darstellt.

	var pointList = [];
	var radius=this.radius /(Math.cos(3.14159* llat/180));   
        var npoin=32;
	for (var k = 0; k < npoin; k++ ) {
			var ff= new OpenLayers.Geometry.Point(feature.x + Math.cos(2.0*3.14159/npoin * k)* radius ,
									  feature.y + Math.sin(2.0*3.14159/npoin * k)* radius  );
			pointList.push(ff);  //	alert (k+":"+ff);
		}
	var ff= new OpenLayers.Geometry.Point(feature.x + radius, feature.y ); // alert (npoin+":"+ff);
	pointList.push(ff);
	if ( bifill == true ) { 
	    featureRTE.push(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LinearRing(pointList),null,style_green));
        } else {
	    featureRTE.push(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_green)); 
        }       
    };
this.addFeatures(featureRTE);

Ich würde aber empfehlen, die Kreise extern zu halten, z.B. als GPX ode SVG Datei, dann kannst Du die Form einfacher an die Realität anpassen,
ähnlich wie im distance-o-meter.

Oder was für ein Codeschnipsel meinst Du?

antispeer:

und ich muss morgen fertig sein sad
ich hab es versprochen

hmmm… am 26.09. hast Du zum ersten mal nach sowas gefragt und hast nur bis am 29.09. zeit dafür? naja, ist schon ein bisschen kurzfristig das Ganze… Ich erinnere mich an die Feuerwehrkarte, da war man 2 oder 3 Wochen dran, bis dies hingehauen hat (oder sogar noch länger)…

antispeer · 2010-09-28T16:23:38.000Z

jap nun ist es aufeinmal kurzfristig

ich hätte wirklich nicht gedacht das es soein aufwand ist

naja die nacht ist ja noch lang
was ich bei den bespiel noch nicht verstehe ist wie ich den kreis in die karte bringe?

ich habe oben einen versuch geschrieben wie ich die karte eingebunden habe
ich sehe da nicht wie ich den kreis einbilde und ich sehe nicht wie ich den kreis an die richtige stelle bringe

das ist mein problem zur zeit

ich glaube gerne das das alles funktioniert
aber ich kann es halt nicht einbinden

fx99 · 2010-09-28T17:24:39.000Z

Wenn Du mir die Koordinaten schickst ( einfache ASCII Tabelle) mache ich ein GPX File draus. Das kannst Du dann wie in
http://wiki.openstreetmap.org/wiki/Fx99_spielwiese beschrieben in die Karte reinbinden.

Das Einarbeiten in Openlayers ist ziemlich kompliziert.

antispeer · 2010-09-28T17:33:33.000Z

lieb von dir aber das bringt mir einfach nix

hach

also ich brauch einfach eine x und eine y koordinate oder?

das ganze muss leider zur echtzeit passieren
ich kann eigentlich sehr gut quellcode lesen wenn man mir drei kommentare hinterschreibt

den link oben habe ich schon x mal durchgelesen

aber gefordert ist eine funktion die eher das macht was http://toolserver.org/~ti/distance-o-meter/ macht
einen kreis ziehen der eingefärbt ist.

gibt es da keine fertige funktion
das kann von miraus erstmal star sein

einfach ein beispiel in berlin mitte oder hamburg mitte

ich glaub ich verstehe das grad einfach nicht

VG Annette

antispeer · 2010-09-28T19:16:58.000Z

sooo soweit bin ich

also kreiszeichnen geht
dummerweise der kreis ist in atlantik und ich bin in berlin

warum ist das so?
habe doch das selbe angegeben

Circle Test p { width: 500px; } var map, vectorLayer, polygonFeature, selectControl, selectedFeature;

    function init(){
        map = new OpenLayers.Map('map');
        var layer = new OpenLayers.Layer.OSM();
        map.addLayer(layer);
        map.addControl(new OpenLayers.Control.MousePosition());
        map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: "km"}));
        map.setCenter(new OpenLayers.LonLat(13.41,52.52).transform(
           new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
           new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection   map.Geometry.Polygon.createRegularPolygon = function(13.41,52.52,10000,20,1)
           ),15);
        vectorLayer = new OpenLayers.Layer.Vector("Circle");

       createCircle(13.41,52.52,111121.21,'#FF0000','#FF0000');
      

      };
             
    /////
    var EARTH_RADIUS_KM     = 6371.0088;
    var EARTH_RADIUS_METERS = EARTH_RADIUS_KM * 1000.0;
            /* degrees to radians */
     function geoRadians(deg){
         return deg * (Math.PI / 180.0);
     };

   /* radians to degrees */
    function geoDegrees(rad){
       return rad * (180.0 / Math.PI);
    };
    
    function createCircle(lat,lng,radiusKM,line,fill){
        var rLat = geoRadians(lat);  // radians
        var rLon = geoRadians(lng);  // radians
        var d    = radiusKM / EARTH_RADIUS_KM;
        var pointList = [];
        for (x = 0; x < 360; x += 5) {
            var xrad = geoRadians(x);// radians
            var tLat = Math.asin(Math.sin(rLat) * Math.cos(d) + Math.cos(rLat) * Math.sin(d) * Math.cos(xrad));
            var tLon = rLon + Math.atan2(Math.sin(xrad) * Math.sin(d) * Math.cos(rLat), Math.cos(d)-Math.sin(rLat) * Math.sin(tLat));
                    Cx = geoDegrees(tLon);
                    Cy = geoDegrees(tLat);
                    var newPoint = new OpenLayers.Geometry.Point(Cx,Cy);
                    pointList.push(newPoint);
       }

      var myStyle = {strokeColor: line, fillColor: fill, fillOpacity: 0.4, strokeWidth: 1, pointRadius: 6, pointerEvents: "visiblePainted"};
               
      pointList.push(pointList[0]);
      var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
      polygonFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing]),null,myStyle);
      map.addLayer(vectorLayer);
      vectorLayer.addFeatures([polygonFeature]);
      };

</script>

fx99 · 2010-09-28T19:25:55.000Z

Probiers mal da mit:
var point = this.setToMercator(lon,lat);

setToMercator: function(lon, lat) {
x = parseFloat(lon);
y = parseFloat(lat);
var PI = 3.14159265358979323846;
x = x * 20037508.34 / 180;
y = Math.log (Math.tan ((90 + y) * PI / 360)) / (PI / 180);
y = y * 20037508.34 / 180;
return new Array(x,y);
},

Nachtrag:
createCircle(13.41,52.52,111121.21,‘#FF0000’,‘#FF0000’);
function createCircle(lat,lng,radiusKM,line,fill){
Da ist lat und lng vertauscht!

Berlin: lon=13.398136138744&mlat=52.5178532421

antispeer · 2010-09-28T19:48:53.000Z

hmm ich hoffe du bist lange auf
ich muss erstmal pizza und bier bestellen

mein kopf braucht narrung

vor dem informatik studium war ich klein und zierlich
nun bin ich eine tonne

am we wird sport gemacht!

VG Annette

fx99 · 2010-09-28T20:33:20.000Z

http://hwri.funpic.de/OSM_circle/MCirc.htm mit http://hwri.funpic.de/OSM_circle/CIRC4.js erlaubt die direkte Eingabe von Koordinaten.
Es ensteht nur ein OSM Layer.

antispeer · 2010-09-28T21:07:22.000Z

hmmm

ist zwar genau das was ich suche
aber das beispiel ist mir grad zuviel ich brauch zulange dafür um das zuverstehen

antispeer · 2010-09-28T21:31:14.000Z

ich hab es endlich verstanden

aber woher weiss ich wie groß der radius ist?

fx99 · 2010-09-29T04:26:15.000Z

var circ1 = new OpenLayers.Layer.N3CIRC(lat+y-0.1,lon+x-0.1,“red”,0.1+x,1000.0+y*10000);

der letzte Parameter (1000.0+y*10000) ist der Radius in Metern.
Ob das in der Karte auf den Meter genau stimmt, kann ich nich garantieren, aber bisher hat sich niemand beschwert.

Bei der Karte mit den 9 Kreisen ist der N-S Abstand größer als der O-W Abstand. Das liegt daran, dass der Abstand jeweils 0.1 Grad ist,
das ist bei uns in N-S Richtung 11,1 km, in O-W Richtung dagegen nur ca. 7,… km.

fx99 · 2010-09-29T16:34:18.000Z

Kann man mal das Ergebnis sehen?

antispeer · 2010-09-30T07:16:28.000Z

ja wenn es freigegeben wurde gerne

es wurde gestern vorgestellt und die warn alle begeistert aber da gibs noch soviel zutun!
zur zeit zeigt er einfach nur die kreise an

gibt es eine möglichkeit die deckung in inneren unterschiedlich stark zugestalten?
also sprich das die tranzparenz abnimmt aber dennoch die gleiche farbe ist?

also funker a sendet viel also ist er dunkler
funker b sendet nur ganz wenig also ist er heller?

ich habe das zur zeit so gemacht das ich die layer einfach 10 mal zeichne aber bei einer gewissen menge wird das wohl zulangsam!