专栏首页ArcGIS JS API开发ArcGIS JS API 4.16实现三维场景中在天地图底图上加载2000坐标系的倾斜摄影数据

ArcGIS JS API 4.16实现三维场景中在天地图底图上加载2000坐标系的倾斜摄影数据

本文主要介绍下如何在国家天地图的底图上面使用ArcGIS JS API 4.16加载2000坐标系的倾斜摄影数据。

所需数据

  • 国家天地图官网数据服务作为底图
  • 自己发布的GCS 2000地理坐标系的倾斜摄影数据服务,对应wkid为4490
  • ArcGIS JS API 4.16 最新版

操作步骤

1、利用esri/layers/BaseTileLayer这个JS API模块扩展出来一个天地图的图层类,具体代码如下:

let TdtLayer = BaseTileLayer.createSubclass({
    properties: {
        urlTemplate: null,
        tint: {
            value: null,
            type: Color,
        },
        subDomains: null,
    },
    getTileUrl: function (level, row, col) {
        return this.urlTemplate
            .replace('{level}', level)
            .replace('{col}', col)
            .replace('{row}', row)
            .replace(
                '{subDomain}',
                this.subDomains[Math.round(Math.random() * (this.subDomains.length - 1))],
            );
    },
    fetchTile: function (level, row, col, options) {
        let url = this.getTileUrl(level + 1, row, col);
        return esriRequest(url, {
            responseType: 'image',
            //新增下面两句,解决乱片问题
            allowImageDataAccess: true,
            signal: options.signal,
        }).then(
            function (response) {
                let image = response.data;
                let width = this.tileInfo.size[0];
                let height = this.tileInfo.size[0];
                let canvas = document.createElement('canvas');
                let context = canvas.getContext('2d');
                canvas.width = width;
                canvas.height = height;
                if (this.tint) {
                    context.fillStyle = this.tint.toCss();
                    context.fillRect(0, 0, width, height);
                    context.globalCompositeOperation = 'difference';
                }
                context.drawImage(image, 0, 0, width, height);
                return canvas;
            }.bind(this),
        );
    },
});

2、因为国家天地图官网的切片服务用的切片方案是国家天地图切片方案,ArcGIS JS API虽然从4.12版本开始支持三维场景中加载2000坐标系服务,但是2000坐标系的切片服务目前仅支持ArcGIS Pro内置的切片方案,所以我们还需要定义一套切片规则来进行两个切片方案的转换,如下:

//定义瓦片结构
let tileInfo = new TileInfo({
    //"dpi": 90.71428571428571,
    dpi: 96,
    rows: 256,
    cols: 256,
    compressionQuality: 0,
    origin: {
        x: -180,
        y: 90,
    },
    spatialReference: {
        wkid: 4490,
    },
    lods: [
        { level: 0, resolution: 0.703125, scale: 295829355.454566 },
        { level: 1, resolution: 0.3515625, scale: 147914677.727283 },
        { level: 2, resolution: 0.17578125, scale: 73957338.863641 },
        { level: 3, resolution: 0.087890625, scale: 36978669.431821 },
        { level: 4, resolution: 0.0439453125, scale: 18489334.71591 },
        { level: 5, resolution: 0.02197265625, scale: 9244667.357955 },
        { level: 6, resolution: 0.010986328125, scale: 4622333.678978 },
        { level: 7, resolution: 0.0054931640625, scale: 2311166.839489 },
        { level: 8, resolution: 0.00274658203125, scale: 1155583.419744 },
        { level: 9, resolution: 0.001373291015625, scale: 577791.709872 },
        { level: 10, resolution: 0.0006866455078125, scale: 288895.854936 },
        { level: 11, resolution: 0.00034332275390625, scale: 144447.927468 },
        { level: 12, resolution: 0.000171661376953125, scale: 72223.963734 },
        { level: 13, resolution: 8.58306884765625e-5, scale: 36111.981867 },
        { level: 14, resolution: 4.291534423828125e-5, scale: 18055.990934 },
        { level: 15, resolution: 2.1457672119140625e-5, scale: 9027.995467 },
        { level: 16, resolution: 1.0728836059570313e-5, scale: 4513.997733 },
        { level: 17, resolution: 5.3644180297851563e-6, scale: 2256.998867 },
        { level: 18, resolution: 0.000002682209014892578, scale: 1128.499433 },
    ],
});

3、接下来,实例化天地图服务图层作为三维场景的底图,然后添加我们2000坐标系的倾斜摄影数据即可,代码和最终效果如下:

let tiledLayer = new TdtLayer({
    urlTemplate:
        'http://{subDomain}.tianditu.com/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=申请的密钥',
    subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tileInfo: tileInfo,
});
let tdtzjLayer = new TdtLayer({
    urlTemplate:
        'http://{subDomain}.tianditu.com/cva_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=申请的密钥',
    subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tileInfo: tileInfo,
});
let map = new Map({
    spatialReference: {
        wkid: 4490,
    },
    basemap: {
        baseLayers: [tiledLayer],
        referenceLayers: [tdtzjLayer],
    },
});
let mapView = new SceneView({
    container: 'mainView',
    spatialReference: {
        wkid: 4490,
    },
    map: map,
    center: {
        x: 117,
        y: 39,
        spatialReference: {
            wkid: 4490,
        },
    },
});
let layer01 = new IntegratedMeshLayer({
    url: 'http://www.arcgisonline.cn/server/rest/services/Hosted/Production_4/SceneServer',
    //copyright: "VRICON"
});
mapView.map.add(layer01);

4、完整代码如下:

//4.16 加载天地图并添加倾斜摄影数据
_initSceneView416 = () => {
    const _self = this;
    const options = {
        url: 'https://js.arcgis.com/4.16/init.js',
        css: 'https://js.arcgis.com/4.16/esri/themes/light/main.css',
    };
    loadModules(
        [
            'esri/Color',
            'esri/request',
            'esri/layers/BaseTileLayer',
            'esri/Map',
            'esri/views/SceneView',
            'esri/layers/support/TileInfo',
            'esri/layers/IntegratedMeshLayer',
        ],
        options,
    )
        .then(([Color, esriRequest, BaseTileLayer, Map, SceneView, TileInfo, IntegratedMeshLayer]) => {
            let TdtLayer = BaseTileLayer.createSubclass({
                properties: {
                    urlTemplate: null,
                    tint: {
                        value: null,
                        type: Color,
                    },
                    subDomains: null,
                },
                getTileUrl: function (level, row, col) {
                    return this.urlTemplate
                        .replace('{level}', level)
                        .replace('{col}', col)
                        .replace('{row}', row)
                        .replace(
                            '{subDomain}',
                            this.subDomains[Math.round(Math.random() * (this.subDomains.length - 1))],
                        );
                },
                fetchTile: function (level, row, col, options) {
                    let url = this.getTileUrl(level + 1, row, col);
                    return esriRequest(url, {
                        responseType: 'image',
                        //新增下面两句,解决乱片问题
                        allowImageDataAccess: true,
                        signal: options.signal,
                    }).then(
                        function (response) {
                            let image = response.data;
                            let width = this.tileInfo.size[0];
                            let height = this.tileInfo.size[0];
                            let canvas = document.createElement('canvas');
                            let context = canvas.getContext('2d');
                            canvas.width = width;
                            canvas.height = height;
                            if (this.tint) {
                                context.fillStyle = this.tint.toCss();
                                context.fillRect(0, 0, width, height);
                                context.globalCompositeOperation = 'difference';
                            }
                            context.drawImage(image, 0, 0, width, height);
                            return canvas;
                        }.bind(this),
                    );
                },
            });
            //定义瓦片结构
            let tileInfo = new TileInfo({
                //"dpi": 90.71428571428571,
                dpi: 96,
                rows: 256,
                cols: 256,
                compressionQuality: 0,
                origin: {
                    x: -180,
                    y: 90,
                },
                spatialReference: {
                    wkid: 4490,
                },
                lods: [
                    { level: 0, resolution: 0.703125, scale: 295829355.454566 },
                    { level: 1, resolution: 0.3515625, scale: 147914677.727283 },
                    { level: 2, resolution: 0.17578125, scale: 73957338.863641 },
                    { level: 3, resolution: 0.087890625, scale: 36978669.431821 },
                    { level: 4, resolution: 0.0439453125, scale: 18489334.71591 },
                    { level: 5, resolution: 0.02197265625, scale: 9244667.357955 },
                    { level: 6, resolution: 0.010986328125, scale: 4622333.678978 },
                    { level: 7, resolution: 0.0054931640625, scale: 2311166.839489 },
                    { level: 8, resolution: 0.00274658203125, scale: 1155583.419744 },
                    { level: 9, resolution: 0.001373291015625, scale: 577791.709872 },
                    { level: 10, resolution: 0.0006866455078125, scale: 288895.854936 },
                    { level: 11, resolution: 0.00034332275390625, scale: 144447.927468 },
                    { level: 12, resolution: 0.000171661376953125, scale: 72223.963734 },
                    { level: 13, resolution: 8.58306884765625e-5, scale: 36111.981867 },
                    { level: 14, resolution: 4.291534423828125e-5, scale: 18055.990934 },
                    { level: 15, resolution: 2.1457672119140625e-5, scale: 9027.995467 },
                    { level: 16, resolution: 1.0728836059570313e-5, scale: 4513.997733 },
                    { level: 17, resolution: 5.3644180297851563e-6, scale: 2256.998867 },
                    { level: 18, resolution: 0.000002682209014892578, scale: 1128.499433 },
                ],
            });
            let tiledLayer = new TdtLayer({
                urlTemplate:
                    'http://{subDomain}.tianditu.com/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3',
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                tileInfo: tileInfo,
            });
            let tdtzjLayer = new TdtLayer({
                urlTemplate:
                    'http://{subDomain}.tianditu.com/cva_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3',
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                tileInfo: tileInfo,
            });
            let map = new Map({
                spatialReference: {
                    wkid: 4490,
                },
                basemap: {
                    baseLayers: [tiledLayer],
                    referenceLayers: [tdtzjLayer],
                },
            });
            let mapView = new SceneView({
                container: 'mainView',
                spatialReference: {
                    wkid: 4490,
                },
                map: map,
                center: {
                    x: 117,
                    y: 39,
                    spatialReference: {
                        wkid: 4490,
                    },
                },
            });
            let layer01 = new IntegratedMeshLayer({
                url: 'http://www.arcgisonline.cn/server/rest/services/Hosted/Production_4/SceneServer',
                //copyright: "VRICON"
            });
            mapView.map.add(layer01);
        })
        .catch((err) => {
            console.log('三维场景实例化失败:', err);
        });
};
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.xbeichenbei.com/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • ArcGIS中导入2000系的OSGB数据后发布服务,并在前端调用

    本文在上一篇文章的基础之上,介绍下OSGB的倾斜摄影数据如何导入ArcGIS平台做数据处理、服务发布和前端ArcGIS JS API调用显示的一整套流程。

    X北辰北
  • ArcGIS API for JavaScript开发入门必读

    ArcGIS API for JavaScript开发必读的一篇入门文档,文章中对ArcGIS API for JavaScript做了简单的介绍,包括学习路线...

    X北辰北
  • 使用开源Cesium+Vue实现倾斜摄影三维展示

    倾斜摄影转换工具:CesiumLab—下载地址:http://www.cesiumlab.com/

    Kiba518
  • ArcGIS二次开发知识点总结

    空间分析定义:空间分析是指分析具有空间坐标或相对位置的数据和过程的理论和方法,是对地理空间现象的定量研究,其目的在于提取并传输空间数据中隐含的空间信息。

    全栈程序员站长
  • ArcGIS二次开发知识点总结「建议收藏」

    空间分析定义:空间分析是指分析具有空间坐标或相对位置的数据和过程的理论和方法,是对地理空间现象的定量研究,其目的在于提取并传输空间数据中隐含的空间信息。

    全栈程序员站长
  • osgEarth使用笔记3——加载倾斜摄影数据

    我在《OSG加载倾斜摄影数据》这篇博文中论述了如何通过OSG生成一个整体的索引文件,通过这个索引文件来正确显示ContextCapture(Smart3D)生成...

    charlee44
  • GIS历史概述与WebGis应用开发技术浅解

    声明:本篇在李晓晖的《杂谈WebGIS》,补充更多的资料说明。基于地图二次开发一直断断续续在做,这里算是补充一下基本功把。其实对于前端,WebGis开发都是ap...

    周陆军
  • GIS数据漫谈(五)— 地理坐标系统

    地理坐标系通过角度测量单位(Unit)、本初子午线(PRIMEM)和基准面(DATUM)来进行定义。地理坐标系下的坐标值为经纬度,所以有时也叫经纬度坐标系。CG...

    thingjs
  • 【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制网络路径图的实现步骤,包括二维和三维。

    X北辰北
  • i3s 一种开源的三维地理数据规范 简单解读

    i3s是一种用树结构来组织大体积量三维数据的数据格式标准,比如在位图界的jpg格式一样,只不过i3s是“标准”,具体实现的文件格式另有一说。

    全栈程序员站长
  • 智慧城市大数据运营中心 IOC 之 Web GIS 地图应用

    IOC(Intelligent Operations Center)——智慧城市智能运营中心就是智慧城市的大脑,是建立在各个智慧应用系统之上的系统。通过对政府各...

    图扑软件Hightopo
  • 智慧城市大数据运营中心 IOC 之 Web GIS 地图应用

    IOC(Intelligent Operations Center)——智慧城市智能运营中心就是智慧城市的大脑,是建立在各个智慧应用系统之上的系统。通过对政府各...

    HT for Web
  • 重新认识ArcGIS中的坐标系

    原文链接:http://blog.sciencenet.cn/blog-290812-1016263.html

    遥感大数据学习
  • 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制二维图表中的迁徙图的实现步骤,包括二维和三维。

    X北辰北
  • 航拍倾斜摄影 Web 3D GIS 数字孪生智慧火电厂

    7 月份,245 个国家气象站日最高气温突破 7 月历史极值;同时,疫情防控形势向好,企业加快复工达产节奏,电力负荷屡创新高。煤电作为我国最主要的电源,用不足 ...

    HT for Web
  • 航拍倾斜摄影 Web 3D GIS 数字孪生智慧火电厂

    7 月份,245 个国家气象站日最高气温突破 7 月历史极值;同时,疫情防控形势向好,企业加快复工达产节奏,电力负荷屡创新高。煤电作为我国最主要的电源,用不足 ...

    数字孪生

扫码关注腾讯云开发者

领取腾讯云代金券