WebGIS 之 Openlayer

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>

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° 之间

<!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.地图控件

        /* 视图跳转控件 */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、将矢量图层添加到地图容器

        /* 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设置点的半径 单位degreeradius: 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设置点要素

在这里插入图片描述

      //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设置线

在这里插入图片描述

        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区

在这里插入图片描述

       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文件

{"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Point","coordinates": [114.30, 30.50]}}]
}

//index.htmlconst 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加载网络数据

在这里插入图片描述

       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地图上设置点

//...初始化地图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漫游

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

6.3复位地图

 .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绘制矩形

<!-- 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路径

//设置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绘制圆

<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绘制多个圆

<!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绘制动画圆

<!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多圈动画

<!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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/788096.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

国资委确定首批起航企业，重点布局人工智能、量子信息等新兴领域

国资委确定首批起航企业，重点布局人工智能、量子信息等新兴领域

国务院国资委近日按照“四新”&#xff08;新赛道、新技术、新平台、新机制&#xff09;标准&#xff0c;遴选确定了首批启航企业&#xff0c;加快新领域新赛道布局、培育发展新质生产力。 据了解&#xff0c;去年以来&#xff0c;国务院国资委围绕加快培育创新型国有企业&…
阅读更多...
【华为OD机试C++】求int型正整数在内存中存储时1的个数

【华为OD机试C++】求int型正整数在内存中存储时1的个数

《最新华为OD机试题目带答案解析》：最新华为OD机试题目带答案解析，语言包括C、C++、Python、Java、JavaScript等。订阅专栏，获取专栏内所有文章阅读权限，持续同步更新！ 文章目录 描述输入描述输出描述示例1示例2代码描述 输入一个 int 型的正整数，计算出该 int 型数据在内…
阅读更多...
汉语语音基本特性

汉语语音基本特性

发音的生理基础和过程 人的发音生理机构如图 2.3.1所示,发音时由肺部收缩送出一股直流空气,经气管流至喉头声门处(声门即声带开口处),在发声之初,声门处的声带肌肉收缩,声带并拢间隙小于 1mm,这股直流空气冲过很小的缝隙,使声带得到横向和纵向的速度,此时,声带向两边运动,缝隙…
阅读更多...
【LeetCode热题100】【链表】K 个一组翻转链表

【LeetCode热题100】【链表】K 个一组翻转链表

题目链接&#xff1a;25. K 个一组翻转链表 - 力扣&#xff08;LeetCode&#xff09; 递归迭代&#xff0c;迭代翻转每组的链表节点&#xff0c;递归翻转下一组的链表节点 class Solution { public:ListNode* reverseKGroup(ListNode* head, int k) {ListNode*nextHeadhead; …
阅读更多...
事件队列事件循环(EventLoop) 宏任务 微任务详解 面试题

事件队列事件循环(EventLoop) 宏任务 微任务详解 面试题

事件队列 事件循环 EventLoop 宏任务 微任务详解 一、概念二、宏任务&#xff08;多个&#xff09;、微任务&#xff08;1个&#xff09;三、Promise 的构造函数四、process.nextTick在事件循环中的处理五、vue nextTick原理 一、概念 event: 事件 loop: 循环&#xff0c;循环…
阅读更多...
突破编程_C++_C++14新特性（C++14新特性概览）

突破编程_C++_C++14新特性（C++14新特性概览）

1 C14 的发展背景 C14 是 C 编程语言的一个重要版本&#xff0c;它的发展背景紧密关联于C语言的发展历程以及计算机科学领域的整体进步。 首先&#xff0c;C 语言起源于 20 世纪 80 年代早期&#xff0c;它的设计初衷是为了提供一种功能强大、高效且可移植的编程语言&#xf…
阅读更多...
系统学习Docker：1_Docker简介以及2_安装Docker

系统学习Docker：1_Docker简介以及2_安装Docker

01-Docker简介 什么是Docker 在不同的机器和操作系统中安装运行环境和依赖库是一件很烦人的事情&#xff0c;容器就是为了解决这一问题而出现的技术。 容器是一种虚拟化技术&#xff0c;将应用程序及其依赖项&#xff08;环境、系统工具等&#xff09;打包到一个独立的可移植…
阅读更多...
数据结构：链表的双指针技巧

数据结构：链表的双指针技巧

文章目录 一、链表相交问题二、单链表判环问题三、回文链表四、重排链表结点 初学双指针的同学&#xff0c;请先弄懂删除链表的倒数第 N 个结点。 并且在学习这一节时&#xff0c;不要将思维固化&#xff0c;认为只能这样做&#xff0c;这里的做法只是技巧。 一、链表相交问题 …
阅读更多...
[Linux]基础IO（中）---理解重定向与系统调用dup2的使用、缓冲区的意义

[Linux]基础IO（中）---理解重定向与系统调用dup2的使用、缓冲区的意义

重定向理解 在Linux下&#xff0c;当打开一个文件时&#xff0c;进程会遍历文件描述符表&#xff0c;找到当前没有被使用的 最小的一个下标&#xff0c;作为新的文件描述符。 代码验证&#xff1a; ①&#xff1a;先关闭下标为0的文件&#xff0c;在打开一个文件&#xff0c;…
阅读更多...
图神经网络GNN

图神经网络GNN

图神经网络GNN B、C、D的特征在某种程度上可以代表A的特征 上面就是一次GCN的操作
阅读更多...
整型之韵，数之舞：大小端与浮点数的内存之旅

整型之韵，数之舞：大小端与浮点数的内存之旅

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱’博客 所属栏目&#xff1a;人工智能 &#xff08;感谢您的光临&#xff0c;您的光临蓬荜生辉&#xff09; 1.0 整形提升 我们先来看看代码。 int main() {char a 3;char b 127;char …
阅读更多...
vue3父子组件之间的传值方式

vue3父子组件之间的传值方式

在vue3中&#xff0c;可以使用props和emit来实现父子组件之间的通信。子组件可以使用emit发出一个事件&#xff0c;父组件监听这个事件&#xff0c;并将数据传递给另一个子组件。 下面的简单例子中&#xff0c;ChildA组件有一个按钮&#xff0c;当按钮被点击时&#xff0c;会触…
阅读更多...
WebKit结构简介

WebKit结构简介

WebKit是一款开源的浏览器引擎&#xff0c;用于渲染网页内容。它负责将HTML、CSS和JavaScript等网络资源转换为用户在屏幕上看到的图形界面。WebKit是一个跨平台的引擎&#xff0c;可以在多种操作系统上运行&#xff0c;如Windows、macOS、Linux等。 以下是一篇关于WebKit结构…
阅读更多...
信创咨询岗位需求分析

信创咨询岗位需求分析

岗位职责 1.深入了解国内IT解决方案市场&#xff0c;熟悉不同领域的国产产品&#xff0c;包括但不限于云计算、大数据、人工智能等。 2.跟踪国内科技发展趋势&#xff0c;了解最新的国产技术和产品&#xff0c;以为客户提供最适合的解决方案。 3.能够撰写清晰、详细的技术文档&…
阅读更多...
浅谈iOS开发中的自动引用计数ARC

浅谈iOS开发中的自动引用计数ARC

1.ARC是什么 我们知道&#xff0c;在C语言中&#xff0c;创建对象时必须手动分配和释放适量的内存。然而&#xff0c;在 Swift 中&#xff0c;当不再需要类实例时&#xff0c;ARC 会自动释放这些实例的内存。 Swift 使用 ARC 来跟踪和管理应用程序的内存&#xff0c;其主要是由…
阅读更多...
[从0开始AIGC][Transformer相关]：Transformer中的激活函数：Relu、GELU、GLU、Swish

[从0开始AIGC][Transformer相关]：Transformer中的激活函数：Relu、GELU、GLU、Swish

[从0开始AIGC][Transformer相关]&#xff1a;Transformer中的激活函数 文章目录 [从0开始AIGC][Transformer相关]&#xff1a;Transformer中的激活函数1. FFN 块 计算公式&#xff1f;2. GeLU 计算公式&#xff1f;3. Swish 计算公式&#xff1f;4. 使用 GLU 线性门控单元的 FF…
阅读更多...
关于矩阵的摄动。

关于矩阵的摄动。

在研究信号处理算法的过程中&#xff0c;凡是涉及到矩阵求逆的算法&#xff08;只要包括解线性方程组&#xff09;&#xff0c;都要考虑矩阵的摄动&#xff0c;即受到轻微扰动&#xff0c;矩阵的逆会不会有巨大到不能接受的变化。 为了刻画这种扰动&#xff0c;定义相对于某范…
阅读更多...
[Rust开发]用可视化案例讲Rust编程6.动态分发与最终封装

[Rust开发]用可视化案例讲Rust编程6.动态分发与最终封装

全系列合集 [Rust开发]用可视化案例讲Rust编程1.用Rust画个百度地图 [Rust开发]用可视化案例讲Rust编程2. 编码的核心组成&#xff1a;函数 [Rust开发]用可视化案例讲Rust编程3.函数分解与参数传递 [Rust开发]用可视化案例讲Rust编程4.用泛型和特性实现自适配shapefile的读取 […
阅读更多...
YOLOv8全网独家改进: 小目标 |新颖的多尺度前馈网络(MSFN) | 2024年4月最新成果

YOLOv8全网独家改进: 小目标 |新颖的多尺度前馈网络(MSFN) | 2024年4月最新成果

💡💡💡本文独家改进：多尺度前馈网络(MSFN)，通过提取不同尺度的特征来增强特征提取能力，2024年最新的改进思路 💡💡💡创新点：多尺度前馈网络创新十足，抢先使用 💡💡💡如何跟YOLOv8结合：1）放在backbone后增强对全局和局部特征的提取能力；2）放在detect…
阅读更多...
C语言一维数组及二维数组详解

C语言一维数组及二维数组详解

引言&#xff1a; 小伙伴们&#xff0c;我发现我正文更新的有些慢&#xff0c;但相信我&#xff0c;每一篇文章真的都很用心在写的&#xff0c;哈哈&#xff0c;在本篇博客当中我们将详细讲解一下C语言中的数组知识&#xff0c;方便大家后续的使用&#xff0c;有不会的也可以当…
阅读更多...
最新文章

Copyright @ 2022~2023