投放点信息，新增投放点经纬度

2c2c2c
1 parent 2d39ce9e
Showing 3 changed files with 212 additions and 2 deletions
trash-ui/src/views/unit/dropPointInfo/index.vue
trash-unit/src/main/java/com/trash/dropPointInfo/domain/DropPointInfo.java
trash-unit/src/main/resources/mapper/unit/DropPointInfoMapper.xml
@@ -242,6 +242,12 @@
               <el-input v-model="form.transportUnit" placeholder="请输入运输单位"/>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="坐标点" prop="coordinatePoint">
+              <el-input v-model="form.coordinatePoint" placeholder="请输入坐标点经纬度" readonly/>
+            </el-form-item>
+            <el-button type="primary" @click="handleOpenMap">坐标点</el-button>
+          </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -249,6 +255,41 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <el-dialog title="高德地图" :visible.sync="openMap" width="1600px" height="750px" append-to-body>
+      <div class="serach_map">
+        搜索：
+        <el-select
+          v-model="keywords"
+          filterable
+          remote
+          placeholder="请输入关键词"
+          :remote-method="remoteMethod"
+          :loading="loading"
+          :clearable="true"
+          size="mini"
+          @change="currentSelect"
+          style="width: 250px"
+        >
+          <el-option
+            v-for="item in mapOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item"
+            class="one-text"
+          >
+            <span style="float: left">{{ item.name }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.district
+              }}</span>
+          </el-option>
+        </el-select>
+      </div>
+      <div v-loading="loading" id="dropPointInfoContainer" class="am-map" style="width:100%;height: 700px;"></div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="clearCoordinatePoint">清除坐标点</el-button>
+        <el-button type="primary" @click="openMap = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
@@ -262,9 +303,17 @@ import {
   exportDropPointInfo
 } from "@/api/unit/dropPointInfo";
 import {getAreaList} from "@/api/casefile/remoteServer";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import Treeselect from "@riophae/vue-treeselect";
+
+// 设置安全密钥
+window._AMapSecurityConfig = {
+  securityJsCode: 'aa1db7d8f534f3da3f6d8a6a71382802',
+}
 export default {
   name: "DropPointInfo",
+  components: {AMapLoader},
   data() {
     return {
       // 遮罩层
@@ -347,6 +396,9 @@ export default {
         ],
         transportUnit: [
           {required: true, message: "请输入运输单位", trigger: "blur"}
+        ],
+        coordinatePoint: [
+          {required: true, message: "请点击坐标点按钮选择坐标点", trigger: "blur"}
         ]
       },
       areas: [
@@ -502,13 +554,152 @@ export default {
           ]
         }
       ],
-      streets:[]
+      streets:[],
+      // 地图
+      map: null,
+      keywords: "",
+      mapOptions: [],
+      openMap:false,
+      center: null,
     };
   },
   created() {
     this.getList();
+    // this.initAMap();
   },
   methods: {
+    clearCoordinatePoint(){
+      this.center = null;
+      this.form.coordinatePoint = null;
+      this.map = null;
+      this.initAMap();
+    },
+    handleOpenMap(){
+      this.openMap = true;
+      this.initAMap();
+    },
+    initAMap() {
+      const _this = this
+      // 加载高德地图
+      AMapLoader.load({
+        key: _this.$aMapKey,  //设置高德地图申请的key
+        version: "2.0",  // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ['AMap.ToolBar','AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Marker','AMap.CircleMarker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        AMapUI: {
+          version: "1.1",
+          plugins: []
+        },
+        Loca: {
+          version: "2.0"
+        },
+      }).then(async (AMap) => {
+        _this.map = await new AMap.Map("dropPointInfoContainer", { //设置地图容器id
+          viewMode: "2D",  // 默认使用 2D 模式
+          center: [113.01814545605467, 28.201039299894283], // 初始化地图中心点位置
+          zoom: 11, //初始化地图层级
+          resizeEnable: true,
+          willreadoften: true
+        });
+        _this.AutoComplete = await new AMap.AutoComplete({city:'长沙'});
+        // 数据回显
+        if(_this.form.coordinatePoint!=null&&_this.form.coordinatePoint!==""){
+          //设置圆形位置
+          _this.center = new AMap.LngLat(_this.form.coordinatePoint.split(",")[0], _this.form.coordinatePoint.split(",")[1]);
+          //设置圆的半径大小
+          var radius = 10 //单位:px
+
+          //创建圆形点标记 CircleMarker 实例
+          var circleMarker = new AMap.CircleMarker({
+            center: _this.center, //圆心
+            radius: radius, //半径
+            strokeColor: "white", //轮廓线颜色
+            strokeWeight: 2, //轮廓线宽度
+            strokeOpacity: 0.5, //轮廓线透明度
+            fillColor: "rgba(0,0,255,1)", //圆点填充颜色
+            fillOpacity: 0.5, //圆点填充透明度
+            zIndex: 10, //圆点覆盖物的叠加顺序
+            cursor: "pointer", //鼠标悬停时的鼠标样式
+          });
+          //圆形 circleMarker 对象添加到 Map
+          _this.map.add(circleMarker);
+          //将覆盖物调整到合适视野
+          _this.map.setFitView([circleMarker]);
+
+          _this.form.coordinatePoint = e.lnglat.lng+","+e.lnglat.lat;
+        }
+        // 监听地图点击事件
+        _this.map.on("click", (e) => {
+          //判断是否已有圆点标记
+          if(_this.center==null){
+            //设置圆形位置
+            _this.center = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
+            //设置圆的半径大小
+            var radius = 10 //单位:px
+
+            //创建圆形点标记 CircleMarker 实例
+            var circleMarker = new AMap.CircleMarker({
+              center: _this.center, //圆心
+              radius: radius, //半径
+              strokeColor: "white", //轮廓线颜色
+              strokeWeight: 2, //轮廓线宽度
+              strokeOpacity: 0.5, //轮廓线透明度
+              fillColor: "rgba(0,0,255,1)", //圆点填充颜色
+              fillOpacity: 0.5, //圆点填充透明度
+              zIndex: 10, //圆点覆盖物的叠加顺序
+              cursor: "pointer", //鼠标悬停时的鼠标样式
+            });
+            //圆形 circleMarker 对象添加到 Map
+            _this.map.add(circleMarker);
+            //将覆盖物调整到合适视野
+            _this.map.setFitView([circleMarker]);
+
+            _this.$set(_this.form, "coordinatePoint", e.lnglat.lng+","+e.lnglat.lat);
+          }
+        });
+      }).catch(e => {
+        console.log(e);
+      });
+      this.loading = false;
+      // this.openMap = false;
+    },
+    // 选中提示
+    currentSelect(val) {
+      console.log(val);
+      // 清空时不执行后面代码
+      if (!val) {
+        return ;
+      }
+
+      //清除marker
+      if (this.searchMarker){
+        this.map.remove(this.searchMarker)
+      }
+      //设置marker
+      // this.searchMarker = new AMap.Marker({
+      //   map: this.map,
+      //   position: [val.location.lng, val.location.lat],
+      // });
+      // 自动适应显示想显示的范围区域
+      //定位
+      this.map.setCenter([val.location.lng, val.location.lat])
+      this.map.setZoom(18);
+      this.keywords = val.name
+
+    },
+    // 搜索地址
+    remoteMethod(query) {
+      if (query !== "") {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+          this.AutoComplete.search(query, (status, result) => {
+            this.mapOptions = result.tips;
+          });
+        }, 200);
+      } else {
+        this.mapOptions = [];
+      }
+    },
     createDropPointNo(area){
       listDropPointInfo({dropPointNo: area.code}).then(response => {
         const total = response.total+1;
@@ -561,6 +752,8 @@ export default {
         updateTime: null,
         updateBy: null
       };
+      this.map = null;
+      this.center = null;
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -81,10 +81,23 @@ public class DropPointInfo extends BaseEntity
     @Excel(name = "运输单位")
     private String transportUnit;
+    /** 坐标点 */
+    @Excel(name = "坐标点")
+    private String coordinatePoint;
+
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     @Excel(name = "创建时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")
     private Date createTime;
+
+    public String getCoordinatePoint() {
+        return coordinatePoint;
+    }
+
+    public void setCoordinatePoint(String coordinatePoint) {
+        this.coordinatePoint = coordinatePoint;
+    }
+
     @Override
     public Date getCreateTime() {
         return createTime;
@@ -21,6 +21,7 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
         <result property="dropPointNo"    column="drop_point_no"    />
         <result property="operatingUnit"    column="operating_unit"    />
         <result property="transportUnit"    column="transport_unit"    />
+        <result property="coordinatePoint"    column="coordinate_point"    />
         <result property="createTime"    column="create_time"    />
         <result property="createBy"    column="create_by"    />
         <result property="updateTime"    column="update_time"    />
@@ -28,7 +29,7 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
     </resultMap>
     <sql id="selectDropPointInfoVo">
-        select id, drop_point_name, district, street, community, address, type, area, capacity, management_unit, custodian, custodian_phone, drop_time, drop_point_no, operating_unit, transport_unit, create_time, create_by, update_time, update_by from drop_point_info
+        select id, drop_point_name, district, street, community, address, type, area, capacity, management_unit, custodian, custodian_phone, drop_time, drop_point_no, operating_unit, transport_unit,coordinate_point, create_time, create_by, update_time, update_by from drop_point_info
     </sql>
     <select id="selectDropPointInfoList" parameterType="DropPointInfo" resultMap="DropPointInfoResult">
@@ -64,6 +65,7 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
             <if test="dropPointNo != null">drop_point_no,</if>
             <if test="operatingUnit != null">operating_unit,</if>
             <if test="transportUnit != null">transport_unit,</if>
+            <if test="coordinatePoint != null">coordinate_point,</if>
             <if test="createTime != null">create_time,</if>
             <if test="createBy != null">create_by,</if>
             <if test="updateTime != null">update_time,</if>
@@ -85,6 +87,7 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
             <if test="dropPointNo != null">#{dropPointNo},</if>
             <if test="operatingUnit != null">#{operatingUnit},</if>
             <if test="transportUnit != null">#{transportUnit},</if>
+            <if test="coordinatePoint != null">#{coordinatePoint},</if>
             <if test="createTime != null">#{createTime},</if>
             <if test="createBy != null">#{createBy},</if>
             <if test="updateTime != null">#{updateTime},</if>
@@ -110,6 +113,7 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
             <if test="dropPointNo != null">drop_point_no = #{dropPointNo},</if>
             <if test="operatingUnit != null">operating_unit = #{operatingUnit},</if>
             <if test="transportUnit != null">transport_unit = #{transportUnit},</if>
+            <if test="coordinatePoint != null">coordinate_point = #{coordinatePoint},</if>
             <if test="createTime != null">create_time = #{createTime},</if>
             <if test="createBy != null">create_by = #{createBy},</if>
             <if test="updateTime != null">update_time = #{updateTime},</if>