<div class="bg" v-if="panelShow"> 弹框,切记隐藏显示div v-if要比v-show好控制,特别是你弹框内想放echarts的时候,就会发现v-show会不能让echarts自适应div大小。
<div class="point">
<div class="pop" v-if="panelShow">
<span class="closee" @click="close()">
<img src="../../assets/close.png" alt />
</span>
<video id="myVideo" class="video-js" controls>
<source :src="shipin" />
</video>
</div>
</div>
</div>
onLoad() {
let map;
let zoom = 14;
let lay;
let onlyMapLay;
// 定义卫星地图样式
let imageURL =
"http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e29741f83fa69334779d3d1dfd33be16";
//创建自定义图层对象
lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
let config = { layers: [lay] };
const _this = this;
//初始化地图对象
map = new T.Map("mapDiv", config);
//定义点的位置
let json_data = [
[112.5724, 29.8802, require("@/assets/dw1.png"), "1"],
[112.5884, 29.8792, require("@/assets/dw2.png"), "2"],
[112.5984, 29.8742, require("@/assets/dw3.png"), "3"],
[112.5744, 29.8735, require("@/assets/dw4.png"), "4"],
[112.5854, 29.8702, require("@/assets/dw5.png"), "5"],
[112.5954, 29.8669, require("@/assets/dw6.png"), "6"]
];
let pointArray = new Array();
for (let i = 0; i < json_data.length; i++) {
let icon = new T.Icon({
iconUrl: json_data[i][2],
iconSize: new T.Point(19, 27),
iconAnchor: new T.Point(10, 25)
});
let marker = new T.Marker(
new T.LngLat(json_data[i][0], json_data[i][1]),
{ icon: icon }
); // 创建点
marker.dataId = json_data[i][3];
map.addOverLay(marker); //增加点
pointArray[i] = new T.LngLat(json_data[i][0], json_data[i][1]);
marker.addEventListener("click", attribute);
}
function attribute(e) { // 获取点的标识,进行事件处理
console.log(e.target.dataId);
if (e.target.dataId == 1) {
_this.$refs.modelDiv.visible = true;
} else if (e.target.dataId == 2) {
_this.$refs.modelDivs.visible = true;
}
}
//让所有点在视野范围内
map.setViewport(pointArray);
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(112.5854, 29.8742), zoom);
let bd = new T.LngLatBounds(
new T.LngLat(112.5654, 29.8848),
new T.LngLat(112.6034, 29.8642)
);
let img = new T.ImageOverlay(require("@/assets/ma.png"), bd, {
opacity: 1,
alt: ""
});
map.addOverLay(img);
//让所有点在视野范围内
map.setViewport(pointArray);
//允许鼠标滚轮缩放地图
map.enableScrollWheelZoom();
}