【SDK】【修复】【修复MapboxGL客户端专题图的坐标动态投影变换】

Author: ParnDeedlit&潘卓然

src/mapboxgl/MapExtend.js

@@ -1,13 +1,15 @@
+import mapboxgl from '@mapgis/mapbox-gl';
+
 /**
  * @function mapboxgl.Zondy.MapExtend
  * @description  扩展了 mapboxgl.Map 对图层相关的操作。
  * @private
  */
 export var MapExtend = function () {
 
-	window.mapboxgl.Map.prototype.overlayLayersManager = {};
-	// window.mapboxgl.Map.prototype.addLayerBak = window.mapboxgl.Map.prototype.addLayerBak;
-	window.mapboxgl.Map.prototype.addLayer = function (layer, before) {
+	mapboxgl.Map.prototype.overlayLayersManager = {};
+	// mapboxgl.Map.prototype.addLayerBak = mapboxgl.Map.prototype.addLayerBak;
+	mapboxgl.Map.prototype.addLayer = function (layer, before) {
 		if (layer.source || layer.type === 'custom' || layer.type === "background") {
 			this.addLayerBak(layer, before);
 			return this;
@@ -18,18 +20,19 @@ export var MapExtend = function () {
 			});
 			return;
 		}
-		addLayer(layer, this);
+		// addLayer(layer, this);
+		this._addLayer(layer, this);
 		this.overlayLayersManager[layer.id] = layer;
 		return this;
 	};
-	window.mapboxgl.Map.prototype.getLayer = function (id) {
+	mapboxgl.Map.prototype.getLayer = function (id) {
 		if (this.overlayLayersManager[id]) {
 			return this.overlayLayersManager[id];
 		}
 		return this.style.getLayer(id);
 	};
 
-	window.mapboxgl.Map.prototype.moveLayer = function (id, beforeId) {
+	mapboxgl.Map.prototype.moveLayer = function (id, beforeId) {
 		if (this.overlayLayersManager[id]) {
 			moveLayer(id, beforeId);
 			return this;
@@ -41,7 +44,7 @@ export var MapExtend = function () {
 		}
 	};
 
-	window.mapboxgl.Map.prototype.removeLayer = function (id) {
+	mapboxgl.Map.prototype.removeLayer = function (id) {
 		if (this.overlayLayersManager[id]) {
 			removeLayer(this.overlayLayersManager[id]);
 			delete this.overlayLayersManager[id];
@@ -53,7 +56,7 @@ export var MapExtend = function () {
 	};
 
 	//目前扩展的overlayer，只支持显示或隐藏图层操作
-	window.mapboxgl.Map.prototype.setLayoutProperty = function (layerID, name, value) {
+	mapboxgl.Map.prototype.setLayoutProperty = function (layerID, name, value) {
 		if (this.overlayLayersManager[layerID]) {
 			if (name === "visibility") {
 				if (value === "visible") {
@@ -70,21 +73,21 @@ export var MapExtend = function () {
 		this._update(true);
 		return this;
 	};
-	window.mapboxgl.Map.prototype.updateTransform = function (units, originX, originY, centerX, centerY, width, height) {
+	mapboxgl.Map.prototype.updateTransform = function (units, originX, originY, centerX, centerY, width, height) {
 		this.transform.units = units;
 		this.transform.latRange = [this._tileExtent[1], this._tileExtent[3]];
 		this.transform.lngRange = [this._tileExtent[0], this._tileExtent[2]];
 		var mercatorZfromAltitude = this.mercatorZfromAltitude;
-		window.mapboxgl.MercatorCoordinate.fromLngLat = function (lngLatLike, altitude) {
+		mapboxgl.MercatorCoordinate.fromLngLat = function (lngLatLike, altitude) {
 			altitude = altitude || 0;
-			const lngLat = window.mapboxgl.LngLat.convert(lngLatLike);
-			return new window.mapboxgl.MercatorCoordinate(
+			const lngLat = mapboxgl.LngLat.convert(lngLatLike);
+			return new mapboxgl.MercatorCoordinate(
 				(lngLat.lng - originX) / width,
 				(originY - lngLat.lat) / height,
 				mercatorZfromAltitude(altitude, lngLat.lat));
 		};
-		window.mapboxgl.MercatorCoordinate.prototype.toLngLat = function () {
-			return new window.mapboxgl.LngLat(
+		mapboxgl.MercatorCoordinate.prototype.toLngLat = function () {
+			return new mapboxgl.LngLat(
 				this.x * width + originX,
 				originY - this.y * height);
 		};
@@ -125,7 +128,7 @@ export var MapExtend = function () {
 		if (beforeLayerID) {
 			var beforeLayer = document.getElementById(beforeLayerID);
 			if (!beforeLayer) {
-				window.mapboxgl.Evented.prototype.fire("error", {
+				mapboxgl.Evented.prototype.fire("error", {
 					error: new Error(`Layer with id "${beforeLayerID}" does not exist on this document.`)
 				});
 			}

src/mapboxgl/index.js

@@ -1,3 +1,7 @@
+import { MapExtend } from './MapExtend';
+
+export { MapExtend };
+
 import { mapboxgl, MapDocLayer, MapTileLayer, MapWmsLayer, MapWMTSLayer, MapVectorLayer, ArcGISLayer, TDTLayer } from './layer';
 
 export { mapboxgl, MapDocLayer, MapTileLayer, MapWmsLayer, MapWMTSLayer, MapVectorLayer, ArcGISLayer, TDTLayer };
@@ -105,11 +109,11 @@ import {
     NetAnalyse,
     NetAnalysisExtent,
     SlopLineParam
-} from '../service/extend';
+} from '../service/Igserver/extend';
 
 import { CommonServiceBase, Events, CORS, RequestTimeout, FetchRequest, IgsServiceBase, JSONFormat } from '../service/baseserver';
 
-import { ColorInfo, GDBInfo, MapDoc, CatalogService, TileLayer, VectorLayer } from '../service/MRCS';
+import { ColorInfo, GDBInfo, MapDoc, CatalogService, TileLayer, VectorLayer } from '../service/Igserver/MRCS';
 
 import {
     EditDocFeature,
@@ -127,7 +131,7 @@ import {
     QueryParameter,
     QueryParameterBase,
     QueryServiceBase
-} from '../service/MRFS';
+} from '../service/Igserver/MRFS';
 
 import {
     AnalysisBase,
@@ -149,7 +153,7 @@ import {
     ProjectBase,
     ProjectByLayer,
     ProjectBySRID
-} from '../service/MRFWS';
+} from '../service/Igserver/MRFWS';
 
 import {
     CalArea,
@@ -162,7 +166,7 @@ import {
     ProjectRang,
     Smooth,
     TopAnalysis
-} from '../service/MRGS';
+} from '../service/Igserver/MRGS';
 
 import {
     GetDocImageService,
@@ -171,7 +175,7 @@ import {
     GetMapInfoService,
     GetTileImageService,
     MapServiceBase
-} from '../service/MRMS';
+} from '../service/Igserver/MRMS';
 
 import {
     CAllOtherDataItemInfoSource,
@@ -202,7 +206,10 @@ import {
     ItemValue,
     ThemeOper,
     ThemesInfo
-} from '../service/theme';
+} from '../service/Igserver/theme';
+
+import { UserService, GeoDatasetService, CalculateModelService } from '../service/clouddisk';
+export { UserService, GeoDatasetService, CalculateModelService };
 
 export { ServiceBase };
 
@@ -382,15 +389,52 @@ export {
     ThemesInfo
 };
 
+import {
+    GeoFeatureThemeLayer,
+    ThemeLayer,
+    RangeThemeLayer,
+    UniqueThemeLayer,
+    GraphThemeLayer,
+    graphThemeLayer,
+    RandomThemeLayer,
+    SimpleThemeLayer,
+    RankSymbolThemeLayer,
+    ThemeStyle
+} from './theme';
+export {
+    GeoFeatureThemeLayer,
+    ThemeLayer,
+    RangeThemeLayer,
+    UniqueThemeLayer,
+    GraphThemeLayer,
+    graphThemeLayer,
+    RandomThemeLayer,
+    SimpleThemeLayer,
+    RankSymbolThemeLayer,
+    ThemeStyle
+};
+
 // 大数据相关
+import {
+    PostgisCatlogService,
+    PostgisCustomQueryService,
+    PostgisQueryService,
+    PostgisTableService,
+    PostgisVectorTileService
+} from '../service/datastore/postgis';
+
+export { PostgisCatlogService, PostgisCustomQueryService, PostgisQueryService, PostgisTableService, PostgisVectorTileService };
+
 import {
     EchartsLayer,
     MapvLayer,
     DeckglLayer
+    /* StreamLayer */
 } from './overlay/index.js';
 
-export let Overlay = {
+export {
     EchartsLayer,
     MapvLayer,
     DeckglLayer
+    /* StreamLayer */
 };

src/mapboxgl/package.json

@@ -2,7 +2,6 @@
     "name": "@mapgis/webclient-es6-mapboxgl",
     "version": "1.0.0",
     "description": "",
-    "main": "dist/webclient-mapboxgl-plugin.min.js",
     "module": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"

src/mapboxgl/theme/GeoFeatureThemeLayer.js

@@ -89,7 +89,7 @@ class GeoFeatureThemeLayer extends ThemeLayer {
    */
   addFeatures(features) {
     var me = this;
-    window.mapboxgl.Evented.prototype.fire("beforefeaturesadded", {
+    mapboxgl.Evented.prototype.fire("beforefeaturesadded", {
       features: features
     });
 

src/mapboxgl/theme/ThemeLayer.js

@@ -421,7 +421,9 @@ class ThemeLayer {
             map = this.map;
         var tempPoint = null;
         if (isArray(coordinate)) {
-            coordinate = this.WebMercator2lonLat(coordinate[0], coordinate[1]);
+             
+            // coordinate = this.WebMercator2lonLat(coordinate[0], coordinate[1]);
+            coordinate = new mapboxgl.LngLat(coordinate[0], coordinate[1]);
             tempPoint = map.project(coordinate);
             pixelP = [tempPoint.x, tempPoint.y];
         }
@@ -443,7 +445,7 @@ class ThemeLayer {
         }
         this.startPitch = this.map.getPitch();
         this.startBearing = this.map.getBearing();
-        var startMovePoint = this.map.project(this.WebMercator2lonLat(0, 0));
+        var startMovePoint = this.map.project(new mapboxgl.LngLat(0, 0));
         this.startMoveX = startMovePoint.x;
         this.startMoveY = startMovePoint.y;
     }
@@ -462,7 +464,8 @@ class ThemeLayer {
         this.mapContainer.style.perspective = this.map.transform.cameraToCenterDistance + 'px';
         var tPitch = this.map.getPitch() - this.startPitch;
         var tBearing = -this.map.getBearing() + this.startBearing;
-        var endMovePoint = this.map.project(this.WebMercator2lonLat(0, 0));
+        // var endMovePoint = this.map.project(this.WebMercator2lonLat(0, 0));
+        var endMovePoint = this.map.project(new mapboxgl.LngLat(0, 0));
         var tMoveX = endMovePoint.x - this.startMoveX;
         var tMoveY = endMovePoint.y - this.startMoveY;
         this.div.style.transform = 'rotateX(' + tPitch + 'deg)' + ' rotateZ(' + tBearing + 'deg)' + ' translate3d(' + tMoveX + 'px, ' + tMoveY + 'px, 0px)';

src/mapboxgl/webpack/mapbox-plugin-debug-config.js

@@ -0,0 +1,61 @@
+var webpack = require('webpack');
+var path = require('path');
+var HappyPack = require('happypack');//多线程loader 加快编译速度
+var os = require('os');
+var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+const BuildInfo = require('./version/version.js')
+
+module.exports = {
+  mode:'development',
+  devtool: 'eval-source-map',
+  entry: path.join(__dirname, '.', 'index.js'),
+  output: {
+    path: path.join(__dirname, '.', 'output'),//打包后的文件存放的地方
+    filename: "webclient-mapboxgl-plugin.js"//打包后输出文件的文件名
+  },
+  externals: {
+    '@mapgis/mapbox-gl': 'mapboxgl',
+    'mapv': "function(){try{return mapv}catch(e){return {}}}()",
+    'echarts': 'function(){try{return echarts}catch(e){return {}}}()'
+  },
+  module: {
+      // noParse: /[\/\\]mapbox-gl\.js$/,
+      // noParse: /3rdLib[^.*mapbox]\.js$/,
+
+       //script-loader
+       rules: [
+            {
+                test: /(\.js)$/,
+                use: 'happypack/loader?id=js',
+                exclude: [/node_modules/,/leaflet/,/openlayers/]
+            }
+        ]
+  },
+  plugins: [
+    new HappyPack({
+            id: 'js',
+            // threads: 4,
+            threadPool: happyThreadPool,
+            loaders: [{
+                loader: 'babel-loader',
+                options: {
+                    presets: ['es2015'],
+                    cacheDirectory: true,
+                    plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties']
+                }
+            }]
+    }),
+    new HtmlWebpackPlugin({
+        filename: 'webclient-mapboxgl-plugin.html',
+        template: 'src/config/opensource/version/version.html',
+        inject: false,//不插入生成的js 仅用于版本声明
+        minify: {
+          removeComments: false,
+          collapseWhitespace: true,
+          removeAttributeQuotes: true
+        },
+        buildInfo: BuildInfo
+      })
+   ]
+}