Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
new-socketemulator
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
李远洪
new-socketemulator
Commits
bfb189d3
Commit
bfb189d3
authored
Oct 27, 2020
by
liyuanhong
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
地图工具,完成了轨迹的编辑
parent
4c6f95bb
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
200 additions
and
8 deletions
+200
-8
templates/otherTools/maptool.html
templates/otherTools/maptool.html
+200
-8
No files found.
templates/otherTools/maptool.html
View file @
bfb189d3
...
...
@@ -53,7 +53,7 @@
<h5>
地址:
<p
style=
"display:inline;"
id=
"curLngLatInfo"
></p></h5>
</div>
</div>
<div
id=
"ctrArea_2"
style=
"width:400px;height:
16
0px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;"
class=
"btn-group btn-group-justified"
role=
"group"
>
<div
id=
"ctrArea_2"
style=
"width:400px;height:
28
0px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;"
class=
"btn-group btn-group-justified"
role=
"group"
>
<div
style=
"margin: 10px;padding-bottom: 5px;"
>
<label>
轨迹录制:
</label>
<button
type=
"button"
class=
"btn btn-default"
onclick=
"changeRecodeStatusOn()"
>
开始录制
</button>
...
...
@@ -68,6 +68,25 @@
</div>
<div
style=
"border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;"
>
<button
type=
"button"
class=
"btn btn-default"
onclick=
"showLineArea()"
>
查询轨迹
</button>
<label
style=
"margin-left:20px;"
>
轨迹长度:
</label><input
disabled=
"disabled"
type=
"text"
id=
"searched_gpsLen"
class=
"form-control"
style=
"display:inline;width:80px;"
value=
"0"
>
<div
style=
"margin-top:5px;"
>
<label>
查询GPS点:
</label>
<input
type=
"text"
id=
"index_point_search"
class=
"form-control"
style=
"display:inline;width:60px;"
value=
"1"
placeholder=
"索引"
>
<input
type=
"text"
id=
"index_point_search_result"
class=
"form-control"
style=
"display:inline;width:170px;"
placeholder=
"查询结果"
>
<button
type=
"button"
class=
"btn btn-default"
onclick=
"searchGpsPointByIndex()"
>
查询
</button>
</div>
<div
style=
"margin-top:5px;"
>
<label>
查询点索引:
</label>
<input
type=
"text"
id=
"point_index_search"
class=
"form-control"
style=
"display:inline;width:170px;"
placeholder=
"输入经纬度"
>
<input
type=
"text"
id=
"point_index_search_result"
class=
"form-control"
style=
"display:inline;width:60px;"
value=
""
placeholder=
"索引"
>
<button
type=
"button"
class=
"btn btn-default"
onclick=
"searchIndexByGpsPoint()"
>
查询
</button>
</div>
<div
style=
"margin-top:5px;"
>
<label>
修改GPS点:
</label>
<input
type=
"text"
id=
"point_index_change"
class=
"form-control"
style=
"display:inline;width:60px;"
value=
"1"
placeholder=
"索引"
>
<input
type=
"text"
id=
"point_index_change_content"
class=
"form-control"
style=
"display:inline;width:170px;"
placeholder=
"输入经纬度"
>
<button
type=
"button"
class=
"btn btn-default"
onclick=
"modifyGpsPoint()"
>
修改
</button>
</div>
</div>
</div>
<div
id=
"ctrArea_3"
style=
"width:400px;height:60px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;"
class=
"btn-group btn-group-justified"
role=
"group"
>
...
...
@@ -152,7 +171,9 @@
//用于显示查询的轨迹对象
var
showLineObj
=
undefined
;
//加载地图
/*************************************************************
* 加载地图
*************************************************************/
(
function
(){
map
=
new
AMap
.
Map
(
'
container
'
,
{
zoom
:
13
,
//级别
...
...
@@ -164,7 +185,9 @@
ruler1
=
new
AMap
.
RangingTool
(
map
);
})();
//处理地图点击事件
/*************************************************************
* 处理地图点击事件
*************************************************************/
map
.
on
(
'
click
'
,
function
(
ev
)
{
if
(
clickType
==
0
){
var
lnglat
=
ev
.
lnglat
;
...
...
@@ -198,6 +221,10 @@
recordingTrack
(
ev
);
}
});
/*************************************************************
* 控制面板的展示与隐藏
*************************************************************/
function
ctrAreaShow
(
e
){
var
cliId
=
$
(
e
).
attr
(
"
id
"
);
if
(
cliId
==
"
ctrArea1
"
){
...
...
@@ -233,7 +260,10 @@
}
}
//设置地图中心点,移动地图
/*************************************************************
* 根据经纬度查询地图上的位置点
*************************************************************/
function
setposition
(){
if
(
marker
!=
undefined
){
map
.
remove
(
marker
);
...
...
@@ -277,7 +307,9 @@
$
(
"
#distanceTxt
"
).
text
(
"
未测距
"
);
}
//录制轨迹
/*************************************************************
* 轨迹录制功能
*************************************************************/
function
recordingTrack
(
ev
){
var
lnglat
=
ev
.
lnglat
;
var
lnglattxt
=
[
parseFloat
(
lnglat
[
"
lng
"
]),
parseFloat
(
lnglat
[
"
lat
"
])];
...
...
@@ -377,7 +409,10 @@
function
closeLineArea
(){
$
(
"
#lineShowArea
"
).
css
(
"
display
"
,
"
none
"
);
}
//展示输入的轨迹
/*************************************************************
* 展示输入的轨迹
*************************************************************/
function
showInputLine
(){
var
lineInputTxt
=
$
(
"
#lineData1
"
).
val
();
var
lineInputShowArr
=
[];
...
...
@@ -401,6 +436,7 @@
if
(
showLineObj
!=
undefined
){
map
.
remove
(
showLineObj
);
}
$
(
"
#searched_gpsLen
"
).
val
(
lineInputShowArr
.
length
);
for
(
var
j
=
0
;
j
<
lineInputShowArr
.
length
;
j
++
){
var
cvtGps
=
coordtransform
.
wgs84togcj02
(
parseFloat
(
lineInputShowArr
[
j
][
0
]),
parseFloat
(
lineInputShowArr
[
j
][
1
]));
cvtGps
[
0
]
=
cvtGps
[
0
].
toFixed
(
6
);
...
...
@@ -426,8 +462,12 @@
map
.
remove
(
showLineObj
);
}
$
(
"
#lineData1
"
).
val
(
""
);
$
(
"
#searched_gpsLen
"
).
val
(
0
);
}
//切换模拟器后获取新的轨迹数据
/*************************************************************
* 切换模拟器后获取新的轨迹数据
*************************************************************/
function
getNewLines
(
e
){
var
type
=
$
(
e
).
val
();
var
data
=
{};
...
...
@@ -454,7 +494,9 @@
});
}
//点击查看gpsline
/*************************************************************
* 展示模拟器的gps轨迹
*************************************************************/
function
showModGpsLine
(){
var
type
=
$
(
"
#simulatorType
"
).
val
();
var
gpsLine
=
$
(
"
#witchLine option:selected
"
).
val
();
...
...
@@ -484,6 +526,7 @@
}
*/
var
lineInputShowArr1
=
[]
$
(
"
#searched_gpsLen
"
).
val
(
modGpsLines
.
length
);
for
(
var
j
=
0
;
j
<
modGpsLines
.
length
;
j
++
){
var
temp
=
[];
temp
[
0
]
=
parseFloat
(
modGpsLines
[
j
][
"
lng
"
]);
...
...
@@ -513,6 +556,155 @@
}
});
}
/*************************************************************
* 根据索引查询gps点
*************************************************************/
function
searchGpsPointByIndex
(){
var
pointIndex
=
parseInt
(
$
(
"
#index_point_search
"
).
val
());
var
pointGps
=
""
;
var
lineInputTxt
=
$
(
"
#lineData1
"
).
val
();
try
{
//json格式的gpsline
$
.
parseJSON
(
lineInputTxt
);
var
lineInputShowOri
=
$
.
parseJSON
(
lineInputTxt
)[
"
GPSLine
"
];
}
catch
(
e
){
//非json格式的gpsline
alert
(
"
请输入json格式的轨迹!
"
);
console
.
log
(
e
.
message
,
e
.
name
,
e
.
lineNumber
)
return
1
;
}
try
{
pointGps
=
lineInputShowOri
[
pointIndex
-
1
][
"
lng
"
]
+
"
,
"
+
lineInputShowOri
[
pointIndex
-
1
][
"
lat
"
];
$
(
"
#index_point_search_result
"
).
val
(
pointGps
);
}
catch
(
e
){
alert
(
"
查询失败!
"
);
$
(
"
#index_point_search_result
"
).
val
(
""
);
console
.
log
(
e
.
message
,
e
.
name
,
e
.
lineNumber
)
}
if
(
marker
!=
undefined
){
map
.
remove
(
marker
);
}
var
theGps
=
pointGps
.
split
(
"
,
"
)
AMap
.
convertFrom
(
theGps
,
'
gps
'
,
function
(
status
,
result
)
{
if
(
result
.
info
===
'
ok
'
)
{
var
cvtGps
=
[
result
[
"
locations
"
][
0
][
"
lng
"
],
result
[
"
locations
"
][
0
][
"
lat
"
]];
//var cvtGps = coordtransform.wgs84togcj02(parseFloat(theGps[0]), parseFloat(theGps[1]));
marker
=
new
AMap
.
Marker
({
//position: new AMap.LngLat(theGps[0],theGps[1]), // 使用原始经纬度
position
:
new
AMap
.
LngLat
(
cvtGps
[
0
],
cvtGps
[
1
]),
// 使用转换为高德地图标记的经纬度
title
:
'
定位
'
});
map
.
setCenter
(
theGps
);
map
.
add
(
marker
);
//显示经纬度地址信息
geocoder
.
getAddress
(
cvtGps
,
function
(
status
,
result
)
{
if
(
status
===
'
complete
'
&&
result
.
regeocode
)
{
var
address
=
result
.
regeocode
.
formattedAddress
;
$
(
"
#toLngLatInfo
"
).
text
(
address
);
}
else
{
log
.
error
(
'
根据经纬度查询地址失败
'
);
}
});
}
});
}
/*************************************************************
* 根据gps点查询索引位置
*************************************************************/
function
searchIndexByGpsPoint
(){
var
pointGps
=
$
(
"
#point_index_search
"
).
val
();
var
pointArr
=
pointGps
.
split
(
"
,
"
);
var
lng
=
(
parseInt
(
parseFloat
(
pointArr
[
0
])
*
100000
)
/
100000
).
toFixed
(
5
)
var
lat
=
(
parseInt
(
parseFloat
(
pointArr
[
1
])
*
100000
)
/
100000
).
toFixed
(
5
)
var
lineInputTxt
=
$
(
"
#lineData1
"
).
val
();
try
{
//json格式的gpsline
$
.
parseJSON
(
lineInputTxt
);
var
lineInputShowOri
=
$
.
parseJSON
(
lineInputTxt
)[
"
GPSLine
"
];
}
catch
(
e
){
//非json格式的gpsline
alert
(
"
请输入json格式的轨迹!
"
);
console
.
log
(
e
.
message
,
e
.
name
,
e
.
lineNumber
)
return
1
;
}
var
resultTxt
=
""
;
for
(
var
i
=
0
;
i
<
lineInputShowOri
.
length
;
i
++
){
lng
=
lng
.
toString
();
if
(
lineInputShowOri
[
i
][
"
lng
"
].
toString
().
includes
(
lng
)){
lat
=
lat
.
toString
();
if
(
lineInputShowOri
[
i
][
"
lat
"
].
toString
().
includes
(
lat
)){
if
(
resultTxt
===
""
){
resultTxt
=
resultTxt
+
(
i
+
1
).
toString
();
}
else
{
resultTxt
=
resultTxt
+
"
,
"
+
(
i
+
1
).
toString
();
}
}
}
}
$
(
"
#point_index_search_result
"
).
val
(
resultTxt
);
}
/*************************************************************
* 修改索引点的gps值
*************************************************************/
function
modifyGpsPoint
(){
var
pointIndex
=
parseInt
(
$
(
"
#point_index_change
"
).
val
());
var
pointContent
=
$
(
"
#point_index_change_content
"
).
val
();
var
pointArr
=
pointContent
.
split
(
"
,
"
);
var
lineInputTxt
=
$
(
"
#lineData1
"
).
val
();
try
{
//json格式的gpsline
$
.
parseJSON
(
lineInputTxt
);
var
lineInputJson
=
$
.
parseJSON
(
lineInputTxt
);
var
lineInputShowOri
=
$
.
parseJSON
(
lineInputTxt
)[
"
GPSLine
"
];
}
catch
(
e
){
//非json格式的gpsline
alert
(
"
请输入json格式的轨迹!
"
);
console
.
log
(
e
.
message
,
e
.
name
,
e
.
lineNumber
)
return
1
;
}
pointIndex
=
pointIndex
-
1
;
lineInputShowOri
[
pointIndex
][
"
lng
"
]
=
pointArr
[
0
];
lineInputShowOri
[
pointIndex
][
"
lat
"
]
=
pointArr
[
1
];
lineInputJson
[
"
GPSLine
"
]
=
lineInputShowOri
;
$
(
"
#lineData1
"
).
val
(
JSON
.
stringify
(
lineInputJson
,
null
,
4
));
var
modGpsLines
=
lineInputJson
[
"
GPSLine
"
];
if
(
showLineObj
!=
undefined
){
map
.
remove
(
showLineObj
);
}
var
modGpsLines
=
lineInputJson
[
"
GPSLine
"
];
var
lineInputShowArr1
=
[];
$
(
"
#searched_gpsLen
"
).
val
(
modGpsLines
.
length
);
for
(
var
j
=
0
;
j
<
modGpsLines
.
length
;
j
++
){
var
temp
=
[];
temp
[
0
]
=
parseFloat
(
modGpsLines
[
j
][
"
lng
"
]);
temp
[
1
]
=
parseFloat
(
modGpsLines
[
j
][
"
lat
"
]);
var
cvtGps
=
coordtransform
.
wgs84togcj02
(
temp
[
0
],
temp
[
1
]);
temp
[
0
]
=
cvtGps
[
0
].
toFixed
(
6
);
temp
[
1
]
=
cvtGps
[
1
].
toFixed
(
6
);
lineInputShowArr1
.
push
(
temp
);
}
modGpsLines
=
lineInputShowArr1
;
var
centerPoint
=
modGpsLines
[
parseInt
(
modGpsLines
.
length
/
2
)];
// 绘制轨迹
showLineObj
=
new
AMap
.
Polyline
({
map
:
map
,
path
:
modGpsLines
,
showDir
:
true
,
strokeColor
:
"
#28F
"
,
//线颜色
// strokeOpacity: 1, //线透明度
strokeWeight
:
5
,
//线宽
// strokeStyle: "solid" //线样式
});
map
.
setCenter
(
centerPoint
);
}
</script>
{% endblock %}
</div>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment