mapbox 添加wmts_mapbox加载非-180 180 的wmts地图-程序员宅基地

技术标签: mapbox  javascript  

<!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='https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.10.0/mapbox-gl.js'></script>
    <link href='https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.10.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }
 
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        mapboxgl.accessToken =
            'pk.eyJ1IjoibWFwYm94bWF4IiwiYSI6ImNqbnY4MHM3azA2ZmkzdnBnMThvNzRoZ28ifQ.IffqPZGkhcdPjnZ2dmSO6w';
    var tile = "http://gisserver.tianditu.gov.cn/gwc/service/wmts?layer=tiandituService:demo_road&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}";
    
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v10',
        center: [108.438, 34.431],
        zoom: 7
    });
    map.on("load", function () {
        map.addSource('sourceId', {
            type: "raster",
            tiles: [tile],
            tileSize: 256,
        });

        const wmtsLayer = {
            id: 'layerId',
            type: "raster",
            source: 'sourceId',
            minZoom: 1,
            maxZoom: 18,
            paint: {
                "raster-opacity": 1,
            },
        };
        map.addLayer(wmtsLayer);
    })
    </script>
</body>
</html>

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34870529/article/details/111862633

智能推荐

Python的__new__方法_python new-程序员宅基地

文章浏览阅读751次。Python的__new__方法Python的__new__和__init__的区别先看一段代码#-*- coding:utf8 -*-""">>> A()new init<__main__.A object at 0x02473A30>"""class A(object): def __init__(self): pri_python new

python的input和while循环_python while input-程序员宅基地

文章浏览阅读455次。python的input和while使用一、Python input()函数:获取用户输入的字符串Python3.x 中 input() 函数接受一个标准输入数据,返回为 string 类型。Python2.x 中 input() 相等于 eval(raw_input(prompt)),用来获取控制台的输入。raw_input() 将所有输入作为字符串看待,返回字符串类型。而 ..._python while input

java method getdeclaredmethod,带有类类型的Java反射getDeclaredMethod()-程序员宅基地

文章浏览阅读243次。I'm trying to understand Java reflecton and am encountering difficulties when working with non-Integer setter methods.As an example, how can I resolve the "getDeclaredMethod()" call below?import java...._aclass.getdeclaredmethod

MySQL8.0.17 安装及配置_rpm安装mysql8.0.17 如何设置端口-程序员宅基地

文章浏览阅读876次。MySQL8.0.17 安装及配置1. 下载2. MySQL配置2.1 初始化2.2 配置环境变量2.3 安装2.4 修改密码1. 下载官网下载:https://dev.mysql.com/downloads/mysql/选择适合自己的版本,下载完成后解压到自己的文件夹下。2. MySQL配置2.1 初始化解压后的目录并没有的my.ini文件,没关系可以自行创建在安装根目录下添加的my..._rpm安装mysql8.0.17 如何设置端口

Spring Security教程(9)---- 自定义AccessDeniedHandler_accessdeniedhandler是干嘛的-程序员宅基地

文章浏览阅读2.9w次,点赞10次,收藏7次。在Spring默认的AccessDeniedHandler中只有对页面请求的处理,而没有对Ajax的处理。而在项目开发是Ajax又是我们要常用的技术,所以我们可以通过自定义AccessDeniedHandler来处理Ajax请求。我们在Spring默认的AccessDeniedHandlerImpl上稍作修改就可以了。public class DefaultAccessDeniedHandle_accessdeniedhandler是干嘛的

Timeout of 60000ms expired before the position for partition could be determined踩坑flink消费kafka2.3.0_timeout of 6000ms steam 解决-程序员宅基地

文章浏览阅读7.4k次,点赞5次,收藏10次。flink消费kafka2.3.0,时报错,分区分配的不对Kafka Client Timeout of 60000ms expired before the position for partition could be determined在网上找了一波,没找到原因,后面,误打误撞,发现,是因为,kafka的配置文件,server.properties,使用了主机名作为配置,在server.properties中添加host.name=192.168.0.30 (当前所在服务器的i._timeout of 6000ms steam 解决

随便推点

渗透测试——信息收集之JSFinder的使用_如何在kali中安装jsfinder-程序员宅基地

文章浏览阅读3.1k次。文章目录前言一、使用注意事项二、使用步骤1.下载后可以放入Kali里面通过Python运行。2.运行JSFinder.py总结前言JSFinder可以通过爬取网站各个页面的JS文件从而获得其中包含的网站的子域名,非常的好用,下面介绍JSFinder的使用方法,文章后面会给出JSFinder的下载地址。一、使用注意事项下载后通过命令行去直接执行,前提是Kali安装了python3及以上的版本,否则不行。二、使用步骤1.下载后可以放入Kali里面通过Python运行。2.运行JSF.._如何在kali中安装jsfinder

CausalVAE: Disentangled Representation Learning via Neural Structural Causal Models_yang, m., liu, f., chen, z., shen, x., hao, j., wa-程序员宅基地

文章浏览阅读692次。文章目录概主要内容模型ELBO关于AAAYang M., Liu F., Chen Z., Shen X., Hao J. and Wang J. CausalVAE: disentangled representation learning via neural structural causal models. arXiv preprint arXiv:2004.086975, 2020.概隐变量的因果表示.主要内容我们通常希望隐变量zzz能够表示一些特别的特征, 通过改变zzz使得生成的_yang, m., liu, f., chen, z., shen, x., hao, j., wang, j. causalvae: disentan

curl中的坑_curl 弊端-程序员宅基地

文章浏览阅读284次。问题:用curl方法向远端服务器发请求,如果成功,远端服务器会返回数据,对方要求用application/x-www-form-urlencode的请求头传输请求参数的数据。一开始用的是:$header = array();header[]=′application/x−www−form−urlencode′;curlsetopt(header[] = &#x27;applicatio..._curl 弊端

读书笔记:关于wsgi、web框架和模板的总结(python)_webinfo.wsgi模板文件-程序员宅基地

文章浏览阅读795次。在后台,Http服务器做的工作就是获取http请求,解析请求,用html文件作为body部分做http响应。wsgi的定义很简单,就是要求web应用开发者实现一个函数来响应Http请求。wsgi对于web应用开发者,屏蔽了http请求、解析,使其可专注于html文件的动态生成等业务逻辑。常用的静态服务器软件Apache、Nginx、Lighttpd等,python内置了一个wsg服务器,作为开发用_webinfo.wsgi模板文件

PAT乙级真题 1010 一元多项式求导 C++实现_pat一元多项式求导 c++-程序员宅基地

文章浏览阅读266次。题目设计函数求一元多项式的导数。输入格式:以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过 1000 的整数)。数字间以空格分隔。输出格式:以与输入相同的格式输出导数多项式非零项的系数和指数。数字间以空格分隔,但结尾不能有多余空格。注意“零多项式”的指数和系数都是 0,但是表示为 0 0。输入样例:3 4 -5 2 6 1 -2 0输出样例:12 3 -10 1 6 ..._pat一元多项式求导 c++

【SLAM】Ubuntu16.04下配置ORB-SLAM2_ubuntu16.04安装配置orb-slam2-程序员宅基地

文章浏览阅读2.4w次,点赞19次,收藏163次。本文记录了 ORB-SLAM2 在Ubuntu16.04下的安装过程._ubuntu16.04安装配置orb-slam2