分享
 
 
 

用Flash做电子地图实例讲解

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

关于flash,大家或多或少都有所了解。比如上网,到处都能看到flash的存在。flash的应用也是五花八门。今天我们讲的是用flash做电子地图。

现在在网上随处都能找到电子地图,其中大部分都是java来开发的,其实用flash也可以做电子地图。且界面还比较漂亮。现在网上已经有用flash做的电子地图了。且呈发展趋势。象"中国电子地图网"里面的地图就是用flash做的。还有九江,五邑等地图也都是用flash来完成的。

现在我们就来学习用flash做电子地图,首先要了解电子地图的功能,最主要的功能就是方便你查找,还有就是可以有选择性的显示。比如我到一个城市,我要去一个地方,如果有一张地图,你需要一点一点的看,还要找怎么去。而电子地图就不一样了,你可以搜索,就直接标出那个地方,还可以告诉你几路公交车到,附近有什么宾馆,饭店等等。所以,电子地图一般要具备的功能是:放大,缩小,移动,地点链接(相信介绍),搜索,等一系列功能。这么大的数据量是不肯保存在flash里的,从技术的层面来说,就是要做到数据和图层的动态载入,实现数据的模糊,智能,区域查询等功能。

废话少说,首先我们来认识flash的mc(影片剪辑),已经做电子地图所用到的几个属性。如下:

_x//相对于父级影片剪辑的本地坐标的x坐标。如果影片剪辑在主时间轴中,则其坐标系统将舞台的左上角作为(0,0)。

_y//相对于父级影片剪辑的本地坐标的y坐标。如果影片剪辑在主时间轴中,则其坐标系统将舞台的左上角作为(0,0)。

_width//影片剪辑的宽度,以像素为单位。

_height//影片剪辑的高度,以像素为单位。

_xscale//确定从影片剪辑注册点开始应用的影片剪辑水平缩放比例。默认注册点为(0,0)。

_yscale//设置从影片剪辑注册点开始应用的影片剪辑垂直缩放比例。默认注册点为(0,0)。

利用鼠标和键盘来完成地图的放大、缩小、拖动等功能:

startDrag函数//执行startDrag()操作后,影片剪辑将保持可拖动状态。

stopDrag函数//和startDrag是一对函数,用于停止当前的拖动操作。

基本上就这么多了,一会遇到那个再详细讲。

下面我们一步一步来做电子地图:

一、首先我们打开flash新建一个影片,大小设为宽:440px 高:316。(根据你的需要来设定)。

二、然后倒入一张你准备好的地图,我的是一张880?632的(这样放大时效果会好很多),导入到库中。然后打开库,选择地图拖入到场景中,转换成影片剪辑,注册点选则中央,这样放大缩小就以这个地图的中央为中心了。取名为map_mc(重要的事下面的名字)。因为程序要控制这个地图,所以要给他起个名字。

三、好了,地图剪辑建好了,我们就开始用程序控制他了。首先,我们来实现放大缩小。有的介绍的是用_width和_height这两个属性,也可以实现,但没有_xscale和_yscale方便。因为_xscale和_yscale直接就是原大小的百分比。新建一个图层,选中然后在场景中画个方块,转换成按钮(和地图一样,不过次选择的是按钮)。给按钮命名为fangda_btn,选择这个按钮,打开动作面板写上如图的程序:同理建立缩小和还原的按钮。

放大按钮上的程序:

on(press){//当鼠标按下的时候执行下面的程序

map_mc._xscale=map_mc._xscale+10;//地图在x轴上的百分比增加10

map_mc._yscale=map_mc._yscale+10;//地图在y轴上的百分比增加10

}

缩小按钮上的程序:

on(press){//当鼠标按下的时候执行下面的程序

map_mc._xscale=map_mc._xscale-10;//地图在x轴上的百分比减少10

map_mc._yscale=map_mc._yscale-10;//地图在y轴上的百分比减少10

}

还原按钮上的程序:

on(press){//当鼠标按下的时候执行下面的程序

map_mc._xscale=100;//地图在x轴上的原大小

map_mc._yscale=100;//地图在y轴上的原大小

}

在时间轴上的程序:(因为拖动的四地图,不用按钮,当然,其他的也可以写到时间轴上)

map_mc.onMouseDown=function(){//当鼠标按下的时候执行

startDrag(map_mc);//鼠标可以拖动地图

}

map_mc.onMouseUp=function(){//当鼠标弹起(不按时)

stopDrag();//停止拖动

}

最后,大家可能会发现,如果一直缩小,就会出现问题,后来反而变大了,拖动可以把地图拖出去,这些都不是我们想要的效果,我们下一次会专门讲解这个问题,在这先透露一下,我们下一节讲的是限制放大和缩小,移动的边界。以及内容会随着地图的放大缩小自动隐藏和显示等问题。另外,由于本人也不是很精通,如果哪儿出现错误或疏漏之处还请给与指正,欢迎大家一起交流探讨。

不知道大家看了上面有什么感觉,也许对高手来说是太简单了,但对入门者来说应该还可以吧。我们一步一步来深入,以到达真正的电子地图。

如果大家按上一篇教程做了,就会发现问题,那就是如果一直缩小,就会出现问题,后来反而变大了,拖动可以把地图拖出去,这些都不是我们想要的效果。今天我们来解决这些问题,另外还有信息的显示等一些内容。容会随着地图的放大缩小自动隐藏和显示等问题。

好了,废话少说,下面我们来看看今天要学习的主要内容:

限制地图的放大和缩小

限制地图的边界

内容的显示和隐藏

两点间距离的测量

主要用到的actionscript代码(除上节讲的以外)如下:

_visible一个布尔值,指示影片剪辑是否处于可见状态。True为可见false为不可见。也可用0.1表示。

Math.floor()返回由参数x指定的数字或表达式的下限值。下限值是小于等于指定数字或表达式的最接近的整数。Math.floor(12.5)的值为12Math.floor(-6.5)的值为-7。

Math.pow()计算并返回x的y次幂。Math.pow(x,y)表示x的y次方。

Math.sqrt()计算并返回指定数字的平方根。Math.sqrt(16)的值为4。

lineStyle()设置线条的样式。lineStyle(3,0xff0000,100)表示要画的线的粗细为3px,颜色为红色,透明度为100,不透明。

moveTo()将当前绘画位置移动到(x,y)。如果缺少任何一个参数,则此方法将失败,并且当前绘画位置不改变。

lineTo()使用当前线条样式绘制一条从当前绘画位置到(x,y)的线条;当前绘画位置随后会设置为(x,y)。如果正在其中绘制的影片剪辑包含用Flash绘画工具创建的内容,则调用lineTo()方法将在该内容下面进行绘制。如果在对moveTo()进行任何调用之前调用了lineTo(),则当前绘画位置默认为(0,0)。如果缺少任何一个参数,则此方法将失败,并且当前绘画位置不改变。

createEmptyMovieClip()创建一个空影片剪辑作为现有影片剪辑的子级。此方法的行为类似于attachMovie()方法,但是不必为新的影片剪辑提供外部链接标识符。新创建的空影片剪辑的注册点为左上角。如果缺少任意一个参数,则此方法将失败。

createTextField()创建一个新的空文本字段作为在其上调用此方法的影片剪辑的子级。

removeTextField()删除文本字段。只能对使用MovieClip.createTextField()创建的文本字段执行此操作。当调用此方法时,将删除文本字段。

这次的基本上就这么多了,下面我们一步一步来实现今天的内容。

1、我们要实现的效果就是一步一步实现数据显示和隐藏,首先我们来创建一个地图元件,命名为map_mc。双击进去编辑这个元件,再创建4个图层。一共5个图层,分别为显示大路,政府单位,中等路,单位,小路。

在各自的图层分别写入各自的内容。分别命名为:map1_mc、map2_mc、map3_mc、map4_mc、map5_mc。(如右图)

2、这步我们就要建功能按钮,我们把他们放到左面,我们先来建一个放大的元件,首先画一个放大的图标,按F8,建一个名为fangda_mc的影片剪辑。双击进去编辑,如图所示。(如下图)

3、重复第2步的步骤,分别创建suoxiao_mc(缩小)、yuantu_mc(还原)、tuodong_mc(拖动)、celiang_mc(测量)。

4、放大、缩小、拖动、还原上节多已经讲过了,但随着功能的增多,会越来越乱,所以我们把代码统一起来。并尽量把代码写到时间轴上,以便管理和修改。首先是初始化地图的代码和自定义函数:

//停止播放

stop();

//放大,缩小,还原,拖动,测量的控制变量

varchengxu;

//所有左边功能按钮的初始化函数(把左边功能按钮都停止在第一帧)

functionchushi(){

_root.fangda_mc.gotoAndStop(1);

_root.suoxiao_mc.gotoAndStop(1);

_root.yuantu_mc.gotoAndStop(1);

_root.tuodong_mc.gotoAndStop(1);

_root.celiang_mc.gotoAndStop(1);

}

//初始化地图函数(把先不要显示的都隐藏)

functionchushimap(){

_root.map_mc.map2_mc._visible=0;

_root.map_mc.map3_mc._visible=0;

_root.map_mc.map4_mc._visible=0;

_root.map_mc.map5_mc._visible=0;

}

//执行初始化地图函数(把先不要显示的都隐藏)

chushimap();

//初始化功能提示函数

functiongongnengtishi(){

_root.fangda_mc.fangda1._visible=0;

_root.suoxiao_mc.suoxiao1._visible=0;

_root.yuantu_mc.yuantu1._visible=0;

_root.tuodong_mc.tuodong1._visible=0;

_root.celiang_mc.celiang1._visible=0;

}

//执行初始化功能提示函数(把提示隐藏)

gongnengtishi();

//地图区域限制函数(限制地图脱离屏幕)

functionxianzhi(){

_root.onEnterFrame=function(){

if(map_mc._x>320*map_mc._xscale/200){map_mc._x=320*map_mc._xscale/200}

if(map_mc._x<320-320*map_mc._xscale/200){map_mc._x=320-320*map_mc._xscale/200}

if(map_mc._y>240*map_mc._yscale/200){map_mc._y=240*map_mc._yscale/200}

if(map_mc._y<240-240*map_mc._yscale/200){map_mc._y=240-240*map_mc._yscale/200}

}

}

//信息的显示和隐藏函数(放大显示和缩小隐藏)

functionxianshi(){

vardx=_root.map_mc._xscale;

if(dx>=120){

_root.map_mc.map2_mc._visible=1;

if(dx>=140){

_root.map_mc.map3_mc._visible=1;

if(dx>=160){

_root.map_mc.map4_mc._visible=1;

if(dx>=180){

_root.map_mc.map5_mc._visible=1;

}else{

_root.map_mc.map5_mc._visible=0;

}

}else{

_root.map_mc.map4_mc._visible=0;

_root.map_mc.map5_mc._visible=0;

}

}else{

_root.map_mc.map3_mc._visible=0;

_root.map_mc.map4_mc._visible=0;

_root.map_mc.map5_mc._visible=0;

}

}else{chushimap();}

}

//测量函数

functionceliang(){

varsx,sy;

_root.map_mc.cl_mc.clear();

_root.map_mc.cl_mc.cl_txt.removeTextField();

sx=_root.map_mc._xmouse;

sy=_root.map_mc._ymouse;

draw=true;

onMouseMove=function(){

if(draw){

_root.map_mc.createEmptyMovieClip("cl_mc",1);

_root.map_mc.cl_mc.lineStyle(1,0x009900,80);

_root.map_mc.cl_mc.moveTo(sx,sy);

_root.map_mc.cl_mc.lineTo(_root.map_mc.cl_mc._xmouse,_root.map_mc.cl_mc._ymouse);

ttt=Math.floor(Math.sqrt(Math.pow(_root.map_mc.cl_mc._width,2)+Math.pow(_root.map_mc.cl_mc._height,2)));

_root.map_mc.cl_mc.createTextField("cl_txt",1,_root.map_mc.cl_mc._xmouse,_root.map_mc.cl_mc._ymouse-22,100,22);

_root.map_mc.cl_mc.cl_txt.text=ttt+"m";

}

};

onMouseUp=function(){

draw=false;

}

};

5、Map_mc功能的代码如下(map_mc的所有功能):

_root.map_mc.onPress=function(){

if(chengxu=="fangda"){

if(_root.map_mc._xscale<200){

_root.map_mc._xscale+=10;

_root.map_mc._yscale+=10;

xianshi();

}

}

elseif(chengxu=="suoxiao"){

if(_root.map_mc._xscale>100){

_root.map_mc._xscale-=10;

_root.map_mc._yscale-=10;

xianshi();

}

}

elseif(chengxu=="yuantu"){

_root.map_mc._xscale=100;

_root.map_mc._yscale=100;

_root.map_mc._x=160;

_root.map_mc._y=120;

chushimap();

}

elseif(chengxu=="tuodong"){

startDrag(_root.map_mc,false);

xianzhi();

}

elseif(chengxu=="celiang"){

celiang();

}

}

_root.map_mc.onRelease=function(){

stopDrag();

}

6、左边功能按钮的功能代码即功能提示代码:

//left的功能代码

fangda_mc.onPress=function(){

chushi();

_root.fangda_mc.gotoAndStop(2);

chengxu="fangda";

}

suoxiao_mc.onPress=function(){

chushi();

_root.suoxiao_mc.gotoAndStop(2);

chengxu="suoxiao";

}

yuantu_mc.onPress=function(){

chushi();

_root.yuantu_mc.gotoAndStop(2);

chengxu="yuantu";

}

tuodong_mc.onPress=function(){

chushi();

_root.tuodong_mc.gotoAndStop(2);

chengxu="tuodong";

}

celiang_mc.onPress=function(){

chushi();

_root.celiang_mc.gotoAndStop(2);

chengxu="celiang";

}

//left的功能提示代码

fangda_mc.onRollOver=function(){

_root.fangda_mc.fangda1._visible=1;

}

suoxiao_mc.onRollOver=function(){

_root.suoxiao_mc.suoxiao1._visible=1;

}

yuantu_mc.onRollOver=function(){

_root.yuantu_mc.yuantu1._visible=1;

}

tuodong_mc.onRollOver=function(){

_root.tuodong_mc.tuodong1._visible=1;

}

celiang_mc.onRollOver=function(){

_root.celiang_mc.celiang1._visible=1;

}

fangda_mc.onRollOut=function(){

_root.fangda_mc.fangda1._visible=0;

}

suoxiao_mc.onRollOut=function(){

_root.suoxiao_mc.suoxiao1._visible=0;

}

yuantu_mc.onRollOut=function(){

_root.yuantu_mc.yuantu1._visible=0;

}

tuodong_mc.onRollOut=function(){

_root.tuodong_mc.tuodong1._visible=0;

}

celiang_mc.onRollOut=function(){

_root.celiang_mc.celiang1._visible=0;

}

到目前为止,我们实现了最基最本地图的功能,但还不能在实际中应用。大家知道地图的数据量是很大的,我们不可能都写到flash里。所以我们需要把所有的数据写到数据库里,动态的从数据库调你想要看到或查找的内容。这就是我们下节课的内容了。

以上就是今天要学习的主要内容了,当然代码没有优化,为了大家能看的更直接。只是用最基本的代码实现了基本的功能。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有