WebGIS 之 Openlayer

news2024/11/27 14:45:08

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

在这里插入图片描述

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

在这里插入图片描述

       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
            })
        }

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

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

相关文章

[串联] MySQL 存储原理 B+树

[串联] MySQL 存储原理 B+树

InnoDB 是一种兼顾高可靠性和高性能的通用存储引擎&#xff0c;在 MySQL 5.5 之后&#xff0c;InnoDB 是默认的 MySQL 存储引擎。 InnoDB 对每张表在磁盘中的存储以 xxx.ibd 后缀结尾&#xff0c;innoDB 引擎的每张表都会对应这样一个表空间文件&#xff0c;用来存储该表的表结…
阅读更多...
【尚硅谷周阳--JUC并发编程】【第十四章--ReentrantLock、ReentrantReadWriteLock、StampedLock讲解】

【尚硅谷周阳--JUC并发编程】【第十四章--ReentrantLock、ReentrantReadWriteLock、StampedLock讲解】

【尚硅谷周阳--JUC并发编程】【第十四章--ReentrantLock、ReentrantReadWriteLock、StampedLock讲解】 一、面试题二、简单聊聊ReentrantReadWriteLock1、是什么?1.1、读写锁说明1.2、演变1.3、读写锁意义和特点 2、特点2.1、优点2.2、code演示2.3、结论2.4、从写锁->读锁&…
阅读更多...
【Week-Y3】修改yolov5s的backbone的第4层和第6层中C3的理论循环次数

【Week-Y3】修改yolov5s的backbone的第4层和第6层中C3的理论循环次数

修改backbone中C3的循环次数 一、yolov5s.yaml文件解析二、训练三、总结 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 &#x1f4d5;本次任务&#xff1a;将yolov5s网络模型中第4层的C…
阅读更多...
信息系统项目管理师——第12章项目质量管理

信息系统项目管理师——第12章项目质量管理

本章节内容属于10大管理知识领域中的重点&#xff0c;选择、案例、论文都会考&#xff0c;而且是高频考点&#xff0c;需要我们重点学习。 选择题&#xff0c;稳定考3分左右&#xff0c;新教材基本考课本原话&#xff0c;这个分不能丢。 案例题&#xff0c;本期备考重点&#x…
阅读更多...
Elasticsearch 和 Kibana 8.13：简化 kNN 和改进查询并行化

Elasticsearch 和 Kibana 8.13：简化 kNN 和改进查询并行化

作者&#xff1a;Gilad Gal, Tyler Perkins, Srikanth Manvi, Aris Papadopoulos, Trevor Blackford 在 8.13 版本中&#xff0c;Elastic 引入了向量搜索的重大增强&#xff0c;并将 Cohere 嵌入集成到其统一 inference API 中。这些更新简化了将大型语言模型&#xff08;LLM&a…
阅读更多...
leetcode二叉树相关题目

leetcode二叉树相关题目

目录 二叉树的建立整数数组转二叉树Object数组转二叉树 二叉树的遍历leetcode94.二叉树的中序遍历leetcode144.二叉树的前序遍历 二叉树的建立 整数数组转二叉树 下面只是一个简单的示例&#xff0c;没考虑某个子树为空的情况。把{1, 2, 3, 21, 22, 31, 32} 转变为一个二叉树…
阅读更多...
C++类继承继承5——构造函数与拷贝控制

C++类继承继承5——构造函数与拷贝控制

构造函数与拷贝控制 和其他类一样&#xff0c;位于继承体系中的类也需要控制当其对象执行一系列操作时发生什么样的行为&#xff0c;这些操作包括创建、拷贝、移动、赋值和销毁。 如果一个类(基类或派生类)没有定义拷贝控制操作&#xff0c;则编译器将为它合成一个版本。当然…
阅读更多...
【感悟《剑指offer》典型编程题的极练之路】02字符串篇！

【感悟《剑指offer》典型编程题的极练之路】02字符串篇！

​ 个人主页&#xff1a;秋风起&#xff0c;再归来~ 文章所属专栏&#xff1a;《剑指offer》典型编程题的极练之路 ​​​​​​ 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c…
阅读更多...
（学习日记）2024.03.25：UCOSIII第二十二节：系统启动流程详解

（学习日记）2024.03.25：UCOSIII第二十二节：系统启动流程详解

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…
阅读更多...
springboot通过threadLocal+参数解析器实现保存当前用户登录信息

springboot通过threadLocal+参数解析器实现保存当前用户登录信息

首先先介绍一下threadLocal ThreadLocal 线程局部变量&#xff0c;创建一个线程变量后&#xff0c;针对这个变量可以让每个线程拥有自己的变量副本&#xff0c;每个线程是访问的自己的副本&#xff0c;与其他线程的相互独立。 大致知道threadLocal就可以了&#xff0c;然后我…
阅读更多...
Vue中使用Vuex(超详细)基本使用方法

Vue中使用Vuex(超详细)基本使用方法

在vue中使用vuex&#xff0c;不同的vue版本要对应使用不同的vuex&#xff0c;在这里不做详情介绍&#xff0c;想具体了解的&#xff0c;请自行度娘或者必应一下。 在使用vuex之前&#xff0c;我们创建一个新的项目&#xff0c;这里我们使用的是vue的脚手架创建一个vue项目。 …
阅读更多...
二维码门楼牌管理应用平台建设：智能匹配与高效管理

二维码门楼牌管理应用平台建设：智能匹配与高效管理

文章目录 前言一、二维码门楼牌管理应用平台的意义二、地址坐标校验的重要性三、对外采数据匹配校验的实现方式四、智能匹配与人工审核的结合五、二维码门楼牌管理应用平台的前景展望 前言 随着城市化进程的加速&#xff0c;门楼牌管理成为城市治理中不可或缺的一环。传统的门…
阅读更多...
keil安装器件支持包

keil安装器件支持包

创建keil项目时&#xff0c;发现没有我们想要的器件支持包 这时我们可以选择在线安装 1.点击安装按钮 2.点击检查更新&#xff0c;下方有进度条&#xff0c;他会安装keil支持的所有器件支持包所以比较慢
阅读更多...
Github profile Readme实现小游戏[github自述游戏]

Github profile Readme实现小游戏[github自述游戏]

Github profile Readme常用于个人主页介绍&#xff0c;将它与action自动化流程结合&#xff0c;可以实现一些小游戏 例如&#xff1a;2048、五子棋 2048实现 losehu (RUBO) GitHub 五子棋 https://github.com/losehu/losehu/tree/main 通过python/C编写可执行文件&#xf…
阅读更多...
浏览器工作原理与实践--垃圾回收：垃圾数据是如何自动回收的

浏览器工作原理与实践--垃圾回收：垃圾数据是如何自动回收的

在上一篇文章中&#xff0c;我们提到了JavaScript中的数据是如何存储的&#xff0c;并通过例子分析了原始数据类型是存储在栈空间中的&#xff0c;引用类型的数据是存储在堆空间中的。通过这种分配方式&#xff0c;我们解决了数据的内存分配的问题。 不过有些数据被使用之后&am…
阅读更多...
【Gitea的介绍】

【Gitea的介绍】

&#x1f525;博主&#xff1a;程序员不想YY啊&#x1f525; &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家&#x1f4ab; &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 &#x1f308;希望本文对您有所裨益&#xff0c;如有…
阅读更多...
BGP实训

BGP实训

BGP基础配置实训 实验拓扑 注&#xff1a;如无特别说明&#xff0c;描述中的 R1 或 SW1 对应拓扑中设备名称末尾数字为 1 的设备&#xff0c;R2 或 SW2 对应拓扑中设备名称末尾数字为2的设备&#xff0c;以此类推&#xff1b;另外&#xff0c;同一网段中&#xff0c;IP 地址的主…
阅读更多...
基于重写ribbon负载实现灰度发布

基于重写ribbon负载实现灰度发布

项目结构如下 代码如下&#xff1a; pom&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocat…
阅读更多...
淘宝商品详情数据（商品分析，竞品分析，代购商城建站与跨境电商，ERP系统商品数据选品）

淘宝商品详情数据（商品分析，竞品分析，代购商城建站与跨境电商，ERP系统商品数据选品）

淘宝商品详情数据在多个业务场景中发挥着关键作用&#xff0c;以下是一些主要的应用场景&#xff1a; 请求示例&#xff0c;API接口接入Anzexi58 商品分析&#xff1a;通过对淘宝商品详情的全面分析&#xff0c;商家可以深入了解商品的属性、价格、销售量、评价等信息。这些数…
阅读更多...
你真的会数据结构吗：二叉树

你真的会数据结构吗：二叉树

❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载&#xff0c;请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主&#xff0c;代码兴国&#xff01;❤❤❤ halo铁汁们&#xff0c;没错又是你们人见人爱&#xff0c;花见花开的大伟啊&#xff0c;今天也是周六&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023