Appcelerator альтернатива KML в bencoding.map

Question

Я обновляю приложение Appcelerator, которое раньше использовало «bencoding.map» https://github.com/benbahrenburg/benCoding.Map/blob/master/documentation/index.md.

Теперь «bencoding.map» устарел, поэтому я обновился, чтобы использовать встроенную функцию титановой карты.

Однако у меня теперь есть проблема, когда «addKML» из «bencoding.map» недоступен на карте титана api.

Кто-нибудь знает, что я могу использовать для замены функциональности KML? Код ниже:

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

Одним из вариантов были бы преобразовать данные KML в формат JSON, а затем добавить данные в родную Titanium Map через методу карты модуля, такие как createPolygon, createPolyline и т.д., в качестве данных требует.

Я сделал это, используя модуль Node.js togeojson. Начиная с Titanium 6, теперь мы можем напрямую обращаться к модулям узлов из наших проектов. Предполагая, что вы используете проект сплава:

cd MyProject/app/assets 
npm install togeojson 

Это будет также установить некоторые другие модули зависимостей, в том числе xmldom, которые мы можем использовать, как хорошо.

Принимая sample KML LineString data и размещая запрос в MyProjects/app/assets, мы можем конвертировать его с помощью модуля togeojson. Это поможет нам на полпути. Модуль Titanium Map не говорит о GeoJSON, но поскольку GeoJSON - это просто JSON, мы можем перебирать его и получать нужные нам данные, а затем передавать его соответствующему модулю Map module.

Ниже приведен пример выполнения всего этого путем отправки данных KML LineString в метод createPolyline карты. Предполагая, что этот контроллер сплава index.js имеет вид карты с идентификатором «карты» на нем:

//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 
});