Code Monkey home page Code Monkey logo

openlayer3.echart3-layer's Introduction

Openlayer3.Echart3-Layer

A new way to combine Openlayer3 with Echart3,Opitimize the render performance.

-----2017/10/19更新 优化图层移动、缩放性能,优化动画效果。减少重绘开销。

在使用Echart时,发现百度官方给出了Echart结合百度地图的例子,在地图数据展示方面有很好的效果,同时,目前手上正好有基于Openlayers的数据展示需求,于是,就了解了相关资料,准备采用这个技术方案来完成需求。

通过仔细观察发现,百度地图与echart结合采用的是叠加overlay(实际上就是div,是一个用来存放echart图标的容器而已)的方式,通过捕获百度地图的平移、缩放等事件,通知echart重新绘制图表,以达到echart图表和地图坐标吻合的目的。

参照百度地图的做法,笔者实验了Openlayers3与echart3结合,方案可行。同时,针对用户提出的地图缩放和平移时echart图表明显落后于地图移动的问题,做出了相应的改进。

OpenlayerE3.gif

openlayer3.echart3-layer's People

Contributors

wongspark avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.