Flex IBM ILOG (Elixir 3.0) Interactive map
I develop interactive map: user can zoom some area and place labels by mouse click. I am creating customSkin:
<ibm:Scroller top="0" left="0" width="100%" height="100%" id="scroller" doubleClickEnabled="true"
skinClass="com.ibm.ilog.elixir.skins.spark.ScrollerSkin">
<ibm:MapGroup id="mapGroup">
<ibm:MapFeatureGroup id="featureGroup" featureRenderer="skins.DistrictRenderer" keyField="district"/>
<ibm:MapDataGroup id="objectsDataGroup"
zoomable="false"
itemRenderer="skins.DistrictObjectsRenderer"
keyField="district" />
</ibm:MapGroup>
</ibm:Scroller>
In Distri开发者_StackOverflowctRenderer I dispatching mouse click. But how can I place labels? May be I must pass x,y to DistrictObjectsRenderer and there create new labels?
Its a final solution:
RegionMapSkin.mxml:
<ibm:Scroller top="0" left="0" width="100%" height="100%" id="scroller" skinClass="com.ibm.ilog.elixir.skins.spark.ScrollerSkin">
<ibm:MapGroup id="mapGroup">
<ibm:MapFeatureGroup id="featureGroup"
featureRenderer="com.skins.DistrictRenderer" />
<ibm:MapDataGroup id="objectsGroup"
zoomable="false"
itemRenderer="com.skins.ObjectsRenderer"
dataProvider="{ObjectsModel.getInstance().items}" />
</ibm:MapGroup>
</ibm:Scroller>
ObjectsRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:DataRenderer xmlns="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:ibm="http://www.ibm.com/xmlns/prod/ilog/elixir/2010"
left="{data.lon}"
top="{data.lat}">
<s:Label text="{data.title}"
color="#ffffff"
backgroundColor="#AB191A"
paddingLeft="3" paddingRight="3" paddingTop="4" paddingBottom="1"
top="-18" left="3"/>
<s:Ellipse width="6" height="6">
<s:fill>
<s:SolidColor color="#AB191A" />
</s:fill>
</s:Ellipse>
</s:DataRenderer>
And onMouseClick handler in DistrictRenderer:
private function onMouseClick(e:MouseEvent):void
{
var mapFeature:MapFeature = MapFeatureRenderer(e.currentTarget).mapFeature;
var map:RegionMap = app.map;
var p:Point = new Point(e.localX, e.localY);
p = map.mapToLongLat(p);
ObjectsModel.getInstance().items.addItem({
'title': parameters.title,
'lon': parameters.lon,
'lat': parameters.lat
});
}
精彩评论