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
| <template>
| <GlobalWindow title="绘制地图停车区域" :visible.sync="isShowModal" :confirm-working="isWorking" @confirm="confirm"
| width="1000px">
| <div class="map_title">站点名称 停车区域绘制</div>
| <div id="mapContainer" style="width: 100%; height: calc( 100% - 40px )"></div>
| </GlobalWindow>
| </template>
|
| <script>
| import GlobalWindow from '@/components/common/GlobalWindow'
| export default {
| components: {
| GlobalWindow
| },
| data() {
| return {
| isShowModal: false,
| isWorking: false,
| }
| },
| mounted() {
| this.$nextTick(() => {
| this.initMap()
| })
| },
| methods: {
| initMap() {
| this.map = new TMap.Map(document.getElementById("mapContainer"), {
| zoom: 14, // 设置地图缩放级别
| center: new TMap.LatLng(30.656964, 104.066186), // 设置地图中心点坐标
| })
| var polygon = new TMap.MultiPolygon({
| map: this.map,
| })
| this.editor = new TMap.tools.GeometryEditor({
| // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
| map: this.map, // 编辑器绑定的地图对象
| overlayList: [
| // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
| {
| overlay: polygon,
| id: "polygon",
| },
| ],
| actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
| activeOverlayId: this.activeId, // 激活图层
| snappable: true, // 开启吸附
| })
| // 监听绘制结束事件，获取绘制几何图形
| this.editor.on("draw_complete", (geometry) => {
| console.log('所有顶点坐标集合', geometry)
| // 多边形处理
| if (this.activeId === "polygon") {
| console.log("得到顶点经纬度的数组", geometry.paths)
| }
| })
| },
| confirm() { }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| .map_title {
| font-size: 16px;
| font-weight: 500;
| margin-bottom: 10px;
| }
|
| #mapContainer {
|
| }
| </style>
|
|
