美文网首页
WebGIS开发-openlayers5入门(2)

WebGIS开发-openlayers5入门(2)

作者: Hi___World | 来源:发表于2020-08-19 08:45 被阅读0次

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

    基本流程

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

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

    相关文章

      网友评论

          本文标题:WebGIS开发-openlayers5入门(2)

          本文链接:https://www.haomeiwen.com/subject/ewagdktx.html