• 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地图可以实现:

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

    整体展示如下:

     

    3.echarts-gl地图

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

     

      

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

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

                                 

  • 相关阅读:
    归并之将两个有序数组合并(已測试)
    Embedded Android 协同翻译
    IOS中公布应用程序,进度条一直不走怎么处理
    《textanalytics》课程简单总结(2):topic mining
    编程小错误备忘录
    观察者模式
    scrapy递归抓取网页数据
    leetCode 95.Unique Binary Search Trees II (唯一二叉搜索树) 解题思路和方法
    spring4.0.0的配置和使用
    ios面试基础
  • 原文地址:https://www.cnblogs.com/naaoveGIS/p/11358755.html
Copyright © 2020-2023  润新知