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

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

@ -1,17 +1,13 @@
<!doctype html>
<html lang="zh-CN">
<html>
<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 name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>简单路径</title>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.10&key=b91a08b248b7db3e15a28eb3926650de'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript" src="http://info/min/?f=/js/information-system3.min.js,/js/common.js&v=2018022601"></script>
<script type="text/javascript" src="/min/?f=/js/information-system3.min.js,/js/common.js&v=2018022601"></script>
<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"></script>
<style>
html,
@ -51,6 +47,7 @@
-->
<?php
$tour = array();
$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' => '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' => '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' => 'Guilin', 'start_lng' => '110.290247', 'start_lat' => '25.273915', 'end' => 'Longsheng', 'end_lng' => '110.648739', 'end_lat' => '24.828426', 'traffic' => '5', 'memo' => '');
@ -58,6 +55,14 @@ $tour[]=array('start'=>'Longsheng','start_lng'=>'110.648739','start_lat'=>'24.82
$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' => '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>
@ -65,30 +70,133 @@ $tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.27391
<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', {
zoom: 5,
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) {
var marker_start = new AMap.Marker({
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,
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({
}
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,
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, $) {
@ -104,9 +212,6 @@ $tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.27391
map: map, //所属的地图实例
getPath: function(pathData, pathIndex) {
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){
case '2':
tour_traffic='/css/images/train.png';
tour_traffic_width=32;
tour_traffic_height=32;
tour_speed=50000;
break;
case '3':
tour_traffic='/css/images/plane.png';
tour_traffic_width=32;
tour_traffic_height=32;
tour_speed=500000;
break;
case '4':
tour_traffic='/css/images/ship.png';
tour_traffic_width=22;
tour_traffic_height=80;
tour_speed=50000;
break;
case '5':
tour_traffic='/css/images/car.png';
tour_traffic_width=32;
tour_traffic_height=32;
tour_speed=5000;
break;
default:
tour_traffic='/css/images/car.png';
tour_traffic_width=32;
tour_traffic_height=32;
tour_speed=50000;
}
@ -154,8 +269,8 @@ $tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.27391
loop: true, //循环播放
speed: tour_speed, //巡航速度，单位千米/小时
pathNavigatorStyle: {
width: 32,
height: 32,
width: tour_traffic_width,
height: tour_traffic_height,
//使用图片
content: PathSimplifier.Render.Canvas.getImageContent(tour_traffic, onload, onerror),
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!==''){
var $markerContent = $('<div class="markerInfo"></div>');
$markerContent.html(tour_memo);
@ -180,17 +304,78 @@ $tour[]=array('start'=>'Guilin','start_lng'=>'110.290247','start_lat'=>'25.27391
content: $markerContent.get(0),
map: map
});
navigator.on('move', function() {
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>
</body>

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