I'm having an issue where I try to set my VectorSource with my features array from my state but I get "feature.getId is not a function".
What I would like is the have my feature displayed depending on my state, because i'll have filter and I need to fave feature on map reacting with filters.
How can i set my features list in the feature in my VectorSource ?
I'm getting my state array like this :
getAllFeature() {
return this.$store.getters.GET_ALLFEATURES;
},
then i'm trying to passe the array in the vectorSource
source: new VectorSource({
format: new GeoJSON(),
features: this.getAllFeatures,
}),
Notice that I modified the form of my array comparing to the native geojson file I have
getGeoJSONData() {
axios
.all([
axios.get("http://localhost:8080/germany.geojson"),
axios.get("http://localhost:8080/france.geojson"),
])
.then(
axios.spread((...responses) => {
const features = [];
responses.forEach((res) => {
features.push(res.data.features.flat());
});
this.$store.dispatch("LOAD_FEATURES", features.flat());
})
);
},
},
Even if I try to set the strict same array that I receive from one of the Geojson, i have this error.
Any help would be appreciated
Thanks in advance
Related
I can't do data._rawValue or data._value to only get the arrays.
It doesn't recognize these keywords.
How should I approach this problem?
Thank you in advance.
there is a sample.
const data = ref([{ name: 1 }, { name: 2 }]);
const testClick = function () {
for (const item in data.value) {
console.log(data.value[item]);
console.log("hello");
}
console.log(data);
};
onMounted(() => {
testClick();
});
I think you may wrap the data with the ref function from vue.
Therefore,everytime you want to read the value from data,you had to read from the (data.value).
I suggest you to check the offical document of vue.
https://vuejs.org/api/reactivity-core.html#ref
Besides,if the type of data is object or array,its better to wrap it with reactive function.And then you can just read it directly.
I used to feel puzzle about this situation,too.
Im not good at writing in english.
I'm using petite-vue as I need to do very basic UI updates in a webpage and have been drawn to its filesize and simplicity. I'd like to control the UI's state of visible / invisible DOM elements and class names and styles of various elements.
I have multiple JavaScript files in my app, I'd like to be able to make these changes from any of them.
In Vue JS it was possible to do things like this...
const vueApp = new Vue({ el: "#vue-app", data(){
return { count: 1}
}})
setTimeout(() => { vueApp.count = 2 }, 1000)
I'm trying the same with Petite Vue but it does nothing.
// Petite Vue
const petiteVueApp = PetiteVue.createApp({
count: 0,
}).mount("#petite-vue");
setTimeout(() => { petiteVueApp.count = 2 }, 1000);
Logging the app gives just a directive and mount attribute, I can't find the count (nb if you log the above app it will show the count, because of that line petiteVueApp.count = 2, that isn't the data)
Demo:
https://codepen.io/EightArmsHQ/pen/YzemBVB
Can anyone shed any light on this?
There is an example which does exactly this in the docs which I overlooked.
https://github.com/vuejs/petite-vue#global-state-management
It requires an import of the #vue/reactivity which can be imported from the petite-vue bundle.
import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
setTimeout(() => { vueApp.count = 2 }, 1000)
const store = reactive({
count: 0,
inc() {
this.count++
}
})
createApp({
store
}).mount("#petite-vue")
setTimeout(() => { store.count = 2 }, 1000);
Updated working example:
https://codepen.io/EightArmsHQ/pen/ExEYYXQ
Interesting. Looking at the source code it seems that we would want it to return ctx.scope instead of return this.
Your workaround seems like the best choice if using petite-vue as given, or you could fork petite-vue and change that one line (I haven't tested this).
I'm using apex charts to create a graph of real-time data coming in from the back-end.
I have used the demo as a guide and implemented my own real-time chart (https://apexcharts.com/vue-chart-demos/line-charts/realtime/)
I want the data to scroll like in the linked example, currently, mine appears to redraw the line each time it's updated (https://imgur.com/a/1aTc1JV)
I use this function to update the series data with a fixed-length queue which is updated every second (queue.append(newData) and then queue.pop(0))
updateChart: function () {
var me = this;
this.intervalid1 = setInterval(() => {
me.$refs.chart.updateSeries([
{
data: this.temperature,
},
]);
}, 1000);
},
Insted of doing queue.pop(0) set range in xaxis to length - 1 of your initial data (if type: "numeric").
https://apexcharts.com/docs/options/xaxis/#range
hi i am trying to add graphic to graphicslayer. here is the problem.
i get json result from sketchviewmodel create function which is graphic.
i store this in to new jsonobject.
then i try to add this graphic into graphicslayer manually. but its giving error.
here is the json
{
"geometry":{
"spatialReference":{
"latestWkid":3857,
"wkid":102100
},
"x":243208.09643883476,
"y":2940285.766420703,
"z":351.9580905416081
},
"symbol":{
"type":"point-3d",
"symbolLayers":[
{
"type":"Icon",
"material":{
},
"resource":{
"primitive":"kite"
},
"size":15,
"outline":{
"color":[
0,
0,
0
],
"size":2.25
}
}
]
},
"attributes":{
},
"popupTemplate":null
}
this code gives error
const [Graphic] = await loadModules(["esri/Graphic"]);
let g = new Graphic(data); // data which is json i gave.
any adivce ? Thank you.
Assuming you are using toJSON method of Graphic to generate the json object (in your example data). Then the correct way of creating a Graphic from the json object is to use the "reverse" method fromJSON. Something like this should work,
const [Graphic] = await loadModules(["esri/Graphic"]);
// here use fromJSON method to create the graphic
let g = Graphic.fromJSON(data); // data which is json i gave.
ArcGIS API - Graphic fromJSON
i created a collection in firestore called user and added a document and gave it 7 fields, but when i try fetching the data back using onSnapshot it does not return back any data. this is the collection
this is my code:
firestore()
.collection('user')
.doc('LCqSZXM17WUWiWFahyj6')
.onSnapshot((row) => {
console.log(row.data());
});
in the console it logs an empty array
thanks in advance!!!
You need to include more information.
Anyway, do you check your access rule of the Firestore database?
const doc = db.collection('cities').doc('SF');
const observer = doc.onSnapshot(docSnapshot => {
console.log(`Received doc snapshot: ${docSnapshot}`);
// ...
}, err => {
console.log(`Encountered error: ${err}`);
});
The above code is official docs code. Check error callback first.