<template>
|
<div class="map-container" id="map-container"></div>
|
</template>
|
|
<script>
|
export default {
|
name: "map",
|
components: {},
|
data() {
|
return {
|
map: null,
|
marker: null,
|
map_point: { x: "119.27179890", y: "28.59027084" },
|
map_zoom: 15,
|
mapUrl:
|
"http://172.28.194.179:41005/tilermap/rest/services/mapserver/baidu-image-db/{z}/{x}/{y}",
|
// mapUrls: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
// mapUrls: "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
|
option: {
|
crs: L.CRS.Baidu,
|
minZoom: 2,
|
maxZoom: 19,
|
zoomControl: true, // 禁用 + - 按钮
|
doubleClickZoom: true, // 禁用双击放大
|
attributionControl: false, // 移除右下角leaflet标识
|
dragging: true, // 禁止鼠标拖动滚动
|
boxZoom: true, // 决定地图是否可被缩放到鼠标拖拽出的矩形的视图，鼠标拖拽时需要同时按住shift键.
|
scrollWheelZoom: true, // 禁止鼠标滚动缩放
|
},
|
options: {
|
position: "topright",
|
drawPolygon: true, // 添加绘制多边形
|
drawMarker: false, // 添加按钮以绘制标记
|
drawCircleMarker: false, // 添加按钮以绘制圆形标记
|
drawPolyline: false, // 添加按钮绘制线条
|
drawRectangle: false, // 添加按钮绘制矩形
|
drawCircle: false, // 添加按钮绘制圆圈
|
editMode: false, // 添加按钮编辑多边形
|
dragMode: false, // 添加按钮拖动多边形
|
cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
|
removalMode: true, // 清除图层
|
},
|
};
|
},
|
mounted() {
|
console.log("/* 创建地图实例 */");
|
setTimeout(() => {
|
this.createrMap();
|
}, 100);
|
},
|
methods: {
|
/* 创建地图实例 */
|
createrMap() {
|
this.option.center = [eval(this.map_point.y), eval(this.map_point.x)];
|
this.option.zoom = this.map_zoom;
|
this.map = this.$map.createrMap("map-container", this.option);
|
// this.$map.createrLayers(this.map, this.mapUrls) //切片地图
|
// this.$map.createrChinatm(this.map, this.mapUrl); // 图层
|
|
this.map.pm.setLang("zh");
|
// this.map.pm.addControls(this.options);
|
// this.map.on("pm:drawstart", (e) => {
|
// // // workingLayer.on('pm:create', e => {
|
// // console.log("绘制开始");
|
// // console.log(e);
|
// // // });
|
// });
|
// this.map.on("pm:drawend", (e) => {
|
// // // workingLayer.on('pm:create', e => {
|
// // console.log("绘制结束");
|
// // // });
|
// });
|
this.locationMap();
|
},
|
locationMap() {
|
if (this.map_point && this.map_point.y) {
|
this.map.setView(
|
[eval(this.map_point.y), eval(this.map_point.x)],
|
this.map_zoom
|
);
|
}
|
if (this.mark && this.map) {
|
if (this.marker) this.map.removeLayer(this.marker);
|
// 创建一个 Marker 实例：
|
this.marker = L.marker([
|
eval(this.map_point.y),
|
eval(this.map_point.x),
|
]).addTo(this.map);
|
let that = this;
|
// 将创建的点标记添加到已有的地图实例：
|
this.marker.on("click", function (e) {
|
that.$emit("fatherMethod");
|
});
|
}
|
},
|
},
|
watch: {
|
point(newval, oldval) {
|
this.map_point = newval;
|
this.locationMap();
|
},
|
zoom(newval, oldval) {
|
this.map_zoom = newval;
|
},
|
},
|
props: ["point", "zoom", "mark"],
|
};
|
</script>
|
<style >
|
.map-container {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
