位置选择

zengh

2021-07-20 eb6374fd3670ac6fec2725e5f3ccb708ea76f22c

位置选择

 public/img/jfd.png

 public/map/widgets/alertSecurity/AlertSecurity.js

@@ -198,57 +198,32 @@
      var oneId = that.getQueryStringByKey('oneId');
      var baid = that.getQueryStringByKey('baid');

      that.addPoint(that.addEntitys, lgtd, lttd, './images/jingbaored.png');
      that.createEntitys(that.addEntitys, lgtd, lttd, './images/real-time-callPolice-opcity.png');
      that.createTwinkleEntitys(that.addEntitys, lgtd, lttd, './images/real-time-callPolice-opcity.png');
      // console.log(deptId,153454)
      $.ajax({
        url: "http://s16s652780.51mypc.cn/api/blade-user/pages?current=1&size=9999&work_status=&deptId=" + deptId,
        type: 'get',
        dataType: 'JSON',
        success: function (res) {
      if (baid != null && baid != "") {
        $.ajax({
          url: "http://localhost:82/routeIn/routein/selectList?id=" + baid,
          type: 'post',
          dataType: 'JSON',
          success: function (res) {
            var entityData = '';
            var entityArr = [];
            entityData = res.data[0].routeInfo.match(/\(([^)]*)\)/);

          // console.log(res.data.records, oneId)
            // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
            if (entityData && entityData != '') {
              entityData = entityData[1].split(',');

          res.data.records.forEach((item) => {
            if (item.id == oneId) {
              that.addPoints(that.addEntitys, item.jd, item.wd, './images/security.png')
            }
          });
              for (var j = 0; j < entityData.length; j++) {
                entityArr.push([Number(entityData[j].split(' ')[0]), Number(entityData[j].split(' ')[1])]);

          res.data.records.forEach((item) => {
            if (item.roleName == "处警员" && item.id != oneId) {
              that.addPoints(that.addEntitys, item.jd, item.wd, './images/security.png')
            }
          });
          if (baid != null && baid != ""){
            $.ajax({
              url: "http://localhost:82/routeIn/routein/selectList?id=" + baid,
              type: 'post',
              dataType: 'JSON',
              success: function (res) {
                var entityData = '';
                var entityArr = [];
                entityData = res.data[0].routeInfo.match(/\(([^)]*)\)/);

                // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
                if (entityData && entityData != '') {
                  entityData = entityData[1].split(',');

                  for (var j = 0; j < entityData.length; j++) {
                    entityArr.push([Number(entityData[j].split(' ')[0]), Number(entityData[j].split(' ')[1])]);

                    // entityArr.push([Number(b[0]), Number(b[1])]);
                  }

                }
                that.addPolygonAll(that.addEntitys, entityArr);

                // entityArr.push([Number(b[0]), Number(b[1])]);
              }
            })

            }
            that.addPolygonAll(that.addEntitys, entityArr);
            that._map.centerAndZoom(new esri.geometry.Point(entityArr[Math.ceil(entityArr.length / 2 )][0],entityArr[Math.ceil(entityArr.length / 2 )][1], new esri.SpatialReference({ wkid: 4326 })), 14);
          }
        }
      });
        })
      }

    },
    close: function () {

 src/components/map/main.vue

@@ -7,18 +7,18 @@
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
    <div id="map"
         style="height: 100%"></div>
  <div id="map"
       style="height: 100%"></div>
</template>
<script>
import OLCesium from 'olcs/OLCesium.js'
import 'ol/ol.css'
import OlView from 'ol/View.js'
import XYZ from 'ol/source/XYZ'
import OlLayerTile from 'ol/layer/Tile.js'
import OlMap from 'ol/Map.js'
  import OLCesium from 'olcs/OLCesium.js'
  import 'ol/ol.css'
  import OlView from 'ol/View.js'
  import XYZ from 'ol/source/XYZ'
  import OlLayerTile from 'ol/layer/Tile.js'
  import OlMap from 'ol/Map.js'

import {
  import {
    // eslint-disable-next-line no-unused-vars
    defaults as OlControlDefaults,
    defaults,
@@ -42,167 +42,193 @@
    ZoomToExtent,
    Rotate

} from 'ol/control.js'
  } from 'ol/control.js'

import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
  import VectorLayer from 'ol/layer/Vector'
  import VectorSource from 'ol/source/Vector'

import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import LineString from 'ol/geom/LineString.js'
import { Icon, Style, Fill, Stroke } from 'ol/style.js'
  import Feature from 'ol/Feature.js'
  import Point from 'ol/geom/Point.js'
  import LineString from 'ol/geom/LineString.js'
  import {Icon, Style, Fill, Stroke} from 'ol/style.js'

export default {
  export default {
    name: 'Map',
    data () {
        return {
            gunAddlayer: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
            peopleAddlayer: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
            carAddlayer: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
            peopleLineAddlayer: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
        }
    data() {
      return {
        gunAddlayer: new VectorLayer({ // 图标图层
          zIndex: 22,
          source: new VectorSource()
        }),
        peopleAddlayer: new VectorLayer({ // 图标图层
          zIndex: 22,
          source: new VectorSource()
        }),
        carAddlayer: new VectorLayer({ // 图标图层
          zIndex: 22,
          source: new VectorSource()
        }),
        peopleLineAddlayer: new VectorLayer({ // 图标图层
          zIndex: 22,
          source: new VectorSource()
        }),
      }
    },
    mounted () {
        const ol2d = new OlMap({
            layers: [
                new OlLayerTile({
                    zIndex: 4,
                    title: '影像',
                    source: new XYZ({
                        url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 行政区划
                    })
                }),
                new OlLayerTile({
                    zIndex: 5,
                    title: '道路+中文注记',
                    source: new XYZ({
                        url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
                    })
                })
            ],

            // 注意地图控件的写法
            controls: defaults().extend([
                // new FullScreen(),
                // new ScaleLine(),
                // new MousePosition(),
                // new Rotate(),
                // new Attribution()
            ]),
            target: 'map',
            view: new OlView({
                center: [0, 0],
                zoom: 2,
                projection: 'EPSG:4326'
    mounted() {
      const ol2d = new OlMap({
        layers: [
          new OlLayerTile({
            zIndex: 4,
            title: '影像',
            source: new XYZ({
              url: 'https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal' // 行政区划
            })
          }),
          // new OlLayerTile({
          //   zIndex: 5,
          //   title: '道路+中文注记',
          //   source: new XYZ({
          //     url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
          //   })
          // })
        ],

        // 注意地图控件的写法
        controls: defaults().extend([
          // new FullScreen(),
          // new ScaleLine(),
          // new MousePosition(),
          // new Rotate(),
          // new Attribution()
        ]),
        target: 'map',
        view: new OlView({
          center: [0, 0],
          zoom: 2,
          projection: 'EPSG:4326'
        })
        window.ol2d = ol2d
      })
      window.ol2d = ol2d

        var view = ol2d.getView()
      var view = ol2d.getView()

        view.setCenter([115.85883507433789, 28.708432053474827])
      // view.setCenter([115.85883507433789, 28.708432053474827])
      //
      // view.setZoom(13)

        view.setZoom(13)
      const ol3d = new OLCesium({map: window.ol2d})
      window.ol3d = ol3d

        const ol3d = new OLCesium({ map: window.ol2d })
        window.ol3d = ol3d

        ol2d.addLayer(this.gunAddlayer)
        ol2d.addLayer(this.peopleAddlayer)
        ol2d.addLayer(this.carAddlayer)
        ol2d.addLayer(this.peopleLineAddlayer)
        this.addLines()
      ol2d.addLayer(this.gunAddlayer)
      ol2d.addLayer(this.peopleAddlayer)
      ol2d.addLayer(this.carAddlayer)
      ol2d.addLayer(this.peopleLineAddlayer)
      // this.addLines()
    },
    methods: {
        init3D (val) {
            window.ol3d.setEnabled(val)
        },
        addEntitys (item, icon, scale, name, type) {
            const iconFeature = new Feature({
                geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
                name: name,
                attributes: item
            })
      init3D(val) {
        window.ol3d.setEnabled(val)
      },
      addEntitys(item, icon, scale, name, type) {
        const iconFeature = new Feature({
          geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
          name: name,
          attributes: item
        })

            const iconStyle = new Style({
                // text: new Text({ // 字体, 未成功, 浪费许多时间
                //   font: 'Normal ' + 12 + 'px ' + 'iconfont',
                //   text: "\e645",
                //   fill: new Fill({ color: "green" }),
                // }),
        const iconStyle = new Style({
          // text: new Text({ // 字体, 未成功, 浪费许多时间
          //   font: 'Normal ' + 12 + 'px ' + 'iconfont',
          //   text: "\e645",
          //   fill: new Fill({ color: "green" }),
          // }),

                image: new Icon({
                    scale: scale,
                    opacity: 1,
                    src: icon
                    // src: require('../../assets/Mark.png')
                })
          image: new Icon({
            scale: scale,
            opacity: 1,
            src: icon
            // src: require('../../assets/Mark.png')
          })

                // new CircleStyle({ // 普通样式
                //   radius: 6,
                //   fill: new Fill({
                //     color: 'rgba(200, 155, 155, 0.8)'
                //   }),
                //   stroke: new Stroke({
                //     color: 'black',
                //     width: 0.3,
                //   })
                // }),
            })
          // new CircleStyle({ // 普通样式
          //   radius: 6,
          //   fill: new Fill({
          //     color: 'rgba(200, 155, 155, 0.8)'
          //   }),
          //   stroke: new Stroke({
          //     color: 'black',
          //     width: 0.3,
          //   })
          // }),
        })

            iconFeature.setStyle(iconStyle)
        iconFeature.setStyle(iconStyle)

            this[type].getSource().addFeature(iconFeature)
        },
        this[type].getSource().addFeature(iconFeature)
      },

        addLines () {
      addLines(ringId) {
        var that = this;
        if (ringId != null && ringId != "") {
          $.ajax({
            url: "api/routeIn/routein/selectList",
            type: "post",
            data: {
              "id": ringId
            },
            dataType: 'JSON',
            success: function (data) {
              that.peopleLineAddlayer.getSource().clear()
              var entityData = '';
              var entityArr = [];
              entityData = data.data[0].routeInfo.match(/\(([^)]*)\)/);

            // 点坐标
            var lineCoords = [
              [115.87471898408013, 28.720924466928977],
              [115.87471898408013, 28.724163802651635],
              [115.87401037939081, 28.72456871961697],
              [115.87147964835748, 28.7246699488583],
              [115.86925260504815, 28.7246699488583],
              [115.86621572780817, 28.7246699488583],
              [115.8635837675335, 28.72578347051296]
              ];// 线里点的集合
              // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
              if (entityData && entityData != '') {
                entityData = entityData[1].split(',');

            // 要素
            // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
            var feature_LineString = new Feature({
                for (var j = 0; j < entityData.length; j++) {
                  entityArr.push([Number(entityData[j].split(' ')[0]), Number(entityData[j].split(' ')[1])]);
                }

              }


              var lineCoords = entityArr;// 线里点的集合

              var view = ol2d.getView()
              view.setCenter([lineCoords[Math.ceil(entityArr.length / 2 )][0], lineCoords[Math.ceil(entityArr.length / 2 )][1]])
              view.setZoom(14.5)

              // 要素
              // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
              var feature_LineString = new Feature({
                geometry: new LineString(lineCoords)
            });
              });


            feature_LineString.setStyle(new Style({
              feature_LineString.setStyle(new Style({
                //填充色
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                  color: 'rgba(255, 255, 255, 0.2)'
                }),
                //边线颜色
                stroke: new Stroke({
                    color: 'rgb(252, 94, 32)',
                    width: 5
                  color: 'rgb(252, 94, 32)',
                  width: 5
                })
            }))


            this.peopleLineAddlayer.getSource().addFeature(feature_LineString)

              }))
              that.peopleLineAddlayer.getSource().addFeature(feature_LineString)
            },
            error: function (data) {
              // 请求失败函数
              console.log(data);
            }
          });
        }


      }
    }
}
  }
</script>

 src/views/feedbackReport/feedbackReport.vue

@@ -189,6 +189,7 @@
            {
              label: "备注",
              prop: "result",
              span: 24,
              rules: [
                {
                  required: true,
@@ -330,6 +331,8 @@
          stime: row.stime,
          result: row.result,
          place: row.place,
          jd: row.jd,
          wd: row.wd,
        };
        if (row.images.length > 0) {
          var imageArr = row.images;
@@ -372,6 +375,8 @@
          stime: row.stime,
          result: row.result,
          place: row.place,
          jd: row.jd,
          wd: row.wd,
        };
        if (row.images.length > 0) {
          var imageArr = row.images;

 src/views/policeTracking/policeTracking.vue

@@ -419,7 +419,7 @@

    this.getReceivingAlarm();
    if (this.form.alarmType == "巡逻任务"){
      this.baseUrl = `/map/index.html?ISinit=1&openid=AlertSecurity&id=${this.form.id}&jd=${this.form.jd}&wd=${this.form.wd}&pid=${this.form.deptId}&deptId=${this.form.deptId}&oneId=${this.form.oneId}&baid=${this.form.baid}`;
      this.baseUrl = `/map/index.html?openid=AlertSecurity&id=${this.form.id}&jd=${this.form.jd}&wd=${this.form.wd}&pid=${this.form.deptId}&deptId=${this.form.deptId}&oneId=${this.form.oneId}&baid=${this.form.xllx}`;
    }else{
      this.baseUrl = `/map/index.html?ISinit=1&openid=AlertSecurity&id=${this.form.id}&jd=${this.form.jd}&wd=${this.form.wd}&pid=${this.form.deptId}&deptId=${this.form.deptId}&oneId=${this.form.oneId}`;
    }

 src/views/realTimePolice/real.vue

@@ -118,8 +118,8 @@
      </template>

      <template slot-scope="{type,disabled}" slot="xllxzsForm">
        <div style="width: 200px;height: 200px">
          <Map ref="modalForm" />
        <div class="mapClassMain" style="width: 860px;height: 400px">
          <Map ref="modalForm"/>
        </div>
      </template>

@@ -200,9 +200,8 @@
              dicUrl:
                "/api/blade-system/dict-biz/child-list?parentId=1356523651644043266",
              control: (val, form) => {
                if (val) {
                  debugger;
                }
                // if (val) {
                // }
                return {
                  text2: {
                    display: true,
@@ -368,6 +367,7 @@
              width: 96,
              search: true,
              slot: true,
              value: "0",
              searchPlaceholder: "请选择",
              prop: "jtype",
              type: "select",
@@ -424,10 +424,10 @@
              label: "路线展示",
              labelWidth: "0",
              prop: "xllxzs",
              className: "cityreal3",
              className: "mapClass",
              hide: true,
              display: true,
              formslot:true,
              formslot: true,
            },
          ],
        },
@@ -495,8 +495,10 @@
      "form.alarmType": {
        handler(val) {
          var xllx = this.findObject(this.option.column, "xllx");
          var xllxzs = this.findObject(this.option.column, "xllxzs");
          if (val === "巡逻任务") {
            xllx.display = true;
            xllxzs.display = true;
            xllx.rules = [
              {
                required: true,
@@ -506,11 +508,21 @@
            ];
          } else {
            xllx.display = false;
            xllxzs.display = false;
            xllx.rules = [];
          }
        },
        immediate: true,
      },
      "form.xllx":{
        handler(val) {
          if (val){
            this.getxllx(val)
          }

        },
        immediate: true,
      }
    },
    computed: {
      ...mapGetters(["permission", "flowRoutes"]),
@@ -533,10 +545,10 @@
    created() {
      this.dateTime = this.getDate();
    },
    mounted(){
    mounted() {
      var xb = JSON.parse(window.sessionStorage.getItem('sjsb'));
      var data = this.$route.query;
      if (xb == 1){
      if (xb == 1) {
        this.form = data;
        this.openAdd();
        window.sessionStorage.removeItem('sjsb');
@@ -579,6 +591,16 @@
            loading();
          }
        );
      },
      getxllx(val){
        var that = this;
        if (this.$refs.modalForm == undefined) {
          setTimeout(function () {
            that.$refs.modalForm.addLines(val);
          }, 1500)
        } else {
          that.$refs.modalForm.addLines(val);
        }
      },
      rowUpdate(row, index, done, loading) {
        var userId = JSON.parse(
@@ -1168,7 +1190,7 @@

      },
      //打开新增窗体
      openAdd(){
      openAdd() {
        this.$refs.crud.rowAdd();
      },

@@ -1220,6 +1242,14 @@
    width: 12%;
  }

  .mapClass div label {
    display: none;
  }

  .mapClassMain {
    padding-left: 25px !important;
  }

  .cityreal2 div label,
  .cityreal3 div label {
    display: none;

 src/views/wel/home.vue

@@ -36,7 +36,7 @@
                    <span> 保安员队伍 </span>
                  </div>
                  <div>
                    <div><img src="/img/ldz.png" alt="" /><span>25</span></div>
                    <div><img src="/img/jfd.png" alt="" /><span>25</span></div>
                    <span> 警务辅助队伍</span>
                  </div>
                </div>