bencoding.map 中 KML 的 Appcelerator 替代品
Appcelerator alternative to KML in bencoding.map
我正在更新一个曾经使用 "bencoding.map" https://github.com/benbahrenburg/benCoding.Map/blob/master/documentation/index.md.
的 Appcelerator 应用程序
现在 "bencoding.map" 已弃用,因此我更新为使用原生 Titanium 地图功能。
但是我现在遇到一个问题,"bencoding.map" 中的 "addKML" 在 Titanium 地图 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
}
});
一种选择是将 kml 数据转换为 JSON,然后通过地图模块的方法(例如 createPolygon、createPolyline 等)将数据添加到原生 Titanium Map,作为您的数据要求。
我使用 togeojson Node.js 模块完成了此操作。从 Titanium 6 开始,我们现在可以直接从我们的项目中访问 Node 模块。假设您正在使用 Alloy 项目:
cd MyProject/app/assets
npm install togeojson
这也会安装一些其他的依赖模块,包括xmldom
,我们也可以使用
取一些sample KML LineString data并放入MyProjects/app/assets
,然后我们可以使用togeojson
模块转换它。这将使我们完成一半。 Titanium 地图模块不支持 GeoJSON,但由于 GeoJSON 只是 JSON,我们可以遍历它并获取我们需要的数据,然后将其提供给相关的映射模块方法。
下面是通过将 KML LineString 数据发送到地图的 createPolyline 方法来完成所有这些操作的示例。假设这个 Alloy index.js
控制器有一个 id 为 'map' 的地图视图:
//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
});
我正在更新一个曾经使用 "bencoding.map" https://github.com/benbahrenburg/benCoding.Map/blob/master/documentation/index.md.
的 Appcelerator 应用程序现在 "bencoding.map" 已弃用,因此我更新为使用原生 Titanium 地图功能。
但是我现在遇到一个问题,"bencoding.map" 中的 "addKML" 在 Titanium 地图 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
}
});
一种选择是将 kml 数据转换为 JSON,然后通过地图模块的方法(例如 createPolygon、createPolyline 等)将数据添加到原生 Titanium Map,作为您的数据要求。
我使用 togeojson Node.js 模块完成了此操作。从 Titanium 6 开始,我们现在可以直接从我们的项目中访问 Node 模块。假设您正在使用 Alloy 项目:
cd MyProject/app/assets
npm install togeojson
这也会安装一些其他的依赖模块,包括xmldom
,我们也可以使用
取一些sample KML LineString data并放入MyProjects/app/assets
,然后我们可以使用togeojson
模块转换它。这将使我们完成一半。 Titanium 地图模块不支持 GeoJSON,但由于 GeoJSON 只是 JSON,我们可以遍历它并获取我们需要的数据,然后将其提供给相关的映射模块方法。
下面是通过将 KML LineString 数据发送到地图的 createPolyline 方法来完成所有这些操作的示例。假设这个 Alloy index.js
控制器有一个 id 为 'map' 的地图视图:
//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
});