@vtx/map 1.0.0 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +44 -44
  2. package/lib/VtxMap/AMap/AMap.js +48 -7
  3. package/lib/VtxMap/BMap/Map.js +56 -34
  4. package/lib/VtxMap/OMap/Map.js +43 -43
  5. package/lib/VtxMap/OMap/Map.less +70 -70
  6. package/lib/VtxMap/TMap/TMap.js +45 -58
  7. package/lib/VtxSearchMap/VtxSearchMap.js +19 -15
  8. package/lib/VtxSearchMap/mapping.js +15 -0
  9. package/lib/default.js +21 -18
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -1,44 +1,44 @@
1
- # map
2
-
3
- > 地图控件
4
-
5
- ## 安装
6
-
7
- ```bash
8
- # Install
9
- $ npm install @vtx/map
10
- #或者
11
- $ yarn add @vtx/map
12
- ```
13
-
14
- ## 文档
15
-
16
- - [VtxMap](/docs/VtxMap.md)
17
- - [MapPlayer](/docs/MapPlayer.md)
18
- - [VtxSearchMap](/docs/VtxSearchMap.md)
19
- - [VtxOptMap](/docs/VtxOptMap.md)
20
-
21
- ### 全量导入引用方式（==不推荐==）：
22
-
23
- ```js
24
- # 地图组件(地图组件的ref函数现在改为getMapInstance)
25
- $ import { VtxMap, VtxOptMap, VtxZoomMap } from '@vtx/map';
26
-
27
- # 地图弹出框组件
28
- $ import { VtxSearchMap } from '@vtx/map';
29
- ```
30
-
31
- ### 使用 babel-plugin-import 动态加载引用方式(==推荐==)：
32
-
33
- ```js
34
- # 地图组件(地图组件的ref函数现在改为getMapInstance)
35
- $ import { VtxMap } from '@vtx/map';
36
- $ const { VtxOptMap, VtxZoomMap, MapPlayer } = VtxMap;
37
-
38
- # 地图弹出框组件
39
- $ import { VtxSearchMap } from '@vtx/map';
40
- ```
41
-
42
- ## License
43
-
44
- [MIT](https://tldrlegal.com/license/mit-license)
1
+ # map
2
+
3
+ > 地图控件
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ # Install
9
+ $ npm install @vtx/map
10
+ #或者
11
+ $ yarn add @vtx/map
12
+ ```
13
+
14
+ ## 文档
15
+
16
+ - [VtxMap](/docs/VtxMap.md)
17
+ - [MapPlayer](/docs/MapPlayer.md)
18
+ - [VtxSearchMap](/docs/VtxSearchMap.md)
19
+ - [VtxOptMap](/docs/VtxOptMap.md)
20
+
21
+ ### 全量导入引用方式（==不推荐==）：
22
+
23
+ ```js
24
+ # 地图组件(地图组件的ref函数现在改为getMapInstance)
25
+ $ import { VtxMap, VtxOptMap, VtxZoomMap } from '@vtx/map';
26
+
27
+ # 地图弹出框组件
28
+ $ import { VtxSearchMap } from '@vtx/map';
29
+ ```
30
+
31
+ ### 使用 babel-plugin-import 动态加载引用方式(==推荐==)：
32
+
33
+ ```js
34
+ # 地图组件(地图组件的ref函数现在改为getMapInstance)
35
+ $ import { VtxMap } from '@vtx/map';
36
+ $ const { VtxOptMap, VtxZoomMap, MapPlayer } = VtxMap;
37
+
38
+ # 地图弹出框组件
39
+ $ import { VtxSearchMap } from '@vtx/map';
40
+ ```
41
+
42
+ ## License
43
+
44
+ [MIT](https://tldrlegal.com/license/mit-license)
package/lib/VtxMap/AMap/AMap.js CHANGED
@@ -91,6 +91,12 @@ var VortexAMap = function (_React$Component) {
91
91
  rectangle: []
92
92
  }
93
93
  };
94
+ _this.AnchorConstant = {
95
+ tr: 'RT',
96
+ tl: 'LT',
97
+ bl: 'LB',
98
+ br: 'RB'
99
+ };
94
100
  _this.loadMapJs();
95
101
  return _this;
96
102
  }
@@ -103,7 +109,7 @@ var VortexAMap = function (_React$Component) {
103
109
  resolve(window.AMap);
104
110
  } else {
105
111
  $.getScript(_default2.default.mapServerURL + '/A_content.js', function () {
106
- $.getScript(_default2.default.httpOrhttps + '://webapi.amap.com/maps?v=1.4.14&key=e59ef9272e3788ac59d9a22f0f8cf9fe&plugin=AMap.Geolocation,AMap.MarkerClusterer,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.RangingTool,AMap.MouseTool,AMap.PolyEditor,AMap.CircleEditor,AMap.PlaceSearch,AMap.Heatmap', function () {
112
+ $.getScript('//webapi.amap.com/maps?v=1.4.14&key=e59ef9272e3788ac59d9a22f0f8cf9fe&plugin=AMap.Geolocation,AMap.MarkerClusterer,AMap.MapType,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.RangingTool,AMap.MouseTool,AMap.PolyEditor,AMap.CircleEditor,AMap.PlaceSearch,AMap.Heatmap', function () {
107
113
  var PointCollection = new Promise(function (resolve, reject) {
108
114
  $.getScript(_default2.default.mapServerURL + '/GPointCollection.js', function () {
109
115
  resolve();
@@ -111,7 +117,7 @@ var VortexAMap = function (_React$Component) {
111
117
  });
112
118
  Promise.all([PointCollection]).then(function () {
113
119
  (function setTime() {
114
- var allEvents = [window.AMap, 'MarkerClusterer', 'Scale', 'ToolBar', 'DistrictSearch', 'RangingTool', 'MouseTool', 'PolyEditor', 'CircleEditor', 'PlaceSearch', 'Heatmap'];
120
+ var allEvents = [window.AMap, 'MarkerClusterer', 'MapType', 'Scale', 'ToolBar', 'DistrictSearch', 'RangingTool', 'MouseTool', 'PolyEditor', 'CircleEditor', 'PlaceSearch', 'Heatmap'];
115
121
  var isLoading = true;
116
122
  for (var i = 0; i <= allEvents.length - 1; i++) {
117
123
  if (i === 0) {
@@ -208,7 +214,10 @@ var VortexAMap = function (_React$Component) {
208
214
  if (showControl) {
209
215
  t.showControl();
210
216
  }
211
-
217
+ //添加地图类型控件
218
+ if (t.props.satelliteSwitch) {
219
+ t.showMapTypeControl();
220
+ }
212
221
  //画边界线
213
222
  if (boundaryName instanceof Array && boundaryName.length > 0) {
214
223
  t.addBaiduBoundary(boundaryName);
@@ -736,11 +745,43 @@ var VortexAMap = function (_React$Component) {
736
745
  }, {
737
746
  key: 'showControl',
738
747
  value: function showControl() {
739
- var t = this;
740
- t.state.gis.addControl(t.scale);
741
- if (t.props.showControl.type !== 'null' && !!t.props.showControl.type) {
742
- t.state.gis.addControl(t.tool);
748
+ var t = this,
749
+ location = 'RT',
750
+ offset = null;
751
+
752
+ if (t.props.showControl.location) {
753
+ location = t.AnchorConstant[t.props.showControl.location];
743
754
  }
755
+ if (t.props.showControl.offset && t.props.showControl.offset.length > 0) {
756
+ offset = new AMap.Pixel(t.props.showControl.offset[0], t.props.showControl.offset[1]);
757
+ scaleOffset = new AMap.Pixel(t.props.showControl.offset[0] + 70, t.props.showControl.offset[1]);
758
+ }
759
+ // 添加比例尺
760
+ var control = new AMap.Scale({ position: location, offset: scaleOffset });
761
+ t.state.gis.addControl(control);
762
+
763
+ // 包含平移和缩放按钮
764
+ var navigation = new AMap.ToolBar({ position: location, offset: offset });
765
+ t.state.gis.addControl(navigation);
766
+ }
767
+ //展示地图切换控件
768
+
769
+ }, {
770
+ key: 'showMapTypeControl',
771
+ value: function showMapTypeControl() {
772
+ var t = this,
773
+ location = 'RT',
774
+ offset = null;
775
+ // TODO，MapType没有这些属性，所以下面定位和偏移不生效
776
+ if (t.props.satelliteSwitch.location) {
777
+ location = t.AnchorConstant[t.props.showControl.location];
778
+ }
779
+ if (t.props.satelliteSwitch.offset && t.props.satelliteSwitch.offset.length > 0) {
780
+ offset = new AMap.Pixel(t.props.satelliteSwitch.offset[0], t.props.satelliteSwitch.offset[1]);
781
+ }
782
+ // 地图切换控件
783
+ var control = new AMap.MapType({ position: location, offset: offset });
784
+ t.state.gis.addControl(control);
744
785
  }
745
786
  //获取图元数据
746
787
 
package/lib/VtxMap/BMap/Map.js CHANGED
@@ -37,6 +37,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
37
37
  var Set = _immutable2.default.Set;
38
38
  //公共地址配置
39
39
 
40
+ // 百度地图js文件内做了一些额外的http or https判断
41
+ // 如果协议为Https，我们需要改动全局变量BMAP_PROTOCOL和BMap_loadScriptTime
42
+ if (window.location.protocol === 'https:') {
43
+ window.BMAP_PROTOCOL = "https";
44
+ window.BMap_loadScriptTime = new Date().getTime();
45
+ }
46
+
40
47
  var gisMapConstant = {
41
48
  circle: 'BMAP_POINT_SHAPE_CIRCLE', //圆形
42
49
  star: 1, //星形
@@ -176,10 +183,10 @@ var BaiduMap = function (_React$Component) {
176
183
  resolve(_this2.loadPlugin());
177
184
  } else {
178
185
  // EVlFc6DZzAzU5avIjoxNcFgQ
179
- $.getScript(_default2.default.httpOrhttps + '://api.map.baidu.com/getscript?v=3.0&ak=42IughV5lDxAt0wI8AhDVuGR', function () {
186
+ $.getScript('//api.map.baidu.com/getscript?v=3.0&ak=42IughV5lDxAt0wI8AhDVuGR', function () {
180
187
  resolve(_this2.loadPlugin());
181
188
  });
182
- $("<link>").attr({ rel: "stylesheet", type: "text/css", href: _default2.default.httpOrhttps + '://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css' }).appendTo("head");
189
+ $("<link>").attr({ rel: "stylesheet", type: "text/css", href: '//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css' }).appendTo("head");
183
190
  }
184
191
  });
185
192
  }
@@ -315,6 +322,19 @@ var BaiduMap = function (_React$Component) {
315
322
  } else {
316
323
  window.VtxMap = {};
317
324
  }
325
+ // 控件位置常量
326
+ t.AnchorConstant = {
327
+ tr: BMAP_ANCHOR_TOP_RIGHT,
328
+ tl: BMAP_ANCHOR_TOP_LEFT,
329
+ bl: BMAP_ANCHOR_BOTTOM_LEFT,
330
+ br: BMAP_ANCHOR_BOTTOM_RIGHT
331
+ // 平移缩放控件大小
332
+ };t.NavigationConstant = {
333
+ large: BMAP_NAVIGATION_CONTROL_LARGE,
334
+ small: BMAP_NAVIGATION_CONTROL_SMALL,
335
+ pan: BMAP_NAVIGATION_CONTROL_PAN,
336
+ zoom: BMAP_NAVIGATION_CONTROL_ZOOM
337
+ };
318
338
  var map = window.VtxMap[mapId] = t.state.gis = new BMap.Map(mapId.toString(), {
319
339
  enableMapClick: false,
320
340
  minZoom: options.minZoom,
@@ -333,9 +353,9 @@ var BaiduMap = function (_React$Component) {
333
353
  }, 500);
334
354
  // 初始化地图,设置中心点坐标和地图级别
335
355
  map.centerAndZoom(new BMap.Point(parseFloat(options.center[0]), parseFloat(options.center[1])), options.zoom);
336
- //添加地图类型控件(几乎不用,先写着)
356
+ //添加地图类型控件
337
357
  if (t.props.satelliteSwitch) {
338
- map.addControl(new BMap.MapTypeControl());
358
+ t.showMapTypeControl();
339
359
  }
340
360
  //初始化路况控件
341
361
  if (!t._trafficCtrl) {
@@ -2204,45 +2224,47 @@ var BaiduMap = function (_React$Component) {
2204
2224
  key: 'showControl',
2205
2225
  value: function showControl() {
2206
2226
  var t = this,
2207
- location = BMAP_ANCHOR_TOP_LEFT,
2208
- type = '';
2209
- switch (t.props.showControl.location) {
2210
- case 'tl':
2211
- location = BMAP_ANCHOR_TOP_LEFT;
2212
- break;
2213
- case 'bl':
2214
- location = BMAP_ANCHOR_BOTTOM_LEFT;
2215
- break;
2216
- case 'tr':
2217
- location = BMAP_ANCHOR_TOP_RIGHT;
2218
- break;
2219
- case 'br':
2220
- location = BMAP_ANCHOR_BOTTOM_RIGHT;
2221
- break;
2227
+ location = t.AnchorConstant['tr'],
2228
+ type = '',
2229
+ offset = null,
2230
+ scaleOffset = null;
2231
+ if (t.props.showControl.location) {
2232
+ location = t.AnchorConstant[t.props.showControl.location];
2222
2233
  }
2223
- switch (t.props.showControl.type) {
2224
- case 'all':
2225
- type = '';
2226
- break;
2227
- case 'small':
2228
- type = BMAP_NAVIGATION_CONTROL_SMALL;
2229
- break;
2230
- case 'pan':
2231
- type = BMAP_NAVIGATION_CONTROL_PAN;
2232
- break;
2233
- case 'zoom':
2234
- type = BMAP_NAVIGATION_CONTROL_ZOOM;
2235
- break;
2234
+ if (t.props.showControl.type) {
2235
+ type = t.NavigationConstant[t.props.showControl.type];
2236
+ }
2237
+ if (t.props.showControl.offset && t.props.showControl.offset.length > 0) {
2238
+ offset = new BMap.Size(t.props.showControl.offset[0], t.props.showControl.offset[1]);
2239
+ scaleOffset = new BMap.Size(t.props.showControl.offset[0] + 70, t.props.showControl.offset[1]);
2236
2240
  }
2237
2241
  // 左上角，添加比例尺
2238
- var control = new BMap.ScaleControl({ anchor: location });
2242
+ var control = new BMap.ScaleControl({ anchor: location, offset: scaleOffset });
2239
2243
  t.state.gis.addControl(control);
2240
2244
  if (type !== 'null') {
2241
2245
  //右上角，仅包含平移和缩放按钮
2242
- var navigation = new BMap.NavigationControl({ anchor: location, type: type });
2246
+ var navigation = new BMap.NavigationControl({ anchor: location, type: type, offset: offset });
2243
2247
  t.state.gis.addControl(navigation);
2244
2248
  }
2245
2249
  }
2250
+ //展示地图切换控件
2251
+
2252
+ }, {
2253
+ key: 'showMapTypeControl',
2254
+ value: function showMapTypeControl() {
2255
+ var t = this,
2256
+ location = t.AnchorConstant['br'],
2257
+ offset = null;
2258
+ if (t.props.satelliteSwitch.location) {
2259
+ location = t.AnchorConstant[t.props.satelliteSwitch.location];
2260
+ }
2261
+ if (t.props.satelliteSwitch.offset && t.props.satelliteSwitch.offset.length > 0) {
2262
+ offset = new BMap.Size(t.props.satelliteSwitch.offset[0], t.props.satelliteSwitch.offset[1]);
2263
+ }
2264
+ // 地图切换控件
2265
+ var control = new BMap.MapTypeControl({ anchor: location, type: BMAP_MAPTYPE_CONTROL_MAP, offset: offset });
2266
+ t.state.gis.addControl(control);
2267
+ }
2246
2268
  /*设置显示区域*/
2247
2269
 
2248
2270
  }, {
package/lib/VtxMap/OMap/Map.js CHANGED
@@ -301,8 +301,8 @@ var Map = function (_React$Component) {
301
301
  }
302
302
  });
303
303
  /*=================================start========================================*/
304
- /*
305
- draw对象声明, 绘制返回方法实现
304
+ /*
305
+ draw对象声明, 绘制返回方法实现
306
306
  */
307
307
  if (!t._drawmanager) {
308
308
  t._drawmanager = new google.maps.drawing.DrawingManager({
@@ -316,9 +316,9 @@ var Map = function (_React$Component) {
316
316
  t._cluster = new OMapLib.MarkerClusterer(map, [], { maxZoom: options.maxZoom });
317
317
  }
318
318
  /*=================================start========================================*/
319
- /*
320
- 声明OverlayView 类
321
- 用于切换lnglat和 pixel
319
+ /*
320
+ 声明OverlayView 类
321
+ 用于切换lnglat和 pixel
322
322
  */
323
323
  function CanvasProjectionOverlay() {}
324
324
  CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
@@ -329,9 +329,9 @@ var Map = function (_React$Component) {
329
329
  this.canvasProjectionOverlay = new CanvasProjectionOverlay();
330
330
  this.canvasProjectionOverlay.setMap(map);
331
331
  /*=================================start========================================*/
332
- /*
333
- 重写marker对象,支持html
334
- 要使用google对象,所以在creatMap中声明
332
+ /*
333
+ 重写marker对象,支持html
334
+ 要使用google对象,所以在creatMap中声明
335
335
  */
336
336
  var MyLabel = t.MyLabel = function (map) {
337
337
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -725,7 +725,7 @@ var Map = function (_React$Component) {
725
725
  var position = new t.omap.LatLng({ lng: item.longitude, lat: item.latitude });
726
726
  var marker = null;
727
727
  if (item.markerContent) {
728
- /*自定义html加点
728
+ /*自定义html加点
729
729
  用Label来实现,无法再添加label(高德有判断,实现不同)*/
730
730
  //覆盖物参数
731
731
  marker = new t.MyLabel(t.state.gis, {
@@ -747,9 +747,9 @@ var Map = function (_React$Component) {
747
747
  isLabel: true,
748
748
  labelClass: labelClass,
749
749
  labelContent: cg.labelContent,
750
- /*
751
- 为和百度等地图相同的参数 加上g.markerContentY值
752
- label是使用OverlayView手动实现,与marker没有关联的原因
750
+ /*
751
+ 为和百度等地图相同的参数 加上g.markerContentY值
752
+ label是使用OverlayView手动实现,与marker没有关联的原因
753
753
  */
754
754
  labelOffset: { x: cg.labelPixelX, y: cg.labelPixelY + cg.markerContentY }
755
755
  });
@@ -904,9 +904,9 @@ var Map = function (_React$Component) {
904
904
  var oldPosition = gc.getPosition();
905
905
  //前后点位类型都是markerContent
906
906
  if (gc.isMarkerContent && gc.isMarkerContent() && item.markerContent) {
907
- /*
908
- 自定义html加点
909
- 用Label来实现,无法再添加label(高德有判断,实现不同)
907
+ /*
908
+ 自定义html加点
909
+ 用Label来实现,无法再添加label(高德有判断,实现不同)
910
910
  */
911
911
  //覆盖物参数
912
912
  gc.setOptions({
@@ -960,9 +960,9 @@ var Map = function (_React$Component) {
960
960
  gc_label.setOptions({
961
961
  labelClass: labelClass,
962
962
  labelContent: cg.labelContent,
963
- /*
964
- 为和百度等地图相同的参数 加上g.markerContentY值
965
- label是使用OverlayView手动实现,与marker没有关联的原因
963
+ /*
964
+ 为和百度等地图相同的参数 加上g.markerContentY值
965
+ label是使用OverlayView手动实现,与marker没有关联的原因
966
966
  */
967
967
  labelOffset: { x: cg.labelPixelX, y: cg.labelPixelY + cg.markerContentY }
968
968
  });
@@ -1072,9 +1072,9 @@ var Map = function (_React$Component) {
1072
1072
  gc_label.setOptions({
1073
1073
  labelClass: _labelClass,
1074
1074
  labelContent: cg.labelContent,
1075
- /*
1076
- 为和百度等地图相同的参数 加上g.markerContentY值
1077
- label是使用OverlayView手动实现,与marker没有关联的原因
1075
+ /*
1076
+ 为和百度等地图相同的参数 加上g.markerContentY值
1077
+ label是使用OverlayView手动实现,与marker没有关联的原因
1078
1078
  */
1079
1079
  labelOffset: { x: cg.labelPixelX, y: cg.labelPixelY + cg.markerContentY }
1080
1080
  });
@@ -2396,8 +2396,8 @@ var Map = function (_React$Component) {
2396
2396
  var t = this;
2397
2397
  t._drawmanager.setDrawingMode(null);
2398
2398
  }
2399
- /*
2400
- 事件处理
2399
+ /*
2400
+ 事件处理
2401
2401
  */
2402
2402
  //点击图元事件
2403
2403
 
@@ -2482,8 +2482,8 @@ var Map = function (_React$Component) {
2482
2482
  t.props.mouseOutGraphic(obj);
2483
2483
  }
2484
2484
  }
2485
- /*
2486
- 地图服务功能
2485
+ /*
2486
+ 地图服务功能
2487
2487
  */
2488
2488
  //开启路况
2489
2489
 
@@ -3319,9 +3319,9 @@ var Map = function (_React$Component) {
3319
3319
  }
3320
3320
  return deg;
3321
3321
  }
3322
- /*
3323
- 匹配控件位置方法
3324
- (谷歌地图有8个方位,为了统一,只使用左上,左下,右上,右下)
3322
+ /*
3323
+ 匹配控件位置方法
3324
+ (谷歌地图有8个方位,为了统一,只使用左上,左下,右上,右下)
3325
3325
  */
3326
3326
 
3327
3327
  }, {
@@ -3344,8 +3344,8 @@ var Map = function (_React$Component) {
3344
3344
  }
3345
3345
  return position;
3346
3346
  }
3347
- /*
3348
- 地图内部需要公共方法
3347
+ /*
3348
+ 地图内部需要公共方法
3349
3349
  */
3350
3350
 
3351
3351
  }, {
@@ -3560,10 +3560,10 @@ var Map = function (_React$Component) {
3560
3560
  if (typeof isclearAllPointCollection == 'boolean' && isclearAllPointCollection || isclearAllPointCollection && isclearAllPointCollection !== t.props.isclearAllPointCollection) {
3561
3561
  t.clearAllPointCollection();
3562
3562
  }
3563
- /*点数据处理
3564
- pointData[2]相同的点,执行刷新
3565
- pointData[1]的数据在idsForGraphicId中不存在的,执行新增
3566
- pointData[0]数据中多余的id,执行删除
3563
+ /*点数据处理
3564
+ pointData[2]相同的点,执行刷新
3565
+ pointData[1]的数据在idsForGraphicId中不存在的,执行新增
3566
+ pointData[0]数据中多余的id,执行删除
3567
3567
  */
3568
3568
  if (mapPoints instanceof Array && props.mapPoints instanceof Array && !t.deepEqual(mapPoints, props.mapPoints)) {
3569
3569
  var oldMapPoints = props.mapPoints;
@@ -3623,9 +3623,9 @@ var Map = function (_React$Component) {
3623
3623
  //更新
3624
3624
  t.updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
3625
3625
  }
3626
- /*
3627
- 面数据处理
3628
- 先全删除,再新增
3626
+ /*
3627
+ 面数据处理
3628
+ 先全删除,再新增
3629
3629
  */
3630
3630
  if (mapPolygons instanceof Array && props.mapPolygons instanceof Array && !t.deepEqual(mapPolygons, props.mapPolygons)) {
3631
3631
  var oldMapPolygons = props.mapPolygons;
@@ -3684,9 +3684,9 @@ var Map = function (_React$Component) {
3684
3684
  //更新
3685
3685
  t.updatePolygon([].concat(_toConsumableArray(_upds), _toConsumableArray(_otherupds)));
3686
3686
  }
3687
- /*
3688
- 圆数据处理
3689
- 先全删除,再新增
3687
+ /*
3688
+ 圆数据处理
3689
+ 先全删除,再新增
3690
3690
  */
3691
3691
  if (mapCircles instanceof Array && props.mapCircles instanceof Array && !t.deepEqual(mapCircles, props.mapCircles)) {
3692
3692
  var oldMapCircles = props.mapCircles;
@@ -3745,9 +3745,9 @@ var Map = function (_React$Component) {
3745
3745
  //更新
3746
3746
  t.updateCircle([].concat(_toConsumableArray(_upds2), _toConsumableArray(_otherupds2)));
3747
3747
  }
3748
- /*
3749
- 线数据处理
3750
- 先全删除,再新增
3748
+ /*
3749
+ 线数据处理
3750
+ 先全删除,再新增
3751
3751
  */
3752
3752
  if (mapLines instanceof Array && props.mapLines instanceof Array && !t.deepEqual(mapLines, props.mapLines)) {
3753
3753
  var oldMapLines = props.mapLines;
package/lib/VtxMap/OMap/Map.less CHANGED
@@ -1,70 +1,70 @@
1
- .label-content{
2
- display: inline-block;
3
- padding: 5px;
4
- line-height: 22px;
5
- text-align: center;
6
- border-radius: 5px;
7
- background-color: #fff;
8
- opacity: 1;
9
- color: #5DD0EE;
10
- transform: translate(-50%);
11
- -ms-transform: translate(-50%);
12
- }
13
- .noselect {
14
- -webkit-touch-callout: none; /* iOS Safari */
15
- -webkit-user-select: none; /* Chrome/Safari/Opera */
16
- -khtml-user-select: none; /* Konqueror */
17
- -moz-user-select: none; /* Firefox */
18
- -ms-user-select: none; /* Internet Explorer/Edge */
19
- user-select: none; /* Non-prefixed version, currently
20
- not supported by any browser */
21
- }
22
- .vtx_gmap_html_pointCollection_a{
23
- position: absolute;
24
- canvas{
25
- z-index: 111;
26
- }
27
- }
28
- .vtx-g-rangingPoint{
29
- width: 8px;
30
- height: 8px;
31
- background-color: #fff;
32
- border: 2px solid #108ee9;
33
- display: inline-block;
34
- border-radius: 8px;
35
- position: relative;
36
- top: 5px;
37
- left: 1px;
38
- }
39
- .vtx-g-rangingDistance{
40
- position: relative;
41
- top: -36px;
42
- left: 15px;
43
- height: 30px;
44
- line-height: 28px;
45
- background-color: #fff;
46
- border: 1px solid #108ee9;
47
- font-size: 12px;
48
- word-break: keep-all;
49
- padding: 0px 3px;
50
- color: #108ee9;
51
- }
52
- .vtx-g-rang-exit{
53
- width: 12px;
54
- height: 12px;
55
- background-color: #fff;
56
- border: 2px solid #108ee9;
57
- color: #108ee9;
58
- line-height: 7px;
59
- text-align: center;
60
- font-size: 12px;
61
- cursor: pointer;
62
- }
63
- .vtx-g-rang-showRangTool{
64
- line-height: 18px;
65
- font-size: 12px;
66
- border: 1px solid #108ee9;
67
- word-break: keep-all;
68
- background-color: #fff;
69
- padding: 0px 5px;
70
- }
1
+ .label-content{
2
+ display: inline-block;
3
+ padding: 5px;
4
+ line-height: 22px;
5
+ text-align: center;
6
+ border-radius: 5px;
7
+ background-color: #fff;
8
+ opacity: 1;
9
+ color: #5DD0EE;
10
+ transform: translate(-50%);
11
+ -ms-transform: translate(-50%);
12
+ }
13
+ .noselect {
14
+ -webkit-touch-callout: none; /* iOS Safari */
15
+ -webkit-user-select: none; /* Chrome/Safari/Opera */
16
+ -khtml-user-select: none; /* Konqueror */
17
+ -moz-user-select: none; /* Firefox */
18
+ -ms-user-select: none; /* Internet Explorer/Edge */
19
+ user-select: none; /* Non-prefixed version, currently
20
+ not supported by any browser */
21
+ }
22
+ .vtx_gmap_html_pointCollection_a{
23
+ position: absolute;
24
+ canvas{
25
+ z-index: 111;
26
+ }
27
+ }
28
+ .vtx-g-rangingPoint{
29
+ width: 8px;
30
+ height: 8px;
31
+ background-color: #fff;
32
+ border: 2px solid #108ee9;
33
+ display: inline-block;
34
+ border-radius: 8px;
35
+ position: relative;
36
+ top: 5px;
37
+ left: 1px;
38
+ }
39
+ .vtx-g-rangingDistance{
40
+ position: relative;
41
+ top: -36px;
42
+ left: 15px;
43
+ height: 30px;
44
+ line-height: 28px;
45
+ background-color: #fff;
46
+ border: 1px solid #108ee9;
47
+ font-size: 12px;
48
+ word-break: keep-all;
49
+ padding: 0px 3px;
50
+ color: #108ee9;
51
+ }
52
+ .vtx-g-rang-exit{
53
+ width: 12px;
54
+ height: 12px;
55
+ background-color: #fff;
56
+ border: 2px solid #108ee9;
57
+ color: #108ee9;
58
+ line-height: 7px;
59
+ text-align: center;
60
+ font-size: 12px;
61
+ cursor: pointer;
62
+ }
63
+ .vtx-g-rang-showRangTool{
64
+ line-height: 18px;
65
+ font-size: 12px;
66
+ border: 1px solid #108ee9;
67
+ word-break: keep-all;
68
+ background-color: #fff;
69
+ padding: 0px 5px;
70
+ }
package/lib/VtxMap/TMap/TMap.js CHANGED
@@ -106,7 +106,7 @@ var TMap = function (_React$Component) {
106
106
  resolve(window.T);
107
107
  } else {
108
108
  $.getScript(_default2.default.mapServerURL + '/T_content.js', function () {
109
- $.getScript(_default2.default.httpOrhttps + '://api.tianditu.gov.cn/api?v=4.0&tk=' + (0, _default.getTMapTK)(), function () {
109
+ $.getScript('//api.tianditu.gov.cn/api?v=4.0&tk=' + (0, _default.getTMapTK)(), function () {
110
110
  var Heatmap = new Promise(function (resolve, reject) {
111
111
  //对象问题 和arcgis使用不同的热力图
112
112
  $.getScript(_default2.default.mapServerURL + '/Theatmap.js', function () {
@@ -218,7 +218,10 @@ var TMap = function (_React$Component) {
218
218
  if (showControl) {
219
219
  t.showControl();
220
220
  }
221
-
221
+ //添加地图类型控件
222
+ if (t.props.satelliteSwitch) {
223
+ t.showMapTypeControl();
224
+ }
222
225
  // //画边界线
223
226
  // if(boundaryName instanceof Array && boundaryName.length>0){
224
227
  // t.addBaiduBoundary(boundaryName);
@@ -263,6 +266,13 @@ var TMap = function (_React$Component) {
263
266
  if (!window.VtxMap) {
264
267
  window.VtxMap = {};
265
268
  }
269
+ // 控件位置常量
270
+ t.AnchorConstant = {
271
+ tr: T_ANCHOR_TOP_RIGHT,
272
+ tl: T_ANCHOR_TOP_LEFT,
273
+ bl: T_ANCHOR_BOTTOM_LEFT,
274
+ br: T_ANCHOR_BOTTOM_RIGHT
275
+ };
266
276
  window.VtxMap[mapId] = t.state.gis = new T.Map(mapId.toString(), {
267
277
  //zoom等级,和百度一样默认10
268
278
  zoom: mapZoomLevel || 10,
@@ -556,63 +566,40 @@ var TMap = function (_React$Component) {
556
566
  }, {
557
567
  key: 'showControl',
558
568
  value: function showControl() {
559
- var t = this;
560
- var zlt = T_ANCHOR_BOTTOM_RIGHT;
561
- var zls = T_ANCHOR_BOTTOM_RIGHT;
562
- if (t.props.showControl) {
563
- switch (t.props.showControl.location) {
564
- case 'tl':
565
- zlt = T_ANCHOR_TOP_LEFT;
566
- zls = T_ANCHOR_BOTTOM_LEFT;
567
- break;
568
- case 'bl':
569
- zlt = T_ANCHOR_BOTTOM_LEFT;
570
- zls = T_ANCHOR_BOTTOM_LEFT;
571
- break;
572
- case 'tr':
573
- zlt = T_ANCHOR_TOP_RIGHT;
574
- zls = T_ANCHOR_BOTTOM_RIGHT;
575
- break;
576
- case 'br':
577
- zlt = T_ANCHOR_BOTTOM_RIGHT;
578
- zls = T_ANCHOR_BOTTOM_RIGHT;
579
- break;
580
- }
581
- }
582
- var zoomControl = void 0,
583
- scaleControl = void 0;
584
- switch (t.props.showControl.type) {
585
- case 'all':
586
- case 'small':
587
- case 'pan':
588
- case 'zoom':
589
- zoomControl = new T.Control.Zoom();
590
- scaleControl = new T.Control.Scale();
591
- this.state.gis.addControl(scaleControl);
592
- this.state.gis.addControl(zoomControl);
593
- zoomControl.setPosition(zlt);
594
- scaleControl.setPosition(zls);
595
- break;
596
- default:
597
- scaleControl = new T.Control.Scale();
598
- this.state.gis.addControl(scaleControl);
599
- scaleControl.setPosition(zls);
600
- break;
601
- }
602
- var fdom = document.getElementById(t.props.mapId);
603
- //天地图 api问题 使用js dom操作css
604
- if (t.props.showControl && t.props.showControl.location == 'bl') {
605
- var dom = fdom.getElementsByClassName('tdt-control-scale')[0];
606
- dom.style.position = 'relative';
607
- dom.style.top = '65px';
608
- dom.style.left = '45px';
569
+ var t = this,
570
+ location = t.AnchorConstant['tr'],
571
+ offset = null,
572
+ scaleOffset = null;
573
+ if (t.props.showControl.location) {
574
+ location = t.AnchorConstant[t.props.showControl.location];
609
575
  }
610
- if (t.props.showControl && t.props.showControl.location == 'br') {
611
- var _dom = fdom.getElementsByClassName('tdt-control-scale')[0];
612
- _dom.style.position = 'relative';
613
- _dom.style.top = '65px';
614
- _dom.style.right = '45px';
576
+ if (t.props.showControl.offset && t.props.showControl.offset.length > 0) {}
577
+ // TODO不支持偏移
578
+
579
+ // 添加比例尺
580
+ var control = new T.Control.Scale({ position: location, offset: scaleOffset });
581
+ t.state.gis.addControl(control);
582
+ // 缩放地图
583
+ var navigation = new T.Control.Zoom({ position: location, offset: offset });
584
+ t.state.gis.addControl(navigation);
585
+ }
586
+ //展示地图切换控件
587
+
588
+ }, {
589
+ key: 'showMapTypeControl',
590
+ value: function showMapTypeControl() {
591
+ var t = this,
592
+ location = t.AnchorConstant['br'],
593
+ offset = null;
594
+ if (t.props.satelliteSwitch.location) {
595
+ location = t.AnchorConstant[t.props.satelliteSwitch.location];
615
596
  }
597
+ if (t.props.satelliteSwitch.offset && t.props.satelliteSwitch.offset.length > 0) {}
598
+ // TODO不支持偏移
599
+
600
+ // 地图切换控件
601
+ var control = new T.Control.MapType({ position: location, offset: offset });
602
+ t.state.gis.addControl(control);
616
603
  }
617
604
  //测距
618
605
 
@@ -3140,7 +3127,7 @@ var TMap = function (_React$Component) {
3140
3127
  clearInterval(t.animTimer[j]);
3141
3128
  }
3142
3129
  }
3143
- window.VtxMap[t.state.mapId] = null;
3130
+ if (window.VtxMap && window.VtxMap[t.state.mapId]) window.VtxMap[t.state.mapId] = null;
3144
3131
  }
3145
3132
  }]);
3146
3133
 
package/lib/VtxSearchMap/VtxSearchMap.js CHANGED
@@ -32,12 +32,6 @@ var _message2 = _interopRequireDefault(_message);
32
32
 
33
33
  require('antd/lib/message/style/css');
34
34
 
35
- var _icon = require('antd/lib/icon');
36
-
37
- var _icon2 = _interopRequireDefault(_icon);
38
-
39
- require('antd/lib/icon/style/css');
40
-
41
35
  var _checkbox = require('antd/lib/checkbox');
42
36
 
43
37
  var _checkbox2 = _interopRequireDefault(_checkbox);
@@ -52,6 +46,8 @@ var _default = require('../default');
52
46
 
53
47
  var _default2 = _interopRequireDefault(_default);
54
48
 
49
+ var _mapping = require('./mapping');
50
+
55
51
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
56
52
 
57
53
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -83,8 +79,12 @@ var styles = {
83
79
  hiddenLabel: 'vtx-ui-searchmap-hiddenlabel',
84
80
  otherModal: 'vtx-ui-searchmap-othermodal'
85
81
  };
82
+ // import Icon from 'antd/lib/icon';
83
+ // import 'antd/lib/icon/style/css';
84
+
86
85
  //公共地址配置
87
86
 
87
+
88
88
  // message.config({
89
89
  // top: document.getElementById('root').offsetHeight/3,
90
90
  // duration: 5,
@@ -102,6 +102,10 @@ function distinct(ary) {
102
102
  }
103
103
  }
104
104
 
105
+ var getIcon = function getIcon(type) {
106
+ return _default.antdMajorVersion === '4' ? _react2.default.createElement(_default.VtxMapIcon, { type: 'icon-' + _mapping.iconMapping[type] }) : type;
107
+ };
108
+
105
109
  var VtxSearchMap = function (_React$Component) {
106
110
  _inherits(VtxSearchMap, _React$Component);
107
111
 
@@ -599,12 +603,12 @@ var VtxSearchMap = function (_React$Component) {
599
603
  _button2.default,
600
604
  { type: 'primary', onClick: function onClick() {
601
605
  _this4.callback();
602
- }, icon: 'check' },
606
+ }, icon: getIcon('check') },
603
607
  '\u786E\u5B9A'
604
608
  ),
605
609
  _react2.default.createElement(
606
610
  _button2.default,
607
- { onClick: this.closeModal.bind(this), icon: 'close' },
611
+ { onClick: this.closeModal.bind(this), icon: getIcon('close') },
608
612
  '\u5173\u95ED'
609
613
  )
610
614
  )
@@ -617,16 +621,16 @@ var VtxSearchMap = function (_React$Component) {
617
621
  { className: styles.top },
618
622
  mapType == 'gmap' ? '' : [_react2.default.createElement(_input2.default, _extends({ key: '1' }, InputProps)), _react2.default.createElement(
619
623
  _button2.default,
620
- { key: '2', type: 'primary', onClick: this.searchList.bind(this), icon: 'search' },
624
+ { key: '2', type: 'primary', onClick: this.searchList.bind(this), icon: getIcon('search') },
621
625
  '\u67E5\u8BE2'
622
626
  ), _react2.default.createElement(
623
627
  _button2.default,
624
- { key: '3', onClick: this.clearList.bind(this), icon: 'close' },
628
+ { key: '3', onClick: this.clearList.bind(this), icon: getIcon('close') },
625
629
  '\u6E05\u7A7A'
626
630
  )],
627
631
  this.state.graphicType == 'point' ? _react2.default.createElement(
628
632
  _button2.default,
629
- { onClick: this.correction.bind(this), icon: 'environment-o' },
633
+ { onClick: this.correction.bind(this), icon: getIcon('environment') },
630
634
  '\u6821\u6B63'
631
635
  ) : null,
632
636
  this.state.graphicType != 'point' ? _react2.default.createElement(
@@ -645,12 +649,12 @@ var VtxSearchMap = function (_React$Component) {
645
649
  });
646
650
  });
647
651
  _this4.callback('editDraw');
648
- }, icon: 'edit' },
652
+ }, icon: getIcon('edit') },
649
653
  '\u91CD\u65B0\u7ED8\u5236'
650
654
  ) : null,
651
655
  mapType == 'gmap' ? '' : _react2.default.createElement(
652
656
  _button2.default,
653
- { onClick: this.setFitView.bind(this), icon: 'sync' },
657
+ { onClick: this.setFitView.bind(this), icon: getIcon('sync') },
654
658
  '\u8FD4\u56DE\u5168\u5C40\u5730\u56FE'
655
659
  ),
656
660
  isShowOther ? _react2.default.createElement(
@@ -687,7 +691,7 @@ var VtxSearchMap = function (_React$Component) {
687
691
  { onClick: function onClick() {
688
692
  return _this4.showOrhidden(false);
689
693
  }, className: styles.btn },
690
- _react2.default.createElement(_icon2.default, { type: 'double-left' })
694
+ _react2.default.createElement(_default.VtxMapIcon, { type: 'icon-doubleleft' })
691
695
  )
692
696
  ),
693
697
  _react2.default.createElement(
@@ -713,7 +717,7 @@ var VtxSearchMap = function (_React$Component) {
713
717
  { onClick: function onClick() {
714
718
  return _this4.showOrhidden(true);
715
719
  }, className: styles.btn + ' ' + (!isShowList ? styles.show : styles.hidden) },
716
- _react2.default.createElement(_icon2.default, { type: 'double-right' })
720
+ _react2.default.createElement(_default.VtxMapIcon, { type: 'icon-doubleright' })
717
721
  )
718
722
  ),
719
723
  _react2.default.createElement(
package/lib/VtxSearchMap/mapping.js ADDED
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var iconMapping = exports.iconMapping = {
7
+ check: 'check',
8
+ close: 'close',
9
+ search: 'search1',
10
+ environment: 'location',
11
+ edit: 'edit',
12
+ sync: 'sync',
13
+ 'double-left': 'doubleleft',
14
+ 'double-right': 'doubleright'
15
+ };
package/lib/default.js CHANGED
@@ -3,17 +3,32 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.VtxMapIcon = exports.antdMajorVersion = undefined;
6
7
  exports.getTMapTK = getTMapTK;
8
+
9
+ var _package = require('antd/package.json');
10
+
11
+ var createFromIconfontCN = void 0;
12
+ var antdMajorVersion = exports.antdMajorVersion = _package.version.substring(0, 1);
13
+
14
+ // 必须是3.9.0之后的版本
15
+ if (antdMajorVersion === '3') {
16
+ createFromIconfontCN = require('antd/lib/icon').default.createFromIconfontCN;
17
+ } else if (antdMajorVersion === '4') {
18
+ createFromIconfontCN = require('@ant-design/icons').createFromIconfontCN;
19
+ }
20
+
21
+ var VtxMapIcon = exports.VtxMapIcon = createFromIconfontCN({
22
+ scriptUrl: '//at.alicdn.com/t/font_2865072_ecuwrji9qwq.js'
23
+ });
24
+
7
25
  var globalCfg = window.VtxPublicServiceAddress || {};
8
26
 
9
27
  exports.default = {
10
- httpOrhttps: globalCfg.httpOrhttps || 'http',
11
28
  //地图服务地址ip
12
- mapServerURL: globalCfg.mapServerURL ? globalCfg.mapServerURL : globalCfg.httpOrhttps == 'https' ? 'https://vortexplugin.cloudhw.cn/mapplugin' : 'http://120.26.217.62:25048/mapplugin',
29
+ mapServerURL: globalCfg.mapServerURL ? globalCfg.mapServerURL : '//vortexplugin.cloudhw.cn/mapplugin',
13
30
  //arcgis地图服务ip
14
- arcgisServerURL: globalCfg.arcgisServerURL ? globalCfg.arcgisServerURL : globalCfg.httpOrhttps == 'https' ? 'https://vortexplugin.cloudhw.cn/gis' : 'http://120.26.217.62:25048/gis',
15
- // ztree文件地址
16
- ztreeServer: globalCfg.ztreeServer ? globalCfg.ztreeServer : globalCfg.httpOrhttps == 'https' ? 'https://vortexplugin.cloudhw.cn/ztree' : 'http://120.26.217.62:25048/ztree'
31
+ arcgisServerURL: globalCfg.arcgisServerURL ? globalCfg.arcgisServerURL : '//vortexplugin.cloudhw.cn/gis'
17
32
  };
18
33
  function getTMapTK() {
19
34
  if (window.TMapTK) {
@@ -22,16 +37,4 @@ function getTMapTK() {
22
37
  var tks = ['b95ec6e55998a6408862ab2ac36c4950', '0e3608ea5e57ac901f1e14e653818910', '55bbbfecae274ce7de92579f15a5fbad'];
23
38
  return tks[Math.floor(Math.random() * 3)];
24
39
  }
25
- }
26
-
27
- // export default {
28
- // httpOrhttps: globalCfg.httpOrhttps || 'http',
29
- // //地图服务地址ip
30
- // mapServerURL: '/vtxuiuri/mapplugin',
31
- // //arcgis地图服务ip
32
- // arcgisServerURL: '/vtxuiuri/gis',
33
- // // ztree文件地址
34
- // ztreeServer: '/vtxuiuri/ztree',
35
- // // ueditor 富文本编辑地址
36
- // ueditorServer: '/vtxuiuri/',
37
- // }
40
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtx/map",
3
- "version": "1.0.0",
3
+ "version": "1.0.4",
4
4
  "description": "@vtx/map",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {