GithubHelp home page GithubHelp logo

wangbingqian110 / openlayers_echart Goto Github PK

View Code? Open in Web Editor NEW
53.0 3.0 20.0 53.77 MB

最新版的OpenLayers与最新的ECharts相结合,实现了将ECharts中的地图换成OpenLayers的地图。

JavaScript 100.00%

openlayers_echart's Introduction

openlayers_echart

最新版的OpenLayers与最新的ECharts相结合,实现了将ECharts中的地图换成OpenLayers的地图。


image image image

  • npm使用
  1. 通过npm安装
npm install openlayers_echart
  1. 项目中引用
import ADLayer from 'openlayers_echart'

var oe = new ADLayer(option,map,echarts) 
oe.render()
  • ES6使用方法
  1. 下载项目目录中js文件:openlayers_echart/src/openlayers.echart.js
  2. 在自己的js文件中添加:
import ADLayer from '(openlayers.echart.js文件所在路径,相对绝对均可)'
  1. 实例化。(option为ECharts中的配置项,map为OL的地图对象,echarts为ECharts的共有输出对象(不是自己初始化的那个))
var oe = new ADLayer(option,map,echarts) 
oe.render()

  • ES5使用方法:
  1. 下载项目目录中js文件:openlayers_echart/dist/JS/openlayers_echart.es5.js
  2. 在html页面中引入该js文件,该文件依赖Echart库的js的文件。
  3. 实例化。(option为ECharts中的配置项,map为OL的地图对象,echarts为ECharts的共有输出对象(不是自己初始化的那个))
var oe = new ADLayer(option,map,echarts) 
oe.render()

openlayers_echart's People

Contributors

wangbingqian110 avatar

Stargazers

alezauuuyyy avatar  avatar  avatar NikKlausss avatar mahmoud adel avatar Jinghao Hu avatar  avatar  avatar  avatar botlikes avatar yan avatar laddish avatar FightForHope avatar  avatar 高万靖 avatar shu97 avatar XiaoFeiXia avatar  avatar 小熊猫 avatar Gen Tin avatar  avatar  avatar  avatar  avatar mapstrong avatar Qtvz avatar Feifan Chen avatar  avatar  avatar  avatar liucaidong avatar Tim·HaoDong avatar  avatar 许新昆 avatar Tinyzhang avatar Isabella avatar 靳志明 avatar  avatar  avatar  avatar HelloWorld avatar  avatar $_ avatar  avatar  avatar 笑了个笑笑 avatar Shu Jin avatar 梁华新 avatar kuwii avatar Scott Young avatar 锡山飞狐 avatar  avatar Xuxiaokai avatar

Watchers

net_hare avatar James Cloos avatar 许新昆 avatar

openlayers_echart's Issues

缺少清除实例的方法

感谢作者提供了一个非常棒的插件。
在实际使用中,发现了一个问题。在源码中并没有找到关于清除echarts实例的方法,使用原生的dispose()方法会报找不到getWith()的错误。
于是,我采用了清除DOM的方式,但是当我重复render的时候,地图会变得越来越卡,echarts叠加越来越多。
因此,希望作者能够添加一个清除的方法以完善这个非常棒的插件!!!

拖动地图时会出现偏移

你好,我看了代码,大概意思是生成一张画布,然后放到地图的viewport中,(不知道我这样理解对不对)这样操作会导致一个问题,就是我拖动地图时,画布这一层不能完全随着地图动,会出现一定的位置偏移,尤其是在比较快速的拖动时,请问有比较好的办法解决这个问题吗?

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.