echarts-extension-amap
echarts-extension-amap copied to clipboard
Published
20 hours ago •
plainheart
plainheart
路线图放大后会导致路线开始位置发生变化
正常显示应该是这样
放大到一定程度后会出现下方的线都显示到上方去了，感觉像是起点位置变了
codesandbox是需要高德key的，所以例子不是很方便。我也有同样的问题，利用echarts绘制飞线效果，当缩放较深，部分视口内的点生成的飞线位置就会错乱。
可以看到，同样的坐标，放大到一定层级后，很多飞线跑到上方去了，正常缩放下都处于目标点下方
测试浏览器：谷歌浏览器（版本 97.0.4692.71（正式版本） （64 位））
示例： https://gist.github.com/wenbei111/30ee11b23888123b4f2f2cd3863093d6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://webapi.amap.com">
<link rel="dns-prefetch" href="https://restapi.amap.com">
<link rel="dns-prefetch" href="https://vdata.amap.com">
<link rel="dns-prefetch" href="https://vdata01.amap.com">
<link rel="dns-prefetch" href="https://vdata02.amap.com">
<link rel="dns-prefetch" href="https://vdata03.amap.com">
<link rel="dns-prefetch" href="https://vdata04.amap.com">
<link rel="dns-prefetch" href="https://sdf.amap.com">
<link rel="dns-prefetch" href="https://wprd01.is.autonavi.com">
<link rel="dns-prefetch" href="https://wprd02.is.autonavi.com">
<link rel="dns-prefetch" href="https://wprd03.is.autonavi.com">
<link rel="dns-prefetch" href="https://wprd04.is.autonavi.com">
<link rel="dns-prefetch" href="https://webst01.is.autonavi.com">
<link rel="dns-prefetch" href="https://webst02.is.autonavi.com">
<link rel="dns-prefetch" href="https://webst03.is.autonavi.com">
<link rel="dns-prefetch" href="https://webst04.is.autonavi.com">
<title>an example for echarts-extension-amap</title>
<!-- please replace {ak} with your ak & customize your plugins -->
<!-- Plugin `AMap.CustomLayer` is required if you are using a version of library less than v1.9.0 -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key={key}&plugin=AMap.Scale,AMap.ToolBar"></script>
<!-- ECharts CDN -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- echarts amap extension -->
<!-- <script type="text/javascript" src="../dist/echarts-extension-amap.min.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-extension-amap.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body, #echarts-amap {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="echarts-amap"></div>
<!-- data comes from Baidu Map, just for example -->
<script type="text/javascript">
var option = getOptions()
// initialize echart
var chart = echarts.init(document.getElementById('echarts-amap'));
chart.setOption(option);
// get AMap extension component
var amapComponent = chart.getModel().getComponent('amap');
// get the instance of AMap
var amap = amapComponent.getAMap();
// operations below are the same as amap
amap.addControl(new AMap.Scale());
amap.addControl(new AMap.ToolBar());
// add layers
// var satelliteLayer = new AMap.TileLayer.Satellite();
// var roadNetLayer = new AMap.TileLayer.RoadNet();
// amap.add([satelliteLayer, roadNetLayer]);
// Add a marker to map
// amap.add(new AMap.Marker({
// position: [115, 35]
// }));
// Make the overlay layer of AMap interactive
// amapComponent.setEChartsLayerInteractive(false);
function getOptions() {
let p = [[119.823825, 35.771387], [119.833825, 35.771387], [119.843825, 35.771387]]
let toP = [[119.823825, 35.781387], [119.833825, 35.781387], [119.843825, 35.781387]]
let l = [
[[119.823825, 35.771387], [119.823825, 35.781387]],
[[119.833825, 35.771387], [119.823825, 35.781387]],
[[119.833825, 35.771387], [119.833825, 35.781387]],
[[119.833825, 35.771387], [119.843825, 35.781387]],
[[119.823825, 35.781387], [119.843825, 35.781387]]
]
let options = {
points: [], toPoints: [], lines: [],
center: [119.823825, 35.771387]
}
p.forEach((item, index) => {
options.points.push({
name: "point_" + index,
value: item,
symbolSize: 5,
itemStyle: {
normal: {
color: "#74D4FF"
}
}
})
})
toP.forEach((item, index) => {
options.toPoints.push({
name: "to_point_" + index,
value: item,
symbolSize: 5,
itemStyle: {
normal: {
color: "#FF0000"
}
}
})
})
l.forEach((item, index) => {
options.lines.push({
fromName: "",
toName: "",
coords: item,
lineStyle: {
normal: {
color: `rgb(250, 152, 25)`,
width: 1,
opacity: 0.2,
curveness: 0.1
}
}
})
})
let citys = [...options.points, ...options.toPoints];
return {
amap: {
viewMode: "3D",
pitch: 45,
center: options.center,
zoom: 12,
resizeEnable: true,
renderOnMoving: false,
mapStyle: "amap://styles/grey",
echartsLayerInteractive: true,
largeMode: false
},
series: [
{
name: "地点",
type: "effectScatter",
coordinateSystem: "amap",
zlevel: 3,
rippleEffect: {
brushType: "stroke"
},
label: {
emphasis: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: 2,
showEffectOn: "render",
itemStyle: {
normal: {
color: "#74D4FF"
}
},
data: citys
},
{
name: "线路",
type: "lines",
coordinateSystem: "amap",
zlevel: 4,
large: true,
effect: {
show: true,
constantSpeed: 30,
symbol: "pin",
symbolSize: 3,
trailLength: 0
},
lineStyle: {
normal: {
color: () => {
return "#46bee9";
},
width: 1,
opacity: 0.6,
curveness: 0.1
}
},
data: options.lines
}
]
};
}
</script>
</body>
</html>
@wenbei111 似乎 3D 模式下，用 lngLatToContainer 方法将不在可视区域的经纬度转为容器像素坐标会出现一些“异常”的结果，
如 [119.823825, 35.771387] -> { x: 477.20667343950913, y: -3521.877210937162 }。暂时不知道如何解决，只能先建议你不要使用 pitch。