sakitam-fdd / Ol3echarts
Licence: other
🌏 📊 ol3Echarts | a openlayers extension to echarts
Stars: ✭ 229
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ol3echarts
L7
🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis framework which relies on Mapbox GL or AMap to render basemaps.
Stars: ✭ 2,517 (+999.13%)
Mutual labels: webgl, gis, map
farmOS-map
farmOS Map is an OpenLayers wrapper library designed for agricultural mapping needs. It can be used in any project that has similar requirements.
Stars: ✭ 18 (-92.14%)
Mutual labels: map, gis, openlayers
Deep Viz
A React component library, providing concise and beautiful diversity charts with Canvas, SVG, E-map, WebGL, Dom, based on data visualization experience and commercial data display practice.
Stars: ✭ 55 (-75.98%)
Mutual labels: webgl, echarts, canvas
Ionic Boilerplate
✨ An Ionic Starter kit featuring Tests, E2E, Karma, Protractor, Jasmine, Istanbul, Gitlab CI, Automatic IPA and APK, TypeScript 2, TsLint, Codelyzer, Typedoc, Yarn, Rollup, and Webpack 2
Stars: ✭ 309 (+34.93%)
Mutual labels: webpack, rollup, karma
Openglobus
JavaScript 3d maps and geospatial data visualization engine library.
Stars: ✭ 199 (-13.1%)
Mutual labels: webgl, gis, map
Iclient Javascript
Modern GIS Web Client for JavaScript, based on Leaflet\OpenLayers\MapboxGL-JS\Classic(iClient8C), enhanced with ECharts\D3\MapV etc. Contributed by SuperMap & community.
Stars: ✭ 593 (+158.95%)
Mutual labels: gis, openlayers, map
Knowledge
文档着重构建一个完整的「前端技术架构图谱」,方便 F2E(Front End Engineering又称FEE、F2E) 学习与进阶。
Stars: ✭ 1,620 (+607.42%)
Mutual labels: webpack, webgl, canvas
Vts Browser Js
JavaScript WebGL 3D map rendering engine
Stars: ✭ 148 (-35.37%)
Mutual labels: webgl, gis, map
Awesome Gis
😎Awesome GIS is a collection of geospatial related sources, including cartographic tools, geoanalysis tools, developer tools, data, conference & communities, news, massive open online course, some amazing map sites, and more.
Stars: ✭ 2,582 (+1027.51%)
Mutual labels: gis, map
Vue Plugin Template
🚀 Solid foundation to start a Vue plugin with the best developer experience and a focus on performance
Stars: ✭ 189 (-17.47%)
Mutual labels: webpack, rollup
Awesome Geospatial Companies
🌐 List of 500+ geospatial companies (GIS, Earth Observation, UAV, Satellite, Digital Farming, ..)
Stars: ✭ 184 (-19.65%)
Mutual labels: gis, map
Echarts Gl
Extension pack for Apache ECharts, providing globe visualization and 3D plots.
Stars: ✭ 2,227 (+872.49%)
Mutual labels: webgl, echarts
Gown.js
UI system for pixi.js inspired by feathers-ui
Stars: ✭ 195 (-14.85%)
Mutual labels: webgl, canvas
Jest Canvas Mock
🌗 A module used to mock canvas in Jest.
Stars: ✭ 189 (-17.47%)
Mutual labels: echarts, canvas
Droneworld
droneWorld: a 3D world map and a three.js playground
Stars: ✭ 197 (-13.97%)
Mutual labels: webgl, map
Tilemap
Rectangular tilemap implementation for PixiJS
Stars: ✭ 177 (-22.71%)
Mutual labels: webgl, canvas
React Cordova Boilerplate
TodoMVC example for react with development tools to build a cordova application
Stars: ✭ 206 (-10.04%)
Mutual labels: webpack, karma
Bridger for openlayers and Apache ECharts (incubating)
Support
Project | Status | Version | Npm | CDN | Description |
---|---|---|---|---|---|
ol3-echarts | support for openlayers3-4 | ||||
ol-echarts | support for openlayers5+ |
下载
git clone https://github.com/sakitam-fdd/ol3Echarts.git
yarn run bootstrap
yarn run dev
yarn run build
yarn run karma.test
安装
npm安装
注意:npm下存在两个包 ol3-echarts 和 ol-echarts 前者是在使用 openlayers 或者是
ol
的cdn时使用;后者是在使用 ol 配合打包工具使用。
// old openlayers package
npm install ol3-echarts --save
import ol3Echarts from 'ol3-echarts'
// ol package
npm install ol-echarts --save
import EChartsLayer from 'ol-echarts'
cdn
cdn 引用方式只支持 旧版
openlayers
和新版ol
的cdn引用方式,统一使用ol3-echarts
支持。
目前可通过 unpkg.com / jsdelivr 获取最新版本的资源。
// jsdelivr (jsdelivr由于缓存原因最好锁定版本号)
https://cdn.jsdelivr.net/npm/[email protected]/dist/ol3Echarts.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/ol3Echarts.min.js
// npm
https://unpkg.com/ol3-echarts/dist/ol3Echarts.js
https://unpkg.com/ol3-echarts/dist/ol3Echarts.min.js
示例
文档
openlayers
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol3-echarts/dist/ol3Echarts.js"></script>
<script>
var Map = new ol.Map({
target: container,
layers: [
new ol.layer.Tile({
preload: 4,
source: new ol.source.OSM()
})
],
loadTilesWhileAnimating: true,
view: new ol.View({
projection: 'EPSG:4326',
center: [120.74758724751435, 30.760422266949334],
zoom: 8
})
});
var echartslayer = new ol3Echarts(echartsOption, {
source: '',
destination: '',
hideOnMoving: true,
forcedRerender: false,
forcedPrecomposeRerender: false
});
echartslayer.appendTo(Map)
</script>
对于 ol version >= 5 && >=6 的版本
如果你已经对 ol 执行构建 build-legacy
那么你将能够获取一个可以通过 script
引入的 ol.js
包,这样的话你也可以使用
ol-echarts
下的 ol-echarts.js
, 如果碰到鼠标事件问题,请参照 issues #45
<div id="map"></div>
<script src="https://sakitam-1255686840.cos.ap-beijing.myqcloud.com/cdn/ol/v6.1.1/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://unpkg.com/ol-echarts/dist/ol-echarts.js"></script>
<script>
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
target: 'map',
layers: [
osm,
],
view: new ol.View({
center: ol.proj.fromLonLat([108.18095703125005, 34.34141675361363]),
projection: 'EPSG:3857',
zoom: 5
})
});
var echartslayer = new EChartsLayer({
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "right",
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
},
series: [
{
name: "访问来源",
type: "pie",
radius: "30",
coordinates: [110.53450137499999, 33.44104525],
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
},
{
name: "访问来源",
type: "pie",
radius: "30",
coordinates: [113.53450137499999, 34.44104525],
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
},
{
name: "访问来源",
type: "pie",
radius: "30",
coordinates: [110.53450137499999, 38.44104525],
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
});
echartslayer.appendTo(map);
</script>
ol package & react
import * as React from 'react';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import 'ol/ol.css';
import EChartsLayer from 'ol-echarts';
class Index extends React.Component {
constructor (props, context) {
super(props, context);
this.state = {
zoom: 14,
fov: 0,
pitch: 0,
bearing: 0
};
this.container = null;
this.map = null;
}
componentDidMount () {
this.map = new Map({
target: this.container,
view: new View({
center: [113.53450137499999, 34.44104525],
projection: 'EPSG:4326',
zoom: 5 // resolution
}),
layers: [
new TileLayer({
source: new XYZ({
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
})
]
});
const echartslayer = new EChartsLayer(option, {
hideOnMoving: false,
hideOnZooming: false,
forcedPrecomposeRerender: true
});
echartslayer.appendTo(this.map);
window.setTimeout(() => {
echartslayer.remove();
}, 10 * 1000)
}
setRef = (x = null) => {
this.container = x;
};
render () {
return (<div ref={this.setRef} className="map-content"></div>);
}
}
hmap-js
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/hmap-js/dist/hmap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol3-echarts/dist/ol3Echarts.js"></script>
<script>
var Maps = new HMap('map', {
controls: {
loading: true,
zoomSlider: true,
fullScreen: false
},
view: {
center: [113.53450137499999, 34.44104525],
projection: 'EPSG:4326',
zoom: 5, // resolution
},
baseLayers: [
{
layerName: 'vector',
isDefault: true,
layerType: 'TileXYZ',
projection: 'EPSG:3857',
tileGrid: {
tileSize: 256,
extent: [-2.0037507067161843E7, -3.0240971958386254E7, 2.0037507067161843E7, 3.0240971958386205E7],
origin: [-2.0037508342787E7, 2.0037508342787E7],
resolutions: [
156543.03392800014,
78271.51696399994,
39135.75848200009,
19567.87924099992,
9783.93962049996,
4891.96981024998,
2445.98490512499,
1222.992452562495,
611.4962262813797,
305.74811314055756,
152.87405657041106,
76.43702828507324,
38.21851414253662,
19.10925707126831,
9.554628535634155,
4.77731426794937,
2.388657133974685
]
},
layerUrl: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
}
]
});
var echartslayer = new ol3Echarts(echartsOption, {
source: '',
destination: '',
hideOnMoving: true,
forcedRerender: false,
forcedPrecomposeRerender: false
});
echartslayer.appendTo(Maps.getMap())
</script>
截图示例
其他示例请自己挖掘
致谢
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].