有没有办法 load/update 使用 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
我正在通过从外部查询服务获取数据并将一些数据添加到地图来从要素集合中创建一个要素层。
根据我的项目需要,我必须每 5 秒刷新一次地图上的数据。为此,我使用外部查询请求数据,在获得响应数据后,我删除了之前的要素层并添加了一个新要素层。
问题:
在地图上添加新图层时,需要一点时间(~1 秒)才能在地图上反映出看起来像闪烁效果的特征。
问题:
有没有一种方法可以 load/update 数据而不删除要素图层并且没有闪烁效果(只有 added/removed 要素应该反映在地图上)
如果我没理解错的话,你是在删除具有旧功能的图层并添加一个具有新功能的新图层。你不需要那样做。
使用 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, 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>
我正在通过从外部查询服务获取数据并将一些数据添加到地图来从要素集合中创建一个要素层。
根据我的项目需要,我必须每 5 秒刷新一次地图上的数据。为此,我使用外部查询请求数据,在获得响应数据后,我删除了之前的要素层并添加了一个新要素层。
问题: 在地图上添加新图层时,需要一点时间(~1 秒)才能在地图上反映出看起来像闪烁效果的特征。
问题: 有没有一种方法可以 load/update 数据而不删除要素图层并且没有闪烁效果(只有 added/removed 要素应该反映在地图上)
如果我没理解错的话,你是在删除具有旧功能的图层并添加一个具有新功能的新图层。你不需要那样做。
使用 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, 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>