【fix】3857>12级移动点飘和 11级到12级面变形问题

SuperMap · Apr 27, 2024 · d259bf7 · d259bf7
1 parent 80a9227
commit d259bf7
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 104 deletions.
diff --git a/dev-demos/l7_3857.html b/dev-demos/l7_3857.html
@@ -7,97 +7,144 @@
 *********************************************************************-->
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-    <title>3857</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100vh;
-        overflow: hidden;
-      }
-      #map {
-        width: 100%;
-        height: 100%;
-      }
-      #buttons {
-        position: fixed;
-        top:10px;
-        padding:10px;
-        width: 100%;
-        display: flex;
-        flex-flow: wrap;
-        z-index: 111;
-      }
-      #buttons button {
-        display: block;
-        width: 120px;
-        margin: 10px;
-      }
-    </style>
-   <link rel="stylesheet" type="text/css" href="./js/iclient-mapboxgl.css"></link>
-   <script type="text/javascript" src="./js/mapbox-gl-enhance.js"></script>
-   <!-- <script type="text/javascript" src="../mapboxgl-l7-render/dist/index.js"></script>  -->
-   <script type="text/javascript" src="./js/iclient-mapboxgl-es6.js"></script>
-    </head>
 
-  <body>
-    <button>clickme</button>
-    <button id="testid">修改l7样式</button>
-    <div id="buttons"></div>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <title>3857</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100vh;
+      overflow: hidden;
+    }
 
-    <div id="map"></div>
-    <script type="module">
-      import {createButtons, createMarker, data2} from './js/l7layer.js'
-      const btn = document.querySelector('button');
-      btn.addEventListener('click', () => {
-        map.setZoom(12.1);
-      });
-      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
-      var attribution =
-        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
-        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
-        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
-      var features = {
-        type: 'FeatureCollection',
-        features: [
+    #map {
+      width: 100%;
+      height: 100%;
+    }
+
+    #buttons {
+      position: fixed;
+      top: 10px;
+      padding: 10px;
+      width: 100%;
+      display: flex;
+      flex-flow: wrap;
+      z-index: 111;
+    }
+
+    #buttons button {
+      display: block;
+      width: 120px;
+      margin: 10px;
+    }
+  </style>
+  <link rel="stylesheet" type="text/css" href="./js/iclient-mapboxgl.css">
+  </link>
+  <script type="text/javascript" src="./js/mapbox-gl-enhance.js"></script>
+  <script type="text/javascript" src="../mapboxgl-l7-render/dist/index.js"></script>
+  <script type="text/javascript" src="./js/iclient-mapboxgl-es6.js"></script>
+</head>
+
+<body>
+  <button>clickme</button>
+  <button id="testid">修改l7样式</button>
+  <div id="buttons"></div>
+
+  <div id="map"></div>
+  <script type="module">
+    import { createButtons, createMarker, createShpePoint, data2 } from './js/l7layer.js'
+    const btn = document.querySelector('button');
+    btn.addEventListener('click', () => {
+      map.setZoom(12.1);
+    });
+    var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
+    var attribution =
+      "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
+      " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
+      " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
+    var features = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: { length: 10, level: 43, "value": -4 },
+          geometry: {
+            type: 'LineString',
+            coordinates: [
+              [100, 10],
+              [100.05, 10.05]
+            ]
+          }
+        }
+      ]
+    };
+    var map = new mapboxgl.Map({
+      container: 'map', // container id
+      style: {
+        version: 8,
+        sources: {
+          'raster-tiles': {
+            type: 'raster',
+            tileSize: 256,
+            tiles: ['https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
+          }
+        },
+
+        layers: [
           {
-            type: 'Feature',
-            properties: {length: 10, level:43, "value": -4},
-            geometry: {
-              type: 'LineString',
-              coordinates: [
-                [100, 10],
-                [100.05, 10.05]
-              ]
-            }
+            id: 'simple-tiles',
+            type: 'raster',
+            source: 'raster-tiles',
+            minzoom: 0,
+            maxzoom: 22
           }
         ]
-      };
-      mapboxgl.supermap
-        .initMap('http://172.16.14.44:8090/iserver/services/map-china400/rest/maps/China', {
-          mapOptions: { center: [100, 10], zoom: 13, pitch: 60,antialias: true , maxZoom: 25}
-        })
-        .then(function (result) {
-          var map = result.map;
-          window.map = map;
-          new mapboxgl.Marker().setLngLat([120.148054, 30.25413]).addTo(map)
-          createButtons(map)
-          // createMarker(map)
-          // createMarker(map, data2)
-          map.on('click', (ev) => {
-            console.log(ev)
-          });
-          map.getL7Scene().then(scene=>{
-            scene.on('click', (ev) => {
-              console.log(ev)
-            });
-          })
-
-        });
-    </script>
-  </body>
-</html>
+      },
+      center: [120.148054, 30.25413],
+      zoom: 11
+    });
+
+    map.on('load', function (result) {
+      console.log(1111)
+      window.map = map;
+      new mapboxgl.Marker().setLngLat([120.152019, 30.259057]).addTo(map)
+
+
+      var data = [
+        {
+          w: 30.259057,
+          t: 24.6,
+          s: '海南',
+          l: 20,
+          m: '东方',
+          j: 120.152019,
+          h: 61407,
+          mag: 8.4,
+          capacity: 67200,
+          v: 1,
+          name: '铁路新村(华池路)',
+          icon: 'icon1',
+        }
+      ];
+      createShpePoint(data, map)
+      createButtons(map)
+      // createMarker(map)
+      // createMarker(map, data2)
+      map.on('click', (ev) => {
+        console.log(ev)
+      });
+      // map.getL7Scene().then(scene=>{
+      //   scene.on('click', (ev) => {
+      //     console.log(ev)
+      //   });
+      // })
+
+    });
+  </script>
+</body>
+
+</html>
diff --git a/packages/core/src/services/coordinate/CoordinateSystemService.ts b/packages/core/src/services/coordinate/CoordinateSystemService.ts
@@ -74,7 +74,8 @@ export default class CoordinateSystemService
       // longitude: center[0],
       latitude: center[1],
       zoom,
-      lngLatExtent
+      lngLatExtent,
+      coordinateSystem: this.coordinateSystem
     });
     this.viewportCenter = center;
     this.viewportCenterProjection = [0, 0, 0, 0];
@@ -159,6 +160,7 @@ export default class CoordinateSystemService
       scale,
       flipY,
       highPrecision: true,
+      coordinateSystem: this.coordinateSystem
     });
 
     let viewMatrix = this.cameraService.getViewMatrix();

diff --git a/packages/core/src/utils/project.ts b/packages/core/src/utils/project.ts
@@ -1,3 +1,4 @@
+import { CoordinateSystem } from "../services/coordinate/ICoordinateSystemService";
 
 const DEGREES_TO_RADIANS = Math.PI / 180;
 const TILE_SIZE = 512;
@@ -26,13 +27,15 @@ export function getDistanceScales({
   scale,
   highPrecision = false,
   flipY = false,
+  coordinateSystem
 }: Partial<{
   latitude: number;
   zoom: number;
   scale: number | undefined;
   lngLatExtent: Array<number>;
   highPrecision: boolean;
   flipY: boolean;
+  coordinateSystem:CoordinateSystem
 }>): IDistanceScales {
   // Calculate scale from zoom if not provided
   scale = scale !== undefined ? scale : Math.pow(2, zoom);
@@ -51,7 +54,10 @@ export function getDistanceScales({
    */
   const width = lngLatExtent[2] - lngLatExtent[0];
   const pixelsPerDegreeX = worldSize / width;
-  const pixelsPerDegreeY = pixelsPerDegreeX;
+  let pixelsPerDegreeY = pixelsPerDegreeX;
+  if (coordinateSystem && coordinateSystem === CoordinateSystem.LNGLAT_OFFSET) {
+    pixelsPerDegreeY = pixelsPerDegreeY / latCosine;
+  }
 
   /**
    * Number of pixels occupied by one meter around current lat/lon:

diff --git a/packages/maps/src/mapbox/Viewport.ts b/packages/maps/src/mapbox/Viewport.ts
@@ -1,6 +1,6 @@
-import { IMapCamera, IViewport } from '@antv/l7-core';
+import { CoordinateSystem, IMapCamera, IViewport } from '@antv/l7-core';
 import WebMercatorViewport from '../viewport-mercator-project/web-mercator-viewport';
-import { isMultiCoor } from './utils';
+import { getCoordinateSystem, isMultiCoor } from './utils';
 
 export default class Viewport implements IViewport {
   public viewport: WebMercatorViewport;
@@ -24,6 +24,7 @@ export default class Viewport implements IViewport {
       pitch,
       bearing,
       isGeographicCoordinateSystem: isMultiCoor(map),
+      coordinateSystem: getCoordinateSystem(map),
       map
     });
   }

diff --git a/packages/maps/src/mapbox/utils.ts b/packages/maps/src/mapbox/utils.ts
@@ -1,6 +1,8 @@
 import mapboxgl from 'mapbox-gl';
 import { getScaleByZoom } from '../viewport-mercator-project';
+import { CoordinateSystem } from '@antv/l7-core';
 
+const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
 // mapboxgl多坐标系，投影计算
 export function fromWGS84(
   coor: [number, number] | undefined,
@@ -91,3 +93,18 @@ export function isMultiCoor(map: any): boolean {
   }
   return true;
 }
+export function getCoordinateSystem(map: any, offsetCoordinate = true): boolean {
+  if (!map) {
+    return false;
+  }
+  if (map.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD && offsetCoordinate) {
+    const crs = map.getCRS();
+    if (crs && ( crs.unit==='degrees' || crs.unit==='degree' || crs.epsgCode==='EPSG:3857' )) {
+      return CoordinateSystem.LNGLAT_OFFSET;
+    }else{
+      return CoordinateSystem.METER_OFFSET;
+    }
+  } else {
+    return CoordinateSystem.LNGLAT;
+  }
+}
diff --git a/packages/maps/src/utils/BaseMapService.ts b/packages/maps/src/utils/BaseMapService.ts
@@ -26,6 +26,7 @@ import 'reflect-metadata';
 import { Version } from '../version';
 import { ISimpleMapCoord, SimpleMapCoord } from './simpleMapCoord';
 import { MapTheme } from './theme';
+import { getCoordinateSystem } from '../mapbox/utils';
 const EventMap: {
   [key: string]: any;
 } = {
@@ -373,15 +374,6 @@ export default abstract class BaseMapService<T>
   protected updateCoordinateSystemService() {
     const { offsetCoordinate = true } = this.config;
     // set coordinate system
-    if ((this.viewport as IViewport).getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD && offsetCoordinate) {
-      const crs = this.map.getCRS();
-      if (crs && ( crs.unit==='degrees' || crs.unit==='degree' || crs.epsgCode==='EPSG:3857' )) {
-        this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.LNGLAT_OFFSET);
-      }else{
-        this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.METER_OFFSET);
-      }
-    } else {
-      this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.LNGLAT);
-    }
+    this.coordinateSystemService.setCoordinateSystem(getCoordinateSystem(this.map, offsetCoordinate))
   }
 }
diff --git a/packages/maps/src/viewport-mercator-project/web-mercator-utils.js b/packages/maps/src/viewport-mercator-project/web-mercator-utils.js
@@ -7,6 +7,7 @@ import * as vec2 from 'gl-matrix/vec2';
 import * as vec3 from 'gl-matrix/vec3';
 import { transformToMultiCoor } from '../mapbox/utils';
 import assert from './assert';
+import { CoordinateSystem } from '@antv/l7-core';
 
 // CONSTANTS
 const PI = Math.PI;
@@ -131,6 +132,7 @@ export function getDistanceScales({
   lngLatExtent,
   scale,
   highPrecision = false,
+  coordinateSystem
 }) {
   // Calculate scale from zoom if not provided
   scale = scale !== undefined ? scale : zoomToScale(zoom);
@@ -154,7 +156,10 @@ export function getDistanceScales({
    */
   const width = lngLatExtent[2] - lngLatExtent[0];
   const pixelsPerDegreeX = worldSize / width;
-  const pixelsPerDegreeY = pixelsPerDegreeX;
+  let pixelsPerDegreeY = pixelsPerDegreeX;
+  if (coordinateSystem && coordinateSystem === CoordinateSystem.LNGLAT_OFFSET) {
+    pixelsPerDegreeY = pixelsPerDegreeY / latCosine;
+  }
 
   /**
    * Number of pixels occupied by one meter around current lat/lon: