vue使用天地图测距、测面、标点一

天地的基本引入及创建地图，这里我就不详细讲解了，可以查看天地图的API就可以创建基本的地图页面。

        首先，在地图上

        选点测距：

1.  
   var T = window.T;
2.  
    
3.  
   let stationTool = new T.PolylineTool(this.TMap, {
4.  
   showLabel: true,
5.  
   color: "#de590e",
6.  
   });
7.  
   // 选点测距
8.  
   stationTool.open();

       选点测面：

1.  
   // 测面积
2.  
   let planimeter = new T.PolygonTool(this.TMap, {
3.  
   showLabel: true,
4.  
   color: "#de590e",
5.  
   weight: 4,
6.  
   opacity: 0.6,
7.  
   fillColor: "#fff",
8.  
   fillOpacity: 0.3,
9.  
   });
10.  
    planimeter.open();

       选点测量：这里的选点主要是用户可以通过输入经纬度及小数点来测量两点之间的距离

1.  
   var T = window.T;
2.  
   const {
3.  
   frontjdNum,
4.  
   frontjdFenNum,
5.  
   frontjdMiaoNum,
6.  
   frontwdNum,
7.  
   frontwdFenNum,
8.  
   frontwdMiaoNum,
9.  
   endjdNum,
10.  
    endjdFenNum,
11.  
    endjdMiaoNum,
12.  
    endwdNum,
13.  
    endwdFenNum,
14.  
    endwdMiaoNum,
15.  
    } = this.form;
16.  
    // lng 经度 lat 纬度
17.  
    let frontlng =
18.  
    (parseFloat(frontjdMiaoNum) / 60 parseFloat(frontjdFenNum)) / 60
19.  
    parseFloat(frontjdNum);
20.  
    let frontlat =
21.  
    (parseFloat(frontwdMiaoNum) / 60 parseFloat(frontwdFenNum)) / 60
22.  
    parseFloat(frontwdNum);
23.  
    let endlng =
24.  
    (parseFloat(endjdMiaoNum) / 60 parseFloat(endjdFenNum)) / 60
25.  
    parseFloat(endjdNum);
26.  
    let endlat =
27.  
    (parseFloat(endwdMiaoNum) / 60 parseFloat(endwdFenNum)) / 60
28.  
    parseFloat(endwdNum);
29.  
    // 点位数据
30.  
    const site = [
31.  
    { longitude: frontlng, latitude: frontlat },
32.  
    { longitude: endlng, latitude: endlat },
33.  
    ];
34.  
    // 计算两点之间的距离
35.  
    const add = getDistance(frontlng, frontlat, endlng, endlat);
36.  
    let points = [];
37.  
    site.forEach((item) => {
38.  
    points.push(new T.LngLat(item.longitude, item.latitude));
39.  
    let polyline = new T.Polyline(points, {
40.  
    color: "#de590e", //设置颜色
41.  
    weight: 3, //宽度
42.  
    opacity: 0.5, //透明度
43.  
    });
44.  
    var latlng = new T.LngLat(endlng, endlat);
45.  
    var label = new T.Label({
46.  
    text: add "KM",
47.  
    position: latlng,
48.  
    offset: new T.Point(0, 0),
49.  
    });
50.  
    this.TMap.addOverLay(label);
51.  
    this.TMap.addOverLay(polyline);
52.  
    });
53.  
    // 计算两点之间的距离
54.  
    function getDistance(lat1, lng1, lat2, lng2) {
55.  
    var radLat1 = lat1 * Math.PI / 180.0;
56.  
    var radLat2 = lat2 * Math.PI / 180.0;
57.  
    var a = radLat1 - radLat2;
58.  
    var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
59.  
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
60.  
    s = s * 6378.137;
61.  
    s = Math.round(s * 100) / 100;
62.  
    return s //单位千米/公里
63.  
    }

        标点：这是指的是用户可以在输入经纬度、小数点进行标点

1.  
   //这是element-ui页面部分
2.  
   <el-tab-pane label="定位" name="dw">
3.  
   <div class="dw-box">
4.  
   <p>
5.  
   <el-dropdown @command="handleCommand">
6.  
   <span class="el-dropdown-link">
7.  
   {{ commandLable}}<i class="el-icon-arrow-down el-icon--right"></i>
8.  
   </span>
9.  
   <el-dropdown-menu slot="dropdown">
10.  
    <el-dropdown-item command="度分秒">
11.  
    度分秒
12.  
    </el-dropdown-item>
13.  
    <el-dropdown-item command="小数形式">
14.  
    小数形式
15.  
    </el-dropdown-item>
16.  
    </el-dropdown-menu>
17.  
    </el-dropdown>
18.  
    </p>
19.  
    <div class="dw-content">
20.  
    <el-row v-show="commandLable === '度分秒'">
21.  
    <el-row>
22.  
    <el-col :span="4" style="margin-top: 2px">经度：</el-col>
23.  
    <el-col :span="5">
24.  
    <el-input
25.  
    v-model="locationForm.frontjdNum"
26.  
    size="mini"
27.  
    />
28.  
    </el-col>
29.  
    <el-col :span="1">°</el-col>
30.  
    <el-col :span="5">
31.  
    <el-input
32.  
    v-model="locationForm.frontjdFenNum"
33.  
    size="mini"
34.  
    />
35.  
    </el-col>
36.  
    <el-col :span="1">'</el-col>
37.  
    <el-col :span="5">
38.  
    <el-input
39.  
    v-model="locationForm.frontjdMiaoNum"
40.  
    size="mini"
41.  
    />
42.  
    </el-col>
43.  
    <el-col :span="1">"</el-col>
44.  
    </el-row>
45.  
    <el-row style="margin-top: 20px">
46.  
    <el-col :span="4" style="margin-top: 2px">纬度：</el-col>
47.  
    <el-col :span="5">
48.  
    <el-input
49.  
    v-model="locationForm.frontwdNum"
50.  
    size="mini"
51.  
    />
52.  
    </el-col>
53.  
    <el-col :span="1">°</el-col>
54.  
    <el-col :span="5">
55.  
    <el-input
56.  
    v-model="locationForm.frontwdFenNum"
57.  
    size="mini"
58.  
    />
59.  
    </el-col>
60.  
    <el-col :span="1">'</el-col>
61.  
    <el-col :span="5">
62.  
    <el-input
63.  
    v-model="locationForm.frontwdMiaoNum"
64.  
    size="mini"
65.  
    />
66.  
    </el-col>
67.  
    <el-col :span="1">"</el-col>
68.  
    </el-row>
69.  
    </el-row>
70.  
    <el-row v-show="commandLable === '小数形式'">
71.  
    <el-row>
72.  
    <el-col :span="4">经度：</el-col>
73.  
    <el-col :span="18">
74.  
    <el-input
75.  
    size="mini"
76.  
    placeholder="请输入经度"
77.  
    v-model="locationForm.jdNum"
78.  
    />
79.  
    </el-col>
80.  
    </el-row>
81.  
    <el-row style="margin-top: 20px">
82.  
    <el-col :span="4">纬度：</el-col>
83.  
    <el-col :span="18">
84.  
    <el-input
85.  
    size="mini"
86.  
    placeholder="请输入纬度"
87.  
    v-model="locationForm.wdNum"
88.  
    />
89.  
    </el-col>
90.  
    </el-row>
91.  
    </el-row>
92.  
    <el-row>
93.  
    <el-row style="margin-top: 20px">
94.  
    <el-col :span="2"
95.  
    ><i
96.  
    class="el-icon-location-information"
97.  
    style="color: #409eff; font-weight: bold"
98.  
    /></el-col>
99.  
    <el-col :span="11">经度:{{ jdDats }}</el-col>
100.  
     <el-col :span="11">纬度:{{ wdDats }}</el-col>
101.  
     </el-row>
102.  
     <el-col class="btns">
103.  
     <el-button
104.  
     type="primary"
105.  
     size="mini"
106.  
     @click="handleLocation(commandLable)"
107.  
     >定位</el-button
108.  
     >
109.  
     <el-button size="mini" @click="handleClear()"
110.  
     >清除</el-button
111.  
     >
112.  
     </el-col>
113.  
     </el-row
114.  
     </div>
115.  
     </div>
116.  
     </el-tab-pane>
117.  
      
118.  
      
119.  
     handleCommand(e) {
120.  
     this.commandLable = e;
121.  
     },
122.  
     handleLocation(e) {
123.  
     // 移除上一个标注
124.  
     if (this.locationMaker) this.TMap.removeOverLay(this.locationMaker);
125.  
     var longitude, latitude;
126.  
     if (e === "度分秒") {
127.  
     longitude =
128.  
     (parseFloat(this.locationForm.frontjdMiaoNum) / 60
129.  
     parseFloat(this.locationForm.frontjdFenNum)) /
130.  
     60
131.  
     parseFloat(this.locationForm.frontjdNum);
132.  
     latitude =
133.  
     (parseFloat(this.locationForm.frontwdMiaoNum) / 60
134.  
     parseFloat(this.locationForm.frontwdFenNum)) /
135.  
     60
136.  
     parseFloat(this.locationForm.frontwdNum);
137.  
     this.jdDats = longitude.toFixed(6);
138.  
     this.wdDats = latitude.toFixed(6);
139.  
     } else {
140.  
     if (this.locationForm.jdNum && this.locationForm.jdNum) {
141.  
     longitude = this.locationForm.jdNum;
142.  
     latitude = this.locationForm.wdNum;
143.  
     this.jdDats = ToDegrees(longitude);
144.  
     this.wdDats = ToDegrees(latitude);
145.  
     }
146.  
     }
147.  
     // 创建标注对象
148.  
     const marker = new T.Marker(new T.LngLat(longitude, latitude), {
149.  
     icon: new T.Icon({
150.  
     iconUrl: footer_icon, // 引入自定义图标
151.  
     iconSize: new T.Point(20, 20), // 图标大小
152.  
     }),
153.  
     });
154.  
     // 向地图上添加标注
155.  
     this.TMap.addOverLay(marker);
156.  
     this.locationMaker = marker;
157.  
     this.TMap.panTo(new T.LngLat(longitude, latitude), 10);
158.  
     },
159.  
     handleClear() {
160.  
     this.locationForm = {
161.  
     frontjdNum: "0",
162.  
     frontjdFenNum: "0",
163.  
     frontjdMiaoNum: "0",
164.  
     frontwdNum: "0",
165.  
     frontwdFenNum: "0",
166.  
     frontwdMiaoNum: "0",
167.  
     jdNum: undefined,
168.  
     wdNum: undefined,
169.  
     };
170.  
     this.jdDats = null;
171.  
     this.wdDats = null;
172.  
     this.TMap.removeOverLay(this.locationMaker);
173.  
     },

页面实现的效果：

这篇好文章是转载于：学新通技术网