openLayers基础知识一

实例化地图

const standard = new Tile({
        // 地图源瓦片图层
        source: new XYZ({
        // 标准
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
        visible: true,
    });
const map = new Map({
        //dom容器
        target: 'map',
        // 地图容器加载图层
        layers: [standard],
        // 显示地图的视图
        view: new View({
            //4326表示地理坐标系，使用经纬度来表示地理位置
            //3857表示web墨卡托坐标系，使用平面投影
            // projection: 'EPSG:3857',
            center[103.48101965836081,30.322804038166403],
            projection: 'EPSG:4326',
            zoom: 15, //缩放级别 数值越大离地面越近
            minZoom: 0,
            maxZoom: 28,
        }),
    });

导航控件

  const controls = [
        // 放大缩小控件
        new ZoomSlider(),
        // 视图跳转控件
        new ZoomToExtent({
            extent: [110, 30, 160, 30],
        }),
        new FullScreen(), // 全屏
        // new MousePosition(),
        new ScaleLine({
            //设置单位，degrees、imperial、us、nautical、metric（度量单位）
            units: 'metric',
        }), //比例尺
        new OverviewMap({
            layers: [standard],
        }), //鹰眼
        new MousePosition({
            coordinateFormat: createStringXY(4),
            projection: 'EPSG:4326',
            className: 'custom-mouse-position',
            target: document.getElementById('mouse-position'),
        }), //鼠标位置空间
    ];

控制图层切换显隐

思路：
map.vue文件中添加底图图层

const standard = new Tile({
        // 地图源瓦片图层
        source: new XYZ({
            // 标准
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
        visible: true,
    });
    const mapWx = new Tile({
        // 地图源瓦片图层
        source: new XYZ({
            // 卫星
            url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6',
        }),
        visible: false,
    });

vue文件中使用list，let list = ref([‘标准’, ‘卫星’]);点击切换时传入name

/**
 * @description 切换底图图层
 * @param name 传入的名字
 */
export function mapCut(name: string) {
    const typeArr = ['标准', '卫星'];
    typeArr.forEach((item: any) => {
        if (name == item) {
            busData.store.state.layerArr[item].setVisible(true);
        } else {
            busData.store.state.layerArr[item].setVisible(false);
        }
    });
}

地图操作

/**
 * @description 放大层级
 */
export function mapZoomOut() {
    window.olMap.getView().setZoom(busData.store.state.zoom--);
}
/**
 * @description 缩小层级
 */
export function mapZoomIn() {
    window.olMap.getView().setZoom(busData.store.state.zoom++);
}
/**
 * @description 飞行事件
 */
export function mapFit() {
    window.olMap.getView().animate({
        center: [104.08033177398742, 31.128669413488353],
        zoom: 17,
        // rotation: 0.5,//旋转
        duration: 1000, //动画持续毫秒
    });
}
/**
 * 重置
 */
export function mapReset() {
    window.olMap.getView().setZoom(busData.store.state.zoom);
    window.olMap.getView().setCenter(busData.store.state.center);
}

地图事件

 window.olMap.on('click', function (e: any) {
        // 获取点击时经纬度
        console.log(e.coordinate);
 });

控制地图透明度

window.olMap.getLayers().forEach(function (layer, i) {
		//数值是0-1之间
        layer.setOpacity(1);
});