openlayers 入门（14）网格图层

最新推荐文章于 2024-05-09 20:30:38 发布

气的想吐泡泡

最新推荐文章于 2024-05-09 20:30:38 发布

阅读量303

点赞数 1

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

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

版权

openlayers 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

<template>
    <div class="vm">
        <h2 class="h-title">网格 Graticule</h2>
        <div id="map" class="map-x"></div>
    </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Stroke from "ol/style/Stroke";
import Tile from "ol/layer/Tile";
import Graticule from "ol/layer/Graticule";
import BingMaps from "ol/source/BingMaps";
import { fromLonLat } from "ol/proj";

export default {
    name: "Graticule",
    data() {
        return {
            map: null,
        };
    },
    methods: {
        initMap() {
            // 初始化地图
            this.map = new Map({
                target: "map",
                layers: [
                    new Tile({
                        source: new BingMaps({
                            key:
                                "AiZrfxUNMRpOOlCpcMkBPxMUSKOEzqGeJTcVKUrXBsUdQDXutUBFN3-GnMNSlso-",
                            imagerySet: "Road",
                        }),
                    }),
                ],
                view: new View({
                    // projection: "EPSG:4326",
                    center: fromLonLat([114.064839, 22.548857]),
                    zoom: 6,
                }),
            });

            let graticule = new Graticule({
                strokeStyle: new Stroke({
                    color: "rgba(255, 120, 0, .5)", // 线条颜色
                    width: 2, // 线条宽度
                    lineDash: [4], // 虚线，每隔4像素
                }),
                showLabels: true,
            });

            graticule.setMap(this.map);
        },
    },
    mounted() {
        this.initMap();
    },
};
</script>

<style></style>