Accepted Solutions
So I think there are some issues here in the patterns being used. One of the nice things about the Composition API and Vue3 in general is you can explicitly choose what is reactive and what isn't. In my opinion, I don't think you want to make your view and layer reactive.
If you really do need to handle changes on the view or layer, you can either use the Accessor watch method, or watchUtils. Then anything on the Vue side that needs to be reactive should be reactive. This way, you're not creating extra overhead or reinventing the wheel on watching/handling changes to these objects.
I was able to get your sample working without throwing errors with the following code in App.vue:
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import { defineComponent, nextTick } from "vue";
export default defineComponent({
setup() {
/**
* do we really want vue to make these reactive? Are they really going to change?
* this will add extra overhead. If we need to handle reactive changes on esri stuff,
* we can take advantage by using "esri/core/watchUtils" or by using the Accessor.watch()
*/
// let layer = ref(null);
// let view = ref(null);
//same issues with reactive object as well
///let app = reactive({ zones: null, view:null });
// instead declare them as static data properties
const map = new Map({
basemap: "topo-vector",
});
const view = new MapView({
container: "esri-map", // just pass this here to set required property
map,
zoom: 5,
center: [-95, 39],
popup: {
autoOpenEnabled: false,
},
});
const layer = new FeatureLayer({
portalItem: {
id: "9e2f2b544c954fda9cd13b7f3e6eebce",
},
outFields: ["*"],
title: "Recent Earthquakes",
});
map.add(layer)
return {
view,
map,
layer
}
},
created(){
// verify we have access to view, layer
console.log('view: ', this.view)
console.log('map: ', this.map)
/**
* the map actually won't render from our setup() because the
* "esri-map" div does not exist yet, so we must re-set it here
*/
nextTick(()=> this.view.container = this.$refs.esriMap)
// here is where we can actually test things out
this.view.whenLayerView(this.layer).then((layerView) => {
console.log("layerview generated");
console.log(layerView);
});
}
});
So I think there are some issues here in the patterns being used. One of the nice things about the Composition API and Vue3 in general is you can explicitly choose what is reactive and what isn't. In my opinion, I don't think you want to make your view and layer reactive.
If you really do need to handle changes on the view or layer, you can either use the Accessor watch method, or watchUtils. Then anything on the Vue side that needs to be reactive should be reactive. This way, you're not creating extra overhead or reinventing the wheel on watching/handling changes to these objects.
I was able to get your sample working without throwing errors with the following code in App.vue:
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import { defineComponent, nextTick } from "vue";
export default defineComponent({
setup() {
/**
* do we really want vue to make these reactive? Are they really going to change?
* this will add extra overhead. If we need to handle reactive changes on esri stuff,
* we can take advantage by using "esri/core/watchUtils" or by using the Accessor.watch()
*/
// let layer = ref(null);
// let view = ref(null);
//same issues with reactive object as well
///let app = reactive({ zones: null, view:null });
// instead declare them as static data properties
const map = new Map({
basemap: "topo-vector",
});
const view = new MapView({
container: "esri-map", // just pass this here to set required property
map,
zoom: 5,
center: [-95, 39],
popup: {
autoOpenEnabled: false,
},
});
const layer = new FeatureLayer({
portalItem: {
id: "9e2f2b544c954fda9cd13b7f3e6eebce",
},
outFields: ["*"],
title: "Recent Earthquakes",
});
map.add(layer)
return {
view,
map,
layer
}
},
created(){
// verify we have access to view, layer
console.log('view: ', this.view)
console.log('map: ', this.map)
/**
* the map actually won't render from our setup() because the
* "esri-map" div does not exist yet, so we must re-set it here
*/
nextTick(()=> this.view.container = this.$refs.esriMap)
// here is where we can actually test things out
this.view.whenLayerView(this.layer).then((layerView) => {
console.log("layerview generated");
console.log(layerView);
});
}
});