尝试使用 SceneView 设置缩放时出错
Error when trying to set zoom using SceneView
使用 esri-loader
,当尝试使用以下视图创建 SceneView 时,视图未正确计算缩放比例,我在控制台中收到以下错误:
[esri.views.3d.support.cameraUtils] #zoomToScale() Cannot compute scale from zoom without a tiling scheme
client-hook-3.js:1 [esri.views.3d.state.ViewStateManager] #zoom= Invalid zoom 3
let map = new WebMap({
portalItem: {
id: MAP_ID_HERE
}
});
let view = new SceneView({
container: "map",
viewingMode: "local",
map: map,
zoom: 3
});
有没有人碰巧知道是什么原因造成的?查看 SceneView
的文档,似乎这在构造函数中应该有效。
我认为在这种特殊情况下,使用 web 地图作为地图,您必须等待视图加载才能设置缩放级别。否则将无法计算比例,这就是错误的原因。
这应该有效,
let view = new SceneView({
container: "map",
map: map,
viewingMode: "local"
});
view.when(function() {
view.zoom = 3;
});
更新: (保留其他代码因为我认为它阐明了问题和最终答案)
好吧,似乎等待视图还不够,因为底图无法加载所有内容。所以在这里你有一个可行的替代方案,
const basemap = Basemap.fromId("dark-gray-vector");
const sceneView = new SceneView({
container: this.$el,
map: new WebMap({
basemap,
}),
center: [US_CENTER.longtitude, US_CENTER.latitude],
viewingMode: "local"
});
basemap.loadAll().then(
() => {
sceneView.goTo({ zoom: 3 });
}
);
在这个新解决方案中,我们实际上等到底图加载所有内容(使用 loadAll
方法),然后我们设置视图的缩放。
这是您 Map.vue
,
中的完整代码
<template>
<div />
</template>
<script>
import { loadArcGISModules } from "@deck.gl/arcgis";
const US_CENTER = { longtitude: -98.5795, latitude: 39.8283 };
export default {
name: "Map",
props: {},
mounted() {
loadArcGISModules(
[
"esri/WebMap",
"esri/views/SceneView",
"esri/Basemap",
],
{ css: true }
).then(({ DeckRenderer, modules }) => {
const [WebMap, SceneView, Basemap] = modules;
const basemap = Basemap.fromId("dark-gray-vector");
const sceneView = new SceneView({
container: this.$el,
map: new WebMap({
basemap,
}),
center: [US_CENTER.longtitude, US_CENTER.latitude],
viewingMode: "local"
});
basemap.loadAll().then(
() => {
sceneView.goTo({ zoom: 3 });
}
);
});
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div {
width: 100%;
height: 100%;
}
</style>
使用 esri-loader
,当尝试使用以下视图创建 SceneView 时,视图未正确计算缩放比例,我在控制台中收到以下错误:
[esri.views.3d.support.cameraUtils] #zoomToScale() Cannot compute scale from zoom without a tiling scheme
client-hook-3.js:1 [esri.views.3d.state.ViewStateManager] #zoom= Invalid zoom 3
let map = new WebMap({
portalItem: {
id: MAP_ID_HERE
}
});
let view = new SceneView({
container: "map",
viewingMode: "local",
map: map,
zoom: 3
});
有没有人碰巧知道是什么原因造成的?查看 SceneView
的文档,似乎这在构造函数中应该有效。
我认为在这种特殊情况下,使用 web 地图作为地图,您必须等待视图加载才能设置缩放级别。否则将无法计算比例,这就是错误的原因。
这应该有效,
let view = new SceneView({
container: "map",
map: map,
viewingMode: "local"
});
view.when(function() {
view.zoom = 3;
});
更新: (保留其他代码因为我认为它阐明了问题和最终答案)
好吧,似乎等待视图还不够,因为底图无法加载所有内容。所以在这里你有一个可行的替代方案,
const basemap = Basemap.fromId("dark-gray-vector");
const sceneView = new SceneView({
container: this.$el,
map: new WebMap({
basemap,
}),
center: [US_CENTER.longtitude, US_CENTER.latitude],
viewingMode: "local"
});
basemap.loadAll().then(
() => {
sceneView.goTo({ zoom: 3 });
}
);
在这个新解决方案中,我们实际上等到底图加载所有内容(使用 loadAll
方法),然后我们设置视图的缩放。
这是您 Map.vue
,
<template>
<div />
</template>
<script>
import { loadArcGISModules } from "@deck.gl/arcgis";
const US_CENTER = { longtitude: -98.5795, latitude: 39.8283 };
export default {
name: "Map",
props: {},
mounted() {
loadArcGISModules(
[
"esri/WebMap",
"esri/views/SceneView",
"esri/Basemap",
],
{ css: true }
).then(({ DeckRenderer, modules }) => {
const [WebMap, SceneView, Basemap] = modules;
const basemap = Basemap.fromId("dark-gray-vector");
const sceneView = new SceneView({
container: this.$el,
map: new WebMap({
basemap,
}),
center: [US_CENTER.longtitude, US_CENTER.latitude],
viewingMode: "local"
});
basemap.loadAll().then(
() => {
sceneView.goTo({ zoom: 3 });
}
);
});
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div {
width: 100%;
height: 100%;
}
</style>