Community

Very slow FeatureLayer

1016
1
10-08-2019 11:46 AM
SergeDe_Backer
by
New Contributor III
‎10-08-2019 11:46 AM

Hello,

I am using ArcGis JS 4.11 and my maps are made here on ArcGis Online:

  1. A WebMap
  2. FeatureLayers (hosted)

I have a working sample where I use my WebMap and featurelayers, but it is soooo slow when I call the featurelayer. I use a query to get the featurelayer. It can be tested like this:

  1. navigate with search to for example: Veluwestraat 64 2800 Mechelen
  2. When you then click another address (for example 68 or so) a api call is made to get the capakey. With this capakey I then load in the featurelayer with a query. This click option only works in "Mechelen" because the FeatureLayer is a layer with the borders of the parcels.

The code works, but it is just so slow. Is this normal or can I do something to make it faster? 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Search widget with custom source - 4.11</title>
<style>

html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Graphic",
"esri/request",
"esri/views/MapView",
"esri/widgets/Search",
"esri/widgets/Search/SearchSource",
"esri/geometry/geometryEngine",
"esri/geometry/Point",
"esri/layers/WMSLayer",
"esri/WebMap",
"esri/layers/FeatureLayer"
], function (
Graphic,
esriRequest,
MapView,
Search,
SearchSource,
geometryEngine,
Point,
WMSLayer,
WebMap,
FeatureLayer
) {
var url = "http://loc.geopunt.be/v2/location?",

layer = new WMSLayer({
url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms'
});

//*** ADD ***//
var map = new WebMap({
portalItem: {
id: "8047aff130794b7fbc991fd1ac12ecf7"
}
});

var featureLayer;
var view = new MapView({
map: map,
center: [4.3, 51], //lon, lat
container: "viewDiv",
scale: 288896
});

view.popup.viewModel.autoOpenEnabled = false;

var customSearchSource = new SearchSource({
name: "Vlaanderen zoekopdracht",
placeholder: "Geef je straatnaam in",
displayField: "name",
// Provide a getSuggestions method
// to provide suggestions to the Search widget
getSuggestions: function (params) {
// You can request data from a
// third-party source to find some
// suggestions with provided suggestTerm
// the user types in the Search widget
return esriRequest(url, {
query: {
q: params.suggestTerm
},
responseType: "json"
}).then(function (results) {
// Return Suggestion results to display
// in the Search widget
return results.data.LocationResult.map(function (item) {
return {
key: "name",
text: item.FormattedAddress,
sourceIndex: params.sourceIndex
};
});
});
},
// Provide a getResults method to find
// results from the suggestions
getResults: function (params) {
// If the Search widget passes the current location,
// you can use this in your own custom source
var operation = "q=" + params.suggestResult.text.replace(/ /g, "+");
var query = {};
// You can perform a different query if a location
// is provided
if (params.location) {
query.lat = params.location.latitude;
query.lon = params.location.longitude;
} else {
query.q = params.suggestResult.text.replace(/ /g, "+");
}
return esriRequest(url + operation, {
query: query,
responseType: "json"
}).then(function (results) {
// Parse the results of your custom search
var searchResults = results.data.LocationResult.map(function (feature) {
// Create a Graphic the Search widget can display
var graphic = new Graphic({
geometry: new Point({
x: feature.Location.Lon_WGS84,
y: feature.Location.Lat_WGS84
}),
attributes: feature
});
// Optionally, you can provide an extent for
// a point result, so the view can zoom to it
var buffer = geometryEngine.geodesicBuffer(
graphic.geometry,
50,
"meters"
);
// Return a Search Result
var searchResult = {
extent: buffer.extent,
feature: graphic,
name: feature.FormattedAddress
};
return searchResult;
});

// Return an array of Search Results
return searchResults;
});
}
});

// Create Search widget using custom SearchSource
var searchWidget = new Search({
view: view,
sources: [customSearchSource],
includeDefaultSources: false
});

searchWidget.on("select-result", function (event) {

});

view.on("click", function (event) {
map.remove(featureLayer);
esriRequest(url, {
query: "latlon=" + event.mapPoint.latitude + "," +
event.mapPoint.longitude,
responseType: "json"
}).then(function (results) {

var frslt = results.data.LocationResult[0];

$.ajax({
type: "GET",
dataType: "json",
cache: false,
url: "http://geoservices.beta.informatievlaanderen.be/capakey/api/v2/parcel?x=" + frslt.Location.X_Lambert72 + "&y=" + frslt.Location.Y_Lambert72 + "&data=cadmap",
success: function (data) {
console.log(data);
featureLayer = new FeatureLayer({
url: "https://services7.arcgis.com/c7P8EHq0LFjkXc7L/arcgis/rest/services/Percelen_Mechelen/FeatureServer",
outFields: ["*"], // Return all fields so it can be queried client-side
});

var sql;
var queryCaPaKey = data.capakey;
sql = "CAPAKEY = '" + queryCaPaKey + "'";
featureLayer.definitionExpression = sql

map.add(featureLayer);
},
error: function (err) {
console.log(err);
}
});
});

});

// Add the search widget to the top left corner of the view
view.ui.add(searchWidget, {
position: "top-right"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

Any help is appreciated

Kind Regards,

Serge

0 Kudos
1 Reply
ChrisMahon3
by
New Contributor II
‎02-03-2022 01:11 PM

Did you ever figure out why it was so slow?

0 Kudos