openlayer的飞行动画

最新推荐文章于 2025-03-19 11:22:26 发布

原创

最新推荐文章于 2025-03-19 11:22:26 发布 · 970 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

文章展示了如何利用OpenLayers库创建一个飞行动画，包括从GeoJSON数据加载飞行路径，通过计算和渲染飞行轨迹实现动态效果。代码中涉及到地图初始化、图层管理、坐标转换以及动画帧的处理。

飞行动画官方例子：https://openlayers.org/en/latest/examples/flight-animation.html
在这里插入图片描述

<template>
  <div class="con-box">
    <div id="map" class="map" />
  </div>
</template>

<script>
import "ol/ol.css";
import olMap from "ol/Map";
import olView from "ol/View";
import ollayerTile from "ol/layer/Tile";
// import olsourceOSM from "ol/source/OSM";
import {
   
    get as getProjection, Projection, fromLonLat } from "ol/proj";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import {
   
    Point, LineString, MultiLineString, Polygon } from "ol/geom";
import XYZ from "ol/source/XYZ";
import {
   
    Map, View, Feature, ol } from "ol";
import {
   
   
  Circle,
  Fill,
  Stroke,
  Style,
  Text,
  Icon,
  Circle as CircleStyle,
} from "ol/style.js";
import Overlay from "ol/Overlay.js";
import {
   
    Image } from "ol/layer.js";
import {
   
    OSM, Vector, ImageStatic } from "ol/source";
import {
   
    defaults as defaultControls } from "ol/control";
import GeoJSON from "ol/format/GeoJSON.js";
import {
   
    Tile as TileLayer } from "ol/layer.js";
import Draw, {
   
    createBox, createRegularPolygon } from "ol/interaction/Draw";
import {
   
    unByKey } from "ol/Observable";
import {
   
    getVectorContext } from "ol/render";
import {
   
    easeIn, easeOut } from "ol/easing";
import Stamen from "ol/source/Stamen.js";
import {
   
   getWidth} from 'ol/extent.js';
const pointsPerMs = 0.02;
export default {
   
   
  data() {

最低0.47元/天解锁文章