使用Qunee组件制作在线地图 - 加载GeoJSON/TopoJSON数据

amc 发布于2019-08-02 18:11 / 2337人阅读

摘要：有许多地图的示例，包括地铁图，基于数据的地图，结合的地图等，每个示例都是多带带的实现，代码也各有不同，于是我们想，是否能将这些方案统一起来，实现一种地图解决方案呢于是我们开始整合，从世界地图到国内各市县的地图，再到各种地铁图，都用技术呈现出来

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

标准地图数据

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

Qunee地图示例

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




    地图浏览

运行界面

地图投影算法

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

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

从世界到国内省市地图示例

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

代码示例




    世界地图 by Qunee

在线演示

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

运行效果

点击地块缩放效果

高性能地图

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

http://v.youku.com/v_show/id_XOTIyNDQwMDQ0.html

idc机房托管私有云数据地图制作数据地图的制作基础地图组件加载类地图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55224.html

HTML5制作在线地图

摘要：地图是一种普遍应用，按准确度分精确地图和示意地图，前者支持各种地图投影与坐标系，譬如，后者使用相对坐标系，或者支持简单的经纬网坐标系，比如地图组件，示意地图再按图片类型分，可分为栅格地图与矢量地图，组件适合制作矢量示意地图。地图是一种普遍应用，按准确度分精确地图（GIS）和示意地图（MapChart），前者支持各种地图投影与坐标系，譬如ArcGIS，后者使用相对坐标系，或者支持简单的...

wangjuntytl 2019-08-02 17:59 评论0 收藏0
自制Echarts地图数据 mapshaper-plus

摘要：背景在做图表统计时，需要自制地图数据，但官方没有提供一个平台可以直接将文件转化为压缩后的或格式的地图文件，而导出的数据没有压缩，数据量过大。 mapshaper-plus 基于mapshaper对geojson地图数据的坐标信息进行压缩编码，并提供可直接生成压缩编码后的echarts map数据格式 Demo http://blog.giscafer.com/maps... Desc...

FrozenMap 2019-08-21 10:52 评论0 收藏0
基于HTML5的网络拓扑图(1)

摘要：什么是网络拓扑网络拓扑，指构成网络的成员间特定的排列方式。如果两个网络的连接结构相同，我们就説它们的网络拓扑相同，尽管它们各自内部的物理接线节点间距离可能会有不同。什么是网络拓扑网络拓扑，指构成网络的成员间特定的排列方式。分为物理的，即真实的、或者逻辑的，即虚拟的两种。如果两个网络的连接结构相同，我们就説它们的网络拓扑相同，尽管它们各自内部的物理接线、节点间距离可能会有不同。 -...

gitmilk 2019-08-02 17:59 评论0 收藏0
HTML5制作思维导图

摘要：客户常常提到思维导图，喜欢它的结构展示方式，和交互的友好，从图论的角度看，思维导图本质上是一种树，有一个根节点主题出发，联想到其他话题，于是分支开花，再分支，有时候也会构成网络结构，由子分支联想到另一个已有分支，但通常不破坏原有结构，常见的客户常常提到思维导图，喜欢它的结构展示方式，和交互的友好，从图论的角度看，思维导图本质上是一种树，有一个根节点（主题）出发，联想到其他话题，于是分...

aaron 2019-08-02 17:59 评论0 收藏0
基于HTML5的拓扑图编辑器 - Graph.Editor

摘要：拓扑图编辑器介绍拓扑图编辑器项目正式发布到了，欢迎访问提取和贡献代码项目地址在线演示是一款基于技术的拓补图编辑器，采用插件的形式，是图形组件的扩展项目，旨在提供可供扩展的拓扑图编辑工具，拓扑图展示编辑导出保存等功能，此外本项目也是学习开发拓扑图编辑器介绍拓扑图编辑器项目 - Graph.Editor 正式发布到github了，欢迎访问、提取和贡献代码项目地址：https:/...

Jaden 2019-08-02 18:09 评论0 收藏0