ArcGIS API for JS-在网页实现类似飞行的效果

最新推荐文章于 2023-08-08 11:10:30 发布

童话

最新推荐文章于 2023-08-08 11:10:30 发布

阅读量1k

点赞数

分类专栏： ArcGIS API for JS 文章标签： ArcGISAPI for JavaScript 4.5 API

本文链接：https://blog.csdn.net/qq_41409120/article/details/107139095

版权

本文介绍如何利用ArcGIS API for JavaScript 4.5实现地图上的飞行效果。通过在地图上绘制线条，记录关键点，再用goTo()函数平滑地改变屏幕中心点，模拟飞机沿线路飞行的视觉体验。

摘要由CSDN通过智能技术生成

前几天师兄让我做一个小demo：
在地图上画几个点或者几条线，然后使用飞行，一个个飞过去
想了一下，这个demo主要有两块内容：

在地图上画几条线
沿着这几条线“飞行”

第一块之前写过，所以问题不大。
难的是第二块，怎么实现“飞行”?刚开始我的想法是把一个小飞机放到上面，然后让这个小飞机沿着线移动。
但是这个方案我想了很久第一步都实现不了，害，去请教师兄了。
师兄说只需要画几条线，把这些线上的点记录下来，使用goTo()函数改变屏幕中心点，这样就能实现模拟飞行了。
代码：


<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
<title>绘制折线并模拟飞行</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>

    <style>
      html,
      body,
      #viewDiv {
   
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/views/draw/Draw",
        "esri/Graphic",
        "esri/geometry/geometryEngine",
        "esri/widgets/CoordinateConversion",
        "esri/geometry/support/webMercatorUtils"
      ], function(Map, MapView, Draw, Graphic, geometryEngine, CoordinateConversion, webMercatorUtils) {
   
        const map = new Map({
   
          basemap: "gray"
        });

        const view = new MapView({
   
          container: "viewDiv",
          map: map,
          zoom: 13,
          center: [114.91, 30.03]
        });

        // 把绘制直线的按钮添加到页面上 
        view.ui.add("line-button", "top-right");
        // 把飞行按钮添加到页面上
        view.ui.add("fly-button", "top-right");

       // Draw是一个有强大功能的绘图工具，比如绘制不相交的折线
       const draw = new Draw({
   
          view: view
        });

        // 绘制折线