search

ghettovoice / vuelayers

Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/
MIT License
680 stars 227 forks source link

How to show features with a line connecting them #360

Closed RaminMT closed 3 years ago

RaminMT commented 3 years ago

Hi, I'm trying to show some features on map and want to connect them using a line so it looks like a path I already achived this with such a code:

<vl-layer-vector>
  <vl-source-vector>
    <vl-feature>
      <vl-geom-multi-point :coordinates="coordinates"></vl-geom-multi-point>
    </vl-feature>
    <vl-feature>
      <vl-geom-line-string :coordinates="coordinates"></vl-geom-line-string>
    </vl-feature>
  </vl-source-vector>
</vl-layer-vector>

But I guess there might be another performance-efficient way of doing this

RaminMT commented 3 years ago

Ok, After opening the issue, just came to my mind to try GeoJSON and it seems that was the silver bullet. By the way I Let this be open to see your advice

Thanks in advance

ghettovoice commented 3 years ago

Hello @RaminMT , yes, GeoJSON features is more efficient than using of vl-feature, because this avoid DOM manipulations by Vue.

As for rendering path with points, this can be resolved with advanced styling function. For this you only need a LineString geometry. Take a look at this demo https://jsfiddle.net/ghettovoice/jf41enh8/

RaminMT commented 3 years ago

Oh, great! That's awesome, so this way is it possible to select vertices?

ghettovoice commented 3 years ago

This way is possible to select only whole path, because those vertices is something like virtual features. If you need to handle each vertices separately (click, select, modify and so on), then you need separate features for each point.

What is actually your use case? Maybe I can help more if understand what you plan to do with features

RaminMT commented 3 years ago

Thanks, This is a panel for tracking gps devices, Operator set some settings and gets some points (they simply are over 1k) I want to show whole path as a line string + points which are selectable, so I can show some extra information about that point like speed, and finally I need to animate another feature through this path (#363)(they also need some special feature on animation, seeking like musics or videos on media players)

ghettovoice commented 3 years ago

ok. If you stay with paths as linestrings only, then you can adapt this demo https://jsfiddle.net/ghettovoice/jf41enh8/. I have just updated it. It is maybe looking a bit tricky, but actually done render path with separate points selection.

Another way is how you describe it in the first message with separate features for path and points. just use 2 layers (paths and points) or dump all features in to the one layer. Then use vl-interaction-select to add select interactions for points. I strongly recommend to use 2 layers in that case, because it allow more easy filtering with select interactions, easy styling, easy layers on/off and just well organize your spatial data.

As for animation, I will answer you in #363 a bit later

RaminMT commented 3 years ago

Ok, I got that I made this happen with adding both points & linestring using GeoJSON, then added them into my layer and I faced performance problem I will test your suggestion with separating layers and see what happens next

Appreciates

ghettovoice commented 3 years ago

I faced performance problem

If you show a lot of features at a moment there can be performance problems due to features array reactivity. Vue reactivity is very comfort but have a big overhead when you have big array of features. So to avoid performance issue you need to avoid reactivity on features:

But you can still use VueLayers components like vl-map, vl-view, vl-layer-, vl-source- just to configure them in a declarative way, there Vue reactivity is very convenient. Anyway each case requires its own approach.

I can suggest try something from this issues, comments.

RaminMT commented 3 years ago

Currently I'm using freezing and seems no problem with that I also should show these points in a table so operator can select them and I think the main performance problem is related to there! Aside that I already seen your suggestions in other issues but I will check the mentioned one again. If I understand bbox/clustering correctly, It's for loading points based on the extent of map right? but what I do is loading all features and then fitting extent

ghettovoice commented 3 years ago

It's for loading points based on the extent of map right?

yes, you are right. this is to reduce loading and show only what is actually needed. I just list all possible solutions that comes to my mind