Flash中国地图开源项目flash-china-map

喜欢这篇文章吗?分享给你的朋友吧~ 

Flash 中国地图
Flash中国地图,以Object为数据源,便于实现基于中国地图的可视化项目。

特征:

  • swc,便于导入到Flex项目中
  • 数据源为Object,比静态XML更方便
  • 数据驱动的地图块颜色和Hover颜色
  • 可配置是否显示省份名

Code License: Apache 2.0
Author: ComingX Jingle
Download: Git Repo
Demo Show:

使用方法:

  • 创建Flex项目,拷贝ChinaMap.swc至项目libs目录下
  • map = new Map()

Flex导入地图

<?xml version="1.0" encoding="utf-8"?>
<!--
* ComingX.com Business License
* 
* Copyright 2013. All rights reserved.
*
* @Author: Jingle
* @Email: jingdongemail@gmail.com
* @Created date: 2013-6-27
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="application1_creationCompleteHandler(event)"
			   >
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.comingx.jingle.chinamap.MapBase;
			import com.comingx.jingle.chinamap.ProvinceItem;
			import com.comingx.jingle.chinamap.domains.InitData;
			import com.comingx.jingle.chinamap.utils.ColorUtil;
 
			import flash.display.Sprite;
 
			import mx.controls.Alert;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			private var map:MapBase;
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				map = new Map();
 
				map.addEventListener(MouseEvent.CLICK, provinceClicked);
 
				var ui:UIComponent = new UIComponent();
				ui.addChild(map);
				test.addElement(ui);
				var initData:InitData = new InitData();
				initData.isShowProvinceName = false;
				initData.provinceDataArray = [
					{"id":11,"name":"beijing","color":0xff4400,"hoverColor":0xff0000},
					{"id":12,"name":"tianjin","color":0xccffcc,"hoverColor":0xff0000},
					{"id":13,"name":"hebei","color":0xbbffbb,"hoverColor":0xffff00},
					{"id":14,"name":"shanxi","color":0xffee00,"hoverColor":0xff2200},
					{"id":15,"name":"neimenggu","color":0xaaffaa,"hoverColor":0xff2200},
					{"id":21,"name":"liaoning","color":0xddffdd,"hoverColor":0xff2200},
					{"id":22,"name":"jilin","color":0xddffdd,"hoverColor":0xff2200},
					{"id":23,"name":"heilongjiang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":31,"name":"shanghai","color":0xddffdd,"hoverColor":0xff2200},
					{"id":32,"name":"jiangsu","color":0xddffdd,"hoverColor":0xff2200},
					{"id":33,"name":"zhejiang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":34,"name":"anhui","color":0xddffdd,"hoverColor":0xff2200},
					{"id":35,"name":"fujian","color":0xddffdd,"hoverColor":0xff2200},
					{"id":36,"name":"jiangxi","color":0xddffdd,"hoverColor":0xff2200},
					{"id":37,"name":"shandong","color":0xddffdd,"hoverColor":0xff2200},
					{"id":41,"name":"henan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":42,"name":"hubei","color":0xddddff,"hoverColor":0xff2200},
					{"id":43,"name":"hunan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":44,"name":"guangdong","color":0xddffdd,"hoverColor":0xff2200},
					{"id":45,"name":"guangxi","color":0xddeeff,"hoverColor":0xff2200},
					{"id":46,"name":"hainan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":50,"name":"chongqing","color":0xddffdd,"hoverColor":0xff2200},
					{"id":51,"name":"sichuan","color":0xffffdd,"hoverColor":0xff2200},
					{"id":52,"name":"guizhou","color":0xddffdd,"hoverColor":0xff2200},
					{"id":53,"name":"yunnan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":54,"name":"xizang","color":0xddeffe,"hoverColor":0xff2200},
					{"id":61,"name":"shannxi","color":0xddffdd,"hoverColor":0xff2200},
					{"id":62,"name":"gansu","color":0xddffdd,"hoverColor":0xff2200},
					{"id":63,"name":"qinghai","color":0xddffdd,"hoverColor":0xff2200},
					{"id":64,"name":"ningxia","color":0xddffdd,"hoverColor":0xff2200},
					{"id":65,"name":"xinjiang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":71,"name":"taiwan","color":0xddffdd,"hoverColor":0xff2200},
					{"id":81,"name":"xianggang","color":0xddffdd,"hoverColor":0xff2200},
					{"id":82,"name":"aomen","color":0xddffdd,"hoverColor":0xff2200}
				];
				map.init(initData);
 
				for(var i:int = 0; i<9; i++)
				{
					var ui2:UIComponent = new UIComponent();
					ui2.addChild(drawRect(ColorUtil.caculateColor(i*2,0xffffff,0xff0000,0,16)));
					ui2.x = i*20;
					ui2.y = 400;
					this.addElement(ui2);
				}
			}
 
			protected function provinceClicked(evt:MouseEvent):void
			{
				var provinceItem:ProvinceItem = evt.target as ProvinceItem;
				var provinceId:int = provinceItem.province.id;
				var provinceName:String = provinceItem.province.name;
				Alert.show("Province id is " + provinceId +"; Province name is " + provinceName +";");
			}
 
			public function drawRect(color:uint):Shape{
				var shape:Shape = new Shape();
				shape.graphics.beginFill(color);
				shape.graphics.drawRect(0,0,20,20);
				shape.graphics.endFill();
				return shape;
			}
 
		]]>
	</fx:Script>
	<s:Group id="test">
 
	</s:Group>
</s:Application>

Demo下载

版权声明:本博客所有内容,文尾声明谢绝转载的文章禁止转载,未声明谢绝转载的文章,遵循 CC BY-NC-ND 协议,分享-署名-非商业-禁止演绎。
原文链接:Flash中国地图开源项目flash-china-map
来源站点:ComingX

1 Response to “Flash中国地图开源项目flash-china-map”


Leave a Reply

使用新浪微博登陆