Openlayers基础知识回顾（五）

🕗 发布于 2024-12-10 17:47 前端 webgis openlayer

1、GeoJSON数据的加载

GeoJSON是一种基于JSON的地理空间数据交换格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据

2、GeoJSON转化为ol要素

new ol.format.GeoJSON().readFeatures()

一、canvas

1、关于canvas

1、概念

HTML5新增的一个标签，区别css地方，它是使用JavaScript来实现图形的绘制，结合webgl实现复杂的图形绘制。

2、绘制矩形

<canvas id="canvas" width="200" height="200"></canvas>
<script>
        /* 获取画布canvas */
        var canvas = document.getElementById("canvas");
        /* 获取canvas上下文
         getContext('2d')可以返回一个对象,该对象提供了绘图的方法和属性
         */
        const ctx = canvas.getContext("2d");
        /* fillStyle属性设置图形的填充色 和css的background-color类似 */
        ctx.fillStyle= "#6528e0";
        /* fillRect(x,y,width,height)设置矩形 */
        ctx.fillRect(10,10,100,100)
        
      
</script>

3、canvas中的坐标

canvas 是一个二维网格。

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

上面的 fillRect 方法拥有参数 (10,10,100,100)。

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

4、路径-线

所谓路径：就是连续的坐标点的集合。

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

<canvas id="canvas" width="200" height="200"></canvas>
<script>
        /* 获取画布canvas */
        var canvas = document.getElementById("canvas");
        /* 获取canvas上下文
        getContext('2d')方法返回一个对象,这个对象可以绘制多种图形
         */
        const ctx = canvas.getContext("2d");
       /* 路径 */
       ctx.lineWidth = 5;
       ctx.moveTo(0,0);
       ctx.lineTo(100,100);
       ctx.strokeStyle = "#ff2d51";
       ctx.stroke();
</script>

2、圆

1、绘制弧线

arc(x, y, radius, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以radius 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

注意：

这里的度数都是弧度。
0 弧度是指的 x 轴正方向。radians=(Math.PI/180)*degrees //角度转换成弧度

2、空心圆

 <canvas id="canvas" width="200" height="200"></canvas>
    <script>
        /* 1、获取画布 */
        let canvas = document.getElementById("canvas");
        /* 2、获取绘制上下文 */
        let ctx = canvas.getContext("2d");
        /* 设置路径 */
        ctx.beginPath();
        /* 第一,第二参数 中心 */
        /* 第三个参数 半径 */
        /* 第四个参数 开始的弧度 */
        /* 第五个参数  结束的弧度 */
        /* ctx.arc(x,y,radius,startAngle,endAngle) */
        ctx.arc(100, 100, 50, 0, Math.PI*2)
        ctx.closePath();
        ctx.stroke();
    </script>

3、实心圆

4、圆环

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script>
        /* 1、画布 */
        var canvas = document.getElementById("canvas");
        /* 2、context */
        var ctx = canvas.getContext("2d");
        /* 3、绘制 */
        /* 第一个圆 */
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = "#ff2d51"
        ctx.fill();
        /* 第二个圆 */
        ctx.beginPath();
        ctx.arc(100, 100, 30, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = "#1248F8";
        ctx.fill();
    </script>
</body>

5、动画圆

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script>
        /* 1、画布 */
        var canvas = document.getElementById("canvas");
        /* 2、context */
        var ctx = canvas.getContext("2d");
        let increase = true;
        let radius = 50;
        /*
        50~80
        <50   true  radius ++
        >80   false radius --
         */
        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 = "#652e80"
            ctx.fill();
            if (radius > 80) {
                increase = false;
            } else if (radius < 50) {
                increase = true;
            }
            if (increase) {
                radius++;
            } else {
                radius--;
            }
        }
        setInterval(() => {
            draw()
        }, 20)
    </script>
</body>

6、多圈动画圆

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script>
        /* 1、画布 */
        var canvas = document.getElementById("canvas");
        /* 2、context */
        var ctx = canvas.getContext("2d");
        let increase = true;
        let radius = 50;
        /*
        50~80
        <50   true  radius ++
        >80   false radius --
         */
        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, 40, 0, Math.PI * 2)
            ctx.closePath();
            ctx.fillStyle = "#1248F8"
            ctx.fill();
            if (radius > 70) {
                increase = false;
            } else if (radius < 50) {
                increase = true;
            }
            if (increase) {
                radius++;
            } else {
                radius--;
            }
            setTimeout(draw, 50)
        }
        draw();
    </script>
</body>

3、openlayers结合canvas

1、canvas-style

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
</head>

<body>
    <div id="map">
    </div>
    <script>
        var map = new ol.Map({
            target: "map",
            layers: [gaode],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        /* canvas-style */

        /* 设置空的source图层 */
        let source = new ol.source.Vector({})
        let layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer)
        /* canvas-style */
        let size = 100;
        let canvas = document.createElement("canvas");
        canvas.width = size;
        canvas.height = size;
        /* 设置半径 */
        let radius = size / 4;
        /* 绘制 */
        let ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(50, 50, radius, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = "#ff2d51";
        ctx.fill();
        /* 设置canvas元素为openlayers的样式 */
        let style = new ol.style.Style({
            image: new ol.style.Icon({
                img: canvas,
                imgSize: [canvas.width, canvas.height]
            })
        })
        var point = new ol.Feature({
            geometry: new ol.geom.Point([114.30, 30.50])
        })
        point.setStyle(style);
        source.addFeature(point);
    </script>
</body>

</html>

2、初步封装setCanvasStyle

function setCanvasStyle(size) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  canvas.width = size;
  canvas.height = size;
  /* 设置半径 */
  let radius = size / 4;
  /* 绘制 */
  ctx.beginPath();
  ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fillStyle = "#ff2d51";
  ctx.fill()
  /* 设置canvas元素为openlayers的样式 */
  let style = new ol.style.Style({
    image: new ol.style.Icon({
      img: canvas,
      imgSize: [canvas.width, canvas.height]
    })
  })
  return style;
}

3、动画圆-setCanvasStyle

function setCanvasStyle(map, size) {
    /* canvas-style */
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = size;
    canvas.height = size;
    /* 设置半径 */
    /* 如果 size = 40 编辑 radius 10 */
    let radius = size / 4;
    let increase = true;
    /* 10~16 */
    function draw() {
        /* 清空画布 */
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = "#652e80";
        ctx.fill();
        if (radius > (size / 4 + 6)) {
            increase = false
        } else if (radius < size / 4) {
            increase = true;
        }
        if (increase) {
            radius++;
        } else {
            radius--;
        }
        setTimeout(draw, 50);
        /* render */
        map.render();
    }
    /* 触发动画 */
    draw();
    /* 将canvas元素转化openlayers的样式 */
    let style = new ol.style.Style({
        image: new ol.style.Icon({
            img: canvas,
            imgSize: [canvas.width, canvas.height]
        })
    })
    return style;
}

原文地址：https://blog.csdn.net/qq_45751819/article/details/144352623

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：springboot的 nacos 配置获取不到导致启动失败及日志不输出问题
下一篇：Python制做一个简易PDF编辑器——关于PDF文字编辑实现的思路

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14