前言
在现实需求当中，当视屏地图界面加载多个graphic，需要对数据表中的数据进行定位时，无法区分graphic，这是我们需要通过图标的闪烁。
思路
- 创建对象数据，用来存储当前视图的所有的graphic，并通过id作为唯一标识
- 通过点击事件获取id标识，并与存储id的比较，通过setInterval获取graphic控制显隐
实现效果
实现代码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.25/3.25/esri/css/esri.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.25/3.25/init.js"></script>
<style>
*{
padding: 0px;
margin:0px;
}
body,html{
height:100%;
}
#map{
width: 100%;
height: 100%;
}
.operatePanel{
position: absolute;
top:0px;
right: 0px;
width: 130px;
height: 100px;
border: 1px solid #0d1721;
background: #ffffff;
}
.button{
width: 100%;
height: 30px;
font-size: 14px;
border: 1px solid red;
line-height: 30px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="operatePanel">
<div id="signle" class="button">单个graphics闪烁</div>
<div id="multi" class="button">多个graphics闪烁</div>
</div>
<script>
//数据准备(模拟)
let singleGraphicsArr = [{
id:1001,x: -13634788.39813648, y: 4548334.964686886,
}];
let multiGraphicsArr = [{
id:1002,name:"闪烁测试",x: -13627316.678621612, y: 4541493.850655373,
}];
let singleGraphicObjArr = [];
let multiGraphicObjArr = [];
require([
"dojo/dom",
"dojo/on",
"esri/map",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/graphic",
"esri/symbols/PictureMarkerSymbol",
"esri/SpatialReference",
"esri/symbols/TextSymbol",
"esri/Color",
"esri/symbols/Font",
],function(dom,on,Map,GraphicsLayer,Point,Graphic,PictureMarkerSymbol,SpatialReference,TextSymbol,Color, Font) {
let map = new Map("map", {
basemap: "topo",
center: [-122.45, 37.75],
zoom: 13
});
let singleGraphicsLayer = new GraphicsLayer();
let multiGraphicsLayer = new GraphicsLayer();
map.addLayers([singleGraphicsLayer,multiGraphicsLayer]);
let locSymbol = new PictureMarkerSymbol('./images/mark.png',32,47);
singleGraphicsArr.map((item)=>{
let point = new Point(item.x,item.y,new SpatialReference(3857));
let pointGraphic = new Graphic(point,locSymbol);
singleGraphicsLayer.add(pointGraphic);
let tempGraphic = {
id:item.id,
graphics:[pointGraphic]
};
singleGraphicObjArr.push(tempGraphic)
});
multiGraphicsArr.map((item)=>{
let point = new Point(item.x,item.y,new SpatialReference(3857));
let backgroundSymbol = new PictureMarkerSymbol('./images/loc.png',100,25).setOffset(0, -35);
let textSym = new TextSymbol(item.name).setColor(new Color([255,255,255]))
.setAlign(TextSymbol.ALIGN_MIDDLE).setFont(new Font("14px").setWeight(Font.WEIGHT_BOLD))
.setOffset(0, -40);
let pointGraphic = new Graphic(point,locSymbol);
let backgroundGraphic = new Graphic(point,backgroundSymbol);
let textSymGraphic = new Graphic(point,textSym);
singleGraphicsLayer.add(pointGraphic);
singleGraphicsLayer.add(backgroundGraphic);
singleGraphicsLayer.add(textSymGraphic);
let tempGraphic = {
id:item.id,
graphics:[pointGraphic,backgroundGraphic,textSymGraphic]
};
multiGraphicObjArr.push(tempGraphic)
});
//定位时闪烁功能
function locFlash(initGraphicsArr,value,x,y){
let initPoint = new Point(x,y,new SpatialReference(3857));
map.centerAndZoom(initPoint,14);
for(let item of initGraphicsArr) {
if (value == item.id) {
for (let graphics of item.graphics) {
let temp = 0;
graphics.hide();// 先隐藏
let handler = setInterval(function() {
if (temp === 4) {
if (handler) {
if (!graphics.visible)
graphics.show();
clearInterval(handler);
handler = null;
}
return;
}
if (graphics.visible)
graphics.hide();
else
graphics.show();
temp++;
}, 700);
}
}
}
}
on(dom.byId("signle"),"click",()=>{
locFlash(singleGraphicObjArr,"1001",-13634788.39813648,4548334.964686886);
});
on(dom.byId("multi"),"click",()=>{
locFlash(multiGraphicObjArr,"1002",-13627316.678621612, 4541493.850655373);
});
});
</script>
</body>
</html>
原型方法
//定位时闪烁功能
locFlash(value,x,y):void{
let initPoint = new Point(x,y,map.spatialReference);
map.centerAndZoom(initPoint,11);
for(let item of initGraphicsArr){
if(value.id == item.id){
for(let graphics of item.graphics){
let temp = 0;
graphics.hide();// 先隐藏
let handler = setInterval(function() {
if (temp === 4) {
if (handler) {
if (!graphics.visible)
graphics.show();
clearInterval(handler);
handler = null;
}
return;
}
if (graphics.visible)
graphics.hide();
else
graphics.show();
temp++;
}, 700);
}
}
}
}
![JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)