有没有一种方法可以使用arcgis javascript API 4加载/更新数据而不会删除要素图层并且没有闪烁效果 [英] Is there a way to load/update the data without removing feature layer and without flicker effect using arcgis javascript api 4
问题描述
我正在通过从外部查询服务中获取数据并向其中添加一些数据来从要素集合中创建要素图层.
I am creating a feature layer from feature collection by fetching data from external query service and adding to the map with some data.
根据我的项目需要，我必须每5秒刷新一次地图上的数据.为此，我要使用外部查询来请求数据，并在获取响应数据后，删除上一个要素层并添加一个新的要素层.
As per my project need I have to refresh the data on the map after every 5 seconds. To achieve this I am requesting data using external query and after getting the response data I am removing the previous feature layer and adding a new one.
问题:在地图上添加新图层时，需要一点时间(〜1秒)才能在地图上反映出看起来像闪烁效果的特征.
Issues: While adding the new layer on the map it takes a little time (~1 sec) to reflect the feature on the map which looks like a flicker effect.
问题:有没有一种方法可以加载/更新数据而不会删除要素图层并且没有闪烁效果(只有添加/删除的要素应该反映在地图上)
Question: Is there a way to load/update the data without removing feature layer and without flicker effect (only added/removed features should reflect on the map )
推荐答案
如果我正确理解，您将删除具有旧功能的图层，并添加具有新功能的新图层.您不需要这样做.
If I understand correctly, you are removing the layer with the old features and adding a new one with the new features. You don't need to do that.
使用 FeatureLayer 函数 applyEdits ，删除所有功能并将新功能添加到一个"功能中.操作.
Use FeatureLayer function applyEdits, to remove all the features and add the new ones in "one" operation.
ArcGIS JS文档-FeatureLayer applyEdits
更新:
看看我为您制作的示例.
Take a look at the example I made for you.
<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, 0, 0, .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',
type: 'string'
},
{
name: 'place',
alias: 'Place',
type: 'string'
},
{
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>这篇关于有没有一种方法可以使用arcgis javascript API 4加载/更新数据而不会删除要素图层并且没有闪烁效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
