GIS openlayers 轨迹编辑，渲染

原创 于 2025-08-27 12:35:15 发布 · 219 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#GIS

效果
在这里插入图片描述
代码分享

<script lang="ts" setup>
import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';


import localtion from '@/assets/map/localtion.png';
import luxian from '@/assets/map/luxian.png';
import start from '@/assets/map/start.png';
import end from '@/assets/map/end.png';
import 'ol/ol.css';
import { transform } from 'ol/proj'
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import { Overlay, Feature } from 'ol';
import Point from 'ol/geom/Point';
import { getVectorContext } from 'ol/render';
import { defaults as defaultControls, MousePosition } from 'ol/control';
import { Cluster, Vector, XYZ } from 'ol/source';
import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw';
import GeoJSON from 'ol/format/GeoJSON';
import VectorSource from 'ol/source/Vector';
import { Vector as VectorLayer, Tile } from 'ol/layer';
import { Fill, Stroke, Style, Icon, Circle, Text } from 'ol/style';
import { TileWMS, Vector as SourceVector } from 'ol/source';
import { Vector as LayerVector } from 'ol/layer';
import { createStringXY } from 'ol/coordinate';
import { ElMessage, ElMessageBox } from 'element-plus';
// 引入Lodash库
import _ from 'lodash';
import moment from 'moment';
import { feature } from '@turf/turf';
import { fromLonLat, get as getProjection } from 'ol/proj';
const types: any = {
  localtion: localtion,
  luxian: luxian,
  start: start,
  end: end,
}
import geojsonzy from './geojsonzy.json';
const pointImgs: any[] = [
  { id: 16, icon: "localtion", name: '建筑物', type: 'Point' },
  { id: 15, icon: "start", name: '起点', type: 'Point' },
  { id: 14, icon: "end", name: '终点', type: 'Point' },
  { id: 17, icon: "luxian", name: '路线', type: 'LineString' },
];
const props = defineProps({
  //拓扑图是否可编辑
  editAble: {
    type: Boolean,
    default: true,
  },
  data: {
    type: Object,
    default: () => { }
  }
});
watch(() => props.data, (val: any) => {
  getJSON();
})
const emit = defineEmits(["update:data"])
const editAble = ref<boolean>(props.editAble)
//pannel 选中
const active = ref<number>(0);
//画的标记
const tagActive = ref<string>('')
//画的动作
let draw = ref<any>(null);
const attrsTemp = ref<any[]>([
  { key: 'key', value: 'value', display: true }
]);
const attrs = ref<any[]>([
  { key: '', value: '', display: true }
]);
const mapInteractionSource = new SourceVector({ wrapX: false });
const map: any = ref(null);
//选中的图层
const selectedFeature = ref<any>();
//选中feature的id
const featureId = ref<any>();
//是否编辑图层属性
const editAttr = ref<boolean>(false)
// 创建GeoJSON格式化器
const geojsonFormat = new GeoJSON();
const currentZoom = ref<any>(12)
const lng = ref<any>();
const lat = ref<any>();
const metaDada = ref<any[]>([
  { metaKey: 'name', label: '名称' },
]);
onMounted(() => {
  // getJSON();
})

const legengClick = async (item: any) => {
  active.value = item.id;
  handleDraw(item);
}
//线路渲染的内外宽度
const linesStyle = {
  in: {
    width: 2,
    color: '#00FCFF',
  },
  out: {
    width: 3,
    color: 'red',
  },
};

//绘画的通用样式====虚线
const drawStyle = (item: any, status: string) => {
  const states = ["draw", "drawend"];
  let type, src, name;
  if (states.includes(status)) {
    type = item.type;
    src = types[item.icon];
    name = item.name;
  } else if (item instanceof Feature) {
    type = item.get("cfg").type
    src = item.get("cfg").icon ? types[item.get("cfg").icon] : item.get("cfg").src
    name = item.get("cfg").name;
  }
  switch (type) {
    case "Point":
      return new Style({
        image: new Icon({
          opacity: 0.75,
          src: src,
          scale: 0.2
        })
      })
      break;
    case 'LineString':
      return [new Style({
        stroke: new Stroke({
          color: linesStyle.out.color,
          width: linesStyle.out.width,
        })
      }), new Style({
        stroke: new Stroke({
          color: linesStyle.in.color,
          width: linesStyle.in.width,
          lineDash: [5, 10],
          lineDashOffset: 0,
        })
      })]
    default:
      break;
  }

};
const mapRef = ref(null);
const mouseControl = new MousePosition({
  coordinateFormat: createStringXY(4),
  projection: 'EPSG:4326',
  className: "custom-mouse-position",
  // @ts-ignore
  target: document.getElementById('mouse-position'),
});
// 获取JSON数据
const getJSON = async () => {
  // let geojsonString: any = JSON.stringify(geojsonzy) || localStorage.getItem('geojsonString');
  let geojsonString = props.data?.data;
  if (geojsonString != null && geojsonString != '' && geojsonString) {
    try {
      var features = geojsonFormat.readFeatures(geojsonString);
      mapInteractionSource.addFeatures(features);
    } catch (error) {
      console.log(error)
    }
  } else {
    clearAll();
  }

  setTimeout(() => {
    initMap();
  }, 1000)
}
const initMap = () => {
  if (map.value) {
    map.value.dispose();
    map.value = null;
  }
  map.value = new Map({
    layers: [
      new TileLayer({
        source: new XYZ({
          url: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=492e5a3eb5b46adcd475689a803843f2",
        }),
        visible: true,
        maxZoom: 16,
      }),
      new TileLayer({
        source: new XYZ({
          // wrapX: true,
          url: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=492e5a3eb5b46adcd475689a803843f2",
        }),
        visible: true,
        maxZoom: 16,
      }),
      new LayerVector({
        source: mapInteractionSource,
        style: drawStyle
      }),
    ],
    keyboardEventTarget: document,
    target: 'flowMap', // 对应页面里 id 为 map 的元素
    view: new View({
      projection: 'EPSG:4326',
      center: props.data.lgtd ? [props.data.lgtd, props.data.lttd] : [116.78479, 34.22131],
      zoom: currentZoom.value
    }),
    //控件初始默认不显示
    // controls: defaultControls({ zoom: false }).extend([mouseControl]),
  });
  // 监听键盘事件
  window.addEventListener('keydown', onKeyDown);
  const features = mapInteractionSource.getFeatures();
  features.forEach((feature: any) => {
    addOVerlay(feature);
  });
  map.value.on('singleclick', function (event: any) {
    event.preventDefault();

  });
  map.value.on('dblclick', function (event: any) {
    var pixel = event.pixel;
    var features = map.value.getFeaturesAtPixel(pixel);
  });
  map.value.on('moveend', function (event: any) {
    currentZoom.value = map.value.getView().getZoom().toFixed(2)
  });
  //鼠标悬浮显示
  map.value.on('pointermove', function (evt: any) {
    if (!editAble.value) {
      var pixel = map?.value?.getEventPixel(evt.originalEvent);
      var hit = map?.value?.hasFeatureAtPixel(pixel);
      if (!hit) {
        map.value?.getOverlays().clear();
      }
      var features = map.value.getFeaturesAtPixel(pixel);
      var popupElement: any = document.getElementById('popup');
      if (features && features.length == 1) {
        const feature = features[0];
        attrs.value = feature.get("infos") || [];
        if (!attrs.value?.length) return;
        popupElement.style.left = pixel[0] + 'px';
        popupElement.style.top = pixel[1] + 'px';
        popupElement.style.display = 'block';
      } else {
        attrCancel();
      }
    }
  });
  map.value.on('contextmenu', function (event: any) {
    if (!editAble.value) {
      return false;
    }
    if (draw.value) {
      event.stopPropagation();
      event.preventDefault();
      return false;
    }
    event.preventDefault();
    var pixel = event.pixel;
    var popupElement: any = document.getElementById('popup');
    var features = map.value.getFeaturesAtPixel(pixel);
    if (features && features.length == 1) {
      event.stopPropagation();
      popupElement.style.left = pixel[0] + 'px';
      popupElement.style.top = pixel[1] + 'px';
      popupElement.style.display = 'block';
      selectedFeature.value = features[0];
      featureId.value = features[0].getId();
    } else if (features && features.length > 1) {
      ElMessageBox.confirm('当前点击了多个图层，确认操作第一个图层吗?', '多个图层覆盖操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        event.stopPropagation();
        popupElement.style.left = pixel[0] + 'px';
        popupElement.style.top = pixel[1] + 'px';
        popupElement.style.display = 'block';
        selectedFeature.value = features[0];
        featureId.value = features[0].getId();
      }).catch(() => {
        console.log('用户点击了取消操作');
      });
    }
    else {
      popupElement.style.display = 'none';
      editAttr.value = false;
    }
  });
}
// 监听键盘事件
const onKeyDown = (event: any) => {
  // 判断是否按下 ESC 键，键码 27 代表 ESC
  if (event.keyCode === 27 && draw.value) {
    // 停止绘制功能
    cancelDraw();
  }
  if (event.keyCode == 27) {
    attrCancel();
  }
};
const cancelDraw = () => {
  tagActive.value = "";
  if (draw.value) {
    map.value.removeInteraction(draw.value);
  }
  active.value = 0;
  draw.value = null;
}
// 清除画布
const clearAll = async () => {
  await mapInteractionSource.getFeatures().forEach((feature: any) => {
    delFeatureOverlay(feature)
  })
  mapInteractionSource.clear();
  cancelDraw();

}
const delFeatureOverlay = (feature: any) => {
  const overlayToRemove = feature.get("overlay");
  if (overlayToRemove) {
    overlayToRemove.setMap(null);
  }
}
/**
 * @desc 保存云端 调用后台服务接口;暂时存在本地
 * @params  geojsonString 存入后台的json数据
 */
const saveFeature = async () => {
  var allFeatures = mapInteractionSource.getFeatures();
  //解决序列化问题
  allFeatures.forEach((feature: any) => {
    feature.unset("overlay");
  });
  const geojsonString = geojsonFormat.writeFeatures(allFeatures);
  emit("update:data", geojsonString);
  return geojsonString;
}
const getFeatureData = async () => {
  var allFeatures = mapInteractionSource.getFeatures();
  //解决序列化问题
  allFeatures.forEach((feature: any) => {
    feature.unset("overlay");
  });
  const geojsonString = geojsonFormat.writeFeatures(allFeatures);
  return geojsonString;
}
const handleDraw = (item: any) => {
  const { type } = item;
  tagActive.value = type;
  if (draw.value) {
    map.value?.removeInteraction(draw.value);
  }
  draw.value = new Draw({
    type: type,
    style: drawStyle(item, "draw"),
  });
  map.value?.addInteraction(draw.value);
  draw.value.on('drawstart', (evt: any) => {
    // 获取绘制的特征
    let feature = evt.feature;
    //设置样式
    feature.setStyle(drawStyle({
      ...item,
      type: 'Point',
      icon: types.start
    }, 'drawstart'))
    // 在绘制结束事件中，设置特征的属性值
    const customPoint = new Feature({
      geometry: new Point(evt.feature.getGeometry().getCoordinates()),
      name: 'Custom Point'
    });

    // 设置自定义图标样式
    customPoint.setStyle(new Style({
      image: new Icon({
        src: types[item.icon], // 使用当前选中的图标
        scale: 0.8,
        opacity: 0.75
      })
    }));


  });
  draw.value.on('drawend', (evt: any) => {
    // 获取绘制的特征
    let feature = evt.feature;
    //设置样式
    feature.setStyle(drawStyle(item, 'drawend'))
    // 在绘制结束事件中，设置特征的属性值
    feature.setProperties({
      cfg: item,
    });
    feature.setId(moment().valueOf().toString());
    mapInteractionSource.addFeature(feature)
  });
};
//编辑图层属性
const editAttr_click = () => {
  editAttr.value = true;
  attrs.value = selectedFeature.value?.getProperties()?.infos || _.cloneDeep(attrsTemp.value);;
}
const addAttr = () => {
  attrs.value.push(
    { key: '', value: '', display: true }
  )
}
const attrCancel = () => {
  editAttr.value = false;
  var popupElement: any = document.getElementById('popup');
  popupElement.style.display = 'none';
}
const attrSave = () => {
  if (!featureId.value) {
    return;
  }
  let feature = mapInteractionSource.getFeatureById(featureId.value);
  feature.setProperties({
    infos: attrs.value
  })
  attrCancel();
  addOVerlay(feature);
}
const addOVerlay = (feature: any) => {
  const ele = document.createElement('div');
  ele.setAttribute('class', 'overlay-div');
  const title = document.createElement('div');
  title.setAttribute('class', 'overlay-title');
  const name = feature.get("infos")?.filter((item: any) => item.key == 'proName')[0]?.value || null
  if (!name) {
    feature.get("overlay")?.setMap(null);
    return false;
  }
  feature.get("overlay")?.setMap(null);
  title.setAttribute('title', name);
  title.innerText = name;
  ele.appendChild(title);
  const geometry = feature.getGeometry();
  let coordinate: any = null;
  if (geometry.getType() === 'Point') {
    coordinate = geometry.getCoordinates();
  } else if (geometry.getType() === 'LineString') {
    var lineCoordinates = geometry.getCoordinates();
    var lineLength = lineCoordinates.length;
    if (lineLength >= 2) {
      var middleIndex = Math.floor(lineLength / 2); // 取中间点索引，向下取整
      coordinate = lineCoordinates[middleIndex];
    }
  }
  const overlay = new Overlay({
    position: coordinate,
    offset: [-(name.length * 7), -52],
    element: ele,
    stopEvent: true,
    zIndex: 100
  })

  feature.set('overlay', overlay);
  feature.get("overlay").setMap(map.value);
}
const del_feature = () => {
  var popupElement: any = document.getElementById('popup');
  popupElement.style.display = 'none';
  delFeatureOverlay(selectedFeature.value);
  mapInteractionSource.removeFeature(selectedFeature.value);
}
const queryLocation = () => {
  if (lng.value && lat.value) {
    map.value.getView().setCenter([lng.value, lat.value])
  }
}

onBeforeUnmount(() => {
  // 组件销毁时移除键盘事件监听
  window.removeEventListener('keydown', onKeyDown);
});
defineExpose({
  getFeatureData
})
</script>

1、标记路线
2、标记点
3、根据需求扩展图标
4、存储一致

OpenLayers入门，OpenLayers动画效果实现，OpenLayers实现轨迹运动动画
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-11 2693
本章介绍如何使用OpenLayers实现动画效果和运动轨迹动画。
openlayers车辆轨迹绘制
qq_41892764的博客
06-27 693
操作方法：shift+singleclick设置起点终点；shift+pointermove收集起点设置后，鼠标移动到终点的投影值。
flutter 高德地图渲染行走轨迹
Bloxed_shangyc的博客
04-28 2020
安装地图插件 permission_handler: ^5.0.1+1 amap_map_fluttify: ^0.30.1 flutter_screenutil: 4.0.2+3 flutter_easyloading: ^2.2.2 渲染关键代码 // 添加线段 //lines 结构 [LatLng(26.642386, 106.65195799999998), LatLng(26.641542, 106.65062999999998), LatLng(26.641402, 106.6.
使用maplibre在地图上绘制运行轨迹
m0_63607954的博客
01-01 1143
MapLibre 的核心项目包括 MapLibre GL JS 和 MapLibre Native，分别用于 Web 和设备上的地图渲染。此外，MapLibre 还提供了丰富的官方项目和第三方插件，涵盖了从地图样式编辑到数据可视化的多个方面。基于上图效果，运行轨迹看起来有点生硬，那就再来一遍，控制加载运行轨迹的速度，平滑加载下一段运行轨迹。近期项目上提出了“在地图上展示某车的运行轨迹的需求”。我在这里记录下实现效果，上车🤏。PS：运行轨迹的数据是我随意获取的经纬度，并不是真实并无实际商务意义。
前端3D轨迹可视化渲染
子时不睡的博客
01-01 6020
前端3D轨迹可视化渲染说在前面效果普通html页面展示3D轨迹1.引入echarts和jquery2.设置地图所需要的容器3.js代码vue结合echarts展示3D轨迹 说在前面 项目需要做一个在3D传播轨迹功能，从网上找了一些资料，决定使用echarts来展示，地图是2维世界（包括中国各省份）的地图，如果要使用3D地图也可以。 echarts官网。 效果 为了展示效果，做了个小demo。点击不同的作物，有不同的作物轨迹展示。并且有国外到国内、国内的、总的传播轨迹，可以点击右下方的图例进行切换展示。
openlayers实现轨迹图
weixin_42803439的博客
01-03 624
【代码】openlayers实现轨迹图。
OpenLayers 导航之运动轨迹
GIS之路
06-07 774
注：当前使用的是 ol版本，天地图使用的key请到天地图官网申请，并替换为自己的key地图导航除了单点定位导航，还可以根据动态模拟运动轨迹，并标绘导航路线。本文基于JSON格式模拟运动轨迹数据，实现动态定位导航功能。本节主要介绍加载地图。
openlayers轨迹移动
12-07
"openlayers 轨迹移动"指的是利用OpenLayers的功能来显示和操作地理轨迹数据，具体包括获取坐标、实时渲染以及轨迹回放等操作。这些功能在地理信息系统（GIS）应用中非常常见，例如交通监控、物流跟踪或户外运动路径...
Openlayers轨迹回放功能源码
02-24
在这个场景中，我们将深入探讨如何利用OpenLayers实现轨迹回放功能，这是一项在地理信息系统（GIS）应用中常见的需求。 轨迹回放允许用户在地图上动态展示一系列地理位置点按照时间顺序的变化，常见于车辆行驶路径...
vue利用openlayers实现动态轨迹
sinat_40572875的博客
11-13 3981
事件触发一个函数，这个事件本来是地图渲染结束事件，但是它的回调函数中，小车的坐标位置一直在变，那就会不停地触发地图渲染，当然最终也会触发。gis初学者可能对openlayers（后面简称ol）不熟悉，这里暂时不介绍ol了，直接上代码，先体验下感觉。这段代码有点难理解，最好自己尝试体验下，比较难理解部分我都加上了注释。线路有了，车也有了，现在就到了激动人心的开车时刻了，接下来才是本文最核心的代码！这个上面的代码已经包括了，我这里列出来是为了让你更清晰，就是。同样的，这里的代码在上面也写过了，就是。
OpenLayers 图层(Layers) 详解
热门推荐
研究与专注
04-30 8万+
如果不是专业的地图工作者，看到地图，可能觉得地图就是一张将三维世界映射到二维空间，很多信息混杂在一起表示空间信息的动态可交互图片，其实这只是表面现象。实际上地图是由一个或多个图层组成的，使用不同的图层存储不同类型的地物，比如由存储道路的图层，有展示拥堵情况的图层，通常还有一个含有基础地理信息（比如政区划分）的底图图层。
openlayers8 实现轨迹回放
qq_53079432的博客
11-02 796
利用计时器 来控制小车的位置
openlayers实现箭头轨迹线
github_31946551的博客
04-26 3901
使用的setStyle 方法，轨迹线可以由实线+多个箭头icon组成。setStyle可以接收一个function回调方法，根据分辨率，设定每个箭头间隔的像素，计算线要素Feature的长度，根据总长度计算箭头个数。还要计算每个箭头的位置Point，箭头的方向，将其转化成Style对象。
openlayers 轨迹回放（历史轨迹），实时轨迹
无心使然云中漫步
06-21 1742
本篇介绍一下使用openlayers轨迹回放（历史轨迹），实时轨迹。
基于Openlayers3的地图轨迹及其优化
kkwyk的博客
10-23 2021
一、背景 项目线上系统经常出现一个问题，当地图轨迹点较多后者出现跨度较大的跳跃点时，地图缩放轨迹计算会导致浏览器比较卡，非常影响用户体验，根本原因是因为地图轨迹在进行缩放时，会在前端重新计算轨迹箭头图层的位置信息，当看到计算入口代码时，发现计算比较暴力，计算时间复杂度太高，需要进行优化，通过网上查询，发现一个博主的做法能有效降低计算的时间复杂度（https://blog.youkuaiyun.com/free...
记录openlayers实现轨迹回放功能（播放，暂停，进度条控制，重播）
最新发布
abc749826862的博客
06-24 1135
本文介绍了基于OpenLayers 10.6.0的路径动画实现方案。主要内容包括：1）使用天地图影像和注记图层作为底图；2）通过坐标转换将经纬度转为墨卡托投影；3）绘制路径、起点终点标记及运动小车；4）利用setInterval实现动画，支持开始/暂停/重播功能；5）通过Math.atan2计算车头朝向，动态更新位置；6）提供进度条控制和播放速度调节功能。系统采用模块化设计，封装了地图初始化、路径绘制、动画控制等核心功能，实现了完整的轨迹回放解决方案。
openlayers6踩坑系列（六）历史轨迹和实时跟踪的绘制
qq_39404437的博客
03-03 7919
最近都没发博客，因为一直在写关于小车历史轨迹这部分的逻辑，目前已经可以了，分别实现了历史双轨迹，历史单轨迹，实时轨迹 先说说我的小车轨迹，主要分为小车 和 轨迹 两部分，小车由Marker类实例化（Marker类是我开发的地图中的类，至于这个类，在我博客中可以看到，我的地图文档）上面是链接，Marker类继承于openlayers的Feature类。轨迹由我的Polyline实例化，继承于openlayers的LineString类。 轨迹线类具体讲解在上面我的链接里的第12个类 历史双轨迹：
Openlayers中的动画
Jinuss的博客
11-14 1293
Openlayers中的动画
百度地图api实现轨迹运动效果
weixin_45663625的博客
09-30 5454
百度地图api实现轨迹运动效果 实现逻辑： 实现轨迹运动的效果无非就是将一段路程细化为很多个点，然后不过的根据这些点来画出移动轨迹。 实现流程： 1）使用DrivingRoute，根据起点和终点的位置，自动生成路径点。 2）建立一个定时任务，使用Polyline不断的通过这些点渲染出移动轨迹。 3）使用Marker的setPosition改变标注点位置，实现播放功能。 直接上代码，完全可用： <!DOCTYPE html> <html> <head> <m
Openlayers轨迹回放功能源码实现指南
### 知识点六：其他GIS框架的轨迹回放 除了OpenLayers，还有许多其他的JavaScript库和框架可以实现地图和轨迹回放的功能，如Leaflet、Google Maps API、ArcGIS API for JavaScript等。这些框架或库在某些方面可能有...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值