基于VUE的Cesium加载本地地图跨域问题解决方案
Cesium加载本地地图是报跨域错误var viewer = new Cesium.Viewer('cesiumContainer', {animation: false,// 是否显示动画控件imageryProvider:new Cesium.UrlTemplateImageryProvider({url : 'http://127.0.0.1:30...
·
Cesium加载本地地图是报跨域错误
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,// 是否显示动画控件
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url : 'http://127.0.0.1:3000/satellite/z={z}&x={x}&y={y}',
}),
baseLayerPicker:false,// 去掉自带的图层选择器
});
解决方案
修改config\index.js 配置proxyTable
//接口地址原本是/satellite/z={z}&x={x}&y={y} 但是为了匹配代理地址 调用时需在前面加一个 /satellite, 因此接口地址需要写成这样的即可生效 /satellite/satellite/z={z}&x={x}&y={y}
proxyTable: {
'/satellite': {//代理的目的:只要是/satellite开头的路径都往localhost:3000进行转发
target: 'http://localhost:3000', //后端接口地址 设置代理服务器地址 转发地址
ws:true,//WebSocket协议
changeOrigin: true, //表示是否改变原域名;这个一定要选择为true; 是否允许跨域[ 如果接口跨域 则要配置这个参数]
// secure: false, // 如果是https接口 需要配置这个参数
pathRewrite: {// 把程序中的地址转换成“真实地址”+‘/satellite’后面的部分如‘/satellite/satellite/z={z}&x={x}&y={y}',被转换成'http://localhost:3000/satellite/z={z}&x={x}&y={y}'
'^/satellite': ''//修改pathRewrite地址 将前缀'^satellite'转为'/satellite'
}
},
'/api': {
target: 'http://192.168.2.190:8060',
ws:true,
changeOrigin: true,
// secure: false, // 如果是https接口 需要配置这个参数
pathRewrite: {
'^/api': ''
}
}
},
调用本地地图
src\views\Home.vue
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url : 'satellite/satellite/z={z}&x={x}&y={y}',
}),
baseLayerPicker:false,
});
更多推荐
已为社区贡献27条内容
所有评论(0)