diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/controller/ChannelController.java b/src/main/java/com/genersoft/iot/vmp/gb28181/controller/ChannelController.java
index d7d3bd5a6..2a9a09f71 100755
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/controller/ChannelController.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/controller/ChannelController.java
@@ -518,4 +518,6 @@ public class ChannelController {
             return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
         }
     }
+
+
 }
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/dao/GroupMapper.java b/src/main/java/com/genersoft/iot/vmp/gb28181/dao/GroupMapper.java
index 365d2f9f8..81a7721cc 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/dao/GroupMapper.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/dao/GroupMapper.java
@@ -314,7 +314,8 @@ public interface GroupMapper {
             "    SUM(CASE WHEN coalesce( wdc.gb_status, wdc.status) = 'ON' THEN 1 ELSE 0 END) AS onlineCount" +
             " FROM " +
             "    wvp_device_channel wdc " +
-            " where coalesce( wdc.gb_parent_id, wdc.parent_id) in " +
+            " where wdc.channel_type = 0 AND wdc.data_type != 2 AND (wdc.gb_ptz_type is null ||  ( wdc.gb_ptz_type != 98 && wdc.gb_ptz_type != 99)) " +
+            " AND coalesce( wdc.gb_parent_id, wdc.parent_id) in " +
             " <foreach collection='groupList'  item='item'  open='(' separator=',' close=')' > #{item.deviceId}</foreach>" +
             " GROUP BY coalesce(wdc.gb_parent_id, wdc.parent_id)" +
             "</script>")
diff --git a/src/main/java/com/genersoft/iot/vmp/web/custom/conf/CachedBodyHttpServletRequest.java b/src/main/java/com/genersoft/iot/vmp/web/custom/conf/CachedBodyHttpServletRequest.java
index 824745cda..a952d2f0c 100644
--- a/src/main/java/com/genersoft/iot/vmp/web/custom/conf/CachedBodyHttpServletRequest.java
+++ b/src/main/java/com/genersoft/iot/vmp/web/custom/conf/CachedBodyHttpServletRequest.java
@@ -121,3 +121,4 @@ public class CachedBodyHttpServletRequest extends HttpServletRequestWrapper {
     }
 }
 
+
diff --git a/src/main/resources/配置详情.yml b/src/main/resources/配置详情.yml
index 22868f195..f9ae606a0 100644
--- a/src/main/resources/配置详情.yml
+++ b/src/main/resources/配置详情.yml
@@ -139,6 +139,10 @@ jt1078:
     #[可选] 设备鉴权的密码
     password: admin123
 
+sy:
+  enable: false
+  # 云台控制开始到结束的时间间隔(毫秒)
+  ptz-control-time-interval: 300
 
 #zlm 默认服务器配置
 media:
diff --git a/web/src/views/common/MapComponent.vue b/web/src/views/common/MapComponent.vue
index a0c505aca..0e882355d 100755
--- a/web/src/views/common/MapComponent.vue
+++ b/web/src/views/common/MapComponent.vue
@@ -148,50 +148,82 @@ export default {
         this.$emit('zoomChange', olMap.getView().getZoom())
       })
     },
-    addVectorTileLayer(tileUrl){
+    addVectorTileLayer(tileUrl, clickEvent, errorEvent){
       let source = new VectorTileSource({
-
         format: new MVT(),
         url: tileUrl
       })
+
       let layer = new VectorTileLayer({
         source: source,
-        style: {
-          // 必须提供 style 配置，可以是对象或函数
-          'circle-radius': 4,
-          'circle-fill-color': 'red',
-          'circle-stroke-color': 'white',
-          'circle-stroke-width': 0.5
-          // 'icon-src': 'static/images/gis/sprite.png',
-          // 'icon-width': 120,
-          // 'icon-height': 40,
-          // 'icon-size': [40, 40],
-          // 'icon-anchor': [0.5, 1],
-          // 'icon-offset-origin': 'bottom-left',
-          // 'icon-offset': [
-          //   'match',
-          //   ['get', 'status'],
-          //   'ON',
-          //   [0, 0],
-          //   'OFF',
-          //   [40, 0],
-          //   'checked',
-          //   [80, 0],
-          //   [120, 60]
-          // ]
+        style: function(feature) {
+          let status = feature.properties_.gbStatus
+          if (status === 'ON') {
+            return new Style({
+              image: new Icon({
+                anchor: [0.5, 1],
+                crossOrigin: 'Anonymous',
+                src: 'static/images/gis/camera1.png',
+                opacity: 1
+              })
+            })
+          }else if (status === 'OFF'){
+            return new Style({
+              image: new Icon({
+                anchor: [0.5, 1],
+                crossOrigin: 'Anonymous',
+                src: 'static/images/gis/camera1-offline.png',
+                opacity: 1
+              })
+            })
+          }
         }
+        // style: {
+        //   // 必须提供 style 配置，可以是对象或函数
+        //   'circle-radius': 4,
+        //   'circle-fill-color': 'red',
+        //   'circle-stroke-color': 'white',
+        //   'circle-stroke-width': 0.5
+        //   // 'icon-src': 'static/images/gis/sprite.png',
+        //   // 'icon-width': 120,
+        //   // 'icon-height': 40,
+        //   // 'icon-size': [40, 40],
+        //   // 'icon-anchor': [0.5, 1],
+        //   // 'icon-offset-origin': 'bottom-left',
+        //   // 'icon-offset': [
+        //   //   'match',
+        //   //   ['get', 'status'],
+        //   //   'ON',
+        //   //   [0, 0],
+        //   //   'OFF',
+        //   //   [40, 0],
+        //   //   'checked',
+        //   //   [80, 0],
+        //   //   [120, 60]
+        //   // ]
+        // }
       })
       olMap.addLayer(layer)
-      layer.on('click', (event) => {
-        console.log(event)
-        if (event.features.length > 0) {
-          const items = []
-          for (let i = 0; i < event.features.length; i++) {
-            items.push(event.features[i].customData)
+      if (clickEvent) {
+        layer.on('click', (event) => {
+          console.log(event)
+          if (event.features.length > 0) {
+            const items = []
+            for (let i = 0; i < event.features.length; i++) {
+              items.push(event.features[i].properties_)
+            }
+            clickEvent(items)
           }
-          console.log(items)
-        }
-      })
+        })
+      }
+      if (errorEvent) {
+        source.on('tileloaderror', (event) => {
+          console.log(event)
+          errorEvent(event)
+        })
+      }
+
+      return layer
     },
     setCenter(point) {
 
@@ -708,6 +740,9 @@ export default {
         source.clear(true)
         olMap.removeLayer(vectorLayer)
       })
+    },
+    getCoordSys(){
+      return this.mapTileList[this.mapTileIndex].coordinateSystem
     }
   }
 }
diff --git a/web/src/views/common/MapComponent_bak.vue b/web/src/views/common/MapComponent_bak.vue
new file mode 100755
index 000000000..738d224dc
--- /dev/null
+++ b/web/src/views/common/MapComponent_bak.vue
@@ -0,0 +1,807 @@
+<template>
+  <div id="mapContainer" ref="mapContainer" style="width: 100%;height: 100%;" />
+</template>
+
+<script>
+import 'ol/ol.css'
+import Map from 'ol/Map'
+import OSM from 'ol/source/OSM'
+import XYZ from 'ol/source/XYZ'
+import VectorSource from 'ol/source/Vector'
+import Tile from 'ol/layer/Tile'
+import VectorLayer from 'ol/layer/Vector'
+import LayerGroup from 'ol/layer/Group'
+import MVT from 'ol/format/MVT.js'
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import WebGLVectorTileLayer from 'ol/layer/WebGLVectorTile.js'
+import VectorTileSource from 'ol/source/VectorTile.js'
+import WebGLVectorLayer from 'ol/layer/WebGLVector'
+import Style from 'ol/style/Style'
+import Stroke from 'ol/style/Stroke'
+import Icon from 'ol/style/Icon'
+import View from 'ol/View'
+import Feature from 'ol/Feature'
+import Overlay from 'ol/Overlay'
+import { Point, LineString } from 'ol/geom'
+import { get as getProj } from 'ol/proj'
+import { containsCoordinate } from 'ol/extent'
+import { defaults as defaultInteractions } from 'ol/interaction'
+import Draw, { createBox } from 'ol/interaction/Draw'
+import DragInteraction from './map/DragInteraction'
+import { fromLonLat, toLonLat } from './map/TransformLonLat'
+
+import { v4 } from 'uuid'
+import { getUid } from 'ol'
+import {Fill} from "ol/style";
+
+let olMap, tileLayer = null
+export default {
+  name: 'MapComponent',
+  props: [],
+  data() {
+    return {
+      overlayId: null,
+      dragInteraction: new DragInteraction(),
+      mapTileList: [],
+      mapTileIndex: 0
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+
+  },
+  mounted() {
+
+  },
+  destroyed() {
+  },
+  methods: {
+    init() {
+      this.$store.dispatch('server/getMapConfig')
+        .then(mapConfigList => {
+          if (mapConfigList.length === 0) {
+           if (window.mapParam.tilesUrl) {
+             this.mapTileList.push({
+               tilesUrl: window.mapParam.tilesUrl,
+               coordinateSystem: window.mapParam.coordinateSystem
+             })
+           }
+          }else {
+            this.mapTileList = mapConfigList
+          }
+          this.initMap()
+      })
+    },
+    initMap(){
+      let center = fromLonLat([116.41020, 39.915119])
+      window.coordinateSystem = this.mapTileList[this.mapTileIndex].coordinateSystem
+      if (window.mapParam.center) {
+        center = fromLonLat(window.mapParam.center)
+      }
+      const view = new View({
+        center: center,
+        zoom: window.mapParam.zoom || 10,
+        projection: this.projection,
+        maxZoom: window.mapParam.maxZoom || 19,
+        minZoom: window.mapParam.minZoom || 1
+      })
+
+      if (this.mapTileList.length > 0 && this.mapTileList[this.mapTileIndex].tilesUrl) {
+        tileLayer = new Tile({
+          source: new XYZ({
+            projection: getProj('EPSG:3857'),
+            wrapX: false,
+            tileSize: 256 || window.mapParam.tileSize,
+            url: this.mapTileList[this.mapTileIndex].tilesUrl
+          })
+        })
+        console.log(4444)
+        console.log(this.mapTileList[this.mapTileIndex].tilesUrl)
+      } else {
+        tileLayer = new Tile({
+          preload: 4,
+          source: new OSM()
+        })
+      }
+      olMap = new Map({
+        interactions: defaultInteractions().extend([this.dragInteraction]),
+        target: this.$refs.mapContainer, // 容器ID
+        layers: [tileLayer], // 默认图层
+        view: view, // 视图
+        controls: [ // 控件
+        ]
+      })
+      // olMap.addControl(new ZoomSlider({
+      //   className: 'zoom-slider'
+      // }))
+      olMap.once('loadend', event => {
+        this.$emit('loaded')
+      })
+      olMap.on('click', event => {
+        let features = {}
+        let layers = {}
+        console.log(event)
+        // 单个元素事件传递
+        olMap.forEachFeatureAtPixel(event.pixel, (featureAtPixel, layerAtPixel) => {
+          console.log(4444)
+          if (layerAtPixel) {
+            let ol_uid = 'key' + getUid(layerAtPixel)
+            layers[ol_uid] = layerAtPixel
+            if (Object.hasOwn(features, ol_uid)) {
+              features[ol_uid].push(featureAtPixel)
+            } else {
+              features[ol_uid] = new Array(featureAtPixel)
+            }
+          }
+        })
+        // 遍历图层，传递事件
+        for (const key in layers) {
+          if (Object.hasOwn(layers, key)) {
+            var layer = layers[key]
+            layer.dispatchEvent({ type: 'click', event: event, features: features[key], outParam: { layersCount: Object.keys(layers).length } });
+          }
+        }
+        features = {}
+        layer = {}
+      })
+      olMap.getView().on('change:resolution', () => {
+        this.$emit('zoomChange', olMap.getView().getZoom())
+      })
+    },
+    addVectorTileLayer(tileUrl, clickEvent){
+      let source = new VectorTileSource({
+        format: new MVT(),
+        url: tileUrl
+      })
+
+      const webglStyle = {
+        // Example layer names — adjust to actual layer names from your tileset:
+        // 'poi', 'places', 'points', 'place_label' etc.
+        // For layers that are not points we leave undefined so they won't be drawn (or you can omit them).
+        'poi': {
+          // Only draw circles for point geometries
+          symbol: {
+            symbolType: 'circle',
+            // color: rgba in 0..1 range => red color with full opacity
+            color: [1.0, 0.0, 0.0, 1.0],
+            // radius in pixels
+            radius: 4,
+            // optional outline stroke for visibility (rgba)
+            stroke: {
+              color: [1, 1, 1, 0.6],
+              width: 0.5
+            }
+          }
+        },
+        'places': {
+          symbol: {
+            symbolType: 'circle',
+            color: [1.0, 0.0, 0.0, 1.0],
+            radius: 4
+          }
+        },
+        'points': {
+          symbol: {
+            symbolType: 'circle',
+            color: [1.0, 0.0, 0.0, 1.0],
+            radius: 4
+          }
+        }
+        // If your tileset uses different layer names, add them here with the same circle symbol.
+      };
+
+      let layer = new WebGLVectorTileLayer({
+        source: source,
+        declutter: false,
+        disableHitDetection: true,
+        // style: function(feature) {
+        //   let status = feature.properties_.gbStatus
+        //   if (status === 'ON') {
+        //     return new Style({
+        //       image: new Icon({
+        //         anchor: [0.5, 1],
+        //         crossOrigin: 'Anonymous',
+        //         src: 'static/images/gis/camera1.png',
+        //         opacity: 1
+        //       })
+        //     })
+        //   }else if (status === 'OFF'){
+        //     return new Style({
+        //       image: new Icon({
+        //         anchor: [0.5, 1],
+        //         crossOrigin: 'Anonymous',
+        //         src: 'static/images/gis/camera1-offline.png',
+        //         opacity: 1
+        //       })
+        //     })
+        //   }
+        // }
+        // style: webglStyle
+        style: {
+          // 必须提供 style 配置，可以是对象或函数
+          // 'circle-radius': 4,
+          // 'circle-fill-color': 'red',
+          // 'circle-stroke-color': 'white',
+          // 'circle-stroke-width': 0.5
+          'icon-src': 'static/images/gis/sprite.png',
+          'icon-width': 120,
+          'icon-height': 40,
+          'icon-size': [40, 40],
+          'icon-anchor': [0.5, 1],
+          'icon-offset-origin': 'bottom-left',
+          'icon-offset': [0, 0]
+          // 'icon-offset': [
+          //   'match',
+          //   ['get', 'status'],
+          //   'ON',
+          //   [0, 0],
+          //   'OFF',
+          //   [40, 0],
+          //   'checked',
+          //   [80, 0],
+          //   [120, 60]
+          // ]
+        }
+      })
+      olMap.addLayer(layer)
+      if (clickEvent) {
+        layer.on('click', (event) => {
+          console.log(event)
+          if (event.features.length > 0) {
+            const items = []
+            for (let i = 0; i < event.features.length; i++) {
+              items.push(event.features[i].properties_)
+            }
+            clickEvent(items)
+          }
+        })
+      }
+
+    },
+    setCenter(point) {
+
+    },
+    getCenter() {
+      return toLonLat(olMap.getView().getCenter())
+    },
+    getZoom() {
+      return olMap.getView().getZoom()
+    },
+    zoomIn() {
+      let zoom = olMap.getView().getZoom()
+      if (zoom >= olMap.getView().getMaxZoom()) {
+        return
+      }
+      olMap.getView().animate({
+        zoom: Math.trunc(zoom) + 1,
+        duration: 600
+      })
+    },
+    zoomOut() {
+      let zoom = olMap.getView().getZoom()
+      if (zoom <= olMap.getView().getMinZoom()) {
+        return
+      }
+      olMap.getView().animate({
+        zoom: Math.trunc(zoom) - 1,
+        duration: 400
+      })
+    },
+    centerAndZoom(point, zoom, callback) {
+      var zoom_ = olMap.getView().getZoom()
+      zoom = zoom || zoom_
+      var duration = 600
+      olMap.getView().setCenter(fromLonLat(point))
+      olMap.getView().animate({
+        zoom: zoom,
+        duration: duration
+      })
+    },
+    coordinateInView: function(point) {
+      return containsCoordinate(olMap.getView().calculateExtent(), fromLonLat(point))
+    },
+    panTo(point, zoom, endCallback) {
+      const duration = 1500
+      var coordinate = fromLonLat(point)
+      if (containsCoordinate(olMap.getView().calculateExtent(), coordinate)) {
+        olMap.getView().setCenter(coordinate)
+        if (zoom !== olMap.getView().getZoom()) {
+          olMap.getView().setZoom(zoom)
+        }
+        if (endCallback) {
+          endCallback()
+        }
+        return
+      }
+
+      olMap.getView().cancelAnimations()
+      olMap.getView().animate({
+        center: coordinate,
+        duration: duration
+      })
+      olMap.getView().animate({
+        zoom: zoom -2,
+        duration: duration / 2
+      }, {
+        zoom: zoom || olMap.getView().getZoom(),
+        duration: duration / 2
+      })
+      setTimeout(endCallback, duration + 100)
+    },
+    fit(layer) {
+      const extent = layer.getSource().getExtent()
+      if (extent) {
+        olMap.getView().fit(extent, {
+          duration: 600,
+          padding: [100, 100, 100, 100]
+        })
+      }
+    },
+    openInfoBox(position, content, offset) {
+      if (this.overlayId !== null) {
+        this.closeInfoBox(this.overlayId)
+        this.overlayId = null
+      }
+      const id = v4()
+      // let infoBox = document.createElement('div')
+      // infoBox.setAttribute('id', id)
+      // infoBox.innerHTML = content
+      const overlay = new Overlay({
+        id: id,
+        autoPan: true,
+        autoPanAnimation: {
+          duration: 250
+        },
+        element: content,
+        positioning: 'bottom-center',
+        offset: offset,
+        position: fromLonLat(position)
+        // className:overlayStyle.className
+      })
+      olMap.addOverlay(overlay)
+      this.overlayId = id
+      return id
+    },
+    closeInfoBox(id) {
+      let overlay = olMap.getOverlayById(id)
+      if (overlay) {
+        olMap.removeOverlay(overlay)
+      }
+      let element = document.getElementById(id)
+      if (element) {
+        element.remove()
+      }
+    },
+    /**
+     * 添加图层， 数据坐标系由控件内完成，输入和输出永远是wgs84
+     * [
+     *     {
+     *
+     *         position: [119.1212,45,122],
+     *             image: {
+     *                 src:"/images/123.png",
+     *                 anchor: [0.5, 0.5]
+     *
+     *             }
+     *     }
+     *
+     * ]
+     * @param data
+     * @param clickEvent
+     * @param option
+     */
+    addPointLayer(data, clickEvent, option) {
+      let vectorLayer = this.createPointLayer(data, clickEvent, option)
+      olMap.addLayer(vectorLayer)
+      return vectorLayer
+    },
+    createPointLayer(data, clickEvent, option){
+      console.log(444)
+      console.log(data)
+      const features = []
+      let maxZoom = (option && option.maxZoom) ? option.maxZoom : olMap.getView().getMaxZoom()
+      let minZoom = (option && option.minZoom) ? option.minZoom : olMap.getView().getMinZoom()
+      let declutter = option && option.declutter
+      if (data.length > 0) {
+        for (let i = 0; i < data.length; i++) {
+          const feature = new Feature(new Point(fromLonLat(data[i].position)))
+          feature.setId(data[i].id)
+          feature.customData = data[i].data
+          feature.setProperties({
+            status: data[i].status
+          })
+          features.push(feature)
+        }
+      }
+      const source = new VectorSource()
+      if (features.length > 0) {
+        source.addFeatures(features)
+      }
+      const vectorLayer = new WebGLVectorLayer({
+        source: source,
+        maxZoom: maxZoom,
+        minZoom: minZoom,
+        style: {
+          // 必须提供 style 配置，可以是对象或函数
+          // 'circle-radius': 10,
+          // 'circle-fill-color': 'red',
+          // 'circle-stroke-color': 'white',
+          // 'circle-stroke-width': 0.5
+          'icon-src': 'static/images/gis/sprite.png',
+          'icon-width': 120,
+          'icon-height': 40,
+          'icon-size': [40, 40],
+          'icon-anchor': [0.5, 1],
+          'icon-offset-origin': 'bottom-left',
+          'icon-offset': [
+            'match',
+            ['get', 'status'],
+            'ON',
+            [0, 0],
+            'OFF',
+            [40, 0],
+            'checked',
+            [80, 0],
+            [120, 60]
+          ]
+        }
+      })
+      if (clickEvent && typeof clickEvent === 'function') {
+        vectorLayer.on('click', (event) => {
+          console.log(event)
+          if (event.features.length > 0) {
+            const items = []
+            for (let i = 0; i < event.features.length; i++) {
+              items.push(event.features[i].customData)
+            }
+            clickEvent(items)
+          }
+        })
+      }
+      return vectorLayer
+
+    },
+    createPointLayer2(data, clickEvent, option){
+      if (data.length > 0) {
+        const features = []
+        let maxZoom = (option && option.maxZoom) ? option.maxZoom : olMap.getView().getMaxZoom()
+        let minZoom = (option && option.minZoom) ? option.minZoom : olMap.getView().getMinZoom()
+        let declutter = option && option.declutter
+
+        for (let i = 0; i < data.length; i++) {
+          const feature = new Feature(new Point(fromLonLat(data[i].position)))
+          feature.setId(data[i].id)
+          feature.customData = data[i].data
+          const style = new Style()
+          style.setImage(new Icon({
+            anchor: data[i].image.anchor,
+            crossOrigin: 'Anonymous',
+            src: data[i].image.src,
+            opacity: 1
+          }))
+          feature.setStyle(style)
+          features.push(feature)
+        }
+        const source = new VectorSource()
+        source.addFeatures(features)
+        const vectorLayer = new VectorLayer({
+          source: source,
+          renderMode: 'image',
+          declutter: declutter,
+          maxZoom: maxZoom,
+          minZoom: minZoom
+        })
+        if (clickEvent && typeof clickEvent === 'function') {
+          vectorLayer.on('click', (event) => {
+
+            if (event.features.length > 0) {
+              const items = []
+              for (let i = 0; i < event.features.length; i++) {
+                items.push(event.features[i].customData)
+              }
+              clickEvent(items)
+            }
+          })
+        }
+
+        return vectorLayer
+      }
+    },
+    hasFeature (layer, id) {
+      if (layer instanceof LayerGroup) {
+        // 目前LayerGroup的情况肯定含有这个
+        return true
+      }else {
+        if (layer.getSource().getFeatureById(id)) {
+          return true
+        }
+      }
+      return false
+    },
+    addFeature (layer, data) {
+
+      const feature = new Feature(new Point(fromLonLat(data.position)))
+      feature.setId(data.id)
+      feature.customData = data.data
+      feature.setProperties({
+        status: data.status
+      })
+      layer.getSource().addFeature(feature)
+    },
+    updatePointLayer(layer, data, postponement) {
+      console.log(data)
+      layer.getSource().clear(true)
+      if (!data || data.length == 0) {
+        return
+      }
+      const features = []
+      for (let i = 0; i < data.length; i++) {
+        const feature = new Feature(new Point(fromLonLat(data[i].position)))
+        feature.setId(data[i].id)
+        feature.customData = data[i].data
+        feature.setProperties({
+          status: data[i].status
+        })
+        features.push(feature)
+      }
+      layer.getSource().addFeatures(features)
+      if (postponement) {
+        olMap.removeLayer(layer)
+        setTimeout(() => {
+          olMap.addLayer(layer)
+        }, 100)
+      }
+      return layer
+    },
+    addPointLayerGroup(data, clickEvent) {
+
+      let keys = Array.from(data.keys())
+
+      let layers = []
+      for (let i = 0; i < keys.length; i++) {
+        let zoom = keys[i]
+        console.log(zoom)
+        let vectorLayer = this.createPointLayer(data.get(zoom), clickEvent, {
+          minZoom : zoom
+        })
+        vectorLayer.setProperties('layerId', zoom)
+        if (vectorLayer) {
+          layers.push(vectorLayer)
+        }
+      }
+      let groupLayer = new LayerGroup({
+        layers: layers
+      })
+      olMap.addLayer(groupLayer)
+      return groupLayer
+    },
+    updatePointLayerGroup(layer, data, postponement) {
+
+    },
+
+    removeLayer(layer) {
+      olMap.removeLayer(layer)
+    },
+    clearLayer(layer) {
+      layer.getSource().clear(true)
+    },
+    setFeatureImageById(layer, featureId, image) {
+      let feature = layer.getSource().getFeatureById(featureId)
+      if (!feature) {
+        console.error('更改feature的图标时未找到图标')
+        return
+      }
+      let style = feature.getStyle()
+      style.setImage(new Icon({
+        anchor: image.anchor,
+        crossOrigin: 'Anonymous',
+        src: image.src
+      }))
+      feature.setStyle(style)
+      olMap.render()
+    },
+    setFeaturePositionById(layer, featureId, data) {
+      if (layer instanceof LayerGroup) {
+
+      }else {
+
+      }
+      let featureOld = layer.getSource().getFeatureById(featureId)
+      if (featureOld) {
+        layer.getSource().removeFeature(featureOld)
+      }
+
+      const feature = new Feature(new Point(fromLonLat(data.position)))
+      feature.setId(data.id)
+      feature.customData = data.data
+      feature.setProperties({
+        status: data.status
+      })
+      layer.getSource().addFeature(feature)
+    },
+
+    addLineLayer(positions) {
+      if (positions.length > 0) {
+        const points = []
+        for (let i = 0; i < positions.length; i++) {
+          points.push(fromLonLat(positions[i]))
+        }
+        const line = new LineString(points)
+        const lineFeature = new Feature(line)
+        lineFeature.setStyle(new Style({
+          stroke: new Stroke({
+            width: 4,
+            color: '#0c6d6a'
+          })
+        }))
+        const source = new VectorSource()
+        source.addFeature(lineFeature)
+        const vectorLayer = new VectorLayer({
+          source: source
+        })
+        olMap.addLayer(vectorLayer)
+        return vectorLayer
+      }
+    },
+    getCurrentCoordinateSystem() {
+      return this.mapTileList[this.mapTileIndex].coordinateSystem
+    },
+    changeMapTile(index) {
+      let center = this.getCenter()
+      let mapTileConfig = this.mapTileList[this.mapTileIndex]
+      this.mapTileIndex = index
+      window.coordinateSystem = this.mapTileList[this.mapTileIndex].coordinateSystem
+      tileLayer.getSource().setUrl(this.mapTileList[index].tilesUrl)
+      if (mapTileConfig.coordinateSystem !== this.mapTileList[this.mapTileIndex].coordinateSystem) {
+        // 发送通知
+        this.$emit('coordinateSystemChange', this.mapTileList[this.mapTileIndex].coordinateSystem)
+        // 修正地图的中心点
+        olMap.getView().setCenter(fromLonLat(center))
+      }
+    },
+    getZoomExtent(){
+      return [olMap.getView().getMinZoom(), olMap.getView().getMaxZoom()]
+    },
+    /**
+     * 根据距离计算经纬度差值，方便前端抽稀计算
+     * @param distance 距离， 单位：像素值
+     * @param zoom 地图层级，默认取值当前层级
+     */
+    computeDiff(distance, zoom) {
+      if (!distance) {
+        return []
+      }
+      let resolution
+      if (!zoom) {
+        resolution = olMap.getView().getResolution()
+      }else {
+        resolution = olMap.getView().getResolutionForZoom(zoom)
+      }
+      let diff = resolution * distance
+      return toLonLat([diff, diff])[0]
+
+
+      // let extent = olMap.getView().calculateExtent(olMap.getSize())
+      //
+      //
+      // let minLng = extent[0]
+      // let maxLng = extent[2]
+      // let minLat = extent[1]
+      // let maxLat = extent[3]
+      //
+      // let style = new Style({
+      //   stroke: new Stroke({
+      //     width: 1,
+      //     color: 'rgba(65,65,65,0.8)'
+      //   })
+      // })
+      // const source = new VectorSource()
+      // let lng = minLng
+      // while (lng <= maxLng) {
+      //
+      //   const points = [[lng, minLat], [lng, maxLat]]
+      //   const line = new LineString(points)
+      //   const lineFeature = new Feature(line)
+      //   lineFeature.setStyle(style)
+      //   source.addFeature(lineFeature)
+      //   lng += diff
+      // }
+      //
+      // let lat = minLat
+      // while (lat <= maxLat) {
+      //
+      //   const points = [[minLng, lat], [maxLng, lat]]
+      //   console.log(points)
+      //   const line = new LineString(points)
+      //   const lineFeature = new Feature(line)
+      //   lineFeature.setStyle(style)
+      //   source.addFeature(lineFeature)
+      //   lat += diff
+      // }
+      //
+      // const vectorLayer = new VectorLayer({
+      //   source: source
+      // })
+      // olMap.addLayer(vectorLayer)
+    },
+    startDrawBox(callback) {
+
+      const source = new VectorSource({ wrapX: false })
+
+      const vectorLayer = new VectorLayer({
+        source: source,
+        style: new Style({
+          fill: new Fill({
+            color: 'rgba(255, 97, 97, 0.24)'
+          }),
+          stroke: new Stroke({
+            color: 'rgba(255, 97, 97, 0.84)',
+            width: 0
+          })
+        })
+      })
+      olMap.addLayer(vectorLayer)
+      let draw = new Draw({
+        source: source,
+        type: 'Circle',
+        geometryFunction: createBox(),
+        style: new Style({
+          fill: new Fill({
+            color: 'rgba(255, 97, 97, 0.24)'
+          }),
+          stroke: new Stroke({
+            color: 'rgba(255, 97, 97, 0.84)',
+            width: 0
+          }),
+          freehand: true
+        })
+      })
+      olMap.addInteraction(draw)
+      // 添加事件
+      draw.on('drawstart', function (event) {
+        source.clear()
+      })
+      draw.on('drawend', function (event) {
+        let geometry = event.feature.getGeometry()
+        let extent = geometry.getExtent()
+        let min = toLonLat([extent[0], extent[1]])
+        let max = toLonLat([extent[2], extent[3]])
+
+        callback([min[0], min[1], max[0], max[1]])
+        draw.abortDrawing()
+        olMap.removeInteraction(draw)
+        source.clear(true)
+        olMap.removeLayer(vectorLayer)
+      })
+    },
+    getCoordSys(){
+      return this.mapTileList[this.mapTileIndex].coordinateSystem
+    }
+  }
+}
+</script>
+
+<style>
+#mapContainer .zoom-slider {
+  width: 14px;
+  height: 200px;
+  right: 20px;
+  bottom: 400px;
+  border-bottom: 1px #dfdfdf solid;
+  border-right: 1px #dfdfdf solid;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  border-radius: 3px;
+
+}
+#mapContainer .zoom-slider button {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  margin: 0;
+  background-color: #606266;
+}
+</style>
diff --git a/web/src/views/map/index.vue b/web/src/views/map/index.vue
index 2af411763..6b10e2b99 100755
--- a/web/src/views/map/index.vue
+++ b/web/src/views/map/index.vue
@@ -830,8 +830,28 @@ export default {
       })
     },
     addVectorTileLayer() {
-      let tileUrl = 'http://192.168.1.3:18080/api/common/channel/map/tile/{z}/{x}/{y}?geoCoordSys=GCJ02'
-      this.$refs.mapComponent.addVectorTileLayer(tileUrl)
+      let geoCoordSys = this.$refs.mapComponent.getCoordSys()
+      const baseUrl = window.baseUrl ? window.baseUrl : ''
+      let tileUrl = ((process.env.NODE_ENV === 'development') ? process.env.VUE_APP_BASE_API : baseUrl)
+        + `/api/common/channel/map/tile/{z}/{x}/{y}?geoCoordSys=${geoCoordSys}&accessToken=${this.$store.getters.token}`
+
+      let clientEvent = data => {
+        this.closeInfoBox()
+        this.$nextTick(() => {
+          this.showChannelInfo(data[0])
+          // if (data[0].edit) {
+          //   this.showEditInfo(data[0])
+          // }else {
+          //   this.showChannelInfo(data[0])
+          // }
+        })
+      }
+
+      let tileEvent = error => {
+        console.log(error)
+      }
+
+      let tileLayer = this.$refs.mapComponent.addVectorTileLayer(tileUrl, clientEvent, tileEvent)
     }
   }