Haina
/
information-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图上线

Browse Source
hotfix/远程访问多媒体中心
尹诚诚 7 years ago
parent fdb5f0abf8
commit 67eff2cbbe
9 changed files with 377 additions and 192 deletions
Show Stats Download Patch File Download Diff File

261
application/third_party/tour_map/views/welcome.php vendored
Unescape Escape View File

@ -1,17 +1,13 @@
<!doctype html> <!doctype html>
<html lang="zh-CN"> <html>
<head> <head>
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-demo.html -->
<!-- <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" /> -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>简单路径</title> <title>简单路径</title>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.10&key=b91a08b248b7db3e15a28eb3926650de'></script> <script type="text/javascript" src="/min/?f=/js/information-system3.min.js,/js/common.js&v=2018022601"></script>
<!-- UI组件库 1.0 --> <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.10&key=b91a08b248b7db3e15a28eb3926650de'></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> <script src="//webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript" src="http://info/min/?f=/js/information-system3.min.js,/js/common.js&v=2018022601"></script>
<style> <style>
html, html,
@ -49,15 +45,24 @@
data['memo']='G87';//备注，显示航班号，里程等等 data['memo']='G87';//备注，显示航班号，里程等等
--> -->
<?php <?php
$tour=array(); $tour = array();
$tour[]=array('start'=>'Beijing','start_lng'=>'116.41667','start_lat'=>'39.91667','end'=>'Xian','end_lng'=>'108.95000','end_lat'=>'34.26667','traffic'=>'2','memo'=>'G87'); $tour[] = array('start' => 'Beijing', 'start_lng' => '116.41667', 'start_lat' => '39.91667', 'end' => 'urumqi', 'end_lng' => '87.61792', 'end_lat' => '43.793308', 'traffic' => '2', 'memo' => 'G87');
$tour[]=array('start'=>'Xian','start_lng'=>'108.95000','start_lat'=>'34.26667','end'=>'Guilin','end_lng'=>'110.290247','end_lat'=>'25.273915','traffic'=>'3','memo'=>'CA1225'); $tour[] = array('start' => 'Beijing', 'start_lng' => '116.41667', 'start_lat' => '39.91667', 'end' => 'Xian', 'end_lng' => '108.95000', 'end_lat' => '34.26667', 'traffic' => '2', 'memo' => 'G87');
$tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.273915','end'=>'Longsheng','end_lng'=>'110.648739','end_lat'=>'24.828426','traffic'=>'5','memo'=>''); $tour[] = array('start' => 'Xian', 'start_lng' => '108.95000', 'start_lat' => '34.26667', 'end' => 'Guilin', 'end_lng' => '110.290247', 'end_lat' => '25.273915', 'traffic' => '3', 'memo' => 'CA1225');
$tour[]=array('start'=>'Longsheng','start_lng'=>'110.648739','start_lat'=>'24.828426','end'=>'Guilin','end_lng'=>'110.290247','end_lat'=>'25.273915','traffic'=>'5','memo'=>''); $tour[] = array('start' => 'Guilin', 'start_lng' => '110.290247', 'start_lat' => '25.273915', 'end' => 'Longsheng', 'end_lng' => '110.648739', 'end_lat' => '24.828426', 'traffic' => '5', 'memo' => '');
$tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.273915','end'=>'Yangshuo','end_lng'=>'110.496593','end_lat'=>'24.778481','traffic'=>'5','memo'=>''); $tour[] = array('start' => 'Longsheng', 'start_lng' => '110.648739', 'start_lat' => '24.828426', 'end' => 'Guilin', 'end_lng' => '110.290247', 'end_lat' => '25.273915', 'traffic' => '5', 'memo' => '');
$tour[]=array('start'=>'Yangshuo','start_lng'=>'110.496593','start_lat'=>'24.778481','end'=>'Guilin','end_lng'=>'110.290247','end_lat'=>'25.273915','traffic'=>'5','memo'=>''); $tour[] = array('start' => 'Guilin', 'start_lng' => '110.290247', 'start_lat' => '25.273915', 'end' => 'Yangshuo', 'end_lng' => '110.496593', 'end_lat' => '24.778481', 'traffic' => '5', 'memo' => '');
$tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.273915','end'=>'Shanghai','end_lng'=>'121.473658','end_lat'=>'31.230378','traffic'=>'3','memo'=>'FM9350'); $tour[] = array('start' => 'Yangshuo', 'start_lng' => '110.496593', 'start_lat' => '24.778481', 'end' => 'Guilin', 'end_lng' => '110.290247', 'end_lat' => '25.273915', 'traffic' => '5', 'memo' => '');
$tour[] = array('start' => 'Guilin', 'start_lng' => '110.290247', 'start_lat' => '25.273915', 'end' => 'Shanghai', 'end_lng' => '121.473658', 'end_lat' => '31.230378', 'traffic' => '3', 'memo' => 'FM9350');
$map_data = $this->input->get('map_data');
//echo $map_data;
$debug = $this->input->get('debug');
if (!empty($debug)) {
print_r(base64_decode($map_data));
}
?> ?>
<div id="container"></div> <div id="container"></div>
@ -65,30 +70,133 @@ $tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.27391
<script type="text/javascript"> <script type="text/javascript">
var tour_data='<?php echo json_encode($tour); ?>'; var tour_data = '<?php echo base64_decode($map_data); ?>';
//var tour_data='<?php echo json_encode($tour); ?>';
$(function () {
//创建地图 //创建地图
var map = new AMap.Map('container', { var map = new AMap.Map('container', {
zoom: 5, zoom: 5,
center: [116.397428, 39.90923], center: [116.397428, 39.90923],
lang: "zh_en" lang: "en",
mapStyle: "amap://styles/whitesmoke"
});
AMapUI.loadUI(['overlay/AwesomeMarker'],
function (AwesomeMarker) {
//icon的取值请见 http://fontawesome.io/icons/
var awIcons = [
'arrow-left',
'arrow-right',
'bookmark',
'city'
];
var cityIcon = new AMap.Icon({
size: new AMap.Size(12, 12)
}); });
//标记出目的地 //标记出目的地
$.each(JSON.parse(tour_data), function (index, element) { $.each(JSON.parse(tour_data), function (index, element) {
var marker_start = new AMap.Marker({
position:[element.start_lng,element.start_lat], awesomeIcon = awIcons[2]; //经过的城市图标
awesomeIcon_start = false; //入境城市
awesomeIcon_end = false; //出境城市
if (index === 0) {
awesomeIcon_start = awIcons[0];
var marker_start = new AwesomeMarker({
awesomeIcon: awesomeIcon_start,
iconStyle: 'orange',
map: map,
position: [element.start_lng, element.start_lat],
title: element.start, title: element.start,
label:{content:element.start,offset:new AMap.Pixel(15, 15)} label: {content: element.start, offset: new AMap.Pixel(30, 8)}
}); });
var marker_end = new AMap.Marker({ }
position:[element.end_lng,element.end_lat], if (index === JSON.parse(tour_data).length - 1) {
awesomeIcon_end = awIcons[1];
var marker_end = new AwesomeMarker({
awesomeIcon: awesomeIcon_end,
iconStyle: 'orange',
map: map,
position: [element.end_lng, element.end_lat],
title: element.end, title: element.end,
label:{content:element.end,offset:new AMap.Pixel(15, 15)} label: {content: element.end, offset: new AMap.Pixel(30, 8)}
}); });
map.add([marker_start,marker_end]); } else {
var marker_pass = new AMap.Marker({
position: [element.start_lng, element.start_lat],
offset: new AMap.Pixel(-3, -3),
icon: new AMap.Icon({
image: '/css/images/point.png',
siez: new AMap.Size(8, 8)
}),
title: element.start,
map: map,
label: {content: element.start, offset: new AMap.Pixel(8, -8)}
});
}
//画曲线
var path_data_control = vertical_line(element.start_lng, element.start_lat, element.end_lng, element.end_lat);
var pathdata = [
[element.start_lng, element.start_lat],
[element.start_lng, element.start_lat, path_data_control.lng, path_data_control.lat, element.end_lng, element.end_lat],
[element.end_lng, element.end_lat]
];
var bezierCurve = new AMap.BezierCurve({
path: pathdata, //设置线覆盖物路径
strokeColor: '#3366FF', // 线颜色
strokeOpacity: 1, // 线透明度
strokeWeight: 3, // 线宽
strokeStyle: 'solid', // 线样式
strokeDasharray: [10, 5], // 补充线样式
showDir: true
});
bezierCurve.setMap(map);
//绘制交通图标
//2火车 3飞机 4游船 5小车
switch (element.traffic) {
case '2':
tour_traffic = '/css/images/train.png';
break;
case '3':
tour_traffic = '/css/images/plane.png';
break;
case '4':
tour_traffic = '/css/images/ship.png';
break;
case '5':
tour_traffic = '/css/images/car.png';
break;
default:
tour_traffic = '/css/images/car.png';
}
var $markerContent ='';
if (element.memo !== '') {
$markerContent = '<div class="markerInfo">'+element.memo+'</div>';
}
bezierCurveCenter=vertical_line(element.start_lng, element.start_lat, element.end_lng, element.end_lat,0.3);
new AMap.Marker({
position: [bezierCurveCenter.lng, bezierCurveCenter.lat],
offset: new AMap.Pixel(-3, -3),
icon: new AMap.Icon({
image: tour_traffic,
siez: new AMap.Size(8, 8)
}),
title: bezierCurveCenter.lng + ',' + bezierCurveCenter.lat,
label: {content: $markerContent, offset: new AMap.Pixel(20, -10)},
map: map
}); });
});
});
/*
//画轨迹 //画轨迹
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) { AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
@ -104,9 +212,6 @@ $tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.27391
map: map, //所属的地图实例 map: map, //所属的地图实例
getPath: function(pathData, pathIndex) { getPath: function(pathData, pathIndex) {
return pathData.path; return pathData.path;
},
renderOptions: {
renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
} }
}); });
@ -130,22 +235,32 @@ $tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.27391
switch(element.traffic){ switch(element.traffic){
case '2': case '2':
tour_traffic='/css/images/train.png'; tour_traffic='/css/images/train.png';
tour_traffic_width=32;
tour_traffic_height=32;
tour_speed=50000; tour_speed=50000;
break; break;
case '3': case '3':
tour_traffic='/css/images/plane.png'; tour_traffic='/css/images/plane.png';
tour_traffic_width=32;
tour_traffic_height=32;
tour_speed=500000; tour_speed=500000;
break; break;
case '4': case '4':
tour_traffic='/css/images/ship.png'; tour_traffic='/css/images/ship.png';
tour_traffic_width=22;
tour_traffic_height=80;
tour_speed=50000; tour_speed=50000;
break; break;
case '5': case '5':
tour_traffic='/css/images/car.png'; tour_traffic='/css/images/car.png';
tour_traffic_width=32;
tour_traffic_height=32;
tour_speed=5000; tour_speed=5000;
break; break;
default: default:
tour_traffic='/css/images/car.png'; tour_traffic='/css/images/car.png';
tour_traffic_width=32;
tour_traffic_height=32;
tour_speed=50000; tour_speed=50000;
} }
@ -154,8 +269,8 @@ $tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.27391
loop: true, //循环播放 loop: true, //循环播放
speed: tour_speed, //巡航速度，单位千米/小时 speed: tour_speed, //巡航速度，单位千米/小时
pathNavigatorStyle: { pathNavigatorStyle: {
width: 32, width: tour_traffic_width,
height: 32, height: tour_traffic_height,
//使用图片 //使用图片
content: PathSimplifier.Render.Canvas.getImageContent(tour_traffic, onload, onerror), content: PathSimplifier.Render.Canvas.getImageContent(tour_traffic, onload, onerror),
strokeStyle: null, strokeStyle: null,
@ -172,6 +287,15 @@ $tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.27391
} }
}); });
//让导航器暂停，交通图标显示在中间节点
//console.log(navigator.range);
navigator.start(12);
navigator.pause();
//添加备注信息
if(tour_memo!==''){ if(tour_memo!==''){
var $markerContent = $('<div class="markerInfo"></div>'); var $markerContent = $('<div class="markerInfo"></div>');
$markerContent.html(tour_memo); $markerContent.html(tour_memo);
@ -180,19 +304,80 @@ $tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.27391
content: $markerContent.get(0), content: $markerContent.get(0),
map: map map: map
}); });
navigator.on('move', function() {
navigator.marker.setPosition(navigator.getPosition()); navigator.marker.setPosition(navigator.getPosition());
});
} }
navigator.start();
}); });
}); });
*/
/*
//贝赛尔曲线经过的起点，途经点，控制点，终点的二维数组
var position_beijing= new AMap.LngLat(116.39, 39.9);
var position_xian= new AMap.LngLat(108.939621,34.343147);
var position_guilin= new AMap.LngLat(110.290247,25.273915);
var position_urumqi= new AMap.LngLat(87.61792, 43.793308);
var position_shanghai= new AMap.LngLat(121.473658,31.230378);
var position_start=position_beijing;
var position_end=position_xian;
var path_data_control=vertical_line(position_start.lng, position_start.lat,position_end.lng, position_end.lat);
var position_control=new AMap.LngLat(path_data_control.lng, path_data_control.lat);
console.log(position_control);
console.log(position_xian);
var pathdata = [
position_start,
[position_start.lng, position_start.lat,position_control.lng, position_control.lat,position_end.lng, position_end.lat],
position_end
] ;
var bezierCurve = new AMap.BezierCurve({
path:pathdata, //设置线覆盖物路径
strokeColor: '#3366FF', // 线颜色
strokeOpacity: 1, // 线透明度
strokeWeight: 2, // 线宽
strokeStyle: 'solid', // 线样式
strokeDasharray: [10, 5], // 补充线样式
showDir:true
});
bezierCurve.setMap(map);
});
*/
//vertical_line(116.39, 39.9,87.61792, 43.793308);
});
//根据两点坐标求过中点的垂线
//Threshold 阈值，用来调整曲线开口大小
function vertical_line(Ax, Ay, Bx, By,Threshold) {
Ax = parseFloat(Ax);
Ay = parseFloat(Ay);
Bx = parseFloat(Bx);
By = parseFloat(By);
Threshold = typeof Threshold !== 'undefined' ? Threshold : 0.6;
var x, y;
var Mx = (Ax + Bx) / 2;
var My = (Ay + By) / 2;
//console.log(Mx + ',' + My);
//根据终点纬度高低来确定曲线开口方向
if (Ay >= By) {
x = Mx - Threshold;
} else {
x = Mx + Threshold;
}
y = My - (Bx - Ax) * (x - Mx) / (By - Ay);
//console.log(y);
return {'lng': x, 'lat': y};
y = My - 0.5;
x = Mx - (y - My) * (By - Ay) / (Bx - Ax);
//console.log(x);
}
</script> </script>
</body> </body>
</html> </html>

BIN
css/images/arrow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
css/images/car.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
css/images/point.PNG
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
css/images/ship.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
css/images/ship32x32.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
css/images/train.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
css/images/train32x32.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
css/images/trainxMAX.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

Write Preview
Loading…
Cancel
Save