ECharts在地图上绘制多个多边形(polygon)的问题
本帖最后由 cqwcns 于 2022-12-15 09:43 编辑这个官方demo模拟了在百度地图上绘制多边形(polygon)。
Examples - Apache ECharts
但我的需求是绘制多个,而不是1个。
我首先测试这样写,可以看到效果没有问题。
function renderItem(params, api) {
var coords = [
,
,
,
,
];
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords));
}
var color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
function renderItem2(params, api) {
var coords = [
,
,
];
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords));
}
var color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
option = {
backgroundColor: 'transparent',
title: {
text: '全国主要城市空气质量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
bmap: {
center: ,
zoom: 5,
roam: true
},
series: [
{
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
opacity: 0.5
},
animation: false,
silent: true,
data: ,
z: -10
},{
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem2,
itemStyle: {
opacity: 0.5
},
animation: false,
silent: true,
data: ,
z: -10
}
]
};
但以上写法,代码是重复的,我希望复用renderItem函数,经过多次测试,我发现这样ECharts只会渲染最后一个多边形(polygon)。
let coords;
function renderItem(params, api) {
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords));
}
var color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
option = {
backgroundColor: 'transparent',
title: {
text: '全国主要城市空气质量',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
bmap: {
center: ,
zoom: 5,
roam: true
},
series: []
};
const arrCoords = [
[
,
,
,
,
], [
,
,
]
];
arrCoords.forEach(element => {
coords = element;
option.series.push({
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
opacity: 0.2
},
animation: false,
silent: true,
data:
});
});
所以,正确的写法应该是怎样?
请大佬指教,感谢。
提醒:将以上代码复制到官方demo页面,即可复现。 本帖最后由 as614001 于 2022-12-15 09:57 编辑
请按官方的代码改 谢谢大佬分享 看到你这个,我也想问一个问题, 如果坐标点的顺序是乱的。形成的多边型就会交叉。
例如:
var coords = [
,
,
,
,
]; 52weiv 发表于 2022-12-15 10:23
看到你这个,我也想问一个问题, 如果坐标点的顺序是乱的。形成的多边型就会交叉。
例如:
var coords = ...
如果坐标点的顺序是乱的,会交叉 as614001 发表于 2022-12-15 09:48
请按官方的代码改
你好,我是按照官方的改的。
但如果我要创建多个多边形,renderItem函数如果不能复用,代码非常冗余且不利于维护。 cqwcns 发表于 2022-12-15 10:53
你好,我是按照官方的改的。
但如果我要创建多个多边形,renderItem函数如果不能复用,代码非常冗余且 ...
看上去说得头头是道,实际没啥用。你传入的 renderItem 是一个function ,你在function定义了 coord 而coord做全局变量 。你做coords一万次循环也是最后一个coord。简单就是你确实引入了2个,只是这两个坐标一致,重叠在一起而已。好好按官方做 别整花里胡哨的 本帖最后由 as614001 于 2022-12-15 11:30 编辑
1
~~~
function renderItem(params, api) {
seriesIndex=params.seriesIndex
var coords=arrCoords
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords));
}
var color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
option = {
backgroundColor: 'transparent',
title: {
text: '全国主要城市空气质量',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
bmap: {
center: ,
zoom: 5,
roam: true
},
series: []
};
const arrCoords = [
[
,
,
,
,
], [
,
,
]
];
arrCoords.forEach(element => {
option.series.push({
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
opacity: 0.2
},
animation: false,
silent: true,
data:
});
});
~~~ as614001 发表于 2022-12-15 11:29
1
~~~
靠谱,我研究一下。感谢。 本帖最后由 黄小明同学 于 2022-12-15 13:59 编辑
不行你问我?为什么发不了链接codepen https://codepen.io/531431988/pen/abKeBxg
echarts官网
https://echarts.apache.org/examples/zh/editor.html?c=map-polygon&code=G4QwTgBAJiAuIQLwQNoCgIQN4QHYgFsBTALggHJB3W0AvU8gGglABsBXUiATggF86Ns8hduUBAiYBQdQFiagetN6jEK3YBGAEw8-mHPmJlygbaNAO_GzmbMirX9NQnYHwgwI46R-SYhneFwdoqAFfM-AJlTEOFUwAWcw13YUAFt0A59QCnRQBWUIEtYUATWMAHnVilADYkyw9yQCV0wGydLNMADjzwnUBnOXsGYyVK1zCUnUBFxMAYMzLnLhbkqwpASZtAPd0e5UUqtopARuDAf0jxyf784UBT00BzR0WpwfJAN4DAdWVx1WXqin3ALATxgGZtgsBJo0AKEPGQk-nyQES5QDtbZ9vhQFCLMYNRzsZSJV47QDhpoBvN3GYPUAwKgCg5Siw346QAApoBc80AjUGo8EFQCAWiigYEIKC0RRAP5GgHb9PHwlY6QBlyrQSU5lLl8cJAKo2gD4dcYc-mnciAO3tAXJSeyKeRAJxygBw5cYAdilgCpNQDLcoqpYAns0Aaukazk6QD7DoAH5XGzUFb0A8Z5ixpkZR9c07QBnLoB-I0A6Xo9K4ABilgGdlQAVGh7vfqKIAso0AXhkepYOgqASOdAFV2kalgAJ9QBt2oBj5UTwfIgGY0oaZ6PCGbW4FkK7HAs6QBqdsXSWWpVzACyaHvLbjegDAzeripxXG5ZwCB2oAjmw9vYrFEA2naAfRth1LALfG2Y9L1H5EAxsGABCMF1LAHvx70A9HYeuGtnaAaxDAGVBpVZ7CuB9aO0AHHqAfMcPQLDwVZYA84KfUsAzTaABLtP1nADvbQBI7X_JdAAebGtu2fG8Cn2PsPSVLNAFIQjML1LRCl0AA4NIMvDCX2ECdABY0hCpUAG5CZhIrNADf0wBnRQ9M18J0QBINUAK506LQiArgYmDhEAfz0cNLbiEWEQA3vRAjiuJVQB85Q9e1GIoQBQO0MCS5J4nRAFo5TsbU41ThJ0NtADgzWSpUAf-1AElFHogiDJdAA23QAyVMs6z5PIQB_VMAbptLKjZzAEfbQBmdU8qVAAPnYku3YIIWzUihAH7tQBB-MskdnMADpV5w4oIEsi8hAB2UwBd3UsxdnMAZz1ADK9PKpUAbXktJLCAgnyjLKFQ0KyBqqUJxZRrquvPSKEAA69AAw5SzOoZChAHCAwAwvUs6CuvIQByTU3Sy8IywAWOUAPxt5qlQAWFSnVKFqmwBn90AFjVKtJIJdKG8hAAibFL2viJyMsAeaCBIgG6pUAIGDAFgVHpnqzJjABdFT6vIylzAFIzf6pV2R74giqbADeU3KOMh5MUz3eGobOwBIOWoQBDnU-9KprsiHaqm_ZunhwmzsAZ_MCalNHACy5T6yaFQArwMAQljPsms7AEgVQB08zZqVsy266drOwAPmwhoWhTmeD4fFt5ABztQA-7U-oSzsAHxVABiVQBLW0ATyclalVdAF-E3Ws2mwAYFSNpdAHFUgXtPiU6hUAIQsefhu23lTQAZV0-l2dllv7nalQB0ZRC7Tsluqa5nE9rsgBqb2kAbXUemyVGhVlJCE6Tt5AEMnaVraq7JcbOwBXBMASTkE_zoVAFm_X3I7Lt5ABsjR7sgZt5bwbpudkAWXtACl1BPBqFQBZxPGjjsnZoUjQbmWdn2QAauQTieCkAC7tHoVUOzsAVliru0hVo7OwAD00AQlSei3qVABpzBMOKPrNAGlFO5AGznQBc-UP9OdkAWjtDnPp-CkAGyzAFj0o6nAVD-whAC52oAQjzH5SkAGSOgAdeUPr3N4gBT5UAJ3asCA4z3Pl7AogAE_SXhg4QgBDCMACw2PRygryFIAUGUmwcRIVKQAr34byqtQrMgAZOUAIE5gAKc08MQtuBRADF5oAEL0uFSkALbmj1yjcOEIAEdtABaysQuBOxf7EJHm8QA5Xb0NJOUJROxADJemIQAS0qKKlEBNRTgOCkLeIAAH1ACAOj0UxUpABytm_dqHBAE6GpMY9gHAa47EAJR2j0OByIKIAXTkc6kg4JogogB6hMAB8JNjlZCkWhHbSHBcE6EAA6KfiUkUEAOU2j1FCejMTsRagAgmx6HkrxsFACiiqUz04idCAEpNQApLbVICcIQAM9ruNMJ6cJwgwKJKqooFwS5AAf0YACrNSmDOcoARYTcmKHKcIPw89xm1IoIAKQCYgcQGd0nQgAcoMrOMuewhAAIqn_JQihMnkAKoANwyTmmDOVKQARQkmg2XcrM1JcnKAKQUOxUt2oqE-cIQAYsHvIOToWWJNfleilEXJhpS6xZkALxyRCNk9ilIAbFsOnOCuMs8ggAzz0AOFu54IVbIoIAKgtABMtqUtKUpdopgERsoIILZjbMpXE5utINkIyzIAXflABZ2qU-IcydCAA07QAtvb8uxe0QAcsr8sZeQQAzToYsUNkc5LlACZNqUhULSdCACMI3JCpZWACm9buGzPFSkAPPBgBfm1KRwbFgAIFUAKUBRxzmADNrQAkjaKkFRQaag92rKAVH0NAABdAA3GgUAkAADmRAAD2ABhaN0awBQAALIgAAA5IGwPwGgZAUAqEUAAOgSAwK4hbygcEDfCcQ0hc15I4AWhU5RZl-pLfWkO5R2TZErfwAwtaPkFq4iWhUA74jdswHYPtygC0fIAUqhgdoC0cHKJDfxY6IDeD8H2q4i6FQMAZQOq4a7oh9s9EWq4Jbt1cTXRkWtihygFvKLu6qU7lDlDXSUE9B6S3ZALZ6BUa66h9sLZDb9D6K3wi6LWz0U670kLSiW-9kN8nlrXaMW9iHyjzqCIuw98J5ifoFaBjRa6Ni3vrUEbIJb4gFvCmug4ZGd1UYfW--EFwgO_viCWqdnoWP8EeLmjghaBnzvrRwf98Ivi3u48oedU7PFroBLen9igsMFviKO-E0JJ0caHdOtdyJ2NBEw5xQtyhlBrqxNiKDhat4aKuE-9kamO1YvE_wIk2mVOcWHRp_gNJb3Ds8Xu09Ym13MnQ0W1TFG128lvdR-zkN_WyYbRoiYig12iiUwWvO87t3ZF45gOUfbsP2aC2etdap2OedLTRnzmAdRQe3Ylsk1H4hpfhMadjVwOC6chmuq0DHz1kh_TxtdLpXTsbE2Ez0g2utZb9QMoIa7_SfqCJxziP6r3wnDFuxj1VC0hfhPGKDU6QNkmK7ViAqY0y3uw4-0rHa125lvdu-IT77MPou0WBjNrlBlje8OxQ-rPSA7XdWT9VXT3EfhI2TLyqcsDvA_wDsn7_ElsLV1tdg52PxEo2SetUP-CTlvaeq8nj9XztM8vZe-WIBzky1eeH6m11rm00EKrAOu3wm3DuBjc7OLYdtmu08xRP3lCuMqsspWt55N6_CB8n6FRBDR1lxb8J3zPYbWt37v7Vf8F_DdrLxntcKlw_wYCvO1s9jU2uiC32uM0cR5gOCUH709iS2ItdKEPPGaslli72EDdK7JNuz0juIBEU_eyZXgm13kQV5b4dNPaIa8Tqpj38JWI0QE_e19gnTuzf1aW03mB-Ia9-_DpVa6xJQfI29n9nP-DKiklJtTM3E-ucwEpDXwP4cd4gJpDXg6yQnfM_CQyx2G2DdBDrtd5lwsm6Iw3zA9ltN_r_YoIPbOi1nOSX39y3fjPi6LTTvyBu_1JcTmu4KGvTtmYHWu2K4WZvbrCWu5KLuG0yf5wOpfEAco1-3yY1DzXWKm-zrwbT7wqg12E2Dw4zXXqmJxHXnVPWgzXVam71xzvyjjXT6n81b1AwATXTGhbxqnh09Au1mnY1T04nvWcTXRWlvWA1AxG3hE2k_WyxMyLV_wOlsCgw226x0hn3hEuh2yHy3xpwenYK_2qzLDXXekQPKCN0LTyzXV-gV1xy9AgLXWBj7TizWzSmYzoxGE_Wmx7A0J_XZAozMzXVhj4OnTe3vQZTXVTB51QD-TU3Uw7SqzLU1XChpwxkxkYKLQEKxQbV_3xkq30KE2LwgGJlizA3nXvRUPhEpgAKD2UGKxiNpgANazOVDwYDvWnUhjET7xZig2w31TEXChEwPVMRiO5j7R_Vez3W3UfUewnCCNRzJDLQu1FigziwENfUXTa34ElmswbSDyPxxzXQVnKLU0wPrX1TXXVm1iCOyH0Mh1H34ANjmK6RLVPWyD71NkH1KxUDXStgY1IM4hfTXUdkQNfXnWoztGcJTDdkQIZUE0ExqIGWXlf3hB9gYw7WV3FzXUDgAJUApwdzXXDg_y6NCL9TXTjgYxx2V0VzXRTnCxOl0yi3hCzg6LcIXXiB92w1_2LjsMGOHT70rgI0PxQJGMwHrkuOkKnQxzl2MLcLOUXUtxszDy7l51A0v3hAHjsPiHSPrUF3hDHkMxnWaLJCSJxy4l_2nnn0P24110wEXnC2m10xBPhHXjsK3nnSaL733kjxCOAzD1Ph2wXz23v3hGvnvlzTEQgL3RazD1fhyJLQFy2MwB_l4I5McMP2A1_1ASgwB0t2Kxp2gTLyqyePVIgCQV5w0P2wu39inkywo1bUXR9IgGwTwOkOw3ZDXUIXiIAV00IPhAoWJ1KyJLXToTmJtOqyMzXVYQ4SdOHTyxaK0PhH4TwNlNCIJ0wBEXBxCNPSLPhGkS1Mtx_UbTXV_m02XT3SExzNUUuKDJoxiJ0V0SdOG1xy32SP4CMQNwZ3WyLTXSsWPIjIbTDwcX8wFIuzcTmJK04NmTXV8XYK13vWBzXWCXiLExqK3jXWiUD3AN_wSQYzLM4jHJiPSQa0n2YJiJyUyzFwQwPXoKKSf0t2o3ILXX2AqTsIGS6SXX2IfXs39RiMaXzKzNfPhHaW-0txQL716TwNmVAzvTXVGUjyn0WPpIgGmRTyvIVF_wWUaKy0G1W01zXTWT_PANWzXV2Sf3XJ7DXWOS1OkLbRiKuX9LzVmWnRCMawu0eUD0P2HRwvhDeUyztGxIu2-Uy1tiY0234CBRb1-zEzZxIp7Fa3WJmM6CCJm1PT72hRMIWIHRzMRW-y_yGLkvhHRRIMmIqLXXxRFw5PFLe1Ewu3JWgMwMTxiJpT4WMtQumzXRmG2TwMOLYrD1vGpDWMGPrTMv4F5XiKM1QuXTXVFRby-LJHb0RMlQY0bm-JzIVW71qoHT31VWe0SOnV4t1XC0UMmoO34CNUyzStbzXUtSapIXWI0KeJ7E1TXQdXzLezLV_zdWPIhzUxzO9V0N_XEqaLfTQG4FDXDQgAAGNo1cBgAiAwBYAAAROABAZAAAMxYFwBetgAAEt3qIAAAKGAeAAASizUwGerACIAAGdM0UAQ1-BAbE0YbnrwbM1PRg0IBCaAAeaAf6gtJgIgXACNWAAACxJvBoAGoWbEasB-BkbwAIAo040E0k1M0-b41E0U100UA4aQAUBwbA0C0UhsbMBMBwbAaYbhaBaoAOaubFbUa0aC000WA0aGbobObFbTbThJbpbZaUh4Qzb2o1bRaC03rQa4BYb_rLaC1Gh4atbMBuB4bQ1TbuB-BA7MBUbYAWAwBcAIAdbQ1Hq0BgbQaIaobUbcAoAvqABJWAIgAgaGtNcAQgNGhgdNcGhgN60WtGzW7myANNaNcG3AWADG5ALG_2iAXGyAaGgmom5miACm0upNXWmmumxm5mtmiuxW6u2u-uvWg2o2oux29W6G3uqANGy2-Gv2oO_gZ6t6pgPG5AWe4AcGtGlgeQaG8gLexNcgNekOogMOiOpGxW2AAATzTWEGrqYAfojXevoC1sNvTXYBNrNvHrrrRrICIBeoZvAEnojTAHTQZvBpesdqYHBrTQAAUa6gGAAhB-gAJVAdgBzrQfroYH_ttoAA8yBc7oGCBdbF6ABlB-3Wkhm2s2h-8hvOqhue0Wuh3Wh-ph02gAd3BqgEZtYcoeofVq4YLQEaEYZt4cVoZqIHBojQZtgBEfzo4aTQkfkcUeUe9p4C9oDqYbRsfpprIFnqMYfppuNt0cBvBqYCYDIDPrAFkaMbAGjQAGt2BQHwHvqxHt6wBqbla8HHH9HFbfag6Y60Aw0eaIA0avrwb0bMbA00AnajGIBwAwARa-7Matb0BbbMAdKZysyBU11ba81pt4LTyirZH8mBk5NPM_UH0-9Sn3D1jJrvzqmUq1MVrV0tbK1UBdGam8lmNISDy8mOSNstcXsLtmndLqCMiH1FtemmHcm8mdKp05rODRnVnNkkDYCmcOmdLctIrbtFnTaknsb0nMml6C1W6ABREAMB6G8GzOggJAAAPjvtibAHid1v1sNqsdtsfufp0BeoNtgGjQIC_ttsXtrrgCIC4ZeZ0AACMCB00oWzbk7U6wAM6s6yB46wbIbcAc62GC60m01wb4acABmo7r7w7I7MX06XniXRHC7yWGBnms6QmDHdGOWCAaHjG_7qXo1c6XrnmWGIBT14hdH-hTaQBcBwbUXE7cA8X5BYnnHbHaaVGIBYAwA2BZHJbc1PQSnFaAAvMgAAWjyS1rCbCcwH4DQGFaVczX_qRYebcagejRBqgHjT8Z0B1blbRooc1fRYhtgBMbvswEzpIa1fIEAAtFQAX7VABuOUAEDIqIQAID1AAvL0ABQbQACljAB5xPRcwEPqRajZjclpbtcdeeQeTWn1rsLZiZYCRcQdwDcZ0GUdgDTRIAAHou2-G-29aCBa3cB62abAaY2XrNWvr63S3-WLHBXoXo1fWKAABiQGtd8ga1oO-EcFxdiGztiN7V75iNKNMAHQXljdn2-EFF9NMgYh16yd09twmpbfNnKyrzDw0wsPTAE1hNAgMgTjLW1xwgMgHVvVrW1FtNWd8Nu9otgVgAKTRvetzWpZg7NsBqIDgHDqIAABUn7hA-G4WwB63baiAabiA67cPgWKB5AmBiOzbzGaawBgGD2xnHGdBl2ak2co4L2xmeBqWZWzbUPTb0PMPUbKPhAmA5WoA6PTbSOs7NXxOdAaOZPFaGOvrmOhOza2OV38kTom0eOxng68mBPTbNPMAROb6cO8PkXPWU7wAH6VPMA5PyPYBFOKA-biAdWHOOnYO52mPb3qXTbtPyAOPG5Abl0DPjP-OOmzOW6MPLO3PyBoHbGCPvPAuIBnOFPrPqO7HHOYmBX_OWO8n960bwakXbGxWdBo1130ujPbaTPFbYuLOsPEvYGlHUu8vMuKPsvyAPPr6wA0veP8u_ONP0vMBguOOakl1FBIv6vouUP0vmuxOeu2uGaOufOMuyOsuqPeuY1POBubnbHaONu1PCvYvxvF3E12P8l4gkWwk8vMBEGlHYBcB0bmPFBav5uxmmv4uWuVvtH1v0uuvXOevJOkXSO0a8vTvRuhvkaD6yuKvH6quauhu6uzaGuNBFvfvluduIG4n5BOutvuudu-uvOoeCuYfYeJvdPpvZv0evu8mfvROrPcfvr8fjugeieQeSe9v-uH7DvcuTuKeAvYfXrLvH2QubueMkW6eA6GfbameEuevx7Cf5PifhBlOheRuRfYeSuEfEGkeKBqvAbZfQn5fBOsfmfEuoGiBabVeXPEvNf0voedehvqecczkFQHvGB4fyuDfxXyBjfTefbzfTPLeledvi3AehvgfHfBfnfheivba9e_fKujeUfeO0fuXvvw-_udvUXcBUXU77ftuNf4-huXek-zaU_EeA-g_PvDOYvc-ceJPo0XqCeNvY-euneK_E_zuffSvU_DfA-M_DPQ_Gvm-WeNe2fvmO_Oe1fueJOQBwemBIetfGPKehua__fkeTeG_jOm-hulup-bOvX7OS_1edBSeDubHy_ePK_-_qe7RAaoAghg--PG-Fuj_seT-KAkWWBbGUAWuhGgv6L8lOd_MZg_zG5i8l2IXRQCAFeyPp3-WfUJof147H9EuYPUjqALj4c9e-2vKvqbW35p8R-e_VHvx10ZJM5el7fgF8x-YPVg0QAA
页:
[1]
2