openlayers 入门（5）单击激活地图

最新推荐文章于 2024-08-22 14:19:50 发布

气的想吐泡泡

最新推荐文章于 2024-08-22 14:19:50 发布

阅读量40

点赞数

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

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

版权

openlayers 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

有什么不太懂得或者有问题的，欢迎评论下面交流

<template>
    <div class="vm">
        <h2 class="h-title">点击激活地图 tabindex</h2>
        <div tabindex="2" id="map" class="map-x"></div>
        <div class="explain">
            <p>通过给地图容器设置 tabindex="2" 来控制默认不会选中地图。</p>
            <p>只有当鼠标点击地图时，才能进行缩放等操作。</p>
            <p>如果没选中地图，即使在地图上滑动滚轮，也不会操作到地图。</p>
            <p>在vs code中 输入Lorem+数字，再按tab或回车 就会出现以下内容。</p>
        </div>
        <div class="content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio,
            earum voluptatum. Culpa consequatur reiciendis ea iure quis
            voluptatibus dolore laborum perferendis inventore, eaque harum
            quisquam earum recusandae nesciunt, expedita incidunt iste. Facilis
            fuga ut neque deserunt omnis magni aperiam officiis. Architecto
            officiis qui eius, facere facilis quis, omnis placeat, autem
            excepturi tempora eveniet culpa beatae consectetur repellendus
            tenetur ad molestias explicabo veniam blanditiis? Amet consectetur
            necessitatibus obcaecati, praesentium possimus sunt dolore magnam
            nostrum quidem atque minima fugiat quaerat recusandae nisi?
        </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.js";

export default {
    name: "TabIndex",
    data() {
        return {
            map: null,
        };
    },
    methods: {
        initMap() {
            this.map = new Map({
                target: "map",
                layers: [
                    // 图层
                    new Tile({
                        source: new XYZ({
                            url:
                                "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
                            wrapX: false,
                        }),
                    }),
                ],
                view: new View({
                    // projection: "EPSG:4326",
                    center: [113.120444, 23.034742],
                    zoom: 4,
                }),
            });
        },
    },
    mounted() {
        this.initMap();
    },
};
</script>

<style lang="scss" scoped>
.content {
    width: 100px;
    margin: 10px auto;
}
</style>