使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)

时间:2023-01-08 21:20:26

Hi All

 

第一次发文章,不足之处请大家多多见谅。

 

大家用过Google earth或Baidu Map的都知道他们的电子地图可以支持 鼠标拖放、局部缩放等操作,又炫又酷,其原理就是在服务端准备了多个层次大小不同的图片,通过条件选择显示,其工作量大,非常复杂。

 

而如今,在Silverlight 2下,MS提供了Deep Zoom Composer工具(目前为独立的小工具,将会集成到下一个版本的Expression Blend中去)

 

能够仅仅通过鼠标点击便帮我们生成一个强大的10层电子地图,并连同Silverlight XAML代码:

 

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码) 

Download Deep Zoom Composer 文件不大,需要有Silverlight运行时支持

 

好了,让我们来做一个demo吧:

 

1.首先用Deep Zoom Composer新建一个工程:

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)

 

2.大家可以看到,整个步骤只有 导入——制作——导出 三步 点击右边的“ADD Image”来添加我们准备好的图片,这里我准备的是分辨率高达一亿的中国地图:

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)嘿嘿...

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)

 

3.如果同时需要添加多张图片的话也是可以的,直接点击“add image”添加就行, 接下来我们开始制作,点击上面的“Compose”,进入制作界面,把我们已经添加的图片从右边拖到中间去,并调整好大小和位置。

注:这里只用了一张图片,如果用了多张的话依次拖入调整即可,还可以点击“Layer View”来调整层叠属性

 

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)

 

 

4. 好了,点击“Export”就可以输出Silverlight工程:

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)

 

点击“Preview in browser”就可以直接在浏览器中查看制作好的地图,拖拽效果+局部缩放+毛玻璃效果+弹性效果,如图:

 

 

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)

 

呵呵,让我们看看生成后的工程文件:

 

工具为我们生成了N层的图片:

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)

 

还有Silverlight工程文件:

使用Silverlight 2+Deep Zoom 三分钟制作精美电子地图(含代码)

 

点击下载生成的solution

http://files.cnblogs.com/blodfox777/DeepZoomProjectWeb.part1.rar

 http://files.cnblogs.com/blodfox777/DeepZoomProjectWeb.part2.rar

http://files.cnblogs.com/blodfox777/DeepZoomProjectWeb.part3.rar 

http://files.cnblogs.com/blodfox777/DeepZoomProject.rar