1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
| <template>
| <div class="map-container" id="map-container"></div>
| </template>
|
| <script>
| export default {
| name: "map",
| components: {},
| data() {
| return {
| map: 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() {
| 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("绘制结束");
| // // });
| });
| let that = this;
| this.map.on("pm:create", (e) => {
| let region = [];
| e.layer._latlngs[0].forEach((point) => {
| region.push([point.lat, point.lng]);
| });
| console.log(region);
| let obj = {
| path: region,
| center: [that.map.getCenter().lat, that.map.getCenter().lng],
| zoom: that.map.getZoom(),
| };
| that.$emit("getRegion", obj);
| // // workingLayer.on('pm:create', e => {
| // console.log("创建完成");
| // console.log(e);
| // // });
| });
|
| this.locationMap();
| },
| locationMap() {
| if (this.region && this.map) {
| var polygon = L.polygon(eval(this.region), {
| color: "green",
| fillColor: "#f03",
| fillOpacity: 0.5,
| }).addTo(this.map);
| }
| },
| },
| watch: {
| point(newval, oldval) {
| this.map_point = newval;
| this.locationMap();
| },
| zoom(newval, oldval) {
| this.map_zoom = newval;
| },
| },
| props: ["point", "zoom", "region"],
| };
| </script>
| <style >
| .map-container {
| width: 100%;
| height: 100%;
| }
| </style>
|
|
