添加天地图

.gitignore

@@ -0,0 +1 @@
+node_modules/

public/index.html

@@ -8,6 +8,8 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.svg">
     <title></title>
     <script type="text/javascript" src="<%= BASE_URL %>config.js"></script>
+    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=060749cf8167e6993c4dbaf8bc9ef0e2" type="text/javascript"></script>
+    <!-- <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=09c064e0ed01777bed7829a6a5514c72" type="text/javascript"></script> -->
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>
     html,

src/views/info/areaInfo/index.vue

@@ -1,26 +1,18 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"
+      @submit.native.prevent>
       <el-form-item label="类别" prop="typeId">
         <template>
           <el-select v-model="queryParams.typeId" filterable placeholder="请选择">
-            <el-option
-              v-for="item in AreaType"
-              :key="item.typeId"
-              :label="item.typeName"
-              :value="item.typeId">
+            <el-option v-for="item in AreaType" :key="item.typeId" :label="item.typeName" :value="item.typeId">
             </el-option>
           </el-select>
         </template>
       </el-form-item>
       <el-form-item label="名字" prop="areaName">
-        <el-input
-          v-model="queryParams.areaName"
-          placeholder="请输入名字"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.areaName" placeholder="请输入名字" clearable size="small"
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -30,47 +22,20 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['info:areaInfo:add']"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['info:areaInfo:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['info:areaInfo:edit']"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['info:areaInfo:edit']">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['info:areaInfo:remove']"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['info:areaInfo:remove']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          :loading="exportLoading"
-          @click="handleExport"
-          v-hasPermi="['info:areaInfo:export']"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading"
+          @click="handleExport" v-hasPermi="['info:areaInfo:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -82,38 +47,23 @@
       <el-table-column label="名字" align="center" prop="areaName" />
       <el-table-column label="颜色" prop="colour">
         <template slot-scope="scope">
-          <div :style="{ backgroundColor: scope.row.colour, width: '40px', height: '30px', borderRadius: '50%'}"></div>
+          <div :style="{ backgroundColor: scope.row.colour, width: '40px', height: '30px', borderRadius: '50%' }"></div>
         </template>
       </el-table-column>
       <el-table-column label="面积" align="center" prop="acreage" />
-      <el-table-column label="坐标" align="center" prop="location" />
+      <!-- <el-table-column label="坐标" align="center" prop="location" /> -->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['info:areaInfo:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['info:areaInfo:remove']"
-          >删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['info:areaInfo:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['info:areaInfo:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改区域对象对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
@@ -121,11 +71,7 @@
         <el-form-item label="类别" prop="typeId">
           <template>
             <el-select v-model="form.typeId" filterable placeholder="请选择">
-              <el-option
-                v-for="item in AreaType"
-                :key="item.typeId"
-                :label="item.typeName"
-                :value="item.typeId">
+              <el-option v-for="item in AreaType" :key="item.typeId" :label="item.typeName" :value="item.typeId">
               </el-option>
             </el-select>
           </template>
@@ -134,17 +80,20 @@
           <el-input v-model="form.areaName" placeholder="请输入名字" />
         </el-form-item>
         <el-form-item label="备注" prop="memo">
-          <wang-editor v-model="form.memo" :min-height="140"/>
+          <wang-editor v-model="form.memo" :min-height="140" />
         </el-form-item>
         <el-form-item label="颜色">
           <el-color-picker v-model="form.colour"></el-color-picker>
         </el-form-item>
         <el-form-item label="面积" prop="acreage">
-          <el-input-number v-model="form.acreage" controls-position="right"   :min="0" placeholder="请输入面积" />
+          <el-input-number v-model="form.acreage" controls-position="right" :min="0" placeholder="请输入面积" />
         </el-form-item>
 
         <el-form-item label="坐标" prop="location">
-          <el-input v-model="form.location" placeholder="请输入坐标" />
+          <el-input @focus="openditu" v-model="form.location">
+            {{ form.location }}
+          </el-input>
+
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -152,7 +101,26 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+
+
+    <el-dialog title="地图" :visible.sync="dialogVisible" width="80%">
+      <div id='mainMap'>
+        <div id="mapDiv" style="width:100%; height:700px">
+        </div>
+      </div>
+      <input type="button" value="清除" @click='clearmian()' />
+      <input type="button" value="多边形工具" @click='openPolygonTool()' />
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click='tijiao'>确定</el-button>
+      </span>
+    </el-dialog>
+
+
   </div>
+
 </template>
 
 <script>
@@ -162,8 +130,16 @@ export default {
   name: "AreaInfo",
   data() {
     return {
+      dialogVisible: false,
       AreaType: [],
       // 遮罩层
+      handler: null,
+      map: null,
+      polygonTool: null,
+      geoJson: {
+        type: "Polygon",
+        coordinates: [[]],
+      },
       loading: true,
       // 导出遮罩层
       exportLoading: false,
@@ -212,6 +188,109 @@ export default {
     this.getAreaType();
   },
   methods: {
+
+    openPolygonTool() {
+      if (this.handler) this.handler.close();
+      this.handler = new T.PolygonTool(this.map);
+      this.handler.open();
+
+      this.handler.on("draw", (yu) => {
+        // console.log("参数？？99", yu.currentLnglats);
+        let drawData = yu.currentLnglats.map((item) => {
+          return [item.lng, item.lat];
+        });
+        this.geoJson.coordinates[0] = drawData;
+        console.log("区域之后处理数据", this.geoJson.coordinates[0]);
+
+      });
+    },
+
+    tijiao() {
+      console.log('多边形数据:', this.form.location);
+
+      if (this.geoJson.coordinates[0].length > 0) {
+        this.form.location = JSON.stringify(this.geoJson)
+      }
+
+      this.destructionTMap()
+      this.dialogVisible = false;
+
+    },
+
+    // 销毁天地图
+ destructionTMap ()  {
+  if (this.map) {
+    this.map = null;
+    // 直接将节点给删掉
+    console.log('1qsad');
+    
+    const parentEl = document.getElementById('mainMap');
+    const cahildrenEl = document.getElementById('mapDiv');
+    if(cahildrenEl) parentEl.removeChild(cahildrenEl);
+    // 然后再手动将节点加进来
+    const newCahildrenEl = document.createElement("div");
+    newCahildrenEl.id = 'mapDiv'
+    newCahildrenEl.style = 'height: 700px;width: 100%;'
+    parentEl.appendChild(newCahildrenEl)
+  }
+},
+
+
+    clearmian() {
+      this.form.location = null
+      this.geoJson.coordinates[0] = []
+      this.$set(this.form, 'location', null)
+      this.map.clearOverLays()
+
+
+    },
+
+    openditu() {
+      console.log('sdasd11');
+      this.dialogVisible = true;
+
+      this.$nextTick(function () {
+        var T = window.T;
+
+        var zoom = 12;
+
+        this.map = new T.Map('mapDiv');
+        this.map.centerAndZoom(new T.LngLat(103.959050, 30.654104), zoom);
+
+
+        var config = {
+          showLabel: true,
+          color: "red", weight: 2, opacity: 0.5, fillColor: "red", fillOpacity: 0.5
+        };
+        //创建标注工具对象
+        this.polygonTool = new T.PolygonTool(this.map, config);
+
+
+
+
+
+
+        console.log('kanknak1', this.form.location);
+
+
+        var points = [];
+        JSON.parse(this.form.location).coordinates[0].map((item) => {
+          points.push(new T.LngLat(item[0], item[1]));
+        })
+
+        //创建面对象
+        var polygon = new T.Polygon(points, {
+          color: "red", weight: 2, opacity: 0.5, fillColor: "red", fillOpacity: 0.5
+        });
+        //向地图上添加面
+        this.map.addOverLay(polygon);
+
+
+      });
+
+
+
+    },
     getAreaType() {
       listAreaType(this.queryAreaTypeParams).then(response => {
         this.AreaType = response.data.list;
@@ -258,7 +337,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.areaId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -279,6 +358,8 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+
+      this.form.location = JSON.parse(this.form.location)
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.areaId != null) {
@@ -300,12 +381,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const areaIds = row.areaId || this.ids;
-      this.$modal.confirm('是否确认删除区域对象编号为"' + areaIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除区域对象编号为"' + areaIds + '"的数据项？').then(function () {
         return delAreaInfo(areaIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -316,7 +397,7 @@ export default {
       }).then(response => {
         this.$download.name(response.msg);
         this.exportLoading = false;
-      }).catch(() => {});
+      }).catch(() => { });
     }
   }
 };