openlayers入门教程_openlayers菜鸟教程

(5) 2024-06-21 08:23

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
openlayers入门教程_openlayers菜鸟教程,希望能够帮助你!!!。

# 前言

   资源:OpenLayers3示例

   资源:OpenLayers_3_入门教程完整版.pdf

# 下载

  官网:https://openlayers.org/download/

  👉 这里根据自己所需点击下载即可

  (1)-dist.zip 仅包括开发库(开发与调试的js库、css样式),文件大小约1M;

  (2).zip 包括开发库、开发库代码、示例、API等所有的开发资源,文件大小约27M;

  在进行具体开发时,引用OpenLayers 开发库即可,其他为辅助资源,在开发的过程中供查看、参考。

openlayers入门教程_openlayers菜鸟教程_https://bianchenghao6.com/blog__第1张

   也可以直接使用网络资源

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css">

  历史版本:https://github.com/openlayers/openlayers/releases

# 基本概念

   OpenLayers将抽象事物具体化为类,其核心类是Map、Layer、Source、View,几乎所有的动作都围绕这个核心类展开,从而实现地图加载和相关操作。

openlayers入门教程_openlayers菜鸟教程_https://bianchenghao6.com/blog__第2张

## 1. Map 

    📌 OpenLayers v6.9.0 API - Class: Map

    OpenLayers 的核心部件是 Map(ol.Map)。它被呈现到对象 target 容器(例如,网页上的 div 元素)。所有地图的属性可以在构造时进行配置,或者通过使用 setter 方 法,如 setTarget()

<div id="map"></div> <script> var map = new ol.Map({target: 'map'}); </script> 

## 2. View

    📌 OpenLayers v6.9.0 API - Class: View

    ol.View 负责地图的中心点,放大,投影之类的设置。

    一个 ol.View 实例包含投影 projection,该投影决定中心 center 的坐标系以及分辨率的单位,如果没有指定,默认的投影是球墨卡托(EPSG:3857),以米为地图单位。 放大 zoom 选项是一种方便的方式来指定地图的分辨率,可用的缩放级别由 maxZoom(默认值为 28)、zoomFactor(默认值为 2)、maxResolution(默认由投影在 256×256 像素瓦片的有效程度来计算)决定。起始缩放级别 0,以每像素 maxResolution 的单位为分辨率,后续的缩放级别是通过 zoomFactor 区分之前的缩放级别的分辨率来计算的,直到缩放级别达到 maxZoom

map.setView(new ol.View({ center: [0, 0], zoom: 2 })); 

    😶拓展一:地理空间数据可能来自各种坐标参照系,一个数据集可能是以度为单位的地理(经纬)坐标系,另一个可能是以米为单位的投影坐标系。由于一个地方的地理坐标相对来说更容易知道,使用 ol.proj.transform 方法将地理坐标系("EPSG:4326")转化为墨卡托坐标系("EPSG:3857")。

view: new ol.View({ center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'), zoom:9 }) 

    😮拓展二:如果想要使用其他投影的数据,在使用 ol.proj.transform 方法之前需要添加一些额外的信息。

    例如,使用"EPSG:21781" 坐标参照系的数据,添加以下两条 script 标签到页面中:

<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script> <script src="http://epsg.io/21781-1753.js"type="text/javascript"></script>

    然后在应用程序代码中,注册该投影并设置其有效范围,代码如下:

var projection = ol.proj.get('EPSG:21781'); projection.setExtent([.5728, 76443.1884, .5648, .7864]);

## 3. Source

    📌 OpenLayers v6.9.0 API - Class: Source

    OpenLayers 使用 ol.source.Source 子类获取远程数据图层,包含免费的和商业的地图瓦片服务,如 OpenStreetMap、Bing、OGC 资源(WMS 与 WMTS)、矢量数据(GeoJSON 格式、 KML 格式…)等。

    当资源(source)与地图视图(view)的坐标系相同时,无需再次设置投影projection(默认与view坐标系一致),只有在资源与视图的投影不同的情况下,才需要在资源中明确指定 projection 属性来表示要素缓存的投影

openlayers入门教程_openlayers菜鸟教程_https://bianchenghao6.com/blog__第3张

var osmSource = new ol.source.OSM();
openlayers入门教程_openlayers菜鸟教程_https://bianchenghao6.com/blog__第4张
图源: OpenLayers学习入门篇_技术分享-CSDN博客_openlayers菜鸟教程

## 4. Layer

    📌 OpenLayers v6.9.0 API - Class: Layer

    一个图层是资源中数据的可视化显示,OpenLayers 包含几种基本图层类型:

  • ol.layer.Tile 用于显示瓦片资源,这些瓦片提供了预渲染,并且由特定分辨率的缩放级别组织的瓦片图片网格组成。    
  • ol.layer.Image 用于显示支持渲染服务的图片,这些图片可用于任意范围和分辨率。
  • ol.layer.Vector 用于显示在客户端渲染的矢量数据。
  • ol.layer.VectorTile 用于显示在客户端渲染的矢量瓦片数据。
  • ol.layer.WebGLTile 用于提供预渲染、平铺的瓦片图像,按特定分辨率的缩放级别组织。
var osmLayer = new ol.layer.Tile({source: osmSource}); map.addLayer(osmLayer); 

## 5. 总结

    上述片段可以合并成一个自包含视图和图层的地图配置: 

<div id="map"></div> <script> new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: [0, 0], zoom: 2 }), target: 'map' }); </script>

# 示例:地图显示

    这里我们使用了天地图的矢量图层作为底层(需要申请token),由于该图层使用了球面墨卡托[来源],所以在ol.View处设置了坐标系为EPSG:3857,center要采用投影坐标。

  • vec: 矢量底图=Vector
  • cva: 矢量注记图层(中文)=Chinese Vector Annotation
  • xxx_w:球面墨卡托投影
  • xxx_c:经纬度投影(经纬度直投)

    球面墨卡托:WebGIS系列(一):坐标系

    工具:经纬度与墨卡托转换 

    资源:天地图在线资源说明

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>openlayers入门基础一</title>

    <style>
        #map{
            height: 780px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css">

</head>

<body>
    <div id="map"></div>

    <script type="text/javascript">
        var tianditu_token = '' // 填入您的token

        var map = new ol.Map({
                target:'map',
                layers:[
                    new ol.layer.Tile({
                        title: "天地图矢量图层",
                        source: new ol.source.XYZ({
                            url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tianditu_token,
                            wrapX: false
                        })
                    }),
                    new ol.layer.Tile({
                        title: "天地图矢量注记图层",
                        source: new ol.source.XYZ({
                            url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tianditu_token,
                            wrapX: false
                        })
                    })
                ],
                view: new ol.View({
                    projection: 'EPSG:3857',
                    center: [12128773.43,4240249.00],
                    zoom: 4,
                })
        });

    </script>

</body>
</html>

openlayers入门教程_openlayers菜鸟教程_https://bianchenghao6.com/blog__第5张

# 其它

openlayers入门教程_openlayers菜鸟教程_https://bianchenghao6.com/blog__第6张

     默认情况下 ol.control.Attribution 控件被添加到所有地图中,使得地图视窗中显示图层资源的归属信息来源(地图的右下角处)。

openlayers入门教程_openlayers菜鸟教程_https://bianchenghao6.com/blog__第7张

    若想将信息一直展现出来,可在 ol.Map 构造函数中添加以下代码。

controls: ol.control.defaults({ attributionOptions:{ collapsible:false } }),

    添加比例尺

controls: ol.control.defaults().extend([ new ol.control.ScaleLine() ]),

openlayers入门教程_openlayers菜鸟教程_https://bianchenghao6.com/blog__第8张

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复