openlayers入门（26）绘制点线面

最新推荐文章于 2024-06-27 17:53:18 发布

气的想吐泡泡

最新推荐文章于 2024-06-27 17:53:18 发布

阅读量240

点赞数

分类专栏： openlayers 文章标签：前端框架

本文链接：https://blog.csdn.net/qq_53079432/article/details/133940201

版权

openlayers 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

<template>
    <div class="vm">
        <h2 class="h-title">绘制点、线、面</h2>
        <div class="tools-x">
            <select id="type" v-model="tool">
                <option
                    v-for="item in tools"
                    :key="item.value"
                    :value="item.value"
                    >{{ item.label }}</option
                >
            </select>
        </div>
        <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";

export default {
    data() {
        return {
            tool: "Polygon", // 当前选中的工具
            tools: [
                // 工具集
                {
                    value: "Point",
                    label: "点",
                },
                {
                    value: "LineString",
                    label: "线",
                },
                {
                    value: "Polygon",
                    label: "多边形",
                },
                {
                    value: "Circle",
                    label: "圆",
                },
                {
                    value: "None",
                    label: "无",
                },
            ],
            map: null, // 地图
            draw: null,
            source: new SourceVector({
                wrapX: false, // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
            }),
        };
    },
    watch: {
        tool(newVal) {
            this.addInteraction();
        },
    },
    methods: {
        initMap() {
            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,
            });
            this.map = new Map({
                target: this.$refs.map,
                layers: [raster, vector],
                view: new View({
                    projection: "EPSG:4326",
                    center: [113.1206, 23.034996],
                    zoom: 10,
                }),
            });
            this.addInteraction();
        },
        addInteraction() {
            if (this.draw !== null) {
                this.map.removeInteraction(this.draw);
            }

            if (this.tool !== "None") {
                this.draw = new Draw({
                    source: this.source,
                    type: this.tool,
                });
                this.map.addInteraction(this.draw);
            }
        },
    },
    mounted() {
        this.initMap();
    },
};
</script>

<style></style>