eCharts二三维地图总结
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/
1.背景
最近多个项目中的登录页面陆续提出了不少地图需求,主要围绕地图的立体感、交互等设计。业主爸爸,即使登录页也要整出花样,希望有眼前一亮的感觉,比如:
搞GIS的同学遇到地图问题,习惯性的就是引入地图引擎,但是仔细分析这类页面,它真的需要引入一个庞大的地图引擎来解决吗?
a.地图引擎太大,不利于登录页加载效率。
b.该地图并不强调坐标系等等,也不强调地图的精细度,发挥不了地图引擎方案(加上配图)的优势。
c.以上交互很少,仅仅是打点、和图层选中交互。
d.一般的二维地图引擎实现不了以上地图倾斜立体的需求(即使实现,也比较麻烦,请查看《基于图片实现酷炫地图展示和交互的方案》https://www.cnblogs.com/naaoveGIS/p/8136432.html),需要基于三维引擎。
针对这些问题,最近让ysj同学分别对echarts和echarts-gl地图做了一下方案总结。针对SHP处理成geojson格式不做累述,这里主要记录一下总结和效果。
2.echarts地图
Echarts地图可以实现:
- 自定义地图数据,但是需要为经纬度坐标系的geojson格式数据。
- 可与echarts热力集成。
- 可以通过设定symbol的type,实现打点,有交互事件。
- 可以通过设定symbol的type,实现聚类圆饼,模拟聚类效果。
- 可以通过设置双层地图的思想,分别对整体地图和各要素分别设置不同的样式,实现地图整体轮廓边框和内部要素边框展示不同样式的效果。
- 可以通过增加阴影和偏移,实现立体的效果。
整体展示如下:
3.echarts-gl地图
用echarts二维地图模拟的立体效果并不是真正的三维,也无法真正的倾斜,只是一种视觉效果而已。Echarts的三维地图中,其属性略有不同,但是思路大同小异,这里直接给出最后整体效果:
-----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/
如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^
eCharts二三维地图总结的更多相关文章
- [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布
基于浏览器的三维地图还算是一个比较高冷的东西,最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据,很遗憾,还真的没有太好的的方案,只能说还有可行的方案. 很久之前用过skyline,使用CS居 ...
- 使用ESMap的地图平台开发三维地图
本文简单的介绍使用ESmap的SDK开发(DIY自己地图的)一个地图的过程.若有不足,欢迎指正. 一.创建地图 只需四步,从无到有,在浏览器中创建一个自己的三维地图,炫酷到爆! 第一步:引入ESM ...
- 如何使用JS来开发室内三维地图的轨迹回放功能
在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回 ...
- Arcgis API for JS——普通分屏联动及二三维联动
对于二三维联动,有多种方法进行实现,当时旧项目使用了当时能掌握的一种写法,在技能提升了这么多后当然要对这些写法做一个总结. 一.通过监听View上的鼠标事件变化来进行分屏联动(同一坐标系) (同理可以 ...
- SkylineGlobe 6.6 三维地图上实现自定义右键菜单示例代码
1.OnRButtonDown.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 三维地图中的A*寻路
跟二维地图原理一样,只不过搜索方向多了,二维只搜8个方向,而三维要搜26个方向. 不懂的看我以前写的文章,这里直接贴代码: #include <iostream> #include < ...
- ECharts 散点图+百度地图(案例转载)
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial-2/ ECharts 实现地图散点图(下) 小红 2016-06-13 ECharts, ...
- 基于Skyline与ArcGIS Server的二三维联动功能实现
基于Skyline与ArcGIS Server的二三维联动功能实现主要利用WEB技术.ArcGIS for JavaScript.Skyline 二次开发以及ArcGIS 10.1 桌面工具. 利用A ...
- 使用室内三维地图引擎ESMap来管理摄像头设备、消防设备和人员轨迹展示
目前室内三维地图如何轻量化,能够在手机微信.电脑浏览器等平台快速显示地图,显示的地图性能好,转动地图不卡是大家都要面对的问题, 使用室内三维地图引擎ESMap后目前可以不用操心这方面的问题,开发只需要 ...
随机推荐
- git 使用详解(4)—— commit -a -m/diff --staged/rm/mv
查看已暂存和未暂存的更新 实际上 git status的显示比较简单,仅仅是 列出了(修改过的.新创建的.已经暂存但未提交的)文件,如果要查看具体修改了什么地方,可以用git diff 命令.稍后我们 ...
- ThreadLocal的进化——TransmittableThreadLocal
上一篇文章中,我们谈到了 InheritableThreadLocal,它解决了 ThreadLocal 针对父子线程无法共享上下文的问题.但我们可能听说过阿里的开源产品TransmittableTh ...
- 20.DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件
一 认证组件 1. 局部认证组件 我们知道,我们不管路由怎么写的,对应的视图类怎么写的,都会走到dispatch方法,进行分发, 在咱们看的APIView类中的dispatch方法的源码中,有个sel ...
- Docker--Docker初体验
echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 先来接 ...
- 第一个boot项目
一.打开网址https://start.spring.io/ 进去springboot官网,根据自己实际情况选择所需组件,点击生成. 二.导入maven项目,但是pom.xml报Line1未知错误,检 ...
- MySQL安装及配置最详细教程
https://blog.csdn.net/Mxdon_on/article/details/89461513 概述 MySQL作为最常用的数据库,手动安装的方法还是稍微有些弯弯 首先下载安装包 (官 ...
- web开发中浏览器跨域问题
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...
- 为什么要使用MQ消息中间件?这3个点让你彻底明白!
前言 一个用消息队列的人,不知道为啥用,有点尴尬.没有复习这点,很容易被问蒙,然后就开始胡扯了. 回答:这个问题,咱只答三个最主要的应用场景,不可否认还有其他的,但是只答三个主要的,即以下六个字: 解 ...
- python学习-class封装
# 封装 类=属性+行为 抽像 -class StudentV2: # 类属性 所有的实例可以共享 .不属于任何实例的特性. is_people = True # 类方法 1.装饰器.2.参数是cls ...
- 你想要的 HBase 原理都在这了
目录 一. 集群架构 集群角色 工作机制 二.存储机制 A. 存储模型 B. LSM 与 Compaction C. Region 分裂 D. 自动均衡 三.访问机制 四. 鉴权 五. 高可靠 1.集 ...