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
| <template>
| <div class="map-container" id="map-container"></div>
| </template>
|
| <script>
|
| export default {
| name: "map",
| components: {},
| data() {
| return {
| map: null,
| mapUrl:
| "http://117.139.13.157: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,
| center: [28.59582231,119.27226470],
| zoom: 16,
| 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();
| }, 500);
| },
| methods: {
| /* 创建地图实例 */
| createrMap() {
| 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);
| },
| },
| };
| </script>
| <style >
| .map-container {
| position: absolute;
| left: 0;
| top: 0;
| width: 100%;
| height: 100%;
| }
| </style>
|
|
