WebGIS 之 Openlayer

jiojio在学习勒2024-03-31 22:36

1.导入第三方依赖

javascript 复制代码 
<link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
<script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>

2.初始化地图

初始化地图new ol.Map({})

参数target:制定初始化的地图设置到html页面上的哪一个DOM元素上

参数layers：

通过这个参数的名字我可以推断一个map可以设置多个layer，图层是构成openlayers的基本单位，地图是由多个layer组成的，这种设计类似于Photoshop里面的图层，多个图层是可以叠加的，在最上面的会覆盖下面的

参数view:视图是设置地图的显示范围，包括中心点，放大级别，坐标

EPSG:4326是一个在 GIS（地理信息系统）中使用的坐标参考系（Coordinate Reference System）代码。它表示一个地理坐标系，即使用经纬度来表示地理位置。

EPSG代码是由 European Petroleum Survey Group 分配的，它是一个用于统一管理坐标参考系的代码。4326代码是在 WGS 84（世界大地测量系统）椭球体模型的基础上定义的。

EPSG:4326 常被用于在网络上传输地理位置信息，如在 Web 地图服务和地理位置 API 等。

EPSG:4326 的经纬度范围是：经度范围在 -180° 到 180° 之间，纬度范围在 -90° 到 90° 之间

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入第三方库 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <style>
      *{margin:0;padding:0}
      #map{
        width:100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <!-- 2、设置地图的挂载点 -->
    <div id="map">
    </div>
    <script>
    // 3.初始化一个高德地图层
      const gaode = new ol.layer.Tile({
        title: "高德地图",
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: false
        })
      });
      //4.初始化openlayer地图
      const map = new ol.Map({
        // 将初始化的地图设置到id为map的DOM元素上
        target: "map",
        //设置图层
        layers: [
          gaode
        ],
        view:new ol.View({
          center:[114.30,30.50],
          //设置地图放大级别
          zoom:12,
          projection:'EPSG:4326'
        })
      })
    </script>
  </body>
</html>

总结

一个openlayer的地图，主要由layer和view组成。layer可以有多个，view只能设置一个。

3.地图控件

javascript 复制代码 
        /* 视图跳转控件 */
        const ZoomToExtent = new ol.control.ZoomToExtent({
            extent: [110, 30, 160, 30],
        })
        map.addControl(ZoomToExtent)
        /* 放大缩小控件 */
        const zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider)
        //全屏控件
        const fullScreen = new ol.control.FullScreen();
        map.addControl(fullScreen)

4.绘制矢量图形

1、通过几何信息和样式信息构建要素

2、将要素添加到矢量数据源

3、将矢量数据源添加到矢量图层

4、将矢量图层添加到地图容器

javascript 复制代码 
        /* 1、构建要素 */
        var point = new ol.Feature({
            geometry: new ol.geom.Point([114.30, 30.50])
        })
        let style = new ol.style.Style({
            // image属性设置点要素的样式
            image: new ol.style.Circle({
                //radius设置点的半径 单位degree
                radius: 10,
                fill: new ol.style.Fill({
                    color: "#ff2d51"
                }),
                //描边
                stroke: new ol.style.Stroke({
                    color: "#333",
                    width: 2
                })
            })
        })
        point.setStyle(style);
        /* 2、将要素添加到矢量数据源 */
        const source = new ol.source.Vector({
            features: [point]
        })
        /* 3、将矢量数据源添加到矢量图层 */
        const layer = new ol.layer.Vector({
            source
        })
        /* 4、将矢量图层添加到地图容器 */
        map.addLayer(layer)

5.加载GeoJSON数据

geojson数据是矢量数据，是包含地理信息的json数据，格式是以key:value的形式存在的。后缀以geojson结尾

5.1设置点要素

javascript 复制代码 
      //1.创建geojson数据
       var data = {
            type: "FeatureCollection",
            features: [
                {
                    type: "Feature",
                    geometry: {
                        type: "Point",
                        coordinates: [114.30, 30.50]
                    }
                }
            ]
        }
        var source = new ol.source.Vector({
            /* 2.将geojson数据设置给实例数据源 */
            features: new ol.format.GeoJSON().readFeatures(data)
        })
        var layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer);
        const style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 8,
                fill: new ol.style.Fill({
                    color: "#ff2d51"
                }),
                stroke: new ol.style.Stroke({
                    color: '#333',
                    width: 2
                })
            }),

        })
        layer.setStyle(style);

5.2设置线

javascript 复制代码 
        var data = {
            type: "FeatureCollection",
            features: [
                // {
                //       type: "Feature",
                //       geometry: {
                //             type: "Point",
                //             coordinates: [114.30, 30.50]
                //       }
                // },
                {
                    type: "Feature",
                    geometry: {
                        type: "LineString",
                        coordinates: [[114.30, 30.50], [114, 30.50]]
                    }
                }
            ]
        }
        var source = new ol.source.Vector({
            /* 2.将geojson数据设置给实例数据源 */
            features: new ol.format.GeoJSON().readFeatures(data)
        })
        var layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer);
        //设置样式
        const style = new ol.style.Style({
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#ff2d51',
                width: 4
            })

        })
        layer.setStyle(style);

5.3设置Polygon区

javascript 复制代码 
       var data = {
            type: "FeatureCollection",
            features: [
                {
                    type: "Feature",
                    geometry: {
                        type: "Polygon",
                        coordinates: [[[114.30, 30.50], [116, 30.50], [116, 30]]]
                    }
                }
            ]
        }
        var source = new ol.source.Vector({
            /* 将geojson数据设置给实例数据源 */
            features: new ol.format.GeoJSON().readFeatures(data)
        })
        var layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer);
        //设置样式
        const style = new ol.style.Style({
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#ff2d51',
                width: 2
            }),
            //设置填充色
            fill: new ol.style.Fill({
                color: "rgba(50, 50, 50, 0.3)"
            })

        })
        layer.setStyle(style);

5.4加载本地geojson文件的数据

新建data/map.geojson文件

javascript 复制代码 
{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [114.30, 30.50]
            }
        }
    ]
}
javascript 复制代码 
//index.html
       const source = new ol.source.Vector({
            url: './data/map.geojson',
            format: new ol.format.GeoJSON()
        })
        const layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer)
        const style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 8,
                fill: new ol.style.Fill({
                    color: '#ff2d51'
                }),
                stroke: new ol.style.Stroke({
                    color: '#333',
                    width: 2
                })
            })
        })
        layer.setStyle(style)

5.5加载网络数据

javascript 复制代码 
       const source = new ol.source.Vector({
            url: 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=420100',
            format: new ol.format.GeoJSON()
        })
        const layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer)
        const style = new ol.style.Style({
            //填充色
            fill: new ol.style.Fill({
                color: 'rgba(50,50,50,0.4)'
            }),
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#ff2d5180',
                width: 2
            })
        })
        layer.setStyle(style)

6.地图事件及漫游

6.1地图上设置点

javascript 复制代码 
//...初始化地图map
var source = new ol.source.Vector({});
var layer = new ol.layer.Vector({source})
map.addLayer(layer);
map.on("click", (evt) => {
      var position = evt.coordinate;
      var point = new ol.Feature({
            geometry: new ol.geom.Point(position)
      })
      source.addFeature(point)
})

6.2漫游

javascript 复制代码 
     map.on("click", (evt) => {
            var position = evt.coordinate;
            map.getView().animate({
                center: position,
                zoom: 10,
                duration: 2000,
            })
        })

6.3复位地图

javascript 复制代码 
 .btn {
            position: fixed;
            z-index: 100;
            top: 30px;
            right: 50px;
  }

 <button class="btn">复位地图</button>
 var btn = document.querySelector('.btn')
        btn.onclick = function () {
            map.getView().animate({
                center: [114.30, 30.50],
                zoom: 6,
                duration: 3000
            })
        }

7.canvas绘制

canvas元素的webGL API用于绘制硬件加速的2D和3D图形

7.1绘制矩形

javascript 复制代码 
<!-- 1、设置canvas元素-->
<canvas id="canvas" width="200" height="200"></canvas>
<script>
/*2、获取canvas */
const canvas = document.getElementById("canvas");
/*3、getContext()返回一个对象,对象包含绘制图形的方法和属性 */
const ctx = canvas.getcontext("2d");
/*4、执行绘制fillRect(x,y,width,height) x,y*/
ctx.fillRect(10,10,100,208);
ctx.fillStyle="#333"
</script>

7.2 canvas中的坐标

canvas是一个二维网格

canvas 的左上角坐标为(0,0)

上面的 filRect 方法拥有参数 (0,0,100,100)

意思是:在左上角开始(0,0)的位置，绘制100*100的图形

7.3路径

javascript 复制代码 
//设置canvas
<canvas id="canvas" width="200" height="200"></canvas>
<script>
/*2、获取canvas元素 */
const canvas = document.getElementById("canvas");
/*3、获取上下文 */
const ctx = canvas.getContext("2d")!
/*4、moveTo设置起点坐标 */
ctx.moveTo(18,18);
/*5、设置终点坐标 lineTd*/
ctx.lineTo(100,100);
/*6、执行绘制*/
ctx.strokeStyle ="#ff2d51";
ctx.stroke();
</script>

7.4绘制圆

javascript 复制代码 
<canvas id="canvas" width="200" height="200"></canvas>
<script>
/*获取canvas画布 */
const canvas = document.getElementById("canvas" )
/*getContext获取绘制对象 */
const ctx = canvas.getContext("2d")!ctx.beginPath();
/* arc(x,y,radius,startAngle,endAngle) */
ctx.beginPath();
ctx.arc(50,50,50,0,Math.PI * 2);
ctx.closePath();
ctx.fillStyle="#333";
ctx.fil1();
ctx.strokeStyle = "#ff2d51";
ctx.stroke();
</script>

7.4绘制多个圆

html 复制代码 
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <canvas id="canvas" width="400" height="400"></canvas>
        <script>
            /*100 50*/
            const canvas = document.getElementById("canvas");
            const ctx = canvas.getContext("2d");
            /*第一个圆 */
            ctx.beginPath();
            ctx.arc(200, 200, 100, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fillStyle = "#ff2d51";
            ctx.fill()
            /*第二个圆 */
            ctx.beginPath();
            ctx.arc(200, 200, 50, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fillStyle = "#333";
            ctx.fill()
        </script>
    </body>
    </html>

7.5绘制动画圆

html 复制代码 
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <canvas id="canvas" width="200" height="200"></canvas>
        <script>
            //center = [100,100];radius =50;var radius = 50;
            var radius = 50;//半径
            var increase = true;//是否放大
            //radius<50 true radius>100 false true++ false--
            /*获取画布 */
            const canvas = document.getElementById("canvas");
            const ctx = canvas.getContext("2d");
            function draw() {
               //清楚给定矩形内的形状
                ctx.clearRect(0,0,canvas.width,canvas.height)
                ctx.beginPath();
                ctx.arc(100, 100, radius, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fillStyle = "#6528e0";
                ctx.fill();
                if (radius > 100) {
                    increase = false;
                } else if (radius < 50) {
                    increase = true;
                }
                if (increase) {
                    radius++
                } else {
                    radius--
                }
            }
            setInterval(draw, 20)
            draw()
        </script>
    </body>
    </html>

7.6多圈动画

html 复制代码 
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <canvas id="canvas" width="200" height="200"></canvas>
        <script>
            //center = [100,100];radius =50;var radius = 50;
            var radius = 100;//半径
            var increase = true;//是否放大
            //radius<50 true radius>100 false true++ false--
            /*获取画布 */
            const canvas = document.getElementById("canvas");
            const ctx = canvas.getContext("2d");
            function draw() {
                //清楚给定矩形内的形状
                ctx.clearRect(0,0,canvas.width,canvas.height)
                //设置第一个圆
                ctx.beginPath();
                ctx.arc(100, 100, radius, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fillStyle = "#ff2d51";
                ctx.fill();
                //设置第二个圆
                ctx.beginPath();
                ctx.arc(100, 100, 50, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fillStyle = "#0088ff";
                ctx.fill();
                if (radius > 100) {
                    increase = false;
                } else if (radius < 50) {
                    increase = true;
                }
                if (increase) {
                    radius++
                } else {
                    radius--
                }
            }
            setInterval(draw, 20)
            draw()
        </script>
    </body>
    </html>
相关推荐
_oP_i20 小时前
Unity Addressables 系统处理 WebGL 打包本地资源的一种高效方式
unity·游戏引擎·webgl
新中地GIS开发老师1 天前
WebGIS和WebGL的基本概念介绍和差异对比
学习·arcgis·webgl
_oP_i2 天前
Unity 中使用 WebGL 构建并运行时使用的图片必须使用web服务器上的
前端·unity·webgl
flying robot5 天前
Three.js简化 WebGL 的使用
webgl
小彭努力中6 天前
114. 精灵模型标注场景(贴图)
前端·3d·webgl·贴图
小彭努力中6 天前
109. 工厂光源(环境贴图和环境光)
前端·深度学习·3d·webgl·贴图
小彭努力中6 天前
112. gui辅助调节光源阴影
前端·深度学习·3d·webgl
refineiks8 天前
three.js绘制宽度大于1的线，并动态新增顶点
3d·图形渲染·webgl
小彭努力中8 天前
102. 管道漫游案例
前端·3d·webgl
小彭努力中8 天前
107. 阴影范围.shadow.camera
前端·深度学习·3d·webgl
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解