|
|
<!doctype html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
|
<title>Tour Map</title>
|
|
|
<script type="text/javascript" src="https://data.chinahighlights.com/js/min.php?f=/js/jquery-1.10.2.min.js"></script>
|
|
|
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.10&key=b91a08b248b7db3e15a28eb3926650de'></script>
|
|
|
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
|
|
|
|
|
|
<style>
|
|
|
html,
|
|
|
body,
|
|
|
#container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
margin: 0px;
|
|
|
}
|
|
|
.amap-marker-label{
|
|
|
border: 0;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
.markerInfo {
|
|
|
background: rgba(255, 255, 255, 0.7);
|
|
|
padding: 2px 5px;
|
|
|
border: 1px solid #ccc;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
<body>
|
|
|
<!--
|
|
|
根据行程生成地图，数据格式：
|
|
|
起点名称，起点坐标，终点名称，终点坐标，交通工具，交通工具备注（如航班号，车次等）
|
|
|
data['start']='Beijing';//出发地
|
|
|
data['start_lng']='116.41667';//经度
|
|
|
data['start_lat']='39.91667';//纬度
|
|
|
data['end']='Xian';
|
|
|
data['end_lng']='108.95000';//经度
|
|
|
data['end_lat']='34.26667';//纬度
|
|
|
data['traffic']='2';//交通类型 2火车 3飞机 4游船 5小车
|
|
|
data['memo']='G87';//备注，显示航班号，里程等等
|
|
|
|
|
|
-->
|
|
|
<?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' => '');
|
|
|
$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' => '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>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
var tour_data = '<?php echo base64_decode($map_data); ?>';
|
|
|
|
|
|
$(function () {
|
|
|
|
|
|
|
|
|
//创建地图
|
|
|
var map = new AMap.Map('container', {
|
|
|
zoom: 5,
|
|
|
center: [116.397428, 39.90923],
|
|
|
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) {
|
|
|
|
|
|
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(30, 8)}
|
|
|
});
|
|
|
}
|
|
|
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(30, 8)}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
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: 5, // 线宽
|
|
|
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, $) {
|
|
|
|
|
|
if (!PathSimplifier.supportCanvas) {
|
|
|
alert('当前环境不支持 Canvas！');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var pathSimplifierIns = new PathSimplifier({
|
|
|
zIndex: 100,
|
|
|
//autoSetFitView:true,//自动调整地图视野以适合全部轨迹
|
|
|
map: map, //所属的地图实例
|
|
|
getPath: function(pathData, pathIndex) {
|
|
|
return pathData.path;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
window.pathSimplifierIns = pathSimplifierIns;
|
|
|
|
|
|
var path_data=new Array();
|
|
|
$.each(JSON.parse(tour_data), function (index, element) {
|
|
|
path_data.push({'name':index,'path':PathSimplifier.getGeodesicPath([element.start_lng, element.start_lat], [element.end_lng, element.end_lat], 30)});
|
|
|
});
|
|
|
|
|
|
//设置数据
|
|
|
pathSimplifierIns.setData(path_data);
|
|
|
|
|
|
$.each(JSON.parse(tour_data), function (index, element) {
|
|
|
//交通工具 plane car train ship
|
|
|
var tour_traffic='';
|
|
|
var tour_speed=500000;//巡航速度，单位千米/小时
|
|
|
var tour_memo=element.memo;
|
|
|
|
|
|
//2火车 3飞机 4游船 5小车
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
//创建一个巡航器
|
|
|
var navigator = pathSimplifierIns.createPathNavigator(index, {
|
|
|
loop: true, //循环播放
|
|
|
speed: tour_speed, //巡航速度，单位千米/小时
|
|
|
pathNavigatorStyle: {
|
|
|
width: tour_traffic_width,
|
|
|
height: tour_traffic_height,
|
|
|
//使用图片
|
|
|
content: PathSimplifier.Render.Canvas.getImageContent(tour_traffic, onload, onerror),
|
|
|
strokeStyle: null,
|
|
|
fillStyle: null,
|
|
|
//经过路径的样式
|
|
|
pathLinePassedStyle: {
|
|
|
lineWidth: 6,
|
|
|
//strokeStyle: 'black',
|
|
|
dirArrowStyle: {
|
|
|
stepSpace: 15,
|
|
|
strokeStyle: 'red'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
//让导航器暂停，交通图标显示在中间节点
|
|
|
//console.log(navigator.range);
|
|
|
navigator.start(12);
|
|
|
navigator.pause();
|
|
|
|
|
|
|
|
|
//添加备注信息
|
|
|
|
|
|
if(tour_memo!==''){
|
|
|
var $markerContent = $('<div class="markerInfo"></div>');
|
|
|
$markerContent.html(tour_memo);
|
|
|
navigator.marker = new AMap.Marker({
|
|
|
offset: new AMap.Pixel(15, -10),
|
|
|
content: $markerContent.get(0),
|
|
|
map: map
|
|
|
});
|
|
|
navigator.marker.setPosition(navigator.getPosition());
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
*/
|
|
|
|
|
|
/*
|
|
|
//贝赛尔曲线经过的起点，途经点，控制点，终点的二维数组
|
|
|
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>
|
|
|
|
|
|
</html>
|