Azure Maps (with Turf.js) - can't get the 'points' from the SymbolLayer

问题

I have searched for hours on this and finally am reaching out for help.

I am creating a map with Azure maps. I have created a drawing area select tool. It works fine in the Azure demo because they create a variable called 'points' and then just assign some random features and locations. BUT... I am pulling my data in using:

datasource.importDataFromUrl(geoJsonFeed.url)

I have all the JS and CSS set up in the head (i.e. the core Azure Maps JS/CSS and the atlas-drawing.min.cs + atlas-drawing.min.js + turf.js)

The main reference I have been using is: https://azuremapscodesamples.azurewebsites.net/

Specifically.... https://azuremapscodesamples.azurewebsites.net/Drawing%20Tools%20Module/Select%20data%20in%20drawn%20polygon%20area.html

The main difference between the demo and my code is that they create a global variable called "points" and just randomly create the info using turf.js and then bung it onto a BubbleLayer. I am pulling the data in by importDataFromUrl (datasource.importDataFromUrl(geoJsonFeed.url)) and, as we are having a shed tonne of points, using a SymbolLayer (apparently it is better for large data sets). I don't know if the layer type makes any difference to my challenge below.

When a polygon shape is selected, it calls a function called: "function searchPolygon(searchArea) { "

This function seems to "know" what 'searchArea' is. No idea how. I have searched through ALL the JS for some reference to that, but am unable to find it. Anyway... It "somehow" knows what the var 'poly' should be by using the code:

var poly = searchArea.toJson();

We then want to call a turf.js function called pointsWithinPolygon:

var ptsWithin = turf.pointsWithinPolygon(points, poly);

My challenge is. How on earth do I get the equivalent value for "points" from my data? I have tried all sorts. For example:

var points = pointLayer.getSource();
var points = pointLayer.getSource().shapesMap;

var points = datasource.getShapes().toJson();

var points = datasource.importDataFromUrl(geoJsonFeed.url)

I looked at the:

var points = pointLayer.getSource();

from How to get all visible points in the map view bounds in Azure Maps

But it just doesn't seem to share the same data format of that function pointsWithinPolygon is looking for.

you can see the code at: https://espiritos.projectwebdev.co.uk/index-v1.0.6a.html

I have added a "debugger;" in the function searchPolygon(searchArea) which is where the main 'points' issue is... It triggers when you draw a box round a point.

In much hope.

回答1:

Since you are loading data via a URL, it has to load asynchronously. As such the importDataFromUrl function is a Promise that you can watch and have trigger an event handler once the data is downloaded. In that event handler you can then get the point data as GeoJSON using the data sources toJson function.

datasource.importDataFromUrl(geojsonFeed).then(() => {
    points = datasource.toJson()
});

Alternatively you can call the data sources toJson function in the searchPolygon function of that sample as the point data would already be loaded into the data source by that point.

I've updated the following code sample to use a GeoJSON file to make it more realistic. https://azuremapscodesamples.azurewebsites.net/Drawing%20Tools%20Module/Select%20data%20in%20drawn%20polygon%20area.html

来源：https://stackoverflow.com/questions/62674558/azure-maps-with-turf-js-cant-get-the-points-from-the-symbollayer

标签

azure-maps