Appcelerator Alternative zu KML in bencoding.map

Question

Ich aktualisiere eine Appcelerator App, die "bencoding.map" https://github.com/benbahrenburg/benCoding.Map/blob/master/documentation/index.md verwendet.

Nun ist "bencoding.map" veraltet und ich habe es aktualisiert, um die native Titanium Kartenfunktion zu verwenden.

Allerdings habe ich jetzt ein Problem, wo die "addKML" von "bencoding.map" ist nicht verfügbar in der Titanium map api.

Weiß jemand, was ich verwenden kann, um die KML-Funktionalität zu ersetzen? Der Code ist unten:

function onkmlCompleted(){ 
     Ti.API.info("onkmlCompleted"); 
     Ti.API.info("onkmlCompleted"+JSON.stringify(mapLoadingWindow)); 
     mapLoadingWindow.close({animated:false}); 
     mapView.removeEventListener('kmlCompleted',onkmlCompleted); 
    }; 

    mapView.addEventListener('kmlCompleted',onkmlCompleted); 

    mapView.addKML({ 
     path:"some_file.kml", //Path to our kml file 
     tag : 55, //Integer value used as the tag for all polygons and annotations. If you want use remove you need to set this to a known value. 
     flyTo:false, //Will set your zoom to show all of your points added (false by default)   
     //Contains all of the details used to process overlays from your KML file 
     overlayInfo:{ 
      title:'my kml batch key', //This identifies all of the overlay elements in your kml file. This is also used for delete or query operations. 
      alpha:0.5, //Alpha value of your overlays 
      lineWidth:1.2, //Line Width of your overlays 
      strokeColor:'#000', //Stroke Color of your overlays 
      color:'yellow', //Sets the color of all your overlays (if left off, a random color will be selected) 
      useRandomColor:true, //If true, a random color will be selected, this overrides the color provided if true    
     } 
    }); 

Answer 1

Eine Option, um die KML-Daten zu JSON zu konvertieren wäre, fügen Sie dann die Daten an den nativen Titanium Map über die Methoden des Kartenmodul, wie createPolygon, createPolyline usw., wie Sie Ihre Daten erfordert.

Ich habe dies mit dem togeojson Node.js-Modul getan. Beginnend mit Titanium 6 können wir direkt auf Knotenmodule innerhalb unserer Projekte zugreifen. Vorausgesetzt, dass Sie eine Legierung Projekt verwenden:

cd MyProject/app/assets 
npm install togeojson 

Dies wird auch einige andere Abhängigkeitsmodule installieren, einschließlich xmldom, die wir auch nutzen können.

Nehmen Sie einige sample KML LineString data und platzieren in MyProjects/app/assets, können wir es dann mit dem togeojson Modul konvertieren. Das wird uns auf halbem Weg dorthin bringen. Das Titanium-Map-Modul spricht kein GeoJSON, aber da GeoJSON nur JSON ist, können wir es durchlaufen und die benötigten Daten erhalten und diese dann der entsprechenden Map-Modul-Methode zuführen.

Im Folgenden finden Sie ein Beispiel für das Ausführen der KML-LineString-Daten an die createPolyline-Methode der Karte. Unter der Annahme, dass dieser Alloy index.js Controller, der eine Kartenansicht mit der ID 'Karte' darauf hat:

//the titanium map module 
var Map = require('ti.map'); 
//the node module we installed 
var togeojson = require('togeojson'); 
//a dependency of togeojson which we will also use 
var DOMParser = require('xmldom').DOMParser; 

//with out data file in apps/assets 
var file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "linestring.kml"); 
var kml = file.read().text; 

//the module requires the xml data in XML DOM, so we parse it first 
var xml = (new DOMParser()).parseFromString(kml, 'text/xml'); 

//convert the kml to GeoJSON 
var converted = togeojson.kml(xml); 

//Here, we iterate through the GeoJSON file and pull out the coordinates to use to 
//create our Map polygons, polylines, etc. Your implementation will vary depending 
//on the data you are reading 
converted.features.forEach(function(feature){ 
    if(feature.geometry.type === 'LineString') 
    $.map.addPolyline(Map.createPolyline({ 
     points: feature.geometry.coordinates, 
     strokeColor: '#ff0000', 
     strokeWidth: '2' 
    })); 
}); 

$.map.setRegion({ 
    latitude: 37.824664, 
    latitudeDelta: 0.002, 
    longitude: -122.364383, 
    longitudeDelta: 0.002 
});