支持标准矢量图层的创建和展示

pom.xml

@@ -29,6 +29,10 @@
                 <enabled>true</enabled>
             </releases>
         </repository>
+        <repository>
+            <id>ECC</id>
+            <url>https://maven.ecc.no/releases</url>
+        </repository>
     </repositories>
 
     <pluginRepositories>
@@ -392,6 +396,20 @@
             <version>1.78.1</version>
         </dependency>
 
+        <!-- mvt矢量瓦片库 -->
+        <dependency>
+            <groupId>no.ecc.vectortile</groupId>
+            <artifactId>java-vector-tile</artifactId>
+            <version>1.4.1</version>
+        </dependency>
+
+        <!-- JTS for geometry creation -->
+        <dependency>
+            <groupId>org.locationtech.jts</groupId>
+            <artifactId>jts-core</artifactId>
+            <version>1.18.2</version>
+        </dependency>
+
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-test</artifactId>

src/main/java/com/genersoft/iot/vmp/conf/GlobalResponseAdvice.java

@@ -38,6 +38,10 @@ public class GlobalResponseAdvice implements ResponseBodyAdvice<Object> {
             }
         }
 
+        if (selectedContentType.equals(MediaType.parseMediaType("application/x-protobuf"))) {
+            return body;
+        }
+
         if (body instanceof WVPResult) {
             return body;
         }

src/main/java/com/genersoft/iot/vmp/gb28181/controller/ChannelController.java

@@ -23,6 +23,10 @@ import io.swagger.v3.oas.annotations.tags.Tag;
 import jakarta.servlet.http.HttpServletRequest;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
 import org.springframework.util.Assert;
 import org.springframework.util.ObjectUtils;
 import org.springframework.web.bind.annotation.*;
@@ -498,6 +502,20 @@ public class ChannelController {
         channelService.resetLevel();
     }
 
+    @Operation(summary = "为地图提供标准的mvt图层", security = @SecurityRequirement(name = JwtUtils.HEADER))
+    @GetMapping(value = "/map/tile/{z}/{x}/{y}", produces = "application/x-protobuf")
+    @Parameter(name = "geoCoordSys", description = "地理坐标系， WGS84/GCJ02")
+    public ResponseEntity<byte[]> getTile(@PathVariable int z, @PathVariable int x, @PathVariable int y, String geoCoordSys){
 
-
+        try {
+            byte[] mvt = channelService.getTile(z, x, y, geoCoordSys);
+            HttpHeaders headers = new HttpHeaders();
+            headers.setContentType(MediaType.parseMediaType("application/x-protobuf"));
+            headers.setContentLength(mvt.length);
+            return new ResponseEntity<>(mvt, headers, HttpStatus.OK);
+        } catch (Exception e) {
+            log.error("构建矢量瓦片失败： z: {}, x: {}, y:{}", z, x, y, e);
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
+        }
+    }
 }

src/main/java/com/genersoft/iot/vmp/gb28181/dao/CommonGBChannelMapper.java

@@ -673,4 +673,7 @@ public interface CommonGBChannelMapper {
     @Update("UPDATE wvp_device_channel SET map_level=null")
     int resetLevel();
 
+    @SelectProvider(type = ChannelProvider.class, method = "queryCameraChannelInBox")
+    List<CommonGBChannel> queryCameraChannelInBox(@Param("minLon") double minLon, @Param("maxLon") double maxLon,
+                                                  @Param("minLat") double minLat, @Param("maxLat") double maxLat);
 }

src/main/java/com/genersoft/iot/vmp/gb28181/dao/provider/ChannelProvider.java

@@ -527,10 +527,13 @@ public class ChannelProvider {
                 " where data_type=#{dataType} and data_device_id=#{dataDeviceId} AND device_id=#{deviceId}";
     }
 
-    public String queryOnlineListsByGbDeviceId(Map<String, Object> params ){
+    public String queryCameraChannelInBox(Map<String, Object> params ){
         StringBuilder sqlBuild = new StringBuilder();
         sqlBuild.append(BASE_SQL_TABLE_NAME);
-        sqlBuild.append(" where wdc.channel_type = 0 AND coalesce(wdc.gb_status, wdc.status) = 'ON' AND wdc.data_type = 1 AND data_device_id = #{deviceId}");
+        sqlBuild.append(" where coalesce(wdc.gb_longitude, wdc.longitude) > #{minLon} " +
+                "AND coalesce(wdc.gb_longitude, wdc.longitude) <= #{maxLon} " +
+                "AND coalesce(wdc.gb_latitude,  wdc.latitude) > #{minLat} " +
+                "AND coalesce(wdc.gb_latitude,  wdc.latitude) <= #{maxLat}");
         return sqlBuild.toString();
     }
 
@@ -570,6 +573,13 @@ public class ChannelProvider {
         return sqlBuild.toString();
     }
 
+    public String queryOnlineListsByGbDeviceId(Map<String, Object> params ){
+        StringBuilder sqlBuild = new StringBuilder();
+        sqlBuild.append(BASE_SQL_TABLE_NAME);
+        sqlBuild.append(" where wdc.channel_type = 0 AND coalesce(wdc.gb_status, wdc.status) = 'ON' AND wdc.data_type = 1 AND data_device_id = #{deviceId}");
+        return sqlBuild.toString();
+    }
+
     public String queryListForSy(Map<String, Object> params ){
         StringBuilder sqlBuild = new StringBuilder();
         sqlBuild.append(BASE_SQL_FOR_CAMERA_DEVICE);

src/main/java/com/genersoft/iot/vmp/gb28181/service/IGbChannelService.java

@@ -107,4 +107,6 @@ public interface IGbChannelService {
 
     void resetLevel();
 
+    byte[] getTile(int z, int x, int y, String geoCoordSys);
+
 }

src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/GbChannelServiceImpl.java

@@ -1,5 +1,7 @@
 package com.genersoft.iot.vmp.gb28181.service.impl;
 
+import com.alibaba.excel.support.cglib.beans.BeanMap;
+import com.alibaba.excel.util.BeanMapUtils;
 import com.genersoft.iot.vmp.common.enums.ChannelDataType;
 import com.genersoft.iot.vmp.conf.exception.ControllerException;
 import com.genersoft.iot.vmp.gb28181.bean.*;
@@ -14,21 +16,24 @@ import com.genersoft.iot.vmp.gb28181.service.IGbChannelService;
 import com.genersoft.iot.vmp.gb28181.service.IPlatformChannelService;
 import com.genersoft.iot.vmp.service.bean.GPSMsgInfo;
 import com.genersoft.iot.vmp.streamPush.bean.StreamPush;
+import com.genersoft.iot.vmp.utils.Coordtransform;
 import com.genersoft.iot.vmp.utils.DateUtil;
 import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
 import com.github.pagehelper.PageHelper;
 import com.github.pagehelper.PageInfo;
 import lombok.extern.slf4j.Slf4j;
+import no.ecc.vectortile.VectorTileEncoder;
+import org.locationtech.jts.geom.Coordinate;
+import org.locationtech.jts.geom.GeometryFactory;
+import org.locationtech.jts.geom.Point;
+import org.springframework.beans.BeanUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import org.springframework.util.Assert;
 import org.springframework.util.ObjectUtils;
 
-import java.util.ArrayList;
+import java.util.*;
-import java.util.Collection;
-import java.util.Collections;
-import java.util.List;
 
 @Slf4j
 @Service
@@ -52,6 +57,8 @@ public class GbChannelServiceImpl implements IGbChannelService {
     @Autowired
     private GroupMapper groupMapper;
 
+    private final GeometryFactory geometryFactory = new GeometryFactory();
+
     @Override
     public CommonGBChannel queryByDeviceId(String gbDeviceId) {
         List<CommonGBChannel> commonGBChannels = commonGBChannelMapper.queryByDeviceId(gbDeviceId);
@@ -859,4 +866,89 @@ public class GbChannelServiceImpl implements IGbChannelService {
     public void resetLevel() {
         commonGBChannelMapper.resetLevel();
     }
+
+    @Override
+    public byte[] getTile(int z, int x, int y, String geoCoordSys) {
+        double minLon = tile2lon(x, z);
+        double maxLon = tile2lon(x + 1, z);
+        double maxLat = tile2lat(y, z);
+        double minLat = tile2lat(y + 1, z);
+
+        if (geoCoordSys != null) {
+            if (geoCoordSys.equalsIgnoreCase("GCJ02")) {
+                Double[] minPosition = Coordtransform.GCJ02ToWGS84(minLon, minLat);
+                minLon = minPosition[0];
+                minLat = minPosition[1];
+
+                Double[] maxPosition = Coordtransform.GCJ02ToWGS84(maxLon, maxLat);
+                maxLon = maxPosition[0];
+                maxLat = maxPosition[1];
+            }
+        }
+        // 从数据库查询对应的数据
+        List<CommonGBChannel> channelList = commonGBChannelMapper.queryCameraChannelInBox(minLon, maxLon, minLat, maxLat);
+        VectorTileEncoder encoder = new VectorTileEncoder();
+        if (!channelList.isEmpty()) {
+            channelList.forEach(commonGBChannel -> {
+                double lon = commonGBChannel.getGbLongitude();
+                double lat = commonGBChannel.getGbLatitude();
+                // 转换为目标坐标系
+                if (geoCoordSys != null) {
+                    if (geoCoordSys.equalsIgnoreCase("GCJ02")) {
+                        Double[] minPosition = Coordtransform.WGS84ToGCJ02(lon, lat);
+                        lon = minPosition[0];
+                        lat = minPosition[1];
+                    }
+                }
+
+                // 将 lon/lat 转为瓦片内像素坐标（0..256）
+                double[] px = lonLatToTilePixel(lon, lat, z, x, y);
+                Point pointGeom = geometryFactory.createPoint(new Coordinate(px[0], px[1]));
+
+                BeanMap beanMap = BeanMapUtils.create(commonGBChannel);
+
+//                Map<String, Object> props = new HashMap<>();
+//                props.put("id", commonGBChannel.getGbId());
+//                props.put("name", commonGBChannel.getGbName());
+//                props.put("deviceId", commonGBChannel.getGbDeviceId());
+//                props.put("status", commonGBChannel.getGbStatus());
+
+                encoder.addFeature("points", beanMap, pointGeom);
+            });
+        }
+        return encoder.encode();
+    }
+
+    /**
+     * tile X/Z -> longitude (deg)
+     */
+    private double tile2lon(int x, int z) {
+        double n = Math.pow(2.0, z);
+        return x / n * 360.0 - 180.0;
+    }
+
+    /**
+     * tile Y/Z -> latitude (deg)
+     */
+    private double tile2lat(int y, int z) {
+        double n = Math.pow(2.0, z);
+        double latRad = Math.atan(Math.sinh(Math.PI * (1 - 2.0 * y / n)));
+        return Math.toDegrees(latRad);
+    }
+
+    /**
+     * lon/lat -> pixel in tile (0..256)
+     */
+    private double[] lonLatToTilePixel(double lon, double lat, int z, int tileX, int tileY) {
+        double n = Math.pow(2.0, z);
+        double xtile = (lon + 180.0) / 360.0 * n;
+
+        double latRad = Math.toRadians(lat);
+        double ytile = (1.0 - Math.log(Math.tan(latRad) + 1.0 / Math.cos(latRad)) / Math.PI) / 2.0 * n;
+
+        double pixelX = (xtile - tileX) * 256.0;
+        double pixelY = (ytile - tileY) * 256.0;
+
+        return new double[] { pixelX, pixelY };
+    }
 }

web/src/views/common/MapComponent.vue

@@ -11,7 +11,9 @@ 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 WebGLPointslayer from 'ol/layer/WebGLPoints'
+import MVT from 'ol/format/MVT.js'
+import VectorTileLayer from 'ol/layer/VectorTile.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'
@@ -58,7 +60,6 @@ export default {
     init() {
       this.$store.dispatch('server/getMapConfig')
         .then(mapConfigList => {
-          console.log(mapConfigList.length)
           if (mapConfigList.length === 0) {
            if (window.mapParam.tilesUrl) {
              this.mapTileList.push({
@@ -95,6 +96,8 @@ export default {
             url: this.mapTileList[this.mapTileIndex].tilesUrl
           })
         })
+        console.log(4444)
+        console.log(this.mapTileList[this.mapTileIndex].tilesUrl)
       } else {
         tileLayer = new Tile({
           preload: 4,
@@ -145,6 +148,51 @@ export default {
         this.$emit('zoomChange', olMap.getView().getZoom())
       })
     },
+    addVectorTileLayer(tileUrl){
+      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]
+          // ]
+        }
+      })
+      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)
+          }
+          console.log(items)
+        }
+      })
+    },
     setCenter(point) {
 
     },
@@ -283,6 +331,8 @@ export default {
       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()
@@ -333,7 +383,7 @@ export default {
       })
       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++) {
@@ -414,6 +464,7 @@ export default {
       layer.getSource().addFeature(feature)
     },
     updatePointLayer(layer, data, postponement) {
+      console.log(data)
       layer.getSource().clear(true)
       if (!data || data.length == 0) {
         return
@@ -423,13 +474,9 @@ export default {
         const feature = new Feature(new Point(fromLonLat(data[i].position)))
         feature.setId(data[i].id)
         feature.customData = data[i].data
-        // const cloneStyle = new Style()
+        feature.setProperties({
-        // cloneStyle.setImage(new Icon({
+          status: data[i].status
-        //   anchor: data[i].image.anchor,
+        })
-        //   crossOrigin: 'Anonymous',
-        //   src: data[i].image.src
-        // }))
-        // feature.setStyle(cloneStyle)
         features.push(feature)
       }
       layer.getSource().addFeatures(features)

web/src/views/map/index.vue

@@ -5,7 +5,11 @@
         <MapComponent ref="mapComponent" @loaded="initChannelLayer" @coordinateSystemChange="initChannelLayer" @zoomChange="zoomChange"></MapComponent>
       </div>
       <div class="map-tool-box-bottom-right">
-
+        <div class="map-tool-btn-group">
+          <div class="el-dropdown-link map-tool-btn" @click="addVectorTileLayer">
+            <i class="iconfont icon-mti-jutai"></i>
+          </div>
+        </div>
         <div class="map-tool-btn-group" v-if="mapTileList.length > 0">
           <el-dropdown placement="top"  @command="changeLayerStyle">
             <div class="el-dropdown-link map-tool-btn">
@@ -349,11 +353,11 @@ export default {
       switch (this.layerStyle) {
         case 0:
           channelLayer = this.$refs.mapComponent.addPointLayer([], clientEvent, null)
-          console.log(22222)
+
-          console.log(channelLayer)
           break
         case 1:
-
+          console.log(22221112222)
+          console.log(channelLayer)
           // 直接展示
           if (channelLayer) {
             channelLayer = this.$refs.mapComponent.updatePointLayer(channelLayer, cameraList, true)
@@ -824,6 +828,10 @@ 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)
     }
   }