openlayers入门(29)绘制带箭头的线

<template>
    <div class="vm">
        <h2 class="h-title">带箭头的线段</h2>
        <div ref="map" class="map-x"></div>
    </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import LayerVector from "ol/layer/Vector";
import SourceVector from "ol/source/Vector";
import Draw from "ol/interaction/Draw";
import { Style, Stroke, Icon } from "ol/style";
import Point from "ol/geom/Point";

export default {
    data() {
        return {
            map: null,
            source: new SourceVector({
                wrapX: false, // 禁止横向无限重复(底图渲染的时候会横向无限重复),设置了这个属性,可以让绘制的图形不跟随底图横向无限重复
            }),
        };
    },
    methods: {
        initMap() {
            function styleFunction(feature) {
                let geometry = feature.getGeometry();
                let styles = [
                    new Style({
                        stroke: new Stroke({
                            color: "#ffcc33",
                            width: 2,
                        }),
                    }),
                ];

                geometry.forEachSegment((start, end) => {
                    let dx = end[0] - start[0];
                    let dy = end[1] - start[1];
                    let rotation = Math.atan2(dy, dx);
                    styles.push(
                        new Style({
                            geometry: new Point(end),
                            image: new Icon({
                                src: require("@/assets/images/arrow.png"),
                                anchor: [0.75, 0.5],
                                rotateWithView: true,
                                rotation: -rotation,
                            }),
                        })
                    );
                });
                return styles;
            }

            let raster = new Tile({
                source: new XYZ({
                    url:
                        "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
                }),
            });

            let vector = new LayerVector({
                source: this.source,
                style: styleFunction,
            });

            this.map = new Map({
                target: this.$refs.map,
                layers: [raster, vector],
                view: new View({
                    projection: "EPSG:4326",
                    center: [115.543045, 45.16871],
                    zoom: 10,
                }),
            });

            this.map.addInteraction(
                new Draw({
                    source: this.source,
                    type: "LineString",
                    // freehand: true // 如果加上自由绘制哈哈哈哈哈哈
                })
            );
        },
    },
    mounted() {
        this.initMap();
    },
};
</script>

<style></style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值