【openlayers框架学习】十：openlayers中控件的使用

文章目录

- openlayers进阶
- - [32 openlayers中的控件(Control)](#32 openlayers中的控件(Control))
  - [33 openlayers中添加控件：旋转缩放](#33 openlayers中添加控件：旋转缩放)
  - [34 openlayers中添加控件比例尺全屏鼠标位置等](#34 openlayers中添加控件比例尺全屏鼠标位置等)

openlayers进阶

32 openlayers中的控件(Control)

33 openlayers中添加控件：旋转缩放

Control->defaults

Control->Rotate

默认的三个控件：zoom\rotate\attribution

main.js

js 复制代码

import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import {defaults} from 'ol/control/defaults';
const center = [114.25, 30.59];
const view = new View({
    center: center,
    zoom: 4,
    projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({
    source: gaodeSource,
});
const map = new Map({
    target: "map",
    view: view,
    layers: [gaodeLayer],
    controls:defaults({
        // zoom: false,
        // rotate:false,
        // attribution:false,
        attributionOptions:{
            label: "高德地图",
        }
    }),
});
// map.addControl();

style.css

css 复制代码

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#map{
  width: 100vw;
  height: 100vh;
}
.ol-attribution {
  display: block !important;
}

34 openlayers中添加控件比例尺全屏鼠标位置等

Control->ScaleLine

Control->FullScreen

Control->ZoomSlider

Control->MousePosition

mian.js

js 复制代码

import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import ScaleLine from 'ol/control/ScaleLine.js';
import FullScreen from 'ol/control/FullScreen.js';
import ZoomSlider from 'ol/control/ZoomSlider.js';
import MousePosition from 'ol/control/MousePosition.js';
const center = [114.25, 30.59];
const view = new View({
    center: center,
    zoom: 4,
    projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({
    source: gaodeSource,
});
const map = new Map({
    target: "map",
    view: view,
    layers: [gaodeLayer],
    controls:[new ScaleLine(),new FullScreen(),new ZoomSlider(),new MousePosition()],
});
// map.addControl();