sakitam-fdd / ol3echarts Goto Github PK
View Code? Open in Web Editor NEW:earth_asia: :bar_chart: ol3Echarts | a openlayers extension to echarts
Home Page: https://sakitam-fdd.github.io/ol3Echarts/#/index
License: Other
:earth_asia: :bar_chart: ol3Echarts | a openlayers extension to echarts
Home Page: https://sakitam-fdd.github.io/ol3Echarts/#/index
License: Other
您好,使用过程中遇到两个问题:
1、我想把功能封装成接口使用,用 import EChartsLayer from 'ol-echarts';
方式引入,再用rollup打包,外部调用时出现Uncaught TypeError: EChartsLayer__default.default is not a constructor
报错
请问是什么问题?
2、另请指教:setMap方法中,为何需要判断map instanceof ol.Map
?调用我自己封装的库(npm引的ol),cdn方式引的ol-echarts,这边map对象判断会一直过不去?
谢谢
设置hideOnZooming: true,缩放时图层未隐藏
你好,在使用您开发的项目过程中发现饼状图pie.html示例中饼状图示例 将饼状图移动到四个边角会出现一个弧度的边界将饼状图切割开。如果不用你封装的hmap.js 而是直接用原生的ol 这种情况更加严重。
用ol6.5.0版本时,鼠标悬浮在点上的时候,会报错,不出现悬浮窗体了。ol降版本到6.1.1则不会出现该问题。
原因是ol 6.5.0没有mapBrowserPointerEvent,统一改为了mapBrowserEvent。
EChartsLayer.prototype.mouseMove = function (event) {
if (this.$chart) {
var target = event.originalEvent.target;
while (target) {
if (target.className === 'ol-overlaycontainer-stopevent') {
this.$chart.getZr().painter.getViewportRoot().dispatchEvent(mockEvent('mousemove', event));
return;
}
target = target.parentElement;
}
}
};
用ol6.5.0版本,这个event类型有问题。关于mouse的event都存在问题。
if (coordSys.type === 'cartesian2d' || coordSys.type === 'calendar')
报错:
TypeError: Cannot read properties of null (reading 'type')
at ExtendedClass.render (HeatmapView.js?480e:116:1)
at Task.progress (Chart.js?e887:281:1)
请问是怎么回事呢?
我是想渲染热力图
{ type: 'heatmap', coordinateSystem: "openlayers", data: heatPoints[j], pointSize: 5, blurSize: 15, },
"ol": "^6.1.1"
"ol-echarts": "^2.0.1"
"vue-element-admin": "4.2.1"
使用饼图的时候,悬浮窗没有出现,用console.log去调试,发现悬浮事件也没有触发
var options = { tooltip : { show : true, trigger: 'item', formatter: function(params){ console.log(params) }, }, series: [], color: ['#0085c7','#18db94','#ff6600','#e31b14'] };
使用echart和openlayers 3单独能够成图。使用ol-echart报js异常,不能显示图形:其中差异代码如下
//echart能成图的代码
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
myChart.setOption(option, true);
//olechart不能成图代码:
var echartslayer = new ol3Echarts(option);
echartslayer.appendTo(Maps);
//完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>openlayers扩展实例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.css">
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="container" style="height: 100%"></div>
<script src="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol3-echarts/dist/ol3Echarts.js"></script>
<script>
var Maps = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
preload: 4,
source: new ol.source.OSM()
})
],
loadTilesWhileAnimating: true,
view: new ol.View({
projection: 'EPSG:4326',
center: [113.53450137499999, 34.44104525],
zoom: 5
})
});
var option = {
title: {
text: 'World Population (2010)',
subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',
left: 'center',
top: 'top'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
var value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
+ '.' + value[1];
return params.seriesName + '<br/>' + params.name + ' : ' + value;
}
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 0,
max: 1000000,
text:['High','Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue','yellow', 'orangered']
}
},
series: [
{
name: 'World Population (2010)',
type: 'map',
mapType: 'world',
roam: true,
itemStyle:{
emphasis:{label:{show:true}}
},
data:[
{name: 'Afghanistan', value: 28397.812},
{name: 'Angola', value: 19549.124},
{name: 'Albania', value: 3150.143},
{name: 'United Arab Emirates', value: 8441.537},
{name: 'Argentina', value: 40374.224},
{name: 'Armenia', value: 2963.496},
{name: 'French Southern and Antarctic Lands', value: 268.065},
{name: 'Australia', value: 22404.488},
{name: 'Austria', value: 8401.924},
{name: 'Azerbaijan', value: 9094.718},
{name: 'Burundi', value: 9232.753},
{name: 'Belgium', value: 10941.288},
{name: 'Benin', value: 9509.798},
{name: 'Burkina Faso', value: 15540.284},
{name: 'Bangladesh', value: 151125.475},
{name: 'Bulgaria', value: 7389.175},
{name: 'The Bahamas', value: 66402.316},
{name: 'Bosnia and Herzegovina', value: 3845.929},
{name: 'Belarus', value: 9491.07},
{name: 'Belize', value: 308.595},
{name: 'Bermuda', value: 64.951},
{name: 'Bolivia', value: 716.939},
{name: 'Brazil', value: 195210.154},
{name: 'Brunei', value: 27.223},
{name: 'Bhutan', value: 716.939},
{name: 'Botswana', value: 1969.341},
{name: 'Central African Republic', value: 4349.921},
{name: 'Canada', value: 34126.24},
{name: 'Switzerland', value: 7830.534},
{name: 'Chile', value: 17150.76},
{name: 'China', value: 1359821.465},
{name: 'Ivory Coast', value: 60508.978},
{name: 'Cameroon', value: 20624.343},
{name: 'Democratic Republic of the Congo', value: 62191.161},
{name: 'Republic of the Congo', value: 3573.024},
{name: 'Colombia', value: 46444.798},
{name: 'Costa Rica', value: 4669.685},
{name: 'Cuba', value: 11281.768},
{name: 'Northern Cyprus', value: 1.468},
{name: 'Cyprus', value: 1103.685},
{name: 'Czech Republic', value: 10553.701},
{name: 'Germany', value: 83017.404},
{name: 'Djibouti', value: 834.036},
{name: 'Denmark', value: 5550.959},
{name: 'Dominican Republic', value: 10016.797},
{name: 'Algeria', value: 37062.82},
{name: 'Ecuador', value: 15001.072},
{name: 'Egypt', value: 78075.705},
{name: 'Eritrea', value: 5741.159},
{name: 'Spain', value: 46182.038},
{name: 'Estonia', value: 1298.533},
{name: 'Ethiopia', value: 87095.281},
{name: 'Finland', value: 5367.693},
{name: 'Fiji', value: 860.559},
{name: 'Falkland Islands', value: 49.581},
{name: 'France', value: 63230.866},
{name: 'Gabon', value: 1556.222},
{name: 'United Kingdom', value: 62066.35},
{name: 'Georgia', value: 4388.674},
{name: 'Ghana', value: 24262.901},
{name: 'Guinea', value: 10876.033},
{name: 'Gambia', value: 1680.64},
{name: 'Guinea Bissau', value: 10876.033},
{name: 'Equatorial Guinea', value: 696.167},
{name: 'Greece', value: 11109.999},
{name: 'Greenland', value: 56.546},
{name: 'Guatemala', value: 14341.576},
{name: 'French Guiana', value: 231.169},
{name: 'Guyana', value: 786.126},
{name: 'Honduras', value: 7621.204},
{name: 'Croatia', value: 4338.027},
{name: 'Haiti', value: 9896.4},
{name: 'Hungary', value: 10014.633},
{name: 'Indonesia', value: 240676.485},
{name: 'India', value: 1205624.648},
{name: 'Ireland', value: 4467.561},
{name: 'Iran', value: 240676.485},
{name: 'Iraq', value: 30962.38},
{name: 'Iceland', value: 318.042},
{name: 'Israel', value: 7420.368},
{name: 'Italy', value: 60508.978},
{name: 'Jamaica', value: 2741.485},
{name: 'Jordan', value: 6454.554},
{name: 'Japan', value: 127352.833},
{name: 'Kazakhstan', value: 15921.127},
{name: 'Kenya', value: 40909.194},
{name: 'Kyrgyzstan', value: 5334.223},
{name: 'Cambodia', value: 14364.931},
{name: 'South Korea', value: 51452.352},
{name: 'Kosovo', value: 97.743},
{name: 'Kuwait', value: 2991.58},
{name: 'Laos', value: 6395.713},
{name: 'Lebanon', value: 4341.092},
{name: 'Liberia', value: 3957.99},
{name: 'Libya', value: 6040.612},
{name: 'Sri Lanka', value: 20758.779},
{name: 'Lesotho', value: 2008.921},
{name: 'Lithuania', value: 3068.457},
{name: 'Luxembourg', value: 507.885},
{name: 'Latvia', value: 2090.519},
{name: 'Morocco', value: 31642.36},
{name: 'Moldova', value: 103.619},
{name: 'Madagascar', value: 21079.532},
{name: 'Mexico', value: 117886.404},
{name: 'Macedonia', value: 507.885},
{name: 'Mali', value: 13985.961},
{name: 'Myanmar', value: 51931.231},
{name: 'Montenegro', value: 620.078},
{name: 'Mongolia', value: 2712.738},
{name: 'Mozambique', value: 23967.265},
{name: 'Mauritania', value: 3609.42},
{name: 'Malawi', value: 15013.694},
{name: 'Malaysia', value: 28275.835},
{name: 'Namibia', value: 2178.967},
{name: 'New Caledonia', value: 246.379},
{name: 'Niger', value: 15893.746},
{name: 'Nigeria', value: 159707.78},
{name: 'Nicaragua', value: 5822.209},
{name: 'Netherlands', value: 16615.243},
{name: 'Norway', value: 4891.251},
{name: 'Nepal', value: 26846.016},
{name: 'New Zealand', value: 4368.136},
{name: 'Oman', value: 2802.768},
{name: 'Pakistan', value: 173149.306},
{name: 'Panama', value: 3678.128},
{name: 'Peru', value: 29262.83},
{name: 'Philippines', value: 93444.322},
{name: 'Papua New Guinea', value: 6858.945},
{name: 'Poland', value: 38198.754},
{name: 'Puerto Rico', value: 3709.671},
{name: 'North Korea', value: 1.468},
{name: 'Portugal', value: 10589.792},
{name: 'Paraguay', value: 6459.721},
{name: 'Qatar', value: 1749.713},
{name: 'Romania', value: 21861.476},
{name: 'Russia', value: 21861.476},
{name: 'Rwanda', value: 10836.732},
{name: 'Western Sahara', value: 514.648},
{name: 'Saudi Arabia', value: 27258.387},
{name: 'Sudan', value: 35652.002},
{name: 'South Sudan', value: 9940.929},
{name: 'Senegal', value: 12950.564},
{name: 'Solomon Islands', value: 526.447},
{name: 'Sierra Leone', value: 5751.976},
{name: 'El Salvador', value: 6218.195},
{name: 'Somaliland', value: 9636.173},
{name: 'Somalia', value: 9636.173},
{name: 'Republic of Serbia', value: 3573.024},
{name: 'Suriname', value: 524.96},
{name: 'Slovakia', value: 5433.437},
{name: 'Slovenia', value: 2054.232},
{name: 'Sweden', value: 9382.297},
{name: 'Swaziland', value: 1193.148},
{name: 'Syria', value: 7830.534},
{name: 'Chad', value: 11720.781},
{name: 'Togo', value: 6306.014},
{name: 'Thailand', value: 66402.316},
{name: 'Tajikistan', value: 7627.326},
{name: 'Turkmenistan', value: 5041.995},
{name: 'East Timor', value: 10016.797},
{name: 'Trinidad and Tobago', value: 1328.095},
{name: 'Tunisia', value: 10631.83},
{name: 'Turkey', value: 72137.546},
{name: 'United Republic of Tanzania', value: 44973.33},
{name: 'Uganda', value: 33987.213},
{name: 'Ukraine', value: 46050.22},
{name: 'Uruguay', value: 3371.982},
{name: 'United States of America', value: 312247.116},
{name: 'Uzbekistan', value: 27769.27},
{name: 'Venezuela', value: 236.299},
{name: 'Vietnam', value: 89047.397},
{name: 'Vanuatu', value: 236.299},
{name: 'West Bank', value: 13.565},
{name: 'Yemen', value: 22763.008},
{name: 'South Africa', value: 51452.352},
{name: 'Zambia', value: 13216.985},
{name: 'Zimbabwe', value: 13076.978}
]
}
]
};
//var echartslayer = new ol3Echarts(option);
//echartslayer.appendTo(Maps);
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
myChart.setOption(option, true);
</script>
</body>
</html>
是否能够设置EchartsLayer的zIndex使EchartsLayer位于两个openlayer的图层中间?
安装之后报这个错误,我是想用openlayers6集成echarts进去
ol-echarts存在echarts自身事件不触发情况
ol3-echarts正常
鼠标移入饼图和点击图例不处罚对应事件
地址:https://codesandbox.io/s/ol-echarts-example-vqtn5?autoresize=1&fontsize=14&theme=dark
Hi
When using EChartsLayer from ol-echarts in my Angular7 app, compiler throws multiple errors:
I get this error
error TS2554: Expected 0 arguments, but got 2.
when I use
this.echartslayer = new EChartsLayer(this.chartOption, {
hideOnMoving: false,
hideOnZooming: false,
forcedPrecomposeRerender: true
});
When I specify
this.echartslayer.appendTo(this.map);
I get error
error TS2339: Property 'appendTo' does not exist on type 'EChartsLayer'.
and finally following error when I want to update the chart option on data change
error TS2339: Property 'setChartOptions' does not exist on type 'EChartsLayer'.
Could you please help in resolving these errors?
ie11有兼容版本吗 貌似ie对es6支持不好
你好, 我看了下案例, 没有涉及加载百度瓦片地图的,想问一下,如何加载百度瓦片地图,参照ol的方式对baseLayers进行了改写,但是发现还是不行,希望能解答一下,谢谢.
使用geoJSON渲染openlayers,设置projection:'EPSG:4326'的话,地图会变扁,如果不设置Projection,echarts的lines飞线无法显示
如题,能否给个demo
我尝试了以下,想将 map.view.projection设为epsg4326之类的,没成功。。
使用北京地方坐标系,画lines图,看不见。标题能看见,backgroundColor也没问题,就是lines看不到,坐标大概是(40000,360000),是不是坐标值超出范围了呢?
Hi
I found the examples screenshot are really interesting. How I can run it locally?
Seccess on step 1 "yarn run bootstrap".
I got this when run "yarn run dev". How I can check the pages in the web browser?
~/dev/webgis/test/ol3Echarts:master$ yarn run dev
yarn run v1.22.5
$ lerna run dev
lerna notice cli v3.22.1
lerna info Executing command in 2 packages: "yarn run dev"
绑定 vue 组件的 beforeDestroy
事件, 调用 map.removeLayer
移除 EChartsLayer 实例 时报错:
Cannot read property '0' of undefined
at EChartsLayer.push../node_modules/ol-echarts/dist/ol-echarts.esm.js.EChartsLayer.updateViewSize
经调试发现, EChartsLayer 创建实例时会监听 map 的 resize 事件, 但在 vue 组件销毁时, map.getSize()
返回的是 undefined
, 从而引发了上述错误.
临时的解决方法是在 EChartsLayer 初始化之前监听 map 的 resize 事件, 如果 map.getSize()
为 undefined
则解除绑定 EChartsLayer#onResize
map.on('change:size', (e) => {
if(!map.getSize()) {
map.un('change:size', echartsLayer.onResize)
}
})
http://sakitam-fdd.cn/ol3Echarts/#/index
这个链接没了,你做了很多 OL 风场图等很有学习借鉴意义。
环境:
"ol": "^6.1.1",
"ol-echarts": "^2.0.1",
"echarts": "^4.5.0",
第一种情况:var echartLayer = new EChartsLayer(option,{
source: 'EPSG:2437',
hideOnMoving: true,
insertFirst: true, // https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html
stopEvent: true, // https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html
polyfillEvents: false, // 代理echrats图层的 mousedown mouseup click 事件
});
stopEvent为ture是,echarts图标可以进行交互,但是openlayers就是去了交互,地图拖动缩放都失效
第一种情况: stopEvent为false是,情况正好相反,地图反应正常,图标无交互
Hello
Dear, I want to know how to add a click event in the ol3Echarts.
This is my example,but it's not successful. Can you help me to sovle it,please?
__this.echartLayer.appendTo(__this.map);
//chart click event
__this.echartLayer.$chart.on('click', (evt) => {
console.log(evt);
});
But it's successful to add a click event for charts in native Echarts
当前绑定的map拖动缩放等事件是直接重新setOption,但没有appendData,导致数据为空,增量渲染失败,请问考虑支持echarts增量数据渲染的功能吗?
整合echarts热力图,visualMap点击后无反应 是不是这块还未整合好呢 我看案例里面也没有热力图示例
Hi,
I have district data but it is in two different formats (Json and CSV).So json file is used in OL3 and CSV file .Both files are having same attributes with same name. If user clicked on any district ,Popup chart will appear and inside popup square bar chart will display.
Is it possible to do bar chart inside popup using these library in ol3.
Thanks.
Hi, In Page http://sakitam-fdd.cn/ol3Echarts/static/examples/webgl/bar3d.html error:
GET http://sakitam-fdd.cn/ol3Echarts/static/assets/scripts/common.js net::ERR_ABORTED 404 (Not Found)
1、设置hideOnMoving和hideOnZooming为true
2、调用setVisible,设置地图隐藏
3、缩放或移动地图结束,地图显示了(预期隐藏)
4、调用setVisible,设置地图可见,地图不显示(预期显示)
这是是react版本的是吗,有vue的吗
1.在ol5版本,必须初始化地图的时候创建olEcharts对象吗?
1.调用remove方法移除对象之后,重新添加失败.
使用Echarts官方的PM2.5的示例代码,修改(删去一些属性)之后加入OpenLayers中,发现左下角的visualMap组件无法操控。
使用的包有:
"echarts": "^4.1.0",
"ol": "^5.2.0",
"ol-echarts": "^1.3.5",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-scripts": "2.0.5"
代码是这样的:
import React, { Component } from 'react';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM'
import 'ol/ol.css';
import EChartsLayer from 'ol-echarts';
import './App.css';
class App extends Component {
constructor (props, context) {
super(props, context);
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 OSM()
})
]
});
const geoCoordMap = {
"海门":[121.15,31.89],
"鄂尔多斯":[109.781327,39.608266],
"招远":[120.38,37.35],
"舟山":[122.207216,29.985295],
"齐齐哈尔":[123.97,47.33],
"盐城":[120.13,33.38],
"赤峰":[118.87,42.28],
"青岛":[120.33,36.07],
"乳山":[121.52,36.89],
"金昌":[102.188043,38.520089],
"泉州":[118.58,24.93],
"莱西":[120.53,36.86],
"日照":[119.46,35.42],
"胶南":[119.97,35.88],
"南通":[121.05,32.08],
"拉萨":[91.11,29.97],
"云浮":[112.02,22.93],
"梅州":[116.1,24.55],
"文登":[122.05,37.2],
"上海":[121.48,31.22],
"攀枝花":[101.718637,26.582347],
"威海":[122.1,37.5],
"承德":[117.93,40.97],
"厦门":[118.1,24.46],
"汕尾":[115.375279,22.786211],
"潮州":[116.63,23.68],
"丹东":[124.37,40.13],
"太仓":[121.1,31.45],
"曲靖":[103.79,25.51],
"烟台":[121.39,37.52],
"福州":[119.3,26.08],
"瓦房店":[121.979603,39.627114],
"即墨":[120.45,36.38],
"抚顺":[123.97,41.97],
"玉溪":[102.52,24.35],
"张家口":[114.87,40.82],
"阳泉":[113.57,37.85],
"莱州":[119.942327,37.177017],
"湖州":[120.1,30.86],
"汕头":[116.69,23.39],
"昆山":[120.95,31.39],
"宁波":[121.56,29.86],
"湛江":[110.359377,21.270708],
"揭阳":[116.35,23.55],
"荣成":[122.41,37.16],
"连云港":[119.16,34.59],
"葫芦岛":[120.836932,40.711052],
"常熟":[120.74,31.64],
"东莞":[113.75,23.04],
"河源":[114.68,23.73],
"淮安":[119.15,33.5],
"泰州":[119.9,32.49],
"南宁":[108.33,22.84],
"营口":[122.18,40.65],
"惠州":[114.4,23.09],
"江阴":[120.26,31.91],
"蓬莱":[120.75,37.8],
"韶关":[113.62,24.84],
"嘉峪关":[98.289152,39.77313],
"广州":[113.23,23.16],
"延安":[109.47,36.6],
"太原":[112.53,37.87],
"清远":[113.01,23.7],
"中山":[113.38,22.52],
"昆明":[102.73,25.04],
"寿光":[118.73,36.86],
"盘锦":[122.070714,41.119997],
"长治":[113.08,36.18],
"深圳":[114.07,22.62],
"珠海":[113.52,22.3],
"宿迁":[118.3,33.96],
"咸阳":[108.72,34.36],
"铜川":[109.11,35.09],
"平度":[119.97,36.77],
"佛山":[113.11,23.05],
"海口":[110.35,20.02],
"江门":[113.06,22.61],
"章丘":[117.53,36.72],
"肇庆":[112.44,23.05],
"大连":[121.62,38.92],
"临汾":[111.5,36.08],
"吴江":[120.63,31.16],
"石嘴山":[106.39,39.04],
"沈阳":[123.38,41.8],
"苏州":[120.62,31.32],
"茂名":[110.88,21.68],
"嘉兴":[120.76,30.77],
"长春":[125.35,43.88],
"胶州":[120.03336,36.264622],
"银川":[106.27,38.47],
"张家港":[120.555821,31.875428],
"三门峡":[111.19,34.76],
"锦州":[121.15,41.13],
"南昌":[115.89,28.68],
"柳州":[109.4,24.33],
"三亚":[109.511909,18.252847],
"自贡":[104.778442,29.33903],
"吉林":[126.57,43.87],
"阳江":[111.95,21.85],
"泸州":[105.39,28.91],
"西宁":[101.74,36.56],
"宜宾":[104.56,29.77],
"呼和浩特":[111.65,40.82],
"成都":[104.06,30.67],
"大同":[113.3,40.12],
"镇江":[119.44,32.2],
"桂林":[110.28,25.29],
"张家界":[110.479191,29.117096],
"宜兴":[119.82,31.36],
"北海":[109.12,21.49],
"西安":[108.95,34.27],
"金坛":[119.56,31.74],
"东营":[118.49,37.46],
"牡丹江":[129.58,44.6],
"遵义":[106.9,27.7],
"绍兴":[120.58,30.01],
"扬州":[119.42,32.39],
"常州":[119.95,31.79],
"潍坊":[119.1,36.62],
"重庆":[106.54,29.59],
"台州":[121.420757,28.656386],
"南京":[118.78,32.04],
"滨州":[118.03,37.36],
"贵阳":[106.71,26.57],
"无锡":[120.29,31.59],
"本溪":[123.73,41.3],
"克拉玛依":[84.77,45.59],
"渭南":[109.5,34.52],
"马鞍山":[118.48,31.56],
"宝鸡":[107.15,34.38],
"焦作":[113.21,35.24],
"句容":[119.16,31.95],
"北京":[116.46,39.92],
"徐州":[117.2,34.26],
"衡水":[115.72,37.72],
"包头":[110,40.58],
"绵阳":[104.73,31.48],
"乌鲁木齐":[87.68,43.77],
"枣庄":[117.57,34.86],
"杭州":[120.19,30.26],
"淄博":[118.05,36.78],
"鞍山":[122.85,41.12],
"溧阳":[119.48,31.43],
"库尔勒":[86.06,41.68],
"安阳":[114.35,36.1],
"开封":[114.35,34.79],
"济南":[117,36.65],
"德阳":[104.37,31.13],
"温州":[120.65,28.01],
"九江":[115.97,29.71],
"邯郸":[114.47,36.6],
"临安":[119.72,30.23],
"兰州":[103.73,36.03],
"沧州":[116.83,38.33],
"临沂":[118.35,35.05],
"南充":[106.110698,30.837793],
"天津":[117.2,39.13],
"富阳":[119.95,30.07],
"泰安":[117.13,36.18],
"诸暨":[120.23,29.71],
"郑州":[113.65,34.76],
"哈尔滨":[126.63,45.75],
"聊城":[115.97,36.45],
"芜湖":[118.38,31.33],
"唐山":[118.02,39.63],
"平顶山":[113.29,33.75],
"邢台":[114.48,37.05],
"德州":[116.29,37.45],
"济宁":[116.59,35.38],
"荆州":[112.239741,30.335165],
"宜昌":[111.3,30.7],
"义乌":[120.06,29.32],
"丽水":[119.92,28.45],
"洛阳":[112.44,34.7],
"秦皇岛":[119.57,39.95],
"株洲":[113.16,27.83],
"石家庄":[114.48,38.03],
"莱芜":[117.67,36.19],
"常德":[111.69,29.05],
"保定":[115.48,38.85],
"湘潭":[112.91,27.87],
"金华":[119.64,29.12],
"岳阳":[113.09,29.37],
"长沙":[113,28.21],
"衢州":[118.88,28.97],
"廊坊":[116.7,39.53],
"菏泽":[115.480656,35.23375],
"合肥":[117.27,31.86],
"武汉":[114.31,30.52],
"大庆":[125.03,46.58]
};
const convertData = function (data) {
const res = [];
for (let i = 0; i < data.length; i++) {
const geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
const option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2];
}
},
visualMap: {
min: 0,
max: 200,
calculable: true,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
},
textStyle: {
color: '#fff'
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([
{name: "海门", value: 9},
{name: "鄂尔多斯", value: 12},
{name: "招远", value: 12},
{name: "舟山", value: 12},
{name: "齐齐哈尔", value: 14},
{name: "盐城", value: 15},
{name: "赤峰", value: 16},
{name: "青岛", value: 18},
{name: "乳山", value: 18},
{name: "金昌", value: 19},
{name: "泉州", value: 21},
{name: "莱西", value: 21},
{name: "日照", value: 21},
{name: "胶南", value: 22},
{name: "南通", value: 23},
{name: "拉萨", value: 24},
{name: "云浮", value: 24},
{name: "梅州", value: 25},
{name: "文登", value: 25},
{name: "上海", value: 25},
{name: "攀枝花", value: 25},
{name: "威海", value: 25},
{name: "承德", value: 25},
{name: "厦门", value: 26},
{name: "汕尾", value: 26},
{name: "潮州", value: 26},
{name: "丹东", value: 27},
{name: "太仓", value: 27},
{name: "曲靖", value: 27},
{name: "烟台", value: 28},
{name: "福州", value: 29},
{name: "瓦房店", value: 30},
{name: "即墨", value: 30},
{name: "抚顺", value: 31},
{name: "玉溪", value: 31},
{name: "张家口", value: 31},
{name: "阳泉", value: 31},
{name: "莱州", value: 32},
{name: "湖州", value: 32},
{name: "汕头", value: 32},
{name: "昆山", value: 33},
{name: "宁波", value: 33},
{name: "湛江", value: 33},
{name: "揭阳", value: 34},
{name: "荣成", value: 34},
{name: "连云港", value: 35},
{name: "葫芦岛", value: 35},
{name: "常熟", value: 36},
{name: "东莞", value: 36},
{name: "河源", value: 36},
{name: "淮安", value: 36},
{name: "泰州", value: 36},
{name: "南宁", value: 37},
{name: "营口", value: 37},
{name: "惠州", value: 37},
{name: "江阴", value: 37},
{name: "蓬莱", value: 37},
{name: "韶关", value: 38},
{name: "嘉峪关", value: 38},
{name: "广州", value: 38},
{name: "延安", value: 38},
{name: "太原", value: 39},
{name: "清远", value: 39},
{name: "中山", value: 39},
{name: "昆明", value: 39},
{name: "寿光", value: 40},
{name: "盘锦", value: 40},
{name: "长治", value: 41},
{name: "深圳", value: 41},
{name: "珠海", value: 42},
{name: "宿迁", value: 43},
{name: "咸阳", value: 43},
{name: "铜川", value: 44},
{name: "平度", value: 44},
{name: "佛山", value: 44},
{name: "海口", value: 44},
{name: "江门", value: 45},
{name: "章丘", value: 45},
{name: "肇庆", value: 46},
{name: "大连", value: 47},
{name: "临汾", value: 47},
{name: "吴江", value: 47},
{name: "石嘴山", value: 49},
{name: "沈阳", value: 50},
{name: "苏州", value: 50},
{name: "茂名", value: 50},
{name: "嘉兴", value: 51},
{name: "长春", value: 51},
{name: "胶州", value: 52},
{name: "银川", value: 52},
{name: "张家港", value: 52},
{name: "三门峡", value: 53},
{name: "锦州", value: 54},
{name: "南昌", value: 54},
{name: "柳州", value: 54},
{name: "三亚", value: 54},
{name: "自贡", value: 56},
{name: "吉林", value: 56},
{name: "阳江", value: 57},
{name: "泸州", value: 57},
{name: "西宁", value: 57},
{name: "宜宾", value: 58},
{name: "呼和浩特", value: 58},
{name: "成都", value: 58},
{name: "大同", value: 58},
{name: "镇江", value: 59},
{name: "桂林", value: 59},
{name: "张家界", value: 59},
{name: "宜兴", value: 59},
{name: "北海", value: 60},
{name: "西安", value: 61},
{name: "金坛", value: 62},
{name: "东营", value: 62},
{name: "牡丹江", value: 63},
{name: "遵义", value: 63},
{name: "绍兴", value: 63},
{name: "扬州", value: 64},
{name: "常州", value: 64},
{name: "潍坊", value: 65},
{name: "重庆", value: 66},
{name: "台州", value: 67},
{name: "南京", value: 67},
{name: "滨州", value: 70},
{name: "贵阳", value: 71},
{name: "无锡", value: 71},
{name: "本溪", value: 71},
{name: "克拉玛依", value: 72},
{name: "渭南", value: 72},
{name: "马鞍山", value: 72},
{name: "宝鸡", value: 72},
{name: "焦作", value: 75},
{name: "句容", value: 75},
{name: "北京", value: 79},
{name: "徐州", value: 79},
{name: "衡水", value: 80},
{name: "包头", value: 80},
{name: "绵阳", value: 80},
{name: "乌鲁木齐", value: 84},
{name: "枣庄", value: 84},
{name: "杭州", value: 84},
{name: "淄博", value: 85},
{name: "鞍山", value: 86},
{name: "溧阳", value: 86},
{name: "库尔勒", value: 86},
{name: "安阳", value: 90},
{name: "开封", value: 90},
{name: "济南", value: 92},
{name: "德阳", value: 93},
{name: "温州", value: 95},
{name: "九江", value: 96},
{name: "邯郸", value: 98},
{name: "临安", value: 99},
{name: "兰州", value: 99},
{name: "沧州", value: 100},
{name: "临沂", value: 103},
{name: "南充", value: 104},
{name: "天津", value: 105},
{name: "富阳", value: 106},
{name: "泰安", value: 112},
{name: "诸暨", value: 112},
{name: "郑州", value: 113},
{name: "哈尔滨", value: 114},
{name: "聊城", value: 116},
{name: "芜湖", value: 117},
{name: "唐山", value: 119},
{name: "平顶山", value: 119},
{name: "邢台", value: 119},
{name: "德州", value: 120},
{name: "济宁", value: 120},
{name: "荆州", value: 127},
{name: "宜昌", value: 130},
{name: "义乌", value: 132},
{name: "丽水", value: 133},
{name: "洛阳", value: 134},
{name: "秦皇岛", value: 136},
{name: "株洲", value: 143},
{name: "石家庄", value: 147},
{name: "莱芜", value: 148},
{name: "常德", value: 152},
{name: "保定", value: 153},
{name: "湘潭", value: 154},
{name: "金华", value: 157},
{name: "岳阳", value: 169},
{name: "长沙", value: 175},
{name: "衢州", value: 177},
{name: "廊坊", value: 193},
{name: "菏泽", value: 194},
{name: "合肥", value: 229},
{name: "武汉", value: 273},
{name: "大庆", value: 279}
]),
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
}
]
};
const echartslayer = new EChartsLayer(option, {
hideOnMoving: false,
hideOnZooming: false,
forcedPrecomposeRerender: true
});
echartslayer.appendTo(this.map);
}
setRef = (x = null) => {
this.container = x;
};
render() {
return (<div ref={this.setRef} className="map-content" />);
}
}
export default App;
请问这个……有办法吗?
i am using ol-echarts package here to draw the heatmap chart,
but getting the folloeing error while using appendTo
MapDraw.js:210 Uncaught TypeError: Cannot read properties of undefined (reading 'transform')
at MapDraw.draw (MapDraw.js:210:32)
at ExtendedClass.render (MapView.js:70:17)
at Task.progress (Chart.js:281:20)
at doProgress (task.js:217:11)
at Task.taskProto.perform (task.js:157:9)
at eval (echarts.js:1451:30)
at ExtendedClass.eval (Global.js:517:10)
at Array.forEach (<anonymous>)
at each (util.js:300:9)
at ExtendedClass.eachSeries (Global.js:514:5)
以这个 饼图 demo 为例, 如果把 ol 依赖从 6.1.1 改为 6.4.3, 则地图初始化后, 再点击地图, 出现报错: Cannot read property 'button' of undefined
如果设置 polyfillEvents: false
可以解决该问题, 但饼图的 hover 事件就无效了
有没有可能把L7封装到ol里面呢? 感觉L7效果好很多
https://www.echartsjs.com/examples/zh/editor.html?c=map-HK
`myChart.showLoading();
$.get(ROOT_PATH + 'data/asset/geo/HK.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('HK', geoJson);
myChart.setOption(option = {
series: [
{
name: '香港18区人口密度',
type: 'map',
mapType: 'HK', // 自定义扩展图表类型
}
]
});
});`
请问支持在ol上展示3D的柱状图吗?
Hello
Dear, I want to know how to add a click event in the ol3Echarts.
This is my example,but it's not successful. Can you help me to sovle it,please?
` __this.echartLayer.appendTo(__this.map);
//chart click event
__this.echartLayer.$chart.on('click', (evt) => {
console.log(evt);
});
`
**But it's successful to add a click event for charts in native Echarts**
**Thank you very much**
错误:TypeError: Cannot read property 'once' of null
错误位置:
170 | ],
171 | };
172 |
173 | this.emap.map.once('postrender', function(e) {
174 | if (echartslayer !== undefined) {
175 | return;
176 | }
初始化时用appendData向echarts图表加载数据,但是地图拖动后数据没有显示完全
Hi @sakitam-fdd , while using geo maps
echarts.registerMap('geo', geojson)
var echartslayer = new EChartsLayer(chartOption, {forcedRerender: false,
hideOnMoving: false,
hideOnZooming: false,
polyfillEvents: false,});
getting error as :
MapDraw.js:211 Uncaught TypeError: geo.getTransformInfo is not a function
at MapDraw.draw (MapDraw.js:211:29)
at ExtendedClass.render (MapView.js:70:17)
at Task.progress (Chart.js:281:20)
at doProgress (task.js:217:11)
at Task.taskProto.perform (task.js:157:9)
at eval (echarts.js:1474:30)
at ExtendedClass.eval (Global.js:517:10)
at Array.forEach (<anonymous>)
at each (util.js:300:9)
at ExtendedClass.eachSeries (Global.js:514:5)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.