arcGis 实现单个图标跳动 标注方法
时间: 2024-01-18 20:03:05 浏览: 33
如果您想让单个图标在地图上跳动,可以使用 ArcGIS API for JavaScript 中的动画效果。以下是一个实现的简单示例:
1. 创建一个图层并添加一个点要素。
```javascript
var point = new Point([-122.45, 37.75]);
var symbol = new PictureMarkerSymbol("https://developers.arcgis.com/javascript/assets/img/map/bluepin.png", 32, 32);
var graphic = new Graphic(point, symbol);
var layer = new GraphicsLayer();
layer.add(graphic);
map.addLayer(layer);
```
2. 创建一个动画效果,使图标上下跳动。
```javascript
function animateGraphic(graphic) {
var startY = graphic.geometry.y;
var endY = startY + 0.1;
var duration = 500;
var anim = new Animation({
duration: duration,
easing: "out-cubic",
onAnimate: function(value) {
graphic.geometry.setY(value);
layer.redraw();
},
onEnd: function() {
graphic.geometry.setY(startY);
layer.redraw();
animateGraphic(graphic);
}
});
anim.play();
}
animateGraphic(graphic);
```
3. 运行代码,看到单个图标在地图上跳动。
```javascript
var map = new Map("map", {
basemap: "streets"
});
map.on("load", function() {
var point = new Point([-122.45, 37.75]);
var symbol = new PictureMarkerSymbol("https://developers.arcgis.com/javascript/assets/img/map/bluepin.png", 32, 32);
var graphic = new Graphic(point, symbol);
var layer = new GraphicsLayer();
layer.add(graphic);
map.addLayer(layer);
function animateGraphic(graphic) {
var startY = graphic.geometry.y;
var endY = startY + 0.1;
var duration = 500;
var anim = new Animation({
duration: duration,
easing: "out-cubic",
onAnimate: function(value) {
graphic.geometry.setY(value);
layer.redraw();
},
onEnd: function() {
graphic.geometry.setY(startY);
layer.redraw();
animateGraphic(graphic);
}
});
anim.play();
}
animateGraphic(graphic);
});
```