zoukankan      html  css  js  c++  java
  • FGMap学习之自定义标注(示例:核电站离我们有多远)

    日本地震引起的核泄漏再一次引起我们对核使用的关注,我们是否知道我们离核电站有多远呢?
    今天我们将使用FGMap在地图将我们身边的核电站标注出来,使用到的是自己定义标注。
    这个自定义标注中由一张图片,文字标签,背景图三部分组成。

    数据来源来自搜狗地图,本人不知道是否正确。

    我们的主程序代码如下:

     

    View Code
    1 <?xml version="1.0" encoding="utf-8"?>
    2  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    3 xmlns:s="library://ns.adobe.com/flex/spark"
    4 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="800" minHeight="600"
    5 xmlns:maps="com.fgmap.maps.*">
    6 <s:layout>
    7 <s:BasicLayout/>
    8 </s:layout>
    9 <fx:Declarations>
    10 <!-- 将非可视元素(例如服务、值对象)放在此处 -->
    11 </fx:Declarations>
    12
    13 <s:Panel width="100%" height="100%" title="核电站离我们有多远">
    14 <maps:Map id="map" width="100%" height="100%"
    15 mapevent_mapready="map_mapevent_mapreadyHandler(event)"/>
    16 </s:Panel>
    17
    18 <fx:Script>
    19 <![CDATA[
    20 import com.SogouMap.PlantData;
    21 import com.control.CustomIconSprite;
    22 import com.fgmap.maps.*;
    23 import com.fgmap.maps.MapMouseEvent;
    24 import com.fgmap.maps.controls.MapTypeControl;
    25 import com.fgmap.maps.controls.NavigationControl;
    26 import com.fgmap.maps.controls.OverviewMapControl;
    27 import com.fgmap.maps.controls.ScaleControl;
    28 import com.fgmap.maps.interfaces.IMapType;
    29 import com.fgmap.maps.overlays.*;
    30
    31 import mx.charts.PieChart;
    32 import mx.collections.ArrayCollection;
    33
    34 private var marker:Marker;
    35
    36 private var centreLatlng:LatLng = new LatLng(39.911842984749946, 116.400146484375);//北京的一个坐标位置。
    37
    38 protected function map_mapevent_mapreadyHandler(event:MapEvent):void
    39 {
    40 map.enableContinuousZoom(); //启用连续平滑缩放。
    41 map.enableScrollWheelZoom(); //启用使用鼠标滚轮缩放。
    42 map.addControl(new MapTypeControl()); //供用户在地图类型之间进行切换的按钮。
    43 map.addControl(new NavigationControl());//供用户更改地图的各项导航参数,包括缩放级别、中心位置和空间方位角。
    44 map.addControl(new ScaleControl()); //比例控件是用于指示当前地图的分辨率和缩放级别的可视指示器。
    45
    46 map.setCenter(centreLatlng,4); //设置地图的中心点。
    47 map.setMapType(MapType.NORMAL_MAP_TYPE);//设置默认为缺省地图
    48
    49 showInMap();
    50 }
    51
    52 private function showInMap():void{
    53 var data:ArrayCollection = PlantData.data;
    54 var points:Array = PlantData.latlngs;
    55 for(var i:int = 0; i < data.length; i++){
    56 var p:Object = data[i];
    57
    58 var latlng:LatLng = new LatLng(points[i][0],points[i][1]);
    59 trace(latlng.toUrlValue());
    60
    61 var markerOptions:MarkerOptions = new MarkerOptions({
    62 hasShadow:false,
    63 tooltip:p.caption,
    64 icon:new CustomIconSprite(p.caption,p.Style.id) //自定义标注,参数为名称和图标样式
    65 });
    66 var pMarker:Marker = new Marker(latlng,markerOptions); //创建标注并指定标注样式
    67
    68 map.addOverlay(pMarker); //在地图上添加样式
    69 }
    70 }
    71 ]]>
    72 </fx:Script>
    73 </s:Application>

    自己定义标注的代码如下:

    View Code
    1 package com.control
    2 {
    3 import flash.display.DisplayObject;
    4 import flash.display.Sprite;
    5 import flash.text.TextField;
    6 import flash.text.TextFieldAutoSize;
    7
    8 public class CustomIconSprite extends Sprite
    9 {
    10 [Embed('assets/style/1.png')]
    11 private var S2000Img:Class;
    12
    13 [Embed('assets/style/2.png')]
    14 private var S2001Img:Class;
    15
    16 [Embed('assets/style/3.png')]
    17 private var S1999Img:Class;
    18
    19 public function CustomIconSprite(label:String,styleIndex:String = "S2000")
    20 {
    21 var styleClass:DisplayObject;
    22 switch (styleIndex){
    23 case "S2000":
    24 styleClass = new S2000Img();
    25 break;
    26 case "S2001":
    27 styleClass = new S2001Img();
    28 break;
    29 case "S1999":
    30 styleClass = new S1999Img();
    31 break;
    32 }
    33 addChild(styleClass); //添加图片
    34 var labelMc:TextField = createTextField(label); //创建文本标注
    35
    36 var sprite:Sprite = new Sprite(); //创建文本标注的背景
    37 var Number = labelMc.textWidth + 6;
    38 var height:Number = labelMc.textHeight + 6;
    39 sprite.graphics.lineStyle(1,0x000000,1);
    40 sprite.graphics.beginFill(0xffffff,1);
    41 sprite.graphics.drawRoundRect(0-width / 2,0-height / 2,width,height,3,3);
    42 labelMc.x = 0 - width / 2 + 3;
    43 labelMc.y = 0 - height / 2 + 0;
    44 sprite.addChild(labelMc);
    45
    46 sprite.x = styleClass.width + width / 2;
    47 sprite.y = styleClass.y + sprite.height / 2 + height / 2;
    48 addChild(sprite);
    49 cacheAsBitmap = true;
    50 }
    51
    52 private function createTextField(label:String):TextField {
    53 var labelMc:TextField = new TextField();
    54 labelMc.autoSize = TextFieldAutoSize.LEFT;
    55 labelMc.selectable = false;
    56 labelMc.border = false;
    57 labelMc.embedFonts = false;
    58 labelMc.mouseEnabled = false;
    59
    60 labelMc.text = label;
    61 labelMc.x = 5;
    62
    63 return labelMc;
    64 }
    65 }
    66 }

    源代码可以从这里下载:https://files.cnblogs.com/liongis/FGMapDemo4.rar

    搜狗的坐标也是经过偏移的,这个应该和百度地图一样。但这和我们之前的地图坐标不一样,所以中间需要去转换,程序中的坐标是已经转换好的。

    转换算法这里不便贴出来,如果哪位朋友有这几种地图间坐标转换的需要,可以找我。

    作者:LionGIS
    邮箱:liongis@163.com
    QQ:1366940902
    出处:http://liongis.cnblogs.com/
    欢迎转载,请在文章页面明显位置给出原文链接。

  • 相关阅读:
    poj 1088 滑雪
    位运算与bitset
    hdu 4607 Park Visit
    树的直径
    codeforces 495D Sonya and Matrix
    German Collegiate Programming Contest 2015(第三场)
    BAPC 2014 Preliminary(第一场)
    Benelux Algorithm Programming Contest 2014 Final(第二场)
    E. Reachability from the Capital(tarjan+dfs)
    poj2104 K-th Number(划分树)
  • 原文地址:https://www.cnblogs.com/liongis/p/1990675.html
Copyright © 2011-2022 走看看