@vtx/map 1.1.1 → 1.1.5
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/AMap/AMap.js +2 -1
- package/lib/VtxMap/Map.js +6 -0
- package/lib/VtxMap/OMap/Map.js +43 -43
- package/lib/VtxMap/OMap/Map.less +70 -70
- package/lib/VtxMap/OlMap/Map.css +123 -0
- package/lib/VtxMap/OlMap/Map.js +3266 -0
- package/lib/VtxMap/OlMap/Map.less +122 -0
- package/lib/VtxMap/TMap/TMap.js +20 -19
- package/lib/VtxSearchMap/VtxSearchMap.js +13 -7
- package/lib/default.js +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
.map{
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
background-color: #f1f1f1;
|
|
5
|
+
}
|
|
6
|
+
.vtx_gmap_html_points,.vtx_gmap_html_pointCollection{
|
|
7
|
+
position: absolute;
|
|
8
|
+
top: 0px;
|
|
9
|
+
left: 0px;
|
|
10
|
+
}
|
|
11
|
+
.esriSimpleSlider{
|
|
12
|
+
z-index: 10000000 !important;
|
|
13
|
+
}
|
|
14
|
+
.label-content{
|
|
15
|
+
/*margin-left: 0;
|
|
16
|
+
width: 100px;
|
|
17
|
+
line-height: 25px;
|
|
18
|
+
text-align: center;
|
|
19
|
+
position: relative;
|
|
20
|
+
left: -43px;
|
|
21
|
+
background-color: #fff;
|
|
22
|
+
opacity: 1;
|
|
23
|
+
border-radius: 5px;
|
|
24
|
+
color: #5DD0EE;
|
|
25
|
+
word-break: break-all;
|
|
26
|
+
white-space: normal;
|
|
27
|
+
padding: 2px 8px;*/
|
|
28
|
+
display: inline-block;
|
|
29
|
+
padding: 5px;
|
|
30
|
+
line-height: 22px;
|
|
31
|
+
text-align: center;
|
|
32
|
+
border-radius: 5px;
|
|
33
|
+
background-color: #fff;
|
|
34
|
+
opacity: 1;
|
|
35
|
+
color: #5DD0EE;
|
|
36
|
+
}
|
|
37
|
+
.vtx-g-rangingPoint{
|
|
38
|
+
width: 7px;
|
|
39
|
+
height: 7px;
|
|
40
|
+
background-color: #fff;
|
|
41
|
+
border: 2px solid #ff0000;
|
|
42
|
+
display: inline-block;
|
|
43
|
+
border-radius: 7px;
|
|
44
|
+
}
|
|
45
|
+
.vtx-g-rangingDistance{
|
|
46
|
+
position: relative;
|
|
47
|
+
top: -36px;
|
|
48
|
+
left: 15px;
|
|
49
|
+
height: 30px;
|
|
50
|
+
line-height: 28px;
|
|
51
|
+
background-color: #fff;
|
|
52
|
+
border: 1px solid #ff0000;
|
|
53
|
+
font-size: 12px;
|
|
54
|
+
word-break: keep-all;
|
|
55
|
+
padding: 0px 3px;
|
|
56
|
+
}
|
|
57
|
+
.vtx-g-rang-exit{
|
|
58
|
+
width: 9px;
|
|
59
|
+
height: 9px;
|
|
60
|
+
background-color: #fff;
|
|
61
|
+
border: 2px solid #ff0000;
|
|
62
|
+
color: #ff0000;
|
|
63
|
+
line-height: 7px;
|
|
64
|
+
text-align: center;
|
|
65
|
+
font-size: 12px;
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
}
|
|
68
|
+
.vtx-g-rang-showRangTool{
|
|
69
|
+
line-height: 18px;
|
|
70
|
+
font-size: 12px;
|
|
71
|
+
border: 1px solid #ff0000;
|
|
72
|
+
word-break: keep-all;
|
|
73
|
+
background-color: #fff;
|
|
74
|
+
padding: 0px 5px;
|
|
75
|
+
}
|
|
76
|
+
.zoom_slider_show_scale{
|
|
77
|
+
padding: 1px 8px;
|
|
78
|
+
font-size: 12px;
|
|
79
|
+
text-align: center;
|
|
80
|
+
}
|
|
81
|
+
.zoom_slider_show_bottom{
|
|
82
|
+
width: 100%;
|
|
83
|
+
height: 3px;
|
|
84
|
+
border: 1px solid #000;
|
|
85
|
+
border-bottom: 3px solid #000;
|
|
86
|
+
border-top: 0px;
|
|
87
|
+
}
|
|
88
|
+
.ol-tooltip {
|
|
89
|
+
position: relative;
|
|
90
|
+
background: rgba(0, 0, 0, 0.5);
|
|
91
|
+
border-radius: 4px;
|
|
92
|
+
color: white;
|
|
93
|
+
padding: 4px 8px;
|
|
94
|
+
opacity: 0.7;
|
|
95
|
+
white-space: nowrap;
|
|
96
|
+
font-size: 12px;
|
|
97
|
+
cursor: default;
|
|
98
|
+
user-select: none;
|
|
99
|
+
}
|
|
100
|
+
.ol-tooltip-measure {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
font-weight: bold;
|
|
103
|
+
}
|
|
104
|
+
.ol-tooltip-static {
|
|
105
|
+
background-color: #ffcc33;
|
|
106
|
+
color: black;
|
|
107
|
+
border: 1px solid white;
|
|
108
|
+
}
|
|
109
|
+
.ol-tooltip-measure:before,
|
|
110
|
+
.ol-tooltip-static:before {
|
|
111
|
+
border-top: 6px solid rgba(0, 0, 0, 0.5);
|
|
112
|
+
border-right: 6px solid transparent;
|
|
113
|
+
border-left: 6px solid transparent;
|
|
114
|
+
content: "";
|
|
115
|
+
position: absolute;
|
|
116
|
+
bottom: -6px;
|
|
117
|
+
margin-left: -7px;
|
|
118
|
+
left: 50%;
|
|
119
|
+
}
|
|
120
|
+
.ol-tooltip-static:before {
|
|
121
|
+
border-top-color: #ffcc33;
|
|
122
|
+
}
|
package/lib/VtxMap/TMap/TMap.js
CHANGED
|
@@ -1587,11 +1587,11 @@ var TMap = function (_React$Component) {
|
|
|
1587
1587
|
infowindow && t.state.gis.closeInfoWindow();
|
|
1588
1588
|
}
|
|
1589
1589
|
}
|
|
1590
|
-
/*
|
|
1591
|
-
参数
|
|
1592
|
-
geometryType:point/polyline/polygon/circle/rectangle 默认point
|
|
1593
|
-
parameter 样式 默认null 对象{}写入方式跟add方法一样(对应点线圆面)
|
|
1594
|
-
data //初始化数据 默认{id:'add'}
|
|
1590
|
+
/*
|
|
1591
|
+
参数
|
|
1592
|
+
geometryType:point/polyline/polygon/circle/rectangle 默认point
|
|
1593
|
+
parameter 样式 默认null 对象{}写入方式跟add方法一样(对应点线圆面)
|
|
1594
|
+
data //初始化数据 默认{id:'add'}
|
|
1595
1595
|
*/
|
|
1596
1596
|
|
|
1597
1597
|
}, {
|
|
@@ -2053,7 +2053,8 @@ var TMap = function (_React$Component) {
|
|
|
2053
2053
|
ms.geometry._extent = (0, _MapToolFunction.getMaxMin)(ms.mapLayer.getLngLats()[0])._extent;
|
|
2054
2054
|
obj.geometry = ms.geometry;
|
|
2055
2055
|
obj.param = ms;
|
|
2056
|
-
obj.area =
|
|
2056
|
+
// obj.area = getPolygonArea(ms.mapLayer.getLngLats()[0]);
|
|
2057
|
+
obj.area = t.polygonTool.getArea(ms.mapLayer.getLngLats()[0]);
|
|
2057
2058
|
break;
|
|
2058
2059
|
case 'circle':
|
|
2059
2060
|
obj.geometry = ms.geometry;
|
|
@@ -2798,10 +2799,10 @@ var TMap = function (_React$Component) {
|
|
|
2798
2799
|
t.clearAllPointCollection();
|
|
2799
2800
|
}
|
|
2800
2801
|
|
|
2801
|
-
/*点数据处理
|
|
2802
|
-
pointData[2]相同的点,执行刷新
|
|
2803
|
-
pointData[1]的数据在idsForGraphicId中不存在的,执行新增
|
|
2804
|
-
pointData[0]数据中多余的id,执行删除
|
|
2802
|
+
/*点数据处理
|
|
2803
|
+
pointData[2]相同的点,执行刷新
|
|
2804
|
+
pointData[1]的数据在idsForGraphicId中不存在的,执行新增
|
|
2805
|
+
pointData[0]数据中多余的id,执行删除
|
|
2805
2806
|
*/
|
|
2806
2807
|
if (mapPoints instanceof Array && t.props.mapPoints instanceof Array && !t.deepEqual(mapPoints, t.props.mapPoints)) {
|
|
2807
2808
|
var oldMapPoints = t.props.mapPoints;
|
|
@@ -2861,9 +2862,9 @@ var TMap = function (_React$Component) {
|
|
|
2861
2862
|
//更新
|
|
2862
2863
|
t.updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
|
|
2863
2864
|
}
|
|
2864
|
-
/*
|
|
2865
|
-
面数据处理
|
|
2866
|
-
先全删除,再新增
|
|
2865
|
+
/*
|
|
2866
|
+
面数据处理
|
|
2867
|
+
先全删除,再新增
|
|
2867
2868
|
*/
|
|
2868
2869
|
if (mapPolygons instanceof Array && t.props.mapPolygons instanceof Array && !t.deepEqual(mapPolygons, t.props.mapPolygons)) {
|
|
2869
2870
|
var oldMapPolygons = t.props.mapPolygons;
|
|
@@ -2922,9 +2923,9 @@ var TMap = function (_React$Component) {
|
|
|
2922
2923
|
//更新
|
|
2923
2924
|
t.updatePolygon([].concat(_toConsumableArray(_upds), _toConsumableArray(_otherupds)));
|
|
2924
2925
|
}
|
|
2925
|
-
/*
|
|
2926
|
-
圆数据处理
|
|
2927
|
-
先全删除,再新增
|
|
2926
|
+
/*
|
|
2927
|
+
圆数据处理
|
|
2928
|
+
先全删除,再新增
|
|
2928
2929
|
*/
|
|
2929
2930
|
if (mapCircles instanceof Array && t.props.mapCircles instanceof Array && !t.deepEqual(mapCircles, t.props.mapCircles)) {
|
|
2930
2931
|
var oldMapCircles = t.props.mapCircles;
|
|
@@ -2983,9 +2984,9 @@ var TMap = function (_React$Component) {
|
|
|
2983
2984
|
//更新
|
|
2984
2985
|
t.updateCircle([].concat(_toConsumableArray(_upds2), _toConsumableArray(_otherupds2)));
|
|
2985
2986
|
}
|
|
2986
|
-
/*
|
|
2987
|
-
线数据处理
|
|
2988
|
-
先全删除,再新增
|
|
2987
|
+
/*
|
|
2988
|
+
线数据处理
|
|
2989
|
+
先全删除,再新增
|
|
2989
2990
|
*/
|
|
2990
2991
|
if (mapLines instanceof Array && t.props.mapLines instanceof Array && !t.deepEqual(mapLines, t.props.mapLines)) {
|
|
2991
2992
|
var oldMapLines = t.props.mapLines;
|
|
@@ -161,7 +161,9 @@ var VtxSearchMap = function (_React$Component) {
|
|
|
161
161
|
modal1Visible: props.modal1Visible || false,
|
|
162
162
|
isShowOther: props.isShowOther || false,
|
|
163
163
|
otherText: props.otherText || '显示服务区域',
|
|
164
|
-
isShowOtherGraph: props.isShowOther || false
|
|
164
|
+
isShowOtherGraph: props.isShowOther || false,
|
|
165
|
+
// openlayer
|
|
166
|
+
olProps: props.olProps
|
|
165
167
|
};
|
|
166
168
|
return _this;
|
|
167
169
|
}
|
|
@@ -503,7 +505,8 @@ var VtxSearchMap = function (_React$Component) {
|
|
|
503
505
|
otherText = _state2.otherText,
|
|
504
506
|
isShowOtherGraph = _state2.isShowOtherGraph,
|
|
505
507
|
editGraphic = _state2.editGraphic,
|
|
506
|
-
graphicType = _state2.graphicType
|
|
508
|
+
graphicType = _state2.graphicType,
|
|
509
|
+
olProps = _state2.olProps;
|
|
507
510
|
|
|
508
511
|
var InputProps = {
|
|
509
512
|
style: { 'width': '200px' },
|
|
@@ -632,7 +635,7 @@ var VtxSearchMap = function (_React$Component) {
|
|
|
632
635
|
_react2.default.createElement(
|
|
633
636
|
'div',
|
|
634
637
|
{ className: styles.top },
|
|
635
|
-
mapType == 'gmap' ? '' : [_react2.default.createElement(_input2.default, _extends({ key: '1' }, InputProps)), _react2.default.createElement(
|
|
638
|
+
mapType == 'gmap' || mapType == 'olmap' ? '' : [_react2.default.createElement(_input2.default, _extends({ key: '1' }, InputProps)), _react2.default.createElement(
|
|
636
639
|
_button2.default,
|
|
637
640
|
{ key: '2', type: 'primary', onClick: this.searchList.bind(this), icon: getIcon('search') },
|
|
638
641
|
'\u67E5\u8BE2'
|
|
@@ -665,7 +668,7 @@ var VtxSearchMap = function (_React$Component) {
|
|
|
665
668
|
}, icon: getIcon('edit') },
|
|
666
669
|
'\u91CD\u65B0\u7ED8\u5236'
|
|
667
670
|
) : null,
|
|
668
|
-
mapType == 'gmap' ? '' : _react2.default.createElement(
|
|
671
|
+
mapType == 'gmap' || mapType == 'olmap' ? '' : _react2.default.createElement(
|
|
669
672
|
_button2.default,
|
|
670
673
|
{ onClick: this.setFitView.bind(this), icon: getIcon('sync') },
|
|
671
674
|
'\u8FD4\u56DE\u5168\u5C40\u5730\u56FE'
|
|
@@ -684,8 +687,8 @@ var VtxSearchMap = function (_React$Component) {
|
|
|
684
687
|
),
|
|
685
688
|
_react2.default.createElement(
|
|
686
689
|
'div',
|
|
687
|
-
{ className: styles.content, style: { paddingLeft: mapType == 'gmap' ? '0px' : '25px' } },
|
|
688
|
-
mapType == 'gmap' ? '' : _react2.default.createElement(
|
|
690
|
+
{ className: styles.content, style: { paddingLeft: mapType == 'gmap' || mapType == 'olmap' ? '0px' : '25px' } },
|
|
691
|
+
mapType == 'gmap' || mapType == 'olmap' ? '' : _react2.default.createElement(
|
|
689
692
|
'div',
|
|
690
693
|
{ className: styles.content_left + ' ' + (isShowList ? styles.w_l : '') },
|
|
691
694
|
_react2.default.createElement(
|
|
@@ -763,7 +766,8 @@ var VtxSearchMap = function (_React$Component) {
|
|
|
763
766
|
clickGraphic: this.clickGraphic.bind(this),
|
|
764
767
|
clickMap: function clickMap() {
|
|
765
768
|
t.isClickMap = true;
|
|
766
|
-
}
|
|
769
|
+
},
|
|
770
|
+
olProps: olProps
|
|
767
771
|
}, drawProps))
|
|
768
772
|
)
|
|
769
773
|
)
|
|
@@ -859,6 +863,8 @@ var VtxSearchMap = function (_React$Component) {
|
|
|
859
863
|
_this6.map.getGraphic('locationPoint').mapLayer.geometry.setLatitude(nextProps.mapCenter[1]);
|
|
860
864
|
_this6.map.getGraphic('locationPoint').mapLayer.geometry.setLongitude(nextProps.mapCenter[0]);
|
|
861
865
|
_this6.map.state.gis.graphics.refresh();
|
|
866
|
+
case 'olMap':
|
|
867
|
+
_this6.map.getGraphic('locationPoint').mapLayer.setGeometry(new ol.geom.Point(nextProps.mapCenter));
|
|
862
868
|
break;
|
|
863
869
|
}
|
|
864
870
|
}
|
package/lib/default.js
CHANGED
|
@@ -28,7 +28,9 @@ exports.default = {
|
|
|
28
28
|
//地图服务地址ip
|
|
29
29
|
mapServerURL: globalCfg.mapServerURL ? globalCfg.mapServerURL : '//vortexplugin.cloudhw.cn/mapplugin',
|
|
30
30
|
//arcgis地图服务ip
|
|
31
|
-
arcgisServerURL: globalCfg.arcgisServerURL ? globalCfg.arcgisServerURL : '//vortexplugin.cloudhw.cn/gis'
|
|
31
|
+
arcgisServerURL: globalCfg.arcgisServerURL ? globalCfg.arcgisServerURL : '//vortexplugin.cloudhw.cn/gis',
|
|
32
|
+
//openlayer地图服务ip
|
|
33
|
+
openlayerServerURL: globalCfg.openlayerServerURL ? globalCfg.openlayerServerURL : '//vortexplugin.cloudhw.cn/openlayer'
|
|
32
34
|
};
|
|
33
35
|
function getTMapTK() {
|
|
34
36
|
if (window.TMapTK) {
|