Flex IBM ILOG (Elixir 3.0) 交互式地图答案

【问题标题】：Flex IBM ILOG (Elixir 3.0) Interactive mapFlex IBM ILOG (Elixir 3.0) 交互式地图
【发布时间】：2011-04-07 04:11:41
【问题描述】：

我开发了交互式地图：用户可以通过鼠标点击放大一些区域并放置标签。我正在创建 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>

在 DistrictRenderer 中，我调度鼠标单击。但是如何放置标签？可能我必须将 x,y 传递给 DistrictObjectsRenderer 并在那里创建新标签？

【问题讨论】：

您能否在某个地方发布您的项目并使用可运行的示例和 SrvView，我将向您展示放置标签放置功能的地方。谢谢。

标签： apache-flex ilog ilog-elixir

【解决方案1】：

这是一个最终的解决方案：

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>

DistrictRenderer 中的 onMouseClick 处理程序：

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

【讨论】：