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

---

---

openlayers进阶

32 openlayers中的控件(Control)

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

Control->defaults

Control->Rotate

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

main.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

*{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

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();