HTML5，不只是看上去很美（第四弹：可交互地铁线路图）

最新推荐文章于 2024-07-18 13:52:43 发布

TWaver数字孪生

最新推荐文章于 2024-07-18 13:52:43 发布

阅读量1w

点赞数 15

文章标签： html5 前端可视化地图

本文链接：https://blog.csdn.net/twaver/article/details/53008125

版权

本文介绍了如何使用HTML5构建一个可交互的地铁线路图，包括站点图标放大、动画效果、混合缩放和拖动功能。文章通过代码示例展示了如何实现这些功能，并提到了数据文件的整理和程序设计思路。

摘要由CSDN通过智能技术生成

前言

最近特别忙，承蒙大伙关照，3D机房的项目一个接着一个，领了一帮小弟，搞搞传帮带，乌飞兔走，转眼已经菊黄蟹肥……有个小弟很不错，勤奋好学，很快就把API都摸透了，自己折腾着做了个HTML5的魔都的地铁线路图，能拖能拽的，还和电子地图做了交互。哥决定把小弟的成果纳入“HTML5，不只是看上去很美”系列，以示鼓励（P.S. 其实还挺有压力的，后浪推前浪，新人赶旧人。我们这些老鸟也得注意，免得让00后给抢了饭碗）

效果图对比

网上的地铁图还是很多的，小弟选了这张比较新的做参考。想当年哥来魔都打拼时，图上可就一红一绿打个叉……暴露年龄的话不多说，看图：

上海地铁线路图

再来看看小弟做的：

HTML5地铁线路图

我是一眼看不出区别，但这可不是一张效果图，而是一个新手仅用了几天做出来的东西，而且里面许多美化和调整是通过程序自动完成的，这就不容易了。更重要的是，它并不是一张死图，而是纯矢量、可交互、有动态效果、无失真缩放的拓扑图！我们先简单看一下交互效果，后面可以详细说说代码的实现。

文本提示弹弹弹

首先，把鼠标移到站点、路段、图标等位置，都会有文本提示弹出，这个比较基本，百度家的就有，小弟也就放了比较简单的弹出内容。如果加上基本介绍啊、相关提示啊、周边信息啊……要是加上广告，就可以赚钱了……反正什么都可以加嘛，就是一个setToolTip命令而已。

地铁图之文本提示

站点图标变变变

当鼠标移到站点上时，站点图标做了放大效果，这个效果很贴心，看了下百度家，用的是发光效果。

地铁图之动态站点

实现的方法也很简便，就是在注册站点矢量图形时，加入了动态判断。以下注册普通站点矢量图形的代码：

twaver.Util.registerImage('station',{
    w: linkWidth*1.6,
    h: linkWidth*1.6,
    v: function (data, view) {
   
        var result = [];
        if(data.getClient('focus')){
            result.push({
                shape: 'circle',
                r: linkWidth*0.7,
                lineColor:  data.getClient('lineColor'),
                lineWidth: linkWidth*0.2,
                fill: 'white',
            });
            result.push({
                shape: 'circle',
                r: linkWidth*0.2,
                fill:  data.getClient('lineColor'),
            });
        }else{
            result.push({
                shape: 'circle',
                r: linkWidth*0.6,
                lineColor: data.getClient('lineColor'),
                lineWidth: linkWidth*0.2,
                fill: 'white',
            });
        }
        return result;
    }
});

动画效果拽拽拽

从上图还可以看到，在换乘站图标中，除了增加了颜色，还实现了旋转效果。这个就秒杀百度家了。
来看代码：

    twaver.Util.registerImage('rotateArrow', {
        w: 124,
        h: 124,
        v: [{
            shape: 'vector',
            name: 'doubleArrow',
            rotate: 360,
            animate: [{
                attr: