WebGIS-路径规划
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智慧校园</title>
<!-- 引入资源 -->
<!-- 1 引入CSS资源 -->
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<link rel="stylesheet" href="./css/index.css">
<!-- 2 引入JS资源 -->
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '自己的',
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=自己的&plugin=AMap.GeoJSON"></script>
<script src="./js/store.js"> </script>
</head>
<body>
<!-- 1 创建地图容器 -->
<div id="container"></div>
<div class="info">点击地图标注热门地点</div>
<div class="input-card" style="width: 10rem;">
<h4>推荐浏览路线</h4>
<div class="input-item">
<button class="btn" onclick="startAnimation()">开始动画</button>
</div>
</div>
<script>
var map = new AMap.Map('container', {
center: [114.402672, 30.518987],
zoom: 16,
viewMode: '3D',
pitch: 45
})
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar','AMap.MoveAnimation',], function () {
map.addControl(new AMap.ToolBar({
position:{
top:'80px',
right:'40px',
}
}));
map.addControl(new AMap.Scale());
map.addControl(new AMap.ControlBar());
})
// 定义一个全局变量，保存geojson
var geojson=new AMap.GeoJSON({
geoJSON:null,
})
// 如果存在数据，则导出数据
if(JSON.stringify(getData())!='[]'){
// 导入数据
geojson.importData(getData());
//回复旧数据的点击事件
geojson.eachOverlay(function(item){
item.on('click',function(e){
// console.log(e.lnglat,'旧的数据点击了');
//让点击的marker对象的clcik属性+1
var ext=item.getExtData()
// ext._geoJsonProperties.clcik=ext._geoJsonProperties.clcik+1
// var click=ext._geoJsonProperties.clcik
var click=++ext._geoJsonProperties.clcik
// console.log('点击了'+click+'次');
// 使用消息提示框显示次数
var infowindow=new AMap.InfoWindow({
anchor:'top-center',
content:`<div>打卡了${click}次</div>`
})
//显示（打开信息窗口）
infowindow.open(map,item.getPosition());
saveData(geojson.toGeoJSON())
})
})
}
map.add(geojson);
// console.log(geojson);
// 监听地图点击事件
map.on('click', function (e) {
var marker = new AMap.Marker({
position: e.lnglat,
extData:{
_geoJsonProperties:{
gid:geojson.getOverlays().length+1,
clcik:0.
}
}
})
// 使用覆盖物的点击事件
marker.on('click',function(e){
// console.log(e.lnglat,'点击了');
//让点击的marker对象的clcik属性+1
var ext=marker.getExtData()
// ext._geoJsonProperties.clcik=ext._geoJsonProperties.clcik+1
// var click=ext._geoJsonProperties.clcik
var click=++ext._geoJsonProperties.clcik
// console.log('点击了'+click+'次');
// 使用消息提示框显示次数
var infowindow=new AMap.InfoWindow({
anchor:'top-center',
content:`<div>打卡了${click}次</div>`
})
//显示（打开信息窗口）
infowindow.open(map,marker.getPosition());
saveData(geojson.toGeoJSON())
})
// 通过geojson管理覆盖物,显示点
// map.add(marker);
geojson.addOverlay(marker);
// console.log(geojson);
// 保存数据，将geojson对象转换为标准的GeoJSON格式对象
saveData(geojson.toGeoJSON())
})
function startAnimation(){
// console.log('开始动画');
// 实现路径规划
AMap.plugin('AMap.Driving',function(){
var driving=new AMap.Driving({
map:map,
//驾车策略
policy:AMap.DrivingPolicy.LEAST_TIME
})
//设置起始点
var start=new AMap.LngLat(114.40099, 30.518649)//东门
var end=new AMap.LngLat(114.404767, 30.523864)//西北门
// 通过geojson得到每一个点的坐标
var opts={
waypoints:[],
}
geojson.eachOverlay(function(item){
// console.log(item);
opts.waypoints.push(item.getPosition())
})
driving.search(start,end,opts,function(status,result){
if(status=='complete'){
// console.log('ok');
// 实现轨迹模拟
// console.log(result);
var lineArr=[];
result.routes[0].steps.forEach(function(item){
lineArr.push(...item.path)
})
var marker=new AMap.Marker({
map:map,
position:start,
icon:'https://webapi.amap.com/images/car.png',
offset:new AMap.Pixel(-26,-13),
// autoRoation:true,
// angle:-180,
})
var passedPolyline=new AMap.Polyline({
map:map,
strokeColor:"#AF5",//线的颜色
strokeWeight:6,//线宽
})
marker.on('moving',function(e){
passedPolyline.setPath(e.passedPath)
})
map.setFitView();
marker.moveAlong(lineArr,{
duration:500,
autoRoation:true,
})
}else{
console.log('error');
}
})
})
}
</script>
</body>
</html>
store.js
// 从localstorage中读取数据
function getData(){
// 如果本地localstorage中不存在数据
if(!localStorage.getItem('geojson')){
localStorage.setItem('geojson','[]')
}
return JSON.parse(localStorage.getItem('geojson'))
}
// 将数据保存到localStorage中
function saveData(data){
localStorage.setItem('geojson',JSON.stringify(data))
}
初学者学习记录，勿喷，侵删！
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)