@vtx/map 1.1.6 → 1.1.7-beta.0
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.
- package/README.md +44 -44
- package/lib/VtxMap/BMap/Map.js +1 -1
- package/lib/VtxMap/OMap/Map.js +43 -43
- package/lib/VtxMap/OMap/Map.less +70 -70
- package/lib/VtxMap/OlMap/Map.js +398 -90
- package/lib/VtxMap/OlMap/Map.less +121 -121
- package/lib/VtxMap/TMap/TMap.js +18 -18
- package/lib/default.js +2 -0
- 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/BMap/Map.js
CHANGED
|
@@ -189,7 +189,7 @@ var BaiduMap = function (_React$Component) {
|
|
|
189
189
|
resolve(_this2.loadPlugin());
|
|
190
190
|
} else {
|
|
191
191
|
// EVlFc6DZzAzU5avIjoxNcFgQ
|
|
192
|
-
$.getScript(
|
|
192
|
+
$.getScript(_default2.default.bmapScriptUrl, function () {
|
|
193
193
|
resolve(_this2.loadPlugin());
|
|
194
194
|
});
|
|
195
195
|
$("<link>").attr({ rel: "stylesheet", type: "text/css", href: '//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css' }).appendTo("head");
|
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
|
+
}
|