@vtx/map 1.0.3 → 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 (7) hide show
  1. package/README.md +44 -44
  2. package/lib/VtxMap/AMap/AMap.js +48 -7
  3. package/lib/VtxMap/BMap/Map.js +47 -32
  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 +61 -74
  7. 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('//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
@@ -322,6 +322,19 @@ var BaiduMap = function (_React$Component) {
322
322
  } else {
323
323
  window.VtxMap = {};
324
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
+ };
325
338
  var map = window.VtxMap[mapId] = t.state.gis = new BMap.Map(mapId.toString(), {
326
339
  enableMapClick: false,
327
340
  minZoom: options.minZoom,
@@ -340,9 +353,9 @@ var BaiduMap = function (_React$Component) {
340
353
  }, 500);
341
354
  // 初始化地图,设置中心点坐标和地图级别
342
355
  map.centerAndZoom(new BMap.Point(parseFloat(options.center[0]), parseFloat(options.center[1])), options.zoom);
343
- //添加地图类型控件(几乎不用,先写着)
356
+ //添加地图类型控件
344
357
  if (t.props.satelliteSwitch) {
345
- map.addControl(new BMap.MapTypeControl());
358
+ t.showMapTypeControl();
346
359
  }
347
360
  //初始化路况控件
348
361
  if (!t._trafficCtrl) {
@@ -2211,45 +2224,47 @@ var BaiduMap = function (_React$Component) {
2211
2224
  key: 'showControl',
2212
2225
  value: function showControl() {
2213
2226
  var t = this,
2214
- location = BMAP_ANCHOR_TOP_LEFT,
2215
- type = '';
2216
- switch (t.props.showControl.location) {
2217
- case 'tl':
2218
- location = BMAP_ANCHOR_TOP_LEFT;
2219
- break;
2220
- case 'bl':
2221
- location = BMAP_ANCHOR_BOTTOM_LEFT;
2222
- break;
2223
- case 'tr':
2224
- location = BMAP_ANCHOR_TOP_RIGHT;
2225
- break;
2226
- case 'br':
2227
- location = BMAP_ANCHOR_BOTTOM_RIGHT;
2228
- 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];
2229
2233
  }
2230
- switch (t.props.showControl.type) {
2231
- case 'all':
2232
- type = '';
2233
- break;
2234
- case 'small':
2235
- type = BMAP_NAVIGATION_CONTROL_SMALL;
2236
- break;
2237
- case 'pan':
2238
- type = BMAP_NAVIGATION_CONTROL_PAN;
2239
- break;
2240
- case 'zoom':
2241
- type = BMAP_NAVIGATION_CONTROL_ZOOM;
2242
- 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]);
2243
2240
  }
2244
2241
  // 左上角，添加比例尺
2245
- var control = new BMap.ScaleControl({ anchor: location });
2242
+ var control = new BMap.ScaleControl({ anchor: location, offset: scaleOffset });
2246
2243
  t.state.gis.addControl(control);
2247
2244
  if (type !== 'null') {
2248
2245
  //右上角，仅包含平移和缩放按钮
2249
- var navigation = new BMap.NavigationControl({ anchor: location, type: type });
2246
+ var navigation = new BMap.NavigationControl({ anchor: location, type: type, offset: offset });
2250
2247
  t.state.gis.addControl(navigation);
2251
2248
  }
2252
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
+ }
2253
2268
  /*设置显示区域*/
2254
2269
 
2255
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
@@ -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
 
@@ -1530,11 +1517,11 @@ var TMap = function (_React$Component) {
1530
1517
  t.heatmap.hide();
1531
1518
  }
1532
1519
  }
1533
- /*
1534
- 参数
1535
- geometryType:point/polyline/polygon/circle/rectangle 默认point
1536
- parameter 样式 默认null 对象{}写入方式跟add方法一样(对应点线圆面)
1537
- data //初始化数据 默认{id:'add'}
1520
+ /*
1521
+ 参数
1522
+ geometryType:point/polyline/polygon/circle/rectangle 默认point
1523
+ parameter 样式 默认null 对象{}写入方式跟add方法一样(对应点线圆面)
1524
+ data //初始化数据 默认{id:'add'}
1538
1525
  */
1539
1526
 
1540
1527
  }, {
@@ -2740,10 +2727,10 @@ var TMap = function (_React$Component) {
2740
2727
  t.clearAllPointCollection();
2741
2728
  }
2742
2729
 
2743
- /*点数据处理
2744
- pointData[2]相同的点,执行刷新
2745
- pointData[1]的数据在idsForGraphicId中不存在的,执行新增
2746
- pointData[0]数据中多余的id,执行删除
2730
+ /*点数据处理
2731
+ pointData[2]相同的点,执行刷新
2732
+ pointData[1]的数据在idsForGraphicId中不存在的,执行新增
2733
+ pointData[0]数据中多余的id,执行删除
2747
2734
  */
2748
2735
  if (mapPoints instanceof Array && t.props.mapPoints instanceof Array && !t.deepEqual(mapPoints, t.props.mapPoints)) {
2749
2736
  var oldMapPoints = t.props.mapPoints;
@@ -2803,9 +2790,9 @@ var TMap = function (_React$Component) {
2803
2790
  //更新
2804
2791
  t.updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
2805
2792
  }
2806
- /*
2807
- 面数据处理
2808
- 先全删除,再新增
2793
+ /*
2794
+ 面数据处理
2795
+ 先全删除,再新增
2809
2796
  */
2810
2797
  if (mapPolygons instanceof Array && t.props.mapPolygons instanceof Array && !t.deepEqual(mapPolygons, t.props.mapPolygons)) {
2811
2798
  var oldMapPolygons = t.props.mapPolygons;
@@ -2864,9 +2851,9 @@ var TMap = function (_React$Component) {
2864
2851
  //更新
2865
2852
  t.updatePolygon([].concat(_toConsumableArray(_upds), _toConsumableArray(_otherupds)));
2866
2853
  }
2867
- /*
2868
- 圆数据处理
2869
- 先全删除,再新增
2854
+ /*
2855
+ 圆数据处理
2856
+ 先全删除,再新增
2870
2857
  */
2871
2858
  if (mapCircles instanceof Array && t.props.mapCircles instanceof Array && !t.deepEqual(mapCircles, t.props.mapCircles)) {
2872
2859
  var oldMapCircles = t.props.mapCircles;
@@ -2925,9 +2912,9 @@ var TMap = function (_React$Component) {
2925
2912
  //更新
2926
2913
  t.updateCircle([].concat(_toConsumableArray(_upds2), _toConsumableArray(_otherupds2)));
2927
2914
  }
2928
- /*
2929
- 线数据处理
2930
- 先全删除,再新增
2915
+ /*
2916
+ 线数据处理
2917
+ 先全删除,再新增
2931
2918
  */
2932
2919
  if (mapLines instanceof Array && t.props.mapLines instanceof Array && !t.deepEqual(mapLines, t.props.mapLines)) {
2933
2920
  var oldMapLines = t.props.mapLines;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtx/map",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "@vtx/map",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {