文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处: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地图可以实现:

  1. 自定义地图数据,但是需要为经纬度坐标系的geojson格式数据。
  2. 可与echarts热力集成。
  3. 可以通过设定symbol的type,实现打点,有交互事件。
  4. 可以通过设定symbol的type,实现聚类圆饼,模拟聚类效果。
  5. 可以通过设置双层地图的思想,分别对整体地图和各要素分别设置不同的样式,实现地图整体轮廓边框和内部要素边框展示不同样式的效果。
  6. 可以通过增加阴影和偏移,实现立体的效果。

整体展示如下:

3.echarts-gl地图

用echarts二维地图模拟的立体效果并不是真正的三维,也无法真正的倾斜,只是一种视觉效果而已。Echarts的三维地图中,其属性略有不同,但是思路大同小异,这里直接给出最后整体效果:

  

                         -----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

                             

eCharts二三维地图总结的更多相关文章

  1. [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布

    基于浏览器的三维地图还算是一个比较高冷的东西,最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据,很遗憾,还真的没有太好的的方案,只能说还有可行的方案. 很久之前用过skyline,使用CS居 ...

  2. 使用ESMap的地图平台开发三维地图

      本文简单的介绍使用ESmap的SDK开发(DIY自己地图的)一个地图的过程.若有不足,欢迎指正. 一.创建地图 只需四步,从无到有,在浏览器中创建一个自己的三维地图,炫酷到爆! 第一步:引入ESM ...

  3. 如何使用JS来开发室内三维地图的轨迹回放功能

     在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回 ...

  4. Arcgis API for JS——普通分屏联动及二三维联动

    对于二三维联动,有多种方法进行实现,当时旧项目使用了当时能掌握的一种写法,在技能提升了这么多后当然要对这些写法做一个总结. 一.通过监听View上的鼠标事件变化来进行分屏联动(同一坐标系) (同理可以 ...

  5. SkylineGlobe 6.6 三维地图上实现自定义右键菜单示例代码

    1.OnRButtonDown.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  6. 三维地图中的A*寻路

    跟二维地图原理一样,只不过搜索方向多了,二维只搜8个方向,而三维要搜26个方向. 不懂的看我以前写的文章,这里直接贴代码: #include <iostream> #include < ...

  7. ECharts 散点图+百度地图(案例转载)

    转载来源:https://efe.baidu.com/blog/echarts-map-tutorial-2/ ECharts 实现地图散点图(下)  小红  2016-06-13  ECharts, ...

  8. 基于Skyline与ArcGIS Server的二三维联动功能实现

    基于Skyline与ArcGIS Server的二三维联动功能实现主要利用WEB技术.ArcGIS for JavaScript.Skyline 二次开发以及ArcGIS 10.1 桌面工具. 利用A ...

  9. 使用室内三维地图引擎ESMap来管理摄像头设备、消防设备和人员轨迹展示

    目前室内三维地图如何轻量化,能够在手机微信.电脑浏览器等平台快速显示地图,显示的地图性能好,转动地图不卡是大家都要面对的问题, 使用室内三维地图引擎ESMap后目前可以不用操心这方面的问题,开发只需要 ...

随机推荐

  1. Prometheus笔记(二)监控go项目实时给grafana展示

    欢迎加入go语言学习交流群 636728449 Prometheus笔记(二)监控go项目实时给grafana展示 Prometheus笔记(一)metric type 文章目录 一.promethe ...

  2. UVA11324 The Lagest Lique(SCC缩点+DP)

    Given a directed graph G, con- sider the following transformation. First, create a new graph T(G) to ...

  3. Multiplication Game

    Description Alice and Bob are in their class doing drills on multiplication and division. They quick ...

  4. Crush 算法以及PG和PGP调整经验

    PG和PGP调整经验调整前准备为了降低对业务的影响,需要调整以下参数ceph tell osd.* injectargs ‘–osd-max-backfills 1’ceph tell osd.* i ...

  5. 怎么样才算是精通 Python?

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:weixin_45587093 你们所说的什么要怎样数据分析.爬虫.We ...

  6. Android中实现轮询下载安装应用的Dialog

    前言 因为有涉及到静默安装,主要是针对已经root的设备,应需求,是在ARM的主板上开发的,所以对于常规手机仅能做到轮询下载,做不到静默安装. 效果图 用的鸿洋大神的百分比布局,各个分辨率都完美适配, ...

  7. ES6,模块化

    遇到的问题: 在js文件中使用import,export的时候报错: 原因:因为NodeJS只支持部分ES6的语法,有些ES6语法还不支持,而import语法就是其中一个: 解决方法: 1.使用ES5 ...

  8. Vue项目中实现用户登录及token验证

    学习博客:https://www.cnblogs.com/web-record/p/9876916.html

  9. 3个Spring Boot项目调优的方式

    前言 作为一名工程师,项目调优这事,是必须得熟练掌握的事情. 在SpringBoot项目中,调优主要通过配置文件和配置JVM的参数的方式进行.   一.修改配置文件 关于修改配置文件applicati ...

  10. 5分钟搞清楚Synchronized和Lock的概念与区别

    前言 并发编程中,锁是经常需要用到的,今天我们一起来看下Java中的锁机制:synchronized和lock. Synchronized 和 Lock的概念 Synchronized 是Java 并 ...