使用产品：vue-iclient-mapboxGL 操作系统：win7 x64
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="10">
<div class="mapBox">
<sm-web-map :map-options="mapOptions" >
<!-- <sm-zoom :show-zoom-slider="true" :showZoom="true"></sm-zoom> -->
</sm-web-map>
</div>
</el-col>
<el-col :span="2">
<el-button @click="setZooms">取消</el-button>
</el-col>
<el-col :span="10">
<sm-web-map :map-options="mapOptionsTwo" id="map2">
<!-- <sm-zoom :show-zoom-slider="true" :showZoom="true"></sm-zoom> -->
</sm-web-map>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'WaterResourcesAnalysis',
components: {
},
data() {
return {
mapOptions: {
container:"map",
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: [
'http://10.222.96.69:8090/iserver/services/map-China100/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
],
tileSize: 256
}
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22
}
]
},
closeButton:false,
center: [116.83, 38.33], // starting position
zoom: 11 // starting zoom
},
mapOptionsTwo: {
container:"map2",
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: [
'http://10.222.96.69:8090/iserver/services/map-China100/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
],
tileSize: 256
}
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22
}
]
},
center: [116.83, 38.33], // starting position
zoom: 11 // starting zoom
}
}
},
methods:{
zoomed(ind){
// console.log(ind.mapboxEvent);
// console.log(ind.mapboxEvent.target);
// //获取
// console.log(ind.mapboxEvent.target.getZoom());
// this.setZooms(ind.mapboxEvent.target.getZoom());
},
setZooms(numb){
// this.mapOptions.zoom=numb;
// this.mapOptions2.zoom=;
}
}
,
created() {
}
}
</script>
<style lang="scss" scoped>
.app-container{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
padding: 0;
margin: 0;
.mapBox{
width: 500px;
height: 500px;
}
}
</style>
如代码可见，第一个sm-web-map是可见的，第二个却不能显示。
