前言：初学GIS开发是痛苦的，复杂的API加上复杂的样式算法和交互功能，总让人感觉到无从下手。从事GIS开发有一段时间，整理了一些基础，和自己所理解流程，希望能够帮助到需要的人。

• 准备工作：我们采用Vue端进行开发，省去基本Vue搭建部分，直接在文件中入手

初始化地图 初始化map

OpenLayers采用面向对象方式开发，对于前端来说比较容易上手。
下面着手初始化数据：

<template>
    <div id="initMap"></div>
</template>

<script>
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { OSM } from 'ol/source';
export default {
    mounted() {
        new Map({
            layers: [new TileLayer({ source: new OSM() })],
            view: new View({
                center: [100, 38],              // 地图中心点经纬度
                zoom: 5,                        // 地图缩放级别         
            }),
            target: 'initMap'
        });
    },
}
</script>

<style lang="scss" scoped>
#initMap {
    width: 100%;
    height: 100%;
}
</style>

• 效果图展示

  
  
  image

简单介绍下Map所用到的几个简单配置项

target

• 用来设置指定的HTML容器

layers

• 用来存放底图（底图）、绘制图层、交互图层等。更多配置项 openlayers官网

layers: [new TileLayer({ source: new OSM() })],

new TileLayer()表示即将请求的图层的类型
TileLayer:瓦块图层 VectorLayer：矢量图层 等等
new OSM()为openlayers 提供的地图图层

LayerGroup

• 这里用到了LayerGroup，可用作对layers的分组，易于管理，地图可理解为一个layer，layer可被追加到map中的layers中，当使用的layer很多时容易照成layers中图层混乱，这是我们引入LayerGroup图层组概念，对layer进行划分储存。

        import LayerGroup from 'ol/layer/Group';

        let LayerGroup1 = new LayerGroup({                      // 地图group
            groupName: "baseLayerGroup",                        // LayerGroup名称
            layers: [new TileLayer({ source: new OSM() })],     // 在线OSM地图 (可追加多个layer)
            zIndex: 100,                                        // 层级
        });
        let LayerGroup2 = new LayerGroup({                      // 绘制图层
            groupName: "drawLayerGroup",                        // LayerGroup名称
            zIndex: 100,                                        // 层级
        });
        new Map({
            layers: [LayerGroup1, LayerGroup2],
            view: new View({
                center: [100, 38],              // 地图中心点经纬度
                zoom: 5,                        // 地图缩放级别         
            }),
            target: 'initMap'
        });

view

• 视图的配置项，可在初始中设置地图中心点、缩放等级、投影类型等。更多配置项 openlayers官网

            view: new View({
                center: [100, 38],              // 地图中心点经纬度
                zoom: 5,                        // 地图缩放级别           
                projection: 'EPSG:4326',        // 投影类型
                minZoom: 1,                     // 最小缩放级别
                maxZoom: 19,                    // 最大缩放级别
            }),

controls

• 注册地图中的控件
• 例如注册一个可以在地图上显示鼠标位置的经纬度显示控件new MousePosition()
• format是openlayers提供格式化工具，第一个参数坐标点，第二个参数为显示模板，第三个选择保留小数点后几位数字

<template>
    <div id="initMap">
        <!-- 经纬度坐标显示 -->
        <div id="mouse-position"></div>
    </div>
</template>

import MousePosition from "ol/control/MousePosition.js";
import { format } from "ol/coordinate";

        //鼠标经过显示经纬度
        let mousePositionControl = new MousePosition({
            coordinateFormat: (coordinate) => {
                return format(coordinate, "经度:{x}     纬度:{y}", 2);
            },
            projection: "EPSG:4326",
            target: 'mouse-position',
        });

        new Map({
            layers: [
                new TileLayer({ source: new OSM() }),       // 地图图层
            ],
            view: new View({
                projection: 'EPSG:4326',                    // 投影类型
                center: [100, 38],                          // 地图中心点经纬度
                zoom: 5,                                    // 地图缩放级别         
            }),
            controls: [mousePositionControl],               // 插件导入
            target: 'initMap'
        });

示例：

image