【01】mapbox js api加载arcgis切片服务

这篇具有很好参考价值的文章主要介绍了【01】mapbox js api加载arcgis切片服务。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:

第三方的mapbox js api加载arcgis切片服务,同时叠加在天地图上,天地图坐标系web墨卡托。

效果图:

形如这种地址去加载http://zjq2022.gis.com:8080/demo/loadmapboxtdt.html

【01】mapbox js api加载arcgis切片服务,JS,javascript,arcgis,开发语言

思路:

需要制作一个和天地图比例尺级别以及切片大小等一样的切片方案,可以通过arcmap或者arcgispro制作。如图:

具体的切片信息参数参考链接:

arcgis javascript api4.x加载天地图web墨卡托(wkid:3857)坐标系_acrgis 加载墨卡托地图-CSDN博客

【01】mapbox js api加载arcgis切片服务,JS,javascript,arcgis,开发语言

制作出的切片方案见链接:

链接:https://pan.baidu.com/s/1fezUPJnp-G0g6cpcbsOuEw 
提取码:gfwm 
使用该切片方案去切片。

切片之后的效果:

【01】mapbox js api加载arcgis切片服务,JS,javascript,arcgis,开发语言

mapbox加载arcgis切片服务示例代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mapbox 添加arcgis rest切片地图服务</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.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>
      const vecUrl =
        "http://t0.tianditu.com/vec_w/wmts?tk=317e52a409b6b382957e09003ee7e235";
      const cvaUrl =
        "http://t0.tianditu.com/cva_w/wmts?tk=317e52a409b6b382957e09003ee7e235";
      var tdtVec = {
        type: "raster",
        tiles: [
          vecUrl +
            "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
        ],
        tileSize: 256,
      };
      var tdtCva = {
        type: "raster",
        tiles: [
          cvaUrl +
            "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
        ],
        tileSize: 256,
      };
      mapboxgl.accessToken =
        "pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A";
      var map = new mapboxgl.Map({
        container: "map", // container id
        center: [114.32021, 30.578322], // starting position
        style: {
          version: 8,
          glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
          sources: {
            tdtVec: tdtVec,
            tdtCva: tdtCva,
          },
          layers: [
            {
              id: "tdtVec",
              type: "raster",
              source: "tdtVec",
            },
            {
              id: "tdtCva",
              type: "raster",
              source: "tdtCva",
            },
          ],
        },
        zoom: 12, // starting zoom
        minZoom: 1,
        maxZoom: 18,
      });

      map.on("load", function () {
        map.addSource("arcgissource", {
          type: "raster",
          tiles: [
            "https://ncportal.geoscene.cn/server/rest/services/wuhan3857/MapServer/tile/{z}/{y}/{x}",
          ],
          tileSize: 256,
        });
        map.addLayer({
          id: "tdt-img-tiles",
          type: "raster",
          minzoom: 0,
          maxzoom: 19,
          source: "arcgissource",
        });
      });

      // // 添加argis rest 动态地图服务
      // map.on("load", function () {
      //   map.addSource("city-source", {
      //     type: "raster",
      //     tiles: [
      //       "https://whgeoscene.hygt.com/server/rest/services/全国道路/MapServer/export?dpi=96&transparent=true&format=png8&layers=&bbox={bbox-epsg-3857}&f=image&bboxSR=102100&imageSR=102100",
      //     ],
      //     // 'tiles':['http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/export?dpi=96&transparent=true&format=png8&layers=&bbox={bbox-epsg-3857}&f=image&bboxSR=3857&imageSR=3857'],
      //     // "tiles": ['http://221.239.0.144:6080/arcgis/rest/services/oceanname_vector/MapServer/export?bbox={bbox-epsg-3857}&f=image&transparent=true&format=png8&bboxSR=102100&imageSR=102100'],
      //     tileSize: 256,
      //   });
      //   map.addLayer({
      //     id: "sity-layer",
      //     type: "raster",
      //     source: "city-source",
      //   });

      // });
    </script>
  </body>
</html>

参考资料:

Sources | Mapbox Style Spec | Mapbox文章来源地址https://www.toymoban.com/news/detail-804073.html

到了这里,关于【01】mapbox js api加载arcgis切片服务的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Cesium加载ArcGIS的PBF矢量切片服务

    在 Cesium 中,我们使用的地图服务均为传统的栅格切片服务 。即在服务端渲染好图片并进行切片,客户端请求获取图片后直接显示。 而矢量切片则有别于传统的栅格切片,它在服务端切片存储的是矢量数据的描述文件,最终的渲染在客户端完成。 事实上矢量切片技术目前已

    2024年02月05日
    浏览(38)
  • Cesium 加载ArcGIS Server切片服务错级问题

    1.首先上官方api说明 ArcGisMapServerImageryProvider - Cesium Documentation 里面没有  zoomoffset 参数!!! 2.如果按照互联网栅格切片规则 3857、4326、4490常用切片层级参数,则直接加载显示地图 viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({     url: \\\"https://localhost:6443/ar

    2024年02月14日
    浏览(39)
  • Cesium加载ArcGIS Server4490且orgin -400 400的切片服务

    Cesium在使用加载Cesium.ArcGisMapServerImageryProvider加载切片服务时,默认只支持wgs84的4326坐标系,不支持CGCS2000的4490坐标系。 如果是ArcGIS发布的4490坐标系的切片服务,如果原点在orgin X: -180.0Y: 90.0的情况下,我们可以通过WebMapTileServiceImageryProvider按照WMTS的方式加载(需符合OGC标准的

    2023年04月25日
    浏览(39)
  • arcgis javascript api4.x加载天地图wgs84(wkid:4326)坐标系

    使用arcgis javascript api4.x以basetilelayer方式加载天地图wgs84(wkid:4326)坐标系 效果: 提示:(下述三个文件放同一个文件夹下) 4326.js MyCustomTileLayer.js loadtdt4326.html https://www.cnblogs.com/hjyjack9563-bk/p/16067633.html

    2024年01月17日
    浏览(47)
  • arcgis javascript api4.x加载天地图web墨卡托(wkid:3857)坐标系

    效果: 示例代码:

    2024年01月17日
    浏览(41)
  • Webpack打包arcgis js api 3.x纯html+JS+CSS项目

    小项目。纯HTML+JS+CSS已经部署上线,但是没有做混淆加密,需要进行混淆加密 目前代码里面需要混淆加密的有main.js,其他的不用混淆加密。所以只需要对main.js进行混淆加密就可,但是要保证混淆加密之后能够访问方法。 由于目前在index.html的script使用import导入main.js里面的方

    2024年02月11日
    浏览(62)
  • arcgis js 4.x加载SceneLayer并实现基于属性查询定位及高亮

    一、代码 二、效果

    2024年04月27日
    浏览(32)
  • 基于arcgis js api 4.x开发点聚合效果

    一、代码   二、效果 1.开启聚合 2.取消聚合

    2024年01月19日
    浏览(38)
  • arcgis javascript api4.x以basetilelayer方式加载天地图web墨卡托(wkid:3857)坐标系

    arcgis javascript api4.x以basetilelayer方式加载天地图web墨卡托(wkid:3857)坐标系 提示: 2个文件放同一个文件夹下 MyCustomTileLayer.js loadtdt3857.html https://www.cnblogs.com/hjyjack9563-bk/p/16067633.html

    2024年01月19日
    浏览(51)
  • 12.JavaScript(WebAPI) - JS api文献精解

    大家好,我是晓星航。今天为大家带来的是 JavaScript(WebAPI) 相关的讲解!😀 前面学习的 JS 分成三个大的部分 ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器 WebAPI 就包含了 DOM + BOM. 这个是 W3C 组织规定的. (和制定 ECMAScript 标准的大佬们不是一伙人). 前面学的

    2024年02月06日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包