文档章节

基于HTML5的在线地图 - 加载TopoJSON数据

nosand
 nosand
发布于 2015/03/29 14:19
字数 1204
阅读 1552
收藏 65
点赞 3
评论 2

Qunee for HTML5有许多地图的示例,包括地铁图,基于SVG数据的地图,结合leaflet的地图等,每个示例都是单独的实现,代码也各有不同,于是我们想,是否能将这些方案统一起来,实现一种地图解决方案呢?于是我们开始整合,从世界地图到国内各市县的地图,再到各种地铁图,都用HTML5技术呈现出来,而在地图之上还有我们的拓扑图,等值分析图,地铁线路分析等等,本文我们将介绍如何使用Qunee加载标准地图数据,实现从世界地图到国内省市地图的呈现

标准地图数据

首先遇到的是地图数据的问题,我们选择支持两种数据格式:GeoJSON和TopoJSON,前者是地理数据的标准格式,各种GIS软件都支持,后者是D3.js用到的一种数据格式,能有效压缩数据文件,Qunee建议使用TopoJSON数据格式

地图数据

Qunee地图示例

下面以一个hello world示例介绍MapChart的使用

<!DOCTYPE html>
<html>
<head>
    <title>地图浏览</title>
    <meta charset="utf-8">
</head>
<body>
<div style="height: 600px;" id="canvas"/>
<!--加载Qunne和Map相关扩展类库-->
<!--Qunee图形组件 -->
<script src="http://demo.qunee.com/lib/qunee-min.js?v=1.8.1"></script>
<!--MapChart组件 -->
<script src="http://map.qunee.com/src/MapChart.js"></script>
<!--TopoJSON数据支持 -->
<script src="http://map.qunee.com/src/topojson.js"></script>
<script>
    var map = new Q.MapChart('canvas');
    map.loadTopoJSON('data/shengjie.json', {
        zIndex: -10, onfinish: function (map) {
            map.zoomToOverview();
            map.createMapNode('hello map', 105, 35);
        }
    });
</script>
</body>
</html>

运行界面

hello qunee map

地图投影算法

地球是个球体,球面转换到平面铺开总会存在偏差,我们看一幅没有投影的世界地图,格陵兰岛看上去比印度大很多,而实际上格陵兰岛的面积只有印度的2/3,所以对于维度较高的地区地图投影是很必要的,所以对于单独的中国地图显示我们建议使用winkel3投影,而对于世界地图可以不用投影

使用winkel3投影的中国地图
hello qunee map with winkel3 projection 投影

使用winkel3投影的世界地图效果

世界地图 winkel3投影

从世界到国内省地图示例

地图数据可以叠加,下面的示例加载了三个地图数据文件:世界地图、省界,分别设置不同的zIndex和样式(填充色,字体大小等),实现从世界地图一直放大到省的效果,其中部分地块的名称做了位置调整:

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>世界地图 by Qunee</title>
    <meta charset="utf-8">
</head>
<body class="layout" style="margin: 0px;">
<div data-options="region:'center'" id="canvas"/>
<script src="http://demo.qunee.com/lib/qunee-min.js?v=1.8.1"></script>
<!--<script src="qunee-min.js?v=1"></script>-->

<!-- build:js js.js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/layout.border/src/layout.border.js"></script>
<script src="src/MapChart.js"></script>
<script src="src/topojson.js"></script>
<!-- endbuild -->

<script>
    var colors = ["#D5E7C4", "#CDE6FF", "#EFDEE6", "#FFF8CC"];
    var stateColors = ['#2898E0', '#4BB9FF', '#2EADFF'];
    var index = 0;

    var map = new Q.MapChart('canvas');

    map.onclick = function (evt) {
        var currentElement = evt.getData();
        if (currentElement && map.selectionModel.isSelected(currentElement)) {
            this.centerElement(currentElement);
        }
    }

    map.loadTopoJSON('data/world.json', {
        zIndex: -10, callback: function (area) {
            area.setStyle(Q.Styles.SHAPE_FILL_COLOR, colors[index++ % colors.length]);
            if (area.name == 'China' || area.name == 'Taiwan') {
                area.name = null;
                area.setStyle(Q.Styles.SHAPE_STROKE, 12);
                area.setStyle(Q.Styles.SHAPE_STROKE_STYLE, Q.toColor(0x77555555));
                area.zIndex = -9.5;
            }
        }, onfinish: function (map) {
            map.zoomToOverview();
            var shanghai = map.createMapNode(null, 121.48, 31.23);
            shanghai.image = Q.Shapes.getShape(Q.Consts.SHAPE_CIRCLE, -10, -10, 20, 20);
            shanghai.setStyle(Q.Styles.SHAPE_FILL_COLOR, Q.toColor(0xEEFF0000));
            shanghai.setStyle(Q.Styles.SHAPE_STROKE_STYLE, Q.toColor(0xEE00FFFF));
            shanghai.setStyle(Q.Styles.SHAPE_STROKE, 3);

            map.loadTopoJSON('data/shengjie.json', {
                zIndex: -9,
                callback: function (element) {
                    if (element.name == '甘肃') {
                        element.setStyle(Q.Styles.LABEL_OFFSET_X, 50);
                    } else if (element.name == '河北') {
                        element.setStyle(Q.Styles.LABEL_OFFSET_X, -30);
                    } else if (element.name == '内蒙古') {
                        element.setStyle(Q.Styles.LABEL_OFFSET_Y, 50);
                    } else if (element.name == '广东') {
                        element.setStyle(Q.Styles.LABEL_OFFSET_Y, -30);
                    } else if (element.name == '香港') {
                        element.setStyle(Q.Styles.LABEL_OFFSET_X, 15);
                    } else if (element.name == '澳门') {
                        element.setStyle(Q.Styles.LABEL_OFFSET_X, -15);
                    }
                    element.setStyle(Q.Styles.SHAPE_FILL_COLOR, stateColors[index++ % stateColors.length]);
                    element.setStyle(Q.Styles.SHAPE_STROKE_STYLE, '#EEE');
                    element.setStyle(Q.Styles.SHAPE_STROKE, 1);
                }
            })
        }
    });
</script>
</body>
</html>

在线演示

在线演示地址:map.qunee.com

运行效果 世界地图 by qunee

点击地块缩放效果

地图缩放

高性能地图

Qunee for HTML5图形组件使用HTML5技术,具有良好的性能,地图方面也是如此,对于Qunee正式商业版本,支持从世界地图到县市级别的地图数据,下面的视频演示了多幅地图数据的叠加效果:世界地图、省界、地市、县界,此外在地图之上还加入了上万的拓扑节点连线数据,操作依旧能保持流畅,并能将地图导出上亿像素的大图

© 著作权归作者所有

共有 人打赏支持
nosand
粉丝 78
博文 40
码字总数 33601
作品 0
徐汇
加载中

评论(2)

nosand
nosand

引用来自“柳俊20”的评论

地图的接口文档有吗?
比如外部调用、背景色的改变等等。

直接看代码吧,背景色样式相关的可以参照Qunee开发手册中样式列表中的“SHAPE相关样式”部分http://doc.qunee.com/pages/viewpage.action?pageId=1147158
柳俊20
柳俊20
地图的接口文档有吗?
比如外部调用、背景色的改变等等。
完全免费开源!开发者用了都说好的5款JavaScript图表库

用过不少的商用图表工具&图表库,比如Fusioncharts、AmChart,技术服务好,厂家的支持给力,总是物有所值。随着一些产品的开源,除了商用图表,现在也开始关注开源图表工具了。虽然和Fusionc...

周宇YuZhou
2015/07/02
0
0
gis cad 叠加

在web页面上实现 1. dxf转化geojson,最好是topojson 集成到web中。后台转换 2. 选择西安80/北京54/国家2000 后 可以输入7参数(或者需要的参数)后,将geojson叠加到google地图...

张先生
05/16
0
0
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
0
0
用html5实现一个高性能GIS地图可视化

以瓦片形式的栅格图像格式(PNG或JPEG图像)绘制地图的传统方法通常是今天在网络上传递地理空间数据的方式。这是通过在服务器上生产瓦片图像,并将它们提供给地图客户端。这种技术已被许多W...

wuwulh
2012/11/09
0
0
分享一个HTML5的上传jQuery插件 - jQuery HTML5 uploader

随着HTML5的使用越来越被大家接受,基于HTML5的技术和插件也会变得越来越广泛,今天我们介绍一款基于HTML5和jQuery的上传插件: jQuery HTML5 uploader。 使用这个插件将会使得文件上传变得简...

gbin1
2011/11/19
0
0
弥补Web开发缺陷实战 HTML5 中存储API

COOKIES的限制和缺陷 首先,让我们来回顾下 cookies。Cookies 的出现可谓大大推动了Web的发展,但它既有优点也有一定的缺陷。Cookies 的优点在于,它可以允许我们在登陆网站时,记住我们输入...

晨曦之光
2012/03/09
0
0
十道或许你不熟练的前端HTML5的经典面试题

1.什么是HTML5?  答:HTML5是最新的HTML标准。   注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等。。。。 设计目的   HTML5的设计目的是为了在移动设备上支...

懿左左
06/29
0
0
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂
06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Kafka设计解析(一)- Kafka背景及架构介绍

原创文章,转载请务必将下面这段话置于文章开头处。(已授权InfoQ中文站发布) 本文转发自技术世界,原文链接 http://www.jasongj.com/2015/03/10/KafkaColumn1 摘要   Kafka是由LinkedI...

mskk
1分钟前
0
0
使用Service Mesh整合您的微服务架构

在微服务架构的世界中,它正在达到这样的程度,即管理系统的复杂性对于利用它带来的好处变得至关重要。 目前,如何实现这些微服务不再是一个问题,因为有很多可用的框架(Spring Boot,Vert....

xiaomin0322
5分钟前
0
0
看看 LinkedList Java 9

终于迎来了 LinkedList 类,实现的接口就有点多了 Serializable, Cloneable, Iterable<E>, Collection<E>, Deque<E>, List<E>, Queue<E>。LinkedList是一个实现了List接口和Deque接口的双端链......

woshixin
23分钟前
0
0
算法 - 冒泡排序 C++

大家好,我是ChungZH。今天我给大家讲一下最基础的排序算法:冒泡排序(BubbleSort)。 冒泡排序算法的原理如下: 比较相邻的元素。如果第一个比第二个大(可以相反),就交换他们两个。 对每...

ChungZH
26分钟前
0
0
jquery ajax request payload和fromData请求方式

请求头的不同 fromData var data = { name : 'yiifaa'};// 提交数据$.ajax('app/', { method:'POST', // 将数据编码为表单模式 contentType:'application/x-ww...

lsy999
28分钟前
0
0
阿里P7架构师,带你点亮程序员蜕变之路

前言: Java是现阶段中国互联网公司中,覆盖度最广的研发语言。 掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地。 有不少朋友问,成为Java架...

Java大蜗牛
30分钟前
1
0
Ecstore 在没有后台管理界面(维护)的情况如何更新表的字段

window 系统: 切换到:app\base 目录下: C:\Users\qimh>d: D:\>cd D:\WWW\huaqh\app\base 执行:D:\WWW\huaqh\app\base>cmd update linux 系统: 1># cd /alidata/www.novoeshop.com/app/......

qimh
34分钟前
0
0
设计模式-策略模式

策略模式 解释 对工厂模式的再次封装,使用参数控制上下文信息(将工厂返回的实例赋值给context field) 不会返回bean实例,只是设置对应的条件 调用context的方法(调用field的方法) 用户只...

郭里奥
37分钟前
0
0
python使用有序字典

python自带的collections包中有很多有用的数据结构可供使用,其中有个叫OrderedDict类,它可以在使用的时候记录元素插入顺序,在遍历使用的时候就可以按照原顺序遍历。 a = {"a":1,"b"...

芝麻糖人
今天
0
0
RestTemplate HttpMessageConverter

RestTemplate 微信接口 text/plain HttpMessageConverter

微小宝
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部