问题描述
我正在通过从外部查询服务中获取数据并向其中添加一些数据来从要素集合中创建要素图层。
根据我的项目需要,我必须每5秒刷新一次地图上的数据。为此,我使用外部查询来请求数据,并在获取响应数据之后,删除了上一个要素层并添加了一个新的要素层。
问题: 在地图上添加新图层时,需要一点时间(〜1秒)才能在地图上反映出看起来像闪烁效果的特征。
问题: 有没有一种方法可以加载/更新数据而不会删除要素图层并且没有闪烁效果(只有添加/删除的要素才应反映在地图上)
解决方法
如果我的理解正确,您将删除具有旧功能的图层,并添加具有新功能的新图层。您不需要这样做。
使用FeatureLayer
函数applyEdits
,删除所有功能并通过“一个”操作添加新功能。
ArcGIS JS Docs - FeatureLayer applyEdits
更新:
看看我为您制作的示例。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html,body,#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
'esri/Map','esri/views/MapView','esri/layers/FeatureLayer','esri/Graphic'
],function (Map,MapView,FeatureLayer,Graphic) {
const quakesUrl =
'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/ks_earthquakes_since_2000/FeatureServer/0';
const quakesLayer = new FeatureLayer({
url: quakesUrl,visible: false
});
let lastAddFeatureResults = [];
const resultsLayer = new FeatureLayer({
source: [],geometryType: 'point',renderer: {
type: 'simple',symbol: {
type: 'simple-marker',style: 'circle',size: `8px`,color: [255,.6],outline: {
color: 'black',width: '0.5px'
}
}
},fields: [
{
name: 'OBJECTID',alias: 'ObjectID',type: 'oid'
},{
name: 'time',alias: 'Time',type: 'string'
},{
name: 'mag',alias: 'Magnitude',type: 'double'
},{
name: 'magType',alias: 'Magnitude Type',{
name: 'place',alias: 'Place',{
name: 'type',alias: 'Type',type: 'string'
}
],popupEnable: true,popupTemplate: {
title: '{place}'
}
});
const map = new Map({
basemap: "gray",layers: [quakesLayer,resultsLayer]
});
const view = new MapView({
container: "viewDiv",map: map,center: [-97.75188,37.23308],zoom: 9
});
function queryEarthquakes() {
const query = quakesLayer.createQuery();
query.where = "mag >= 3";
return quakesLayer.queryFeatures(query);
}
function displayResults(results) {
const addFeatures = results.features;
resultsLayer.applyEdits({
addFeatures,deleteFeatures: lastAddFeatureResults
}).then(results => {
console.log(results.addFeatureResults);
console.log(results.deleteFeatureResults);
lastAddFeatureResults = results.addFeatureResults;
});
}
function updateLayer() {
console.timeLog('update layer');
queryEarthquakes().then(displayResults);
}
console.time('update layer');
updateLayer();
setInterval(updateLayer,5000);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>