openlayers车辆轨迹绘制

最新推荐文章于 2025-03-11 16:19:30 发布

至二

最新推荐文章于 2025-03-11 16:19:30 发布

阅读量559

点赞数 3

分类专栏： GIS知识文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_41892764/article/details/140019133

版权

1、效果图

2、完整代码

1、效果图

操作方法：shift+singleclick设置起点终点；shift+pointermove收集起点设置后，鼠标移动到终点的投影值

2、完整代码

<!--自己的奇思妙想页面-->
<script>
import { ref } from 'vue'
import { Map, View, Feature } from 'ol';
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource, XYZ } from "ol/source";
import { Pointer } from "ol/interaction"
import { fromLonLat, transform } from "ol/proj";
import { LineString, Point } from "ol/geom"
import { Style, Stroke, Circle as CircleStyle, Icon } from "ol/style"
import { getVectorContext } from 'ol/render';
import {Circle} from "ol/style";
import car from "@/assets/images/map/car.webp";
export default {
  name: 'tree',
  data () {
    return {
      map: null,
      routeLayer: null,
      coordinates: [],
      openRecord: ref(false),
      pointsPerMs: 0.02,
    }
  },
  components: {},
  methods: {
    initMap () {
      this.map = new Map({
        view: new View({
          center: transform([113.30478