ArcGIS REST API 实现服务端地图图层叠加和地图图片导出

1、服务准备

(1)ArcGIS Desktop 10.5 路径下自带的 影像文件 wsiearth.tif,影像文件存放路径:
E:\Program Files (x86)\ArcGIS\Desktop10.5\ArcGlobeData\wsiearth.tif。
(2)将影像文件 wsiearth.tif 发布成服务 MapServer。




取消勾选“KML”。


不需要切片:

点击“分析”,检查图层错误:

发布服务:





进入 ArcGIS Manager 查看已发布服务:


(3)准备数据内蒙古行政区划 .shp 文件:nm_city.shp。ArcMap 文件夹连接 F:\ArcGIS\钉钉课程数据\ExportMapImage,新建文件地理数据库,名为Geodatabase,位置:F:\ArcGIS\钉钉课程数据\ExportMapImage\Geodatabase.gdb,将内蒙古行政区划要素类 nm_city 拷贝到新建的 GDB 数据库中。ArcGIS Server Account 账户 arcgis 必须对该目录具有完全控制权限。
(4)在 ArcGIS Manager 中添加动态工作空间,将新建的 GDB 添加到 ArcGIS 服务中。点击“添加”。


添加完成,点击“保存并重新启动”。


未点击“保存并重新启动”,报错如下:

点击“保存并重新启动”后,报错解除。
(5)ArcMap 上图层的叠加效果:


2、ArcGIS REST API 实现请求服务导出地图图片

(1)调用 ArcGIS API for JavaScript 4.18,使用 npm 和 vue-cli 构建 Vue.js 项目:

H:\VSCodeWorkspace\ArcGIS\export-map-image>vue create exportmapimage

(2)导入 arcgis 模块:

npm install @arcgis/core

(3)将 @arcgis/core/assets 文件夹拷贝到项目的 public 文件夹下。

(4)在 main.js 文件中引入:

## main.js

import Vue from 'vue'
import App from './App.vue'
import '@arcgis/core/assets/esri/css/main.css'

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

(5)项目其他文件如下:

## App.vue

<template>
  <div id="app">
    <Map />
  </div>
</template>

<script>
import Map from './components/Map.vue'

export default {
  name: 'App',
  components: {
    Map
  }
}
</script>

<style>
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: 100%;
  height: 100%;
}
</style>
## Map.vue

<template>
    <div id="view"></div>
</template>

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import MapImageLayer from '@arcgis/core/layers/MapImageLayer'
import esriRequest from '@arcgis/core/request'

export default {
    name: 'Map',
    methods: {
        initMap: function() {
            let map = new Map();
            let imageLayer = new MapImageLayer({
                url: "http://localhost:6080/arcgis/rest/services/WorldImagery/MapServer"
                // sublayers: [
                //     {
                //         source: {
                //             type: "data-layer",
                //             dataSource: {
                //                 type: "table",
                //                 workspaceId: "MyGDB",
                //                 dataSourceName: "nm_city"
                //             }
                //         },
                //         drawingInfo: {
                //             renderer: {
                //                 type: "simple",
                //                 symbol: {
                //                     type: "esriSFS",
                //                     style: "esriSFSSolid",
                //                     color: [166, 36, 0, 255],
                //                     outline: {
                //                         type: "esriSLS",
                //                         style: "esriSLSSolid",
                //                         color: [110, 110, 110, 255],
                //                         width: 1.0
                //                     }
                //                 },
                //                 label: "FIRST_NAME",
                //                 description: ""
                //             }
                //         },
                //         showLabels: true,
                //         labelingInfo: [{
                //             labelPlacement: "always-horizontal",
                //             labelExpression: "[FIRST_NAME]",
                //             useCodedValues: false,
                //             symbol: {
                //                 type: "esriTS",
                //                 color: [255, 255, 0, 255],
                //                 verticalAlignment: "bottom",
                //                 horizontalAlignment: "left",
                //                 font: {
                //                     family: "Arial",
                //                     size: 12,
                //                     style: "normal",
                //                     weight: "bold",
                //                     decoration: "none"
                //                 }
                //             }
                //         }]
                //     },
                //     {
                //         id: 0
                //     }
                // ]
            });
            map.add(imageLayer);
            new MapView({
                container: "view",
                map: map
            });
        },
        exportMap: function() {
            const dynamicLayers = [{
                    id: 102,
                    source: {
                        type: "dataLayer",
                        dataSource: {
                            type: "table",
                            workspaceId: "MyGDB",
                            dataSourceName: "nm_city",
                        },
                    },
                    // definitionExpression: "First_Name='呼和浩特'",
                    drawingInfo: {
                        renderer: {
                            type: "simple",
                            symbol: {
                                type: "esriSFS",
                                style: "esriSFSSolid",
                                color: [166, 36, 100, 255],
                                outline: {
                                    type: "esriSLS",
                                    style: "esriSLSSolid",
                                    color: [0, 0, 255, 255],
                                    width: 2.0
                                }
                            }
                        },
                        transparency: 0,
                        showLabels: true,
                        labelingInfo: [{
                            labelPlacement: "esriServerPolygonPlacementAlwaysHorizontal",
                            labelExpression: "[First_Name]",
                            useCodedValues: false,
                            symbol: {
                                type: "esriTS",
                                color: [255, 255, 0, 255],
                                verticalAlignment: "bottom",
                                horizontalAlignment: "left",
                                font: {
                                    family: "sim-sun",
                                    size: 10,
                                    style: "normal",
                                    weight: "bold",
                                    decoration: "none"
                                }
                            }
                        }]
                    }
                },
                {
                    id: 101,
                    source: {
                        type: "mapLayer",
                        mapLayerId: 0
                    }
                }
            ];
            esriRequest("http://localhost:6080/arcgis/rest/services/WorldImagery/MapServer/export", {
                query: {
                    format: "png8",
                    f: "json",
                    bbox: "97.168747,37.406136,126.076187,53.332596",
                    size: "1200,800",
                    dpi: 200,
                    dynamicLayers: JSON.stringify(dynamicLayers)
                }
            }).then(res => {
                console.log(res);
            });
        }
    },
    mounted: function() {
        this.initMap();
        this.exportMap();
    }
}
</script>

<style scoped>
#view {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
</style>
## arcgis.js

import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import TileLayer from '@arcgis/core/layers/TileLayer'
import esriRequest from '@arcgis/core/request'

class ArcGIS {
    constructor() {
        this.mapView = null;
    }
    initMap(container) {
        let map = new Map({
            basemap: 'osm'
        });
        this.mapView = new MapView({
            container: container,
            map: map,
            zoom: 15,
            center: [114, 38],
            ui: {
                components: ["zoom", "compass"]
            }
        });
        return this.mapView;
    }
    async addLayer() {
        let layer = new TileLayer({
            url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
        });
        this.mapView.map.add(layer);
        return layer;
    }
}

加上县级行政区划的 Map.vue:

## Map.vue

<template>
    <div id="view"></div>
</template>

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import MapImageLayer from '@arcgis/core/layers/MapImageLayer'
import esriRequest from '@arcgis/core/request'

export default {
    name: 'Map',
    methods: {
        initMap: function() {
            let map = new Map();
            let imageLayer = new MapImageLayer({
                url: "http://localhost:6080/arcgis/rest/services/WorldImagery/MapServer",
                // sublayers: [
                //     {
                //         source: {
                //             type: "data-layer",
                //             dataSource: {
                //                 type: "table",
                //                 workspaceId: "MyGDB",
                //                 dataSourceName: "nm_city"
                //             }
                //         },
                //         drawingInfo: {
                //             renderer: {
                //                 type: "simple",
                //                 symbol: {
                //                     type: "esriSFS",
                //                     style: "esriSFSSolid",
                //                     color: [166, 36, 0, 255],
                //                     outline: {
                //                         type: "esriSLS",
                //                         style: "esriSLSSolid",
                //                         color: [110, 110, 110, 255],
                //                         width: 1.0
                //                     }
                //                 },
                //                 label: "FIRST_NAME",
                //                 description: ""
                //             }
                //         },
                //         showLabels: true,
                //         labelingInfo: [{
                //             labelPlacement: "always-horizontal",
                //             labelExpression: "[FIRST_NAME]",
                //             useCodedValues: false,
                //             symbol: {
                //                 type: "esriTS",
                //                 color: [255, 255, 0, 255],
                //                 verticalAlignment: "bottom",
                //                 horizontalAlignment: "left",
                //                 font: {
                //                     family: "Arial",
                //                     size: 12,
                //                     style: "normal",
                //                     weight: "bold",
                //                     decoration: "none"
                //                 }
                //             }
                //         }]
                //     },
                //     {
                //         id: 0
                //     }
                // ]
            });
            map.add(imageLayer);
            new MapView({
                container: "view",
                map: map
            });
        },
        exportMap: function() {
            const dynamicLayers = [{
                    id: 103,
                    source: {
                        type: "dataLayer",
                        dataSource: {
                            type: "table",
                            workspaceId: "MyGDB",
                            dataSourceName: "nm_county",
                        },
                    },
                    drawingInfo: {
                        renderer: {
                            type: "simple",
                            symbol: {
                                type: "esriSFS",
                                style: "esriSFSSolid",
                                color: [166, 166, 100, 200],
                                outline: {
                                    type: "esriSLS",
                                    style: "esriSLSSolid",
                                    color: [0, 255, 255, 255],
                                    width: 2.0
                                }
                            }
                        },
                        transparency: 0,
                        showLabels: true,
                        labelingInfo: [{
                            labelPlacement: "esriServerPolygonPlacementAlwaysHorizontal",
                            labelExpression: "[First_Name]",
                            useCodedValues: false,
                            symbol: {
                                type: "esriTS",
                                color: [255, 255, 0, 255],
                                verticalAlignment: "bottom",
                                horizontalAlignment: "left",
                                font: {
                                    family: "sim-sun",
                                    size: 10,
                                    style: "normal",
                                    weight: "bold",
                                    decoration: "none"
                                }
                            }
                        }]
                    }
                },
                {
                    id: 102,
                    source: {
                        type: "dataLayer",
                        dataSource: {
                            type: "table",
                            workspaceId: "MyGDB",
                            dataSourceName: "nm_city",
                        },
                    },
                    // definitionExpression: "First_Name='呼和浩特'",
                    drawingInfo: {
                        renderer: {
                            type: "simple",
                            symbol: {
                                type: "esriSFS",
                                style: "esriSFSSolid",
                                color: [166, 36, 100, 255],
                                outline: {
                                    type: "esriSLS",
                                    style: "esriSLSSolid",
                                    color: [0, 0, 255, 255],
                                    width: 2.0
                                }
                            }
                        },
                        transparency: 0,
                        showLabels: true,
                        labelingInfo: [{
                            labelPlacement: "esriServerPolygonPlacementAlwaysHorizontal",
                            labelExpression: "[First_Name]",
                            useCodedValues: false,
                            symbol: {
                                type: "esriTS",
                                color: [255, 255, 0, 255],
                                verticalAlignment: "bottom",
                                horizontalAlignment: "left",
                                font: {
                                    family: "sim-sun",
                                    size: 10,
                                    style: "normal",
                                    weight: "bold",
                                    decoration: "none"
                                }
                            }
                        }]
                    }
                },
                {
                    id: 101,
                    source: {
                        type: "mapLayer",
                        mapLayerId: 0
                    }
                }
            ];
            esriRequest("http://localhost:6080/arcgis/rest/services/WorldImagery/MapServer/export", {
                query: {
                    format: "png8",
                    f: "json",
                    bbox: "97.168747,37.406136,126.076187,53.332596",
                    size: "1200,800",
                    dpi: 200,
                    dynamicLayers: JSON.stringify(dynamicLayers)
                }
            }).then(res => {
                console.log(res);
            });
        }
    },
    mounted: function() {
        this.initMap();
        this.exportMap();
    }
}
</script>

<style scoped>
#view {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
</style>

3、图层导出效果


已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页