活动人员区域和活动车辆区域添加地图显示；活动增加经纬度保存

guoshilong

2022-11-28 2625ee88c405ecf102ca26f8601146fe38392c13

活动人员区域和活动车辆区域添加地图显示；活动增加经纬度保存

 public/img/dwicon.jpeg

 src/api/security/security.js

@@ -12,9 +12,21 @@
  })
}

export const getPage = (current, size, params) => {
  return request({
    url: '/api/security/security/page',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
  return request({
    url: '/api/security/security/detail',
    url: '/api/security/security/details',
    method: 'get',
    params: {
      id

 src/components/map/mapBox.vue

@@ -32,7 +32,7 @@

export default {
  name: 'mapBox',
  props:['routeRange','isDetail',"pointLonLat"],
  props:['routeRange','isDetail'],
  data() {
    return {
      map: null,
@@ -94,8 +94,8 @@
      })
      _this.map.addLayer(_this.lineVector)
      _this.map.addLayer(_this.pointVector)
      _this.addLineDraw(_this.routeRange)
      _this.addPoint(_this.pointLonLat)
      //在地图上回显线或点
      _this.startAdd(_this.routeRange)
    },
    // 绘画之后的样式
    styleFunction() {
@@ -146,10 +146,15 @@
    },
    // 添加点
    addPoint(pointLonLat){
      // pointLonLat = POINT(115.87531914674 28.8603307485585)
      if (pointLonLat){
        let pointData = ""
        let pointArray = []
        pointData = pointLonLat.match(/\(([^)]*)\)/);
        pointArray = pointData[1].split(" ")
        //设置点
        let feature_Point = new Feature({
          geometry: new Point([Number(pointLonLat.lon), Number(pointLonLat.lat)])
          geometry: new Point([Number(pointArray[0]), Number(pointArray[1])])
        })
        //点样式
        let style = new Style({
@@ -162,7 +167,7 @@
        });
        feature_Point.setStyle(style);
        this.pointVector.getSource().addFeature(feature_Point);
        let center = [Number(pointLonLat.lon), Number(pointLonLat.lat)];
        let center = [Number(pointArray[0]), Number(pointArray[1])];
        let view = this.map.getView();
        view.setZoom(16);
        view.animate({
@@ -392,6 +397,13 @@
      _this.tipPosition.w = x + n;
      _this.tipPosition.h = y + m;
    },
    startAdd(routeRange){
      if (routeRange.startsWith("LINESTRING")){
        this.addLineDraw(routeRange)
      }else {
        this.addPoint(routeRange)
      }
    }
  },
  mounted() {
    this.createMap()

 src/views/security/security.vue

@@ -32,7 +32,7 @@
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/security/security";
  import {getPage, getDetail, add, update, remove} from "@/api/security/security";
  import {mapGetters} from "vuex";

  export default {
@@ -81,6 +81,12 @@
            {
              label: "活动内容",
              prop: "content",
            },
            {
              label: "位置",
              prop: "position",
              type: "input",
              hide:true
            },
          ]
        },
@@ -207,7 +213,7 @@
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        getPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;

 src/views/securityManage/securityManage.vue

@@ -27,15 +27,34 @@
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{row,index}" slot="menu">
        <el-button  type="text"
                    size="small"
                    icon="el-icon-view"
                    @click="handleDetail(row)">详情
        </el-button>
      </template>
    </avue-crud>

    <el-drawer
      title="地图详情"
      :visible.sync="isDetail"
      :append-to-body="true"
      size="60%"
      direction="rtl"
      :before-close="handleClose">
      <map-box v-if="isDetail" :is-detail="isDetail" :route-range="routeRange"></map-box>
    </el-drawer>
  </basic-container>
</template>

<script>
  import {getPage, getDetails, add, update, remove} from "@/api/securityManage/securityManage";
  import {mapGetters} from "vuex";
  import MapBox from "@/components/map/mapBox";

  export default {
    components: {MapBox},
    data() {
      return {
        form: {},
@@ -124,7 +143,9 @@
            },
          ]
        },
        data: []
        data: [],
        isDetail:false,
        routeRange:"",
      };
    },
    computed: {
@@ -211,6 +232,10 @@
            this.$refs.crud.toggleSelection();
          });
      },
      handleDetail(row){
        this.routeRange = row.position
        this.isDetail = true
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetails(this.form.id).then(res => {