Flex:地图缩放平移效果(简易版)

简介: 先看效果:(这个只是原型,简陋了点) 功能: 双击图片或拖动右侧的滑块可实现图片的放大,鼠标按下不放可平移图片。 应用场景:目前各地铁、医院、大型商场、机场均有单点触摸查询屏,用这个功能可以实现用户的简单自助地图导航。

先看效果:(这个只是原型,简陋了点)

功能: 双击图片或拖动右侧的滑块可实现图片的放大,鼠标按下不放可平移图片。

应用场景:目前各地铁、医院、大型商场、机场均有单点触摸查询屏,用这个功能可以实现用户的简单自助地图导航。

技术含量:这个,真木有!

唯一要注意的是,flash中任何物体的"基准注册点"均为左上角的顶点,且没办法修改(注:所谓基准点是指不论是缩放,还是旋转,都是以这个点为参考原点。)

这个很不爽,直接影响放大效果,那么本示例中的“以中心为基点放大”是如何实现的呢?请参看Flash/Flex学习笔记(51):3维旋转与透视变换(PerspectiveProjection) 一文中提到的奇淫技巧,那上面有详细的图示解说,不过要伤点脑细胞想明白 :)

不足之处:这个只是单纯的图片缩放,文字是做死在图片上的,这样有几个问题

1、图片与文字无法分离,每次修改或添加文字,整个图都要重做一遍,维护不方便。

2、如果文字大小不合适,缩放时会导致文字模糊不清晰

3、不适合文字的分级显示(这一点用过丁丁地图或google地图的人应该能理解,地图每放大一级,会显示更详细的地点文字标识)

文字图片分离的思路我已经有了,有空实践后,整理上来,也欢迎大家回复讨论。当然如果要实现跟google地图一样或类似的功能,还要考虑很多优化措施,比如图片的分块加载,也欢迎共同交流。(虽然图片分块加载在触摸屏这种固定设备上不用过多考虑,但如果作为pc互联网的web应用,这个是改善性能的重要难点)

目录
相关文章
|
6月前
PPT 动画-多层旋转(圆角三角形)
PPT 动画-多层旋转(圆角三角形)
45 0
|
7月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
658 0
cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法
cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法
343 0
【Three.js入门】灯光与阴影、平行光阴影属性、聚光灯的属性和应用
【Three.js入门】灯光与阴影、平行光阴影属性、聚光灯的属性和应用
405 1
|
定位技术
Echarts实战案例代码(39):地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案
Echarts实战案例代码(39):地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案
370 0
|
前端开发 容器
Grid实现自适应九宫格布局
Grid实现自适应九宫格布局
356 0
|
前端开发 JavaScript
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
329 0
|
前端开发 JavaScript
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
957 0
鼠标控制物体旋转、移动、缩放(Unity3D)
Unity3D对于鼠标操作物体的旋转、移动、缩放的功能点使用的比较多。 今天就分享如何使用Unity实现鼠标对于物体的旋转、移动、缩放。
openlayers之绘制矩形星星拉框放大自定义图形
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/83036414 简介:openlayers绘制矩形、星星、拉框绘制,以及自定义图形。
1647 0