avalon.js实践 svg地图配置工具

MVVM模式,在很多复杂交互逻辑下面,有很大的优势。现在相关的框架也很多,现在项目中使用了avalon.js,选择它的原因,是兼容性的考虑,当然也要支持下国内开发大牛,至于性能方面的,没有实际测试过,不敢在这边说明。

需求:项目中首页需要显示地图,显示公司在该区域部署的教室数量,首页可以显示行政中心,区域名字,加入★着重的地市

前台:页面显示采用了raphael.js,把地图信息js,转换成vml,svg(百度的eChart的地图也不错,但是它没有区县下面的数据,没有采用)

问题:美术妹妹出的都是svg图片,怎么把svg图片转换成需要的地图信息js,成了难题。美术MM,又不会js。如果让前端根据svg整理,人工比较麻烦,工具就产生了

设计:js文件主要是存储了地图信息(

    原来设计的时候要保存省市级别关系,省市有不用的展现形式,导致耦合性比较强,扩展也比较麻烦。地图信息都存在一个js文件中,首页载入太慢。

    现在设计为不关心省市关系,都可以配置,让配置人员想要什么样子就什么样子。每一级地图通过请求返回,通过返回哪个地图有地图确定可以进入地图,还是跳转页面。

  )

地图配置,戳这里。为了演示方便,上传SVG文件改为了html5文件读取,SVG文件IE8也不支持,所以请IE10+,查看效果

这边截图显示下配置完的地图效果,在线地址戳这里。文件略大,请耐心等待。

操作说明:

  左边为原始SVG图,右边为实时完成效果图

  红色点为用户拖拽自定义,行政中心或★配置

  蓝色方块为用户拖拽自定义,调整文字显示位置(默认情况,显示在行政中心的上方)

  点击svg path或polygon 图像,配置地图区域块(可以选择颜色值;可以配置多块为一个地区,默认情况下为单一地区,配置相同地区则删除原先地区;可以配置存在课堂,高亮显示)

点击svg circle 图像,配置地图行政中心

  

时间: 2024-07-30 11:32:42

avalon.js实践 svg地图配置工具的相关文章

【d3.js实践教程特别篇】PornHub发布基于d3的网民观看成人视频时长分布交互式地图

学习d3.js(以下都简称d3)也有一段时间了,运行d3做了几个项目.我发现中文的d3教程很少,国外资料多但要求有一定的英文阅读能力(推荐网址:http://bl.ocks.org/mbostock),于是就萌发了写一个d3实际运用系列文章的想法,现在开始付之行动.在系列中,我会用d3+html5 canvas实现一些实际效果(如统计结果展示,地图数据展示等),希望可以跟大家共同学习交流. 代码我公布在git.cschina.com上,大家可以clone到本地运行,地址是:http://git.

fabric.js的简单上手及基于fabric.js的canvas切图工具:1、基本使用及配置

参考链接 Fabric.js 简单介绍和使用 简介 Fabric.js是一个可以简化canvas程序编写的库. Fabric.js为canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具.基于MIT协议开源,在github上有许多人贡献代码. 为什么选择fabric.js 手上的项目必须使用canvas 原生的canvas API不够友好 用fabric.js实现切图用户体验更好 为项目以后的迭代留下扩展的余地 简单上手 请参考文章开头的参考链接 这里主要介绍

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js 概念摘录

转自:http://www.cnblogs.com/xishuai/p/mvc-mvp-mvvm-angularjs-knockoutjs-backbonejs-reactjs-emberjs-avalonjs.html MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Contro

利用d3.js绘制中国地图

d3.js是一个比较强的数据可视化js工具.利用它画了一幅中国地图,如下图所示: 源码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.js"></script> <script type="text/javascript" src="d3.csv.js">&l

一款轻量级前端框架Avalon.Js

avalon2是一款基于虚拟DOM与属性劫持的 迷你. 易用. 高性能 的 前端MVVM框架, 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用.上一个简单的入门例子: <!DOCTYPE html> <html> <head> <title>first example</title> <meta charset="UTF-8"> <meta na

Javascript实战开发:教你使用raphael.js绘制中国地图

最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

使用svgdeveloper 和 svg-edit 绘制svg地图

目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一.SVGDeveloper 5. 方法二.SVG-Edit 1. 描述编辑 有的时候我们需要自定义地图,本文提供基本的基于SVG的矢量图制作教程: 2. 准备工作编辑 地图模板:例如需要自定义某个省份,挑选一张省份的地图图片即可,本文以吉林省地图为例jilin.png: SVGDeveloper:绘制矢量地图软件,这里提供1.0安装包,试用30天,如需激活,请自行购买SVGDeveloper1.0: SVG-E

js实现svg图形转存为图片下载[转]

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息,并发送到到服务器端,由后端程序转换成图片格式后,以流的形式反射给浏览器端下载. 最近在项目中有需求将一个非HighChart的SVG地图转存为图片并下载的功能.本希望模拟HighChart的原理实现,可是研究发现,该地图的SVG代码信息多达两万字节,然而HighChart后端制图程序却有着字

树莓派raspi-config配置工具

raspi-config是由Alex Bradbury设计并维护的树莓派配置工具,适用于Raspbian系统. 1.USAGE(使用) 当你第一次启动Raspbian的时候会有rasp-config的提示.打开这个配置工具,只需要在终端上简单输入以下命令: sudo raspi-config 要求sudo管理员权限是因为你要修改的文件不属于pi用户所有. 你将会看到一个蓝色的屏幕,中间有带选项的灰色框,类似下面: 2.MOVING AROUND THE MENU(在菜单中移动) 使用上下光标控制