首页 > 其他分享 >Openlayer加载mapboxgl矢量图层

Openlayer加载mapboxgl矢量图层

时间:2024-02-28 11:12:43浏览次数:26  
标签:mbMap map ol false 矢量图 Openlayer mapboxgl new const

注意Openlayer的版本
Openlayer是支持直接加载矢量图层的,如下

图层会没有样式渲染

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers with Mapbox GL Vector Tile Example</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/ol.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.VectorTile({
                    source: new ol.source.VectorTile({
                        format: new ol.format.MVT(),
                        url: 'https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?access_token=YOUR_MAPBOX_ACCESS_TOKEN',
                        attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                    })
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([113, 23]),
                zoom: 5
            })
        });
    </script>
</body>

</html>

还需要搭配mapbox的style样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers Map Example</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/ol.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <script>
        const center = [113, 23];
        mapboxgl.accessToken = "yourToken";
        const mbMap = new mapboxgl.Map({
            style: "mapbox://styles/mapbox/streets-v11",
            attributionControl: false,
            boxZoom: false,
            container: 'map',
            doubleClickZoom: false,
            dragPan: false,
            dragRotate: false,
            interactive: false,
            keyboard: false,
            pitchWithRotate: false,
            scrollZoom: false,
            touchZoomRotate: false
        });
        const mbLayer = new ol.layer.Layer({
            render: function (frameState) {
                const canvas = mbMap.getCanvas();
                const viewState = frameState.viewState;

                const visible = mbLayer.getVisible();
                canvas.style.display = visible ? 'block' : 'none';

                const opacity = mbLayer.getOpacity();
                canvas.style.opacity = opacity;

                const rotation = viewState.rotation;
                mbMap.jumpTo({
                    center: ol.proj.toLonLat(viewState.center),
                    zoom: viewState.zoom - 1,
                    bearing: (-rotation * 180) / Math.PI,
                    animate: false,
                });
                if (mbMap._frame) {
                    mbMap._frame.cancel();
                    mbMap._frame = null;
                }
                mbMap._render();

                return canvas;
            },
            source: new ol.source.Source({
                attributions: [
                    '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a>',
                    '<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
                ],
            }),
        });

        const map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: ol.proj.fromLonLat(center),
                zoom: 3,
            }),
            layers: [mbLayer],
        });
    </script>
</body>

</html>

标签:mbMap,map,ol,false,矢量图,Openlayer,mapboxgl,new,const
From: https://www.cnblogs.com/echohye/p/18039356

相关文章

  • [Mac软件]Boxy SVG 4.20.0 矢量图形编辑器
    BoxySVG是一款入门级矢量图形编辑器,具有全套基本功能、易于学习的选项卡式界面和可自定义的键盘快捷键。有了它,您可以轻松创建横幅、图标、按钮、图形、界面草图,甚至有趣的表情包。编辑器支持使用多种工具创建和编辑矢量对象,用颜色渐变装饰它们,用文本元素补充它们。元数据编辑功......
  • OpenLayers6使用天地图&ldquo;经纬度投影(CGCS2000)&rdquo;和&ldquo;球面墨卡托投影(E
    转自:https://blog.csdn.net/nudtcadet/article/details/1029084581.封装生成图层类/***@fileOverview天地图WMTS服务API*@author<ahref=”https://blog.csdn.net/nudtcadet”>老胡</a>*@version1.0*/import{getWidth,getTopLeft}from'ol/extent';impo......
  • # openlayers 截图
    openlayers截图OK,我承认,这篇博文是一个水文。最新做了一个功能,就是openlayers展示二维GIS数据后,可以把当前的视角导出图片。直接写代码吧,没啥好说的://截图toImg(){if(this.map){letcanvas=this.map.getViewport().querySelector('canv......
  • 开源地图库OpenLayers的简单使用
    引言最近在学习可视化的东西,这让我想起了一些以前用过的图表库,其实我在日常做的大多是普通的需求,可视化方面应用的并不多,只是偶尔会因为个别特殊的需求,去借助一些图表库来实现图表的展示,这些普通的图表库,在使用上都大差不差,并没有什么太大的区别,但是某些特殊的图表库,比如地图库,在......
  • 在vue3中使用openlayers3实现track轨迹动画
    网上太多资料代码,抄来抄去,而且版本也是OL2的,部分API已经弃用基础知识不多说,直接讲重点三个关键变量//记录开始动画的时间conststartTime=ref(0);//轨迹分割的颗粒度,数值越小分的越细constparticle=20;//轨迹动画的速度,数值越大位移越快constspeed=10;根......
  • 矢量图设计软件Sketch,专为Mac用户打造
    Sketch是一款专门为Mac用户设计的矢量图设计软件,它拥有简洁直观的界面和强大的功能,使得用户能够轻松地创建和编辑各种矢量图设计。点击获取Sketch首先,Sketch具有强大的矢量图编辑功能。它支持多种矢量图形元素,如线条、矩形、椭圆、多边形等,并允许用户对这些元素进行各种操作,如......
  • WPF使用矢量图标
    阿里巴巴矢量图库https://www.iconfont.cn/选择要使用的图标加入购物车,添加至项目。资源管理➡我的项目,Unciode-下载至本地在IDE中复制xxxx.ttf文件复制到项目Fonts文件夹中,xxx.html中查看图标编号(检查文件属性是否为资源) FontFamily="./Fonts/xxxx.ttf#xxxx"<TextBlo......
  • 01.矢量图像和数字图像区别
    矢量图像和数字图像是两种不同的图像表示方式:矢量图像:矢量图像使用数学公式来描述图像中的几何形状和颜色信息。它由一系列点、线段和曲线组成,每个元素都有其位置和属性。矢量图像可以无限缩放而不失真,因为它们基于数学公式生成,而不是像素网格。数字图像:数字图像由像素组成,......
  • Vue+OpenLayers从入门到实战进阶案例汇总目录,兼容OpenLayers7和OpenLayers8
    本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录,方便查找。本专栏源码是由OpenLayers结合Vue框架编写。本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程,再到通过各种入门案例和综合性的实战案例,带领大家快速......
  • 矢量图输出、修订、以及插入方法——Matlab,PPT输出、Tex,Word输入
    矢量图输出、修订、以及插入方法1       输出图片1.1     MATLAB出图另存为pdf(tex中使用)或emf(word中使用)格式,svg格式不行,会导致图片失真1.2     PPT出图直接导出pdf或选中图片右键导出为svg(这样就不用去白边)1.3     Python出图python的matplotli......