OpenLayers隐藏默认放大放小按钮

最新推荐文章于 2024-12-11 11:21:48 发布

原创最新推荐文章于 2024-12-11 11:21:48 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#openlayers #vue #webgis

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

本文介绍如何使用OpenLayers库创建一个包含安徽省地理信息的Web地图服务（WMS）。通过配置TileWMS数据源，设置地图视图及投影，添加比例尺等控件，实现了地图的基本展示与交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="map"></div>


import {Map, View} from 'ol';
import TileWMS from 'ol/source/TileWMS';
import TileLayer from 'ol/layer/Tile';
import {ScaleLine, defaults as defaultControls} from 'ol/control';




//安徽省数据源
let wmsSource = new TileWMS({
    url: `http://192.168.11.193:8080/ndc/wms?styles=${this.layerStyles}`,
    params: {
        "LAYERS": this.layerName,
    },
    serverType: 'geoserver',
});

this.map = new Map({
    target: 'map', //地图容器div的ID
    view: new View({
        projection: 'EPSG:4326'
    }),
    layers: new TileLayer({
        source: wmsSource,
        crossOrigin: 'anonymous'
    }),
    //加载控件到地图容器中
    controls: defaultControls({
        zoom: false,
        rotate: false,
        attribution: false
    }).extend([
        new ScaleLine({
            //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
            units: "metric"
        })
    ])
});

zoom:false 不显示放大放小按钮；
rotate: false 不显示指北针控件；
attribution: false 不显示右下角的地图信息控件；
scaleLine（比例尺）