arcgis javascript api4.x加载天地图wgs84(wkid:4326)坐标系

这篇具有很好参考价值的文章主要介绍了arcgis javascript api4.x加载天地图wgs84(wkid:4326)坐标系。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:

使用arcgis javascript api4.x以basetilelayer方式加载天地图wgs84(wkid:4326)坐标系

效果:

arcgis javascript api4.x加载天地图wgs84(wkid:4326)坐标系,JS,arcgis,javascript,开发语言

代码:

提示:(下述三个文件放同一个文件夹下)

4326.js

define(['exports', 'esri/layers/support/TileInfo', 'esri/config'], function (
    exports,
    TileInfo,
    esriConfig
  ) {
    'use strict'
    const lods = [
      {
        level: 1,
        levelValue: 1,
        resolution: 0.703125,
        scale: 295497593.05875003
      },
      {
        level: 2,
        levelValue: 2,
        resolution: 0.3515625,
        scale: 147748796.52937502
      },
      {
        level: 3,
        levelValue: 3,
        resolution: 0.17578125,
        scale: 73874398.264687508
      },
      {
        level: 4,
        levelValue: 4,
        resolution: 0.087890625,
        scale: 36937199.132343754
      },
      {
        level: 5,
        levelValue: 5,
        resolution: 0.0439453125,
        scale: 18468599.566171877
      },
      {
        level: 6,
        levelValue: 6,
        resolution: 0.02197265625,
        scale: 9234299.7830859385
      },
      {
        level: 7,
        levelValue: 7,
        resolution: 0.010986328125,
        scale: 4617149.8915429693
      },
      {
        level: 8,
        levelValue: 8,
        resolution: 0.0054931640625,
        scale: 2308574.9457714846
      },
      {
        level: 9,
        levelValue: 9,
        resolution: 0.00274658203125,
        scale: 1154287.4728857423
      },
      {
        level: 10,
        levelValue: 10,
        resolution: 0.001373291015625,
        scale: 577143.73644287116
      },
      {
        level: 11,
        levelValue: 11,
        resolution: 0.0006866455078125,
        scale: 288571.86822143558
      },
      {
        level: 12,
        levelValue: 12,
        resolution: 0.00034332275390625,
        scale: 144285.93411071779
      },
      {
        level: 13,
        levelValue: 13,
        resolution: 0.000171661376953125,
        scale: 72142.967055358895
      },
      {
        level: 14,
        levelValue: 14,
        resolution: 8.58306884765625e-5,
        scale: 36071.483527679447
      },
      {
        level: 15,
        levelValue: 15,
        resolution: 4.291534423828125e-5,
        scale: 18035.741763839724
      },
      {
        level: 16,
        levelValue: 16,
        resolution: 2.1457672119140625e-5,
        scale: 9017.8708819198619
      },
      {
        level: 17,
        levelValue: 17,
        resolution: 1.0728836059570313e-5,
        scale: 4508.9354409599309
      },
      {
        level: 18,
        levelValue: 18,
        resolution: 5.3644180297851563e-6,
        scale: 2254.4677204799655
      },
      {
        level: 19,
        levelValue: 19,
        resolution: 2.68220901489257815e-6,
        scale: 1127.23386023998275
      },
      {
        level: 20,
        levelValue: 2,
        resolution: 1.341104507446289075e-6,
        scale: 563.616930119991375
      }
    ]
  
    const tileInfo = new TileInfo({
      dpi: 90.71428571427429,
      rows: 256,
      cols: 256,
      format: 'image/png',
      compressionQuality: 0,
      origin: {
        x: -180,
        y: 90
      },
      spatialReference: {
        wkid: 4326
      },
      lods: lods
    })
  
    exports.tileInfo = tileInfo
    exports.lods = lods
  })
 

MyCustomTileLayer.js

define(['exports', "esri/layers/BaseTileLayer","esri/request"], function (
    exports,
    BaseTileLayer,
    esriRequest
  ) {
    const MyCustomTileLayer = BaseTileLayer.createSubclass({
            // properties of the custom tile layer
            properties: {
              urlTemplate: null,
            },
  
          // override getTileUrl()
          // generate the tile url for a given level, row and column
          getTileUrl: function (level, row, col) {
            return this.urlTemplate.replace("{level}", level).replace("{col}", col).replace("{row}", row);
          },
  
          // This method fetches tiles for the specified level and size.
          // Override this method to process the data returned from the server.
          fetchTile: function (level, row, col, options) {
  
            // call getTileUrl() method to construct the URL to tiles
            // for a given level, row and col provided by the LayerView
            var url = this.getTileUrl(level, row, col);
  
            // request for tiles based on the generated url
            // the signal option ensures that obsolete requests are aborted
            return esriRequest(url, {
              responseType: "image",
              //signal: options && options.signal
               allowImageDataAccess: true 
            })
              .then(function (response) {
                // when esri request resolves successfully
                // get the image from the response
                var image = response.data;
                var width = this.tileInfo.size[0];
                var height = this.tileInfo.size[0];
  
                // create a canvas with 2D rendering context
                var canvas = document.createElement("canvas");
                var context = canvas.getContext("2d");
                canvas.width = width;
                canvas.height = height;
  
                // Apply the tint color provided by
                // by the application to the canvas
                if (this.tint) {
                  // Get a CSS color string in rgba form
                  // representing the tint Color instance.
                  context.fillStyle = this.tint.toCss();
                  context.fillRect(0, 0, width, height);
  
                  // Applies "difference" blending operation between canvas
                  // and steman tiles. Difference blending operation subtracts
                  // the bottom layer (canvas) from the top layer (tiles) or the
                  // other way round to always get a positive value.
                  context.globalCompositeOperation = "difference";
                }
  
                // Draw the blended image onto the canvas.
                context.drawImage(image, 0, 0, width, height);
  
                return canvas;
              }.bind(this));
          }
  
        });
  
  return MyCustomTileLayer;
  })
  
 

loadtdt4326.html

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
        <title>(经纬度)天地图加载</title>
        <style>
            html,
            body,
            #viewDiv {
                width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/css/main.css" />
        <script src="https://js.arcgis.com/4.23/init.js"></script>
        <script>
            require(["esri/Map",
                "esri/views/MapView",
                "esri/layers/GraphicsLayer",
                "esri/Graphic",
                "esri/PopupTemplate",
                "esri/widgets/Popup",
                "esri/layers/MapImageLayer",
                "esri/widgets/Legend",
                "esri/layers/WebTileLayer",
                "esri/layers/WMTSLayer",
                "esri/widgets/BasemapGallery/support/LocalBasemapsSource",
                "esri/widgets/BasemapGallery",
                "esri/Basemap",
                "esri/layers/FeatureLayer",
                "esri/geometry/Extent",
                "esri/geometry/SpatialReference",
                'esri/config',
                './4326.js',
                
                'esri/layers/support/TileInfo',
                "./MyCustomTileLayer.js",
                "esri/layers/TileLayer",
            ], function(
                Map,
                MapView,
                GraphicsLayer,
                Graphic,
                PopupTemplate,
                Popup,
                MapImageLayer,
                Legend,
                WebTileLayer,
                WMTSLayer,
                LocalBasemapsSource,
                BasemapGallery,
                Basemap,
                FeatureLayer,
                Extent,
                SpatialReference,
                esriConfig,
                epsg4326,
                
                TileInfo,
                MyCustomTileLayer,
                TileLayer
            ) {
                var tileInfo = epsg4326.tileInfo;
                var key = "天地图key"
                key = "6a92e00bdfafade25568c053a5ba6de4"
                var tiledLayer = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    tileInfo: tileInfo,
                    id: '影像',
                    listMode: 'hide' //这个属性设置是为了在layerlist不显示出来
                });
                var tiledLayer_poi = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    tileInfo: tileInfo,
                    id: '影像标记',
                    listMode: 'hide'
                });
                var tiledLayer1 = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    tileInfo: tileInfo,
                    id: '矢量',
                    visible: false,
                    listMode: 'hide'
                });
                var tiledLayer_poi1 = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    tileInfo: tileInfo,
                    id: '矢量标记',
                    visible: false,
                    listMode: 'hide'
                });
                

                var basemap = new Basemap({
                    baseLayers: [tiledLayer, tiledLayer_poi, tiledLayer1, tiledLayer_poi1],
                })
                var map = new Map({
                    basemap: basemap
                });


                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    spatialReference: {
                        wkid: 4326
                    },
                    scale: tileInfo.lods[7],
                    center: [114.3115879,30.5943680], //113.27434372047993,22.722786885699826
                    linked: false,
                    zoom:7,
                    constraints: {
                      lods: tileInfo.lods,
                      minScale: tileInfo.lods[0].scale,
                      maxScale: tileInfo.lods[19].scale
                    },
                });
                
                // view.extent = new Extent({
                //   xmin: 113.36595023855007,
                //   ymin: 23.671927965183833,
                //   xmax: 114.5628763484501,
                //   ymax: 22.7009907263257,
                //   spatialReference: {
                //     wkid: 4326
                //   }
                // });


            });
        </script>
    </head>

    <body class="calcite">
        <div id="viewDiv"></div>
    </body>
</html>

参考资料:

https://www.cnblogs.com/hjyjack9563-bk/p/16067633.html文章来源地址https://www.toymoban.com/news/detail-798679.html

到了这里,关于arcgis javascript api4.x加载天地图wgs84(wkid:4326)坐标系的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WGS84以及各种坐标系

    地心地固坐标系(Earth-Centered, Earth-Fixed,ECEF),简称地心坐标系。 地理坐标系统(Geographic Coordinate System,GCS)​​1​​,坐标系是地心坐标系,用经纬度表示球面上的点。 世界大地测量系统(World Geodetic System, WGS),比如WGS84,是一种地理坐标系统,用于全球定位系统(

    2024年02月11日
    浏览(44)
  • R语言 百度坐标转换至WGS84坐标

    提示:本文利用R语言封装了百度坐标转换至WGS84坐标的函数,亲测有效,提供了便捷的百度坐标转换方法。 《利用R语言通过百度地图API进行批量地理编码》一文介绍了利用R语言通过百度地图API来批量获取地理坐标的方法,但结果是百度坐标系,对于地理分析来讲,直接导入

    2024年02月13日
    浏览(37)
  • 【Python&GIS】面矢量数据投影转换(WGS84转地方坐标系)

            之前分享过点矢量怎么进行投影转换,今天跟大家分享下面矢量如何投影转换。代码与之前的类似,只要注意一下GDAL对矢量文件划分的关系层次即可。         ogr库是一个处理地理空间矢量数据的开源库。它可以读取多种数据格式,进行地理处理、属性表操作、

    2024年02月14日
    浏览(41)
  • 使用Qt/C++实现WGS84、高德GCJ-02、百度BD-09坐标系间相互转化

            在做地图相关开发时候,绕不开不同坐标系间的转化,因此我根据查阅相关资料后将不同坐标系间的转换封装到一个GeoTranslate类中,该类转换函数不仅支持Qt/C++调用,同时可在QML中直接调用,配合上QML/Map很方便,我将该类做了个Demo,方便使用者使用,效果如图: 在

    2024年02月12日
    浏览(51)
  • WGS84地球坐标系,GCJ02火星坐标系,BD09百度坐标系简介与转换 资料收集

    高性能、低功耗 GPS、北斗双模定位模块 STM32 GPS定位_为了维护世界和平_的博客-CSDN博客 秉火多功能调试助手上位机开源!共六款软件,学到你吐... , - 电脑上位机 - 野火电子论坛 - Powered by Discuz! https://www.firebbs.cn/forum.php?mod=viewthreadtid=11985fromuid=64 地图坐标系之间的转换(百度

    2024年02月11日
    浏览(45)
  • 【02】mapbox js api加载arcgis切片服务

    第三方的mapbox js api加载arcgis切片服务,同时叠加在mapbox自带底图上 形如这种地址去加载: http://zjq2022.gis.com:8080/demo/loadmapbox.html arcgis切片服务参考链接思路:【01】mapbox js api加载arcgis切片服务-CSDN博客

    2024年01月19日
    浏览(45)
  • 【01】mapbox js api加载arcgis切片服务

    第三方的mapbox js api加载arcgis切片服务,同时叠加在天地图上,天地图坐标系web墨卡托。 形如这种地址去加载http://zjq2022.gis.com:8080/demo/loadmapboxtdt.html 需要制作一个和天地图比例尺级别以及切片大小等一样的切片方案,可以通过arcmap或者arcgispro制作。如图: 具体的切片信息参数

    2024年01月19日
    浏览(50)
  • GIS数据格式坐标转换(地球坐标WGS84、GCJ-02、火星坐标、百度坐标BD-09、国家大地坐标系CGCS2000)

    地理信息系统 (GIS) 是一个创建、管理、分析和绘制所有类型数据的系统。GIS 将数据连接到地图,将位置数据(事物所在位置)与所有类型的描述性信息(事物在该位置的情况)集成到一起。这可以为适用于自然科学和几乎所有行业的制图和分析提供基础。GIS 帮助用户了解模

    2023年04月16日
    浏览(37)
  • ArcGIS API for JavaScript Map与地图控件

    目录 添加网页 引用接口 添加模块与模块实例 获取API密钥 创建地图 创建地图视图 添加图形图层 在底图之间切换 在图库中选择底图 默认底图视图(Home)控件 图层列表(Layerlist)控件 图例(Legend)控件 比例尺(ScaleBar)控件 指北针(Compass)控件 查看我的位置(Locate)控件

    2024年02月12日
    浏览(52)
  • ArcGIS API for JavaScript 4.x 实现动态脉冲效果

    主要通过定时刷新,每一次的脉冲渲染圈不停的放大,并且透明度缩小,直到达到一定的大小再退回0。 这个文件拿去可以直接使用,下面是引入的方式: 然后可以调用提供的方法实现动态点的添加,动画的暂停和启动。

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包