• webGIS轨迹移动案例（高德）

    学习webgis可以参考我的专栏，代码学习来自B站的某一位视频博主

    （注：在引入资源的部分，都需要你自己的key和安全密匙）

    最后的webgis案例

    效果图：

     首先创建如下文件夹结构

     index.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>智慧校园title>
    8.     
    9.     <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    10.     <link rel="stylesheet" href="./css/index.css">
    11.     <script type="text/javascript">
    12.         window._AMapSecurityConfig = {
    13.             securityJsCode:'你的密匙',
    14.         }
    15.     script>
    16.     <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.GeoJSON">script> 
    17.     <script src="./js/store.js">script>
    18. head>
    19. <body>
    20.     
    21.     <div id="container">div>
    22.     <div class="info">点击地图标注热门地点div>
    23.     <div class="input-card">
    24.         <h4>推荐路线h4>
    25.         <div class="input-item">
    26.             <button class="btn" onclick="startAnimation()">开始动画button>
    27.         div>
    28.     div>
    29.     
    30.     <script>
    31.         // 定义一个变量，保存一个对象
    32.         var map = new AMap.Map('container',{
    33.             center:[114,30],//设置地图中心点的经纬度
    34.             zoom:12,  //地图的缩放比例（3-20）
    35.             viewMode:'3D',  //放大后有3D效果
    36.             pitch:45   //3D俯视角度
    37.         })
    38.  
    39.      //  加载控件
    40.     //  5.1安装plugin
    41.     AMap.plugin([
    42.             'AMap.ToolBar',
    43.             'AMap.Scale',
    44.             'AMap.HawkEye',
    45.             'AMap.MapType',
    46.             'AMap.Geolocation',
    47.             'AMap.ControlBar',
    48.             'AMap.MoveAnimation'
    49.         ], 
    50.         function(){
    51.                 map.addControl(new AMap.ToolBar({
    52.                     position:{
    53.                         top:'180px',
    54.                         right:'40px'
    55.                     }
    56.                 })),
    57.                 map.addControl(new AMap.HawkEye({isOpen:true}));
    58.                 map.addControl(new AMap.MapType({
    59.                     position:{
    60.                         top:'300px',
    61.                         right:'40px'
    62.                     }
    63.                 }));
    64.                 map.addControl(new AMap.Geolocation());
    65.                 map.addControl(new AMap.ControlBar());
    66.                 // map.addControl(new AMap.MoveAnimation());
    67.         });
    68.  
    69.         //定义一个全局变量
    70.         var geojson = new AMap.GeoJSON({
    71.             geoJSON:null,
    72.         })
    73.         // 如果存在数据，那么才导入数据
    74.         if(JSON.stringify(getData())!='[]'){
    75.             // 导入数据
    76.             geojson.importData(getData());
    77.             // 恢复旧数据的点击事件
    78.             geojson.eachOverlay(function(item){
    79.                item.on('click',function(e){
    80.                 // 让点击的marker对象+1
    81.                 var ext = item.getExtData()
    82.                 var click = ++ext._geoJsonProperties.click
    83.                 var infowindow = new AMap.InfoWindow({
    84.                     anchor:'top-center',
    85.                     content:`
      打卡了${click}次
      `
    86.                 })
    87.                 // 显示（打开信息窗口）
    88.                 infowindow.open(map,item.getPosition())
    89.                 
    90.                 saveData(geojson.toGeoJSON())
    91.                 }) 
    92.             })
    93.         }
    94.         
    95.         map.add(geojson)
    96.  
    97.         // 监听地图的点击事件
    98.         map.on('click',function(e){
    99.             var marker = new AMap.Marker({
    100.                 position:e.lnglat,
    101.                 extData:{
    102.                     _geoJsonProperties:{
    103.                         gid:geojson.getOverlays().length+1,
    104.                         click:0
    105.                     }
    106.                 }
    107.             })
    108.             // 使用覆盖物的点击事件
    109.             marker.on('click',function(e){
    110.                 // 让点击的marker对象+1
    111.                 var ext = marker.getExtData()
    112.                 var click = ++ext._geoJsonProperties.click
    113.                 // 消息提示
    114.                 var infowindow = new AMap.InfoWindow({
    115.                     anchor:'top-center',
    116.                     content:`
      打卡了${click}次
      `
    117.                 })
    118.                 // 显示（打开信息窗口）
    119.                 infowindow.open(map,marker.getPosition())
    120.                 saveData(geojson.toGeoJSON())
    121.             })
    122.  
    123.  
    124.             // 通过geojson来管理覆盖物
    125.             geojson.addOverlay(marker)
    126.             // 将geojson这个对象转换成标准的geojson格式
    127.             saveData(geojson.toGeoJSON())
    128.         })
    129.  
    130.         // 点击路径规划事件
    131.         function startAnimation(){
    132.             // 实现路径规划（导航）
    133.             AMap.plugin('AMap.Driving',function(){
    134.                 var driving = new AMap.Driving({
    135.                     map:map,
    136.                     // 驾车策略
    137.                     policy:AMap.DrivingPolicy.LEAST_TIME,
    138.                 })
    139.                 // 设置起点和终点
    140.                 var start =  new AMap.LngLat(114.4000,30.5812)
    141.                 var end = new AMap.LngLat(114.342,30.24221)
    142.  
    143.                 // 通过geojson得到每一个点的坐标
    144.                 var opts = {
    145.                     waypoints:[]
    146.                 }
    147.                 //将每个点都传进数组里面去 
    148.                 geojson.eachOverlay(function(item){
    149.                     opts.waypoints.push(item.getPosition())
    150.                 })
    151.  
    152.                 driving.search(start,end,opts,function(status,result){
    153.                     if(status=='complete'){
    154.  
    155.                     var lineArr =[]
    156.                     
    157.                     // 把每个点添加进数组
    158.                     result.routes[0].steps.forEach(function(item){
    159.                         lineArr.push(...item.path)
    160.                     })
    161.  
    162.                     //    轨迹模拟
    163.                     var marker = new AMap.Marker({
    164.                         map:map,
    165.                         position:start,
    166.                         icon:'https://webapi.amap.com/images/car.png',
    167.                         offset:new AMap.Pixel(-26,-13),
    168.                         autoRotation:true,
    169.                         angle:-180
    170.                     })
    171.  
    172.                     var passedPolyline = new AMap.Polyline({
    173.                         map:map,
    174.                         strokeColor:"#AF5",
    175.                         strokeWeight:6
    176.                     })
    177.  
    178.                     marker.on('moving',function(e){
    179.                         passedPolyline.setPath(e.passedPath)
    180.                     })
    181.                     // 展示
    182.                     map.setFitView()
    183.                     // 每隔一段时间移动
    184.                     marker.moveAlong(lineArr,{
    185.                         duration:500,
    186.                         // autoRotation:true
    187.                     })
    188.  
    189.                     }else{
    190.                         console.log("规划失败");
    191.                     }
    192.                 })
    193.             })
    194.  
    195.         }
    196.     script>
    197. html>

    js文件夹中，创建一个store.js文件

    1. // 从localstorage读取数据
    2. function getData(){
    3.     // 如果本地的localstorage中不存在数据
    4.     if(!localStorage.getItem('geojson')){
    5.         localStorage.setItem('geojson','[]')
    6.     }
    7.     return JSON.parse(localStorage.getItem('geojson'))
    8. }
    9.  
    10. // 将数据保存到loclastorage中
    11.  
    12. function saveData(data){
    13.     localStorage.setItem('geojson',JSON.stringify(data))
    14. }

    css文件夹中，创建一个index.css

    1. html,body
    2. #container{
    3.     width: 1200px;
    4.     height: 600px;
    5. }

  • 相关阅读:
    spring事务
    参照DefenseGrid在Unity中实现合理的塔防寻路机制
    深入理解TDD（测试驱动开发）：提升代码质量的利器！
    【C++入门 四】学习C++内联函数 | auto关键字 | 基于范围的for循环(C++11) | 指针空值nullptr(C++11)
    KekeBlog项目实战后台模块(二)(已完结)
    AAPT: error: resource android:attr/lStar not found
    java-php-python-ssm学校旧书交易网站计算机毕业设计
    Salesforce OmniStudio顾问备考攻略
    2022第8届中国大学生程序设计竞赛CCPC桂林站， 签到题4题
    leetCode 62.不同路径 动态规划 + 空间复杂度优化
  • 原文地址：https://blog.csdn.net/qq_50951790/article/details/128044971