WebGIS开发-openlayers5入门(2)

上节我们讲述如何将地图展示在页面，本节我们继续学习如何在地图上进行图形的绘制，废话不多说，开撸。

基本流程

1. new map()---买块地
2. new VectorLayer()、new TileLayer()---盖个房
3. new Feature()---建个屋
4. new Polygon()、new LineString()、new Point()---整点家具
5. new Style()---搞搞装修

流程有了，接下来一步一步进行代码实现

1.初始化地图（买块地）

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

• 第一篇中参数详细介绍，这里不做过多讲解

2.初始化图层（盖个房）

        // 初始化地图（买块地）
        let map = new Map({
            layers: [
                new TileLayer({ source: new OSM() }),           // 地图图层
            ],
            view: new View({
                projection: 'EPSG:4326',                        // 投影类型
                center: [100, 38],                              // 地图中心点经纬度
                zoom: 5,                                        // 地图缩放级别         
            }),
            target: 'initMap'
        });

        // 新建一个空白矢量图层（盖个房子）
        let drawLayer = new VectorLayer({                       // 矢量图层
            source: new VectorSource({ wrapX: false }),         // 提供矢量层要素的来源
            opacity: 0.5,                                       // 图层透明度
            zIndex: 2,                                          // 图层层级
            map,                                                // 将图层追加到 指定map中
        })

• VectorLayer-矢量图层用来进行图形绘制（地基）
• VectorSource-提供矢量层要素的来源，图形信息都将追加到此（房屋外墙）

3.初始化图形容器（建个屋）

        // 创建一个容器（建个屋子）
        let featurePoint = new Feature({
        });

• Feature图形容器，用来存放各种图形（点，线，面）

4.初始化图形（整点家具）

        // 创建一个容器（建个屋子）
        let featurePoint = new Feature({
            // 创建一个点（来点家具）
            geometry: new Point([100, 38]),
        });

        // 创建一个容器（建个屋子）
        let featureLineString = new Feature({
            // 创建一条线（来点家具）
            geometry: new LineString([[80, 40], [120, 30]]),
        });

        // 创建一个容器（建个屋子）
        let featurePolygon = new Feature({
            // 创建一个面（来点家具）
            geometry: new Polygon([[[80, 50], [130, 50], [130, 20], [80, 20]]]),
        });

• Point-绘制点 LineString-绘制线 Polygon-绘制多边形

5.追加样式（搞搞装修）

        // 创建一个容器（建个屋子）
        let featurePoint = new Feature({
            // 创建一个点（来点家具）
            geometry: new Point([100, 38]),
        });
        // 设置样式信息（搞搞装修）
        featurePoint.setStyle(() => {
            return new Style({
                image: new CircleStyle({
                    stroke: new Stroke({
                        color: 'red',
                        width: 1,
                    }),
                    radius: 4
                }),
            })
        })

• 我们给点绘制一个圆形
• CircleStyle-提供圆的绘制，stroke-为圆提供基础样式 ，radius-圆的半径

最终效果

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

        // 新建一个空白矢量图层（盖个房子）
        let drawLayer = new VectorLayer({                       // 矢量图层
            source: new VectorSource({                          // 提供矢量层要素的来源
                wrapX: false,
            }),
            opacity: 0.5,                                       // 图层透明度
            zIndex: 2,                                          // 图层层级
            map,                                                // 将图层追加到 指定map中
        })

        // 创建一个容器（建个屋子）
        let featurePoint = new Feature({
            // 创建一个点（来点家具）
            geometry: new Point([100, 38]),
        });
        // 设置样式信息（搞搞装修）
        featurePoint.setStyle(() => {
            return new Style({
                image: new CircleStyle({
                    stroke: new Stroke({
                        color: 'red',
                        width: 1,
                    }),
                    radius: 4
                }),
            })
        })

        // 创建一个容器（建个屋子）
        let featureLineString = new Feature({
            // 创建一条线（来点家具）
            geometry: new LineString([[80, 40], [120, 30]]),
        });

        // 创建一个容器（建个屋子）
        let featurePolygon = new Feature({
            // 创建一个面（来点家具）
            geometry: new Polygon([[[80, 50], [130, 50], [130, 20], [80, 20]]]),
        });

        // 将容器追加到layer图层中
        drawLayer.getSource().addFeatures([featurePoint, featureLineString, featurePolygon]);

---

效果图

到此为止，图形的基本绘制功能就搞定了，看起来是不是很简单。
下一节我们再来详细看一下交互的功能，比如图形不是根据提供已知的数据进行绘制，而是由用户手动绘制，该如何进行操作~
整理不易，觉得有帮助的朋友可以帮忙点赞分享支持一下哦~