Comments (8)
wb-wenbei
commented on July 21, 2024
插件版本：
"echarts": "^4.6.0",
"echarts-extension-amap": "^1.9.3",
from echarts-extension-amap.
plainheart
commented on July 21, 2024
能给个简单点的示例么
from echarts-extension-amap.
BraisedChicken
commented on July 21, 2024
codesandbox是需要高德key的，所以例子不是很方便。我也有同样的问题，利用echarts绘制飞线效果，当缩放较深，部分视口内的点生成的飞线位置就会错乱。
from echarts-extension-amap.
BraisedChicken
commented on July 21, 2024
可以看到，同样的坐标，放大到一定层级后，很多飞线跑到上方去了，正常缩放下都处于目标点下方
from echarts-extension-amap.
plainheart
commented on July 21, 2024
可以提供下例子，不用写 key。
from echarts-extension-amap.
wb-wenbei
commented on July 21, 2024
测试浏览器：谷歌浏览器（版本 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>from echarts-extension-amap.
plainheart
commented on July 21, 2024
@wenbei111 似乎 3D 模式下，用 lngLatToContainer 方法将不在可视区域的经纬度转为容器像素坐标会出现一些“异常”的结果，
如 [119.823825, 35.771387] -> { x: 477.20667343950913, y: -3521.877210937162 }。暂时不知道如何解决，只能先建议你不要使用 pitch。
from echarts-extension-amap.
wb-wenbei
commented on July 21, 2024
好的，十分感谢！！
from echarts-extension-amap.
Related Issues (20)
- 数据量稍大，地图平移就不起作用，卡 HOT 2
- 在配置项中设置x轴或y轴的样式报错 HOT 3
- 关于监听缩放移动事件 HOT 5
- Provide `getScreenshot` API
- 关于地图初次载入时的背景色 HOT 2
- 高德地图Marker对象的事件无法触发。 HOT 1
- 请问这个用这种方式生成的amap 包含在哪个容器里面 为什么我无法改变它的大小 在vue中
- 这个问题当中 使用v1.8.0打包后能够加载 但是使用后续版本还是无法正确加载地图 使用1.8.0会有一个echart层和地图层有偏移的问题 但是后续版本又无法打包 HOT 3
- 3D model not showing HOT 2
- 散点图，数量达到3500个点以上就会出现卡顿 HOT 6
- 关于速度 HOT 5
- 有匹配高德API 2.0的计划吗？ HOT 10
- 如何解决在echarts 上拖拽同时地图一同拖拽 HOT 5
- 切换按钮页面丢失 HOT 1
- 地图展示ecahrt 饼图，饼图位置一直在地图左上角 HOT 3
- 使用定时器刷新数据后导致内存泄漏 HOT 16
- echarts图层遮挡高德地图的mark HOT 2
- 使用高德v2.0时，拖动地图时上面的图表跟随会慢一拍 HOT 1
- 高德自建的自定义地图，使用无效 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from echarts-extension-amap.