前端开发必备技能知识笔记-添加webpack打包后可以配置的文件

前端程序员_花姐夫Jun

已于 2022-05-16 09:31:25 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发学习笔记文章标签： java vue spring boot flume arcgis

于 2021-12-17 18:09:39 首次发布

本文链接：https://blog.csdn.net/u012917880/article/details/122010464

web前端开发学习笔记专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种在ArcGIS API for JS地图开发过程中优化配置的方法，通过创建配置文件简化了图层服务链接等参数的调整流程，使运维人员能够轻松修改配置而无需开发者介入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在arcgis api for js地图开发完成后，打包给运维去业主单位部署的时候，常常需要让我更改图层服务的链接再打包好传给他们调试，运维和我都很烦，也常常打断我撸代码。后面直接将可能需要频繁修改的参数集中到一个配置文件中，打包后运维也能在打包文件中找到配置文件进行修改。

步骤：

添加配置文件

LayersConfig.js

let gray_icon = {type: "picture-marker", url: '/image/map/gray_point_marker.png', width: '7px', height: '7px'};
let green_icon = {type: "picture-marker", url: '/image/map/green_point_marker.png', width: '19px', height: '19px'};
let yellow_icon = {type: "picture-marker", url: '/image/map/yellow_point_marker.png', width: '25px', height: '25px'};
let red_icon = {type: "picture-marker", url: '/image/map/red_point_marker.png', width: '32px', height: '32px'};
let legendOptions = {
    title: "评价结果"
};

//可以配置的图层参数
window['LayersConfig'] = {
    zoom_thresholdValue: 11,//样点渲染的zoom值
    portalItem: {id: undefined},
    allLayers: [
        {
            id: 'YNS_MAPIMAGE',
            title: '云南省基础地理底图(MapServer影像)',
            type: 'tile',//图层类型（tile:缓存切片;imagery:ImageryLayer;map-image:动态图层;feature:要素图层;vector-tile:矢量切片;webtiler:WebTileLayer;IntegratedMesh:倾斜摄影;GeoJson:geojson）
            visible: true,
            group: 'basemap',
            basemapName: '云南省基础地理底图(MapServer影像)',//基础底图分组name
            thumbnailUrl: "/image/map/thumbnail/YNS_MAPIMAGE_thumbnail.jpg",//底图缩略图
            url: 'http://192.168.1.52/arcgisportal/rest/services/Hosted/影像图/MapServer',
        }, {
            id: 'JCDLDT',
            title: '云南省基础地理底图',
            type: 'vector-tile',
            visible: true,
            group: 'basemap',
            basemapName: '云南省基础地理底图',//基础底图分组name
            thumbnailUrl: "/image/map/thumbnail/CDLDT_YX_thumbnail_.jpg",//底图缩略图
            url: 'http://192.168.1.52/arcgisportal/rest/services/Hosted/JCDLDT/VectorTileServer',
        }, {
            id: 'JCDLDT_YX',
            title: '云南省基础地理底图(影像)',
            type: 'vector-tile',
            visible: true,
            group: 'basemap',
            basemapName: '云南省基础地理底图',//基础底图分组name
            url: 'http://192.168.1.52/arcgisportal/rest/services/Hosted/JCDLDT_YX/VectorTileServer',
        },
        {
            id: 'XZQH_M',
            title: '行政区划_要素',
            type: 'feature',
            visible: false,
            isNotOperation: true,
            url: 'http://192.168.1.52/arcgis/rest/services/土壤三期基础地理/行政区划_要素/MapServer',
            labelingInfo: [{
                symbol: {
                    type: "text",
                    color: "white",
                    font: {
                        size: 12,
                        weight: "bold"
                    }
                },
                labelPlacement: "above-center",
                labelExpressionInfo: {
                    expression: "$feature.name"
                }
            }],
        },
        {
            id: 'ZDQY_M',
            title: '重点区域',
            type: 'feature',
            visible: false,
            index: 1,
            url: 'http://192.168.1.52/arcgis/rest/services/土壤三期基础地理/重点区域/MapServer'
        }, {
            id: 'SDSX_M',
            title: '三大三小',
            type: 'feature',
            visible: true,
            url: 'http://192.168.1.52/arcgis/rest/services/土壤三期基础地理/三大三小/MapServer'
        },
        {
            id: 'NCPYD_D',
            title: '农产品样点',
            type: 'feature',
            visible: false,
            isCluster: false,//是否点聚合
            index: 4,
            renderer: {
                type: 'unique-value',
                defaultSymbol: gray_icon,
                defaultLabel: '无评价结果',
                field: 'zh_5_pjjg',
                legendOptions,
                uniqueValueInfos: [
                    {
                        value: `重度超标`,
                        symbol: red_icon,
                        label: '重度超标',
                    },
                    {
                        value: `轻度超标`,
                        symbol: yellow_icon,
                        label: '轻度超标',
                    },
                    {
                        value: `未超标`,
                        symbol: green_icon,
                        label: '未超标',
                    },
                ],
            },
            url: 'http://192.168.1.52/arcgis/rest/services/土壤三期专题数据/农产品样点/MapServer'
        }, {
            id: 'TRYD_D',
            title: '土壤样点',
            type: 'feature',
            visible: false,
            isCluster: false,//是否点聚合
            index: 3,
            renderer: {
                type: 'unique-value',
                defaultSymbol: gray_icon,
                defaultLabel: '无评价结果',
                field: 'zh_5_pjjg',
                legendOptions,
                uniqueValueInfos: [
                    //农产品土壤样点
                    {
                        value: `严格管控类Ⅲ`,
                        symbol: red_icon,
                        label: '严格管控类Ⅲ',
                    },
                    {
                        value: `安全利用类Ⅱ`,
                        symbol: yellow_icon,
                        label: '安全利用类Ⅱ',
                    },
                    {
                        value: `优先保护类Ⅰ`,
                        symbol: green_icon,
                        label: '优先保护类Ⅰ',
                    },
                    //场地土壤样点
                    {
                        value: `超管制值`,
                        symbol: red_icon,
                        label: '超管制值',
                    },
                    {
                        value: `超筛选值`,
                        symbol: yellow_icon,
                        label: '超筛选值',
                    },
                    {
                        value: `超筛选值但未超管制值`,
                        symbol: yellow_icon,
                        label: '超筛选值但未超管制值',
                    },
                    {
                        value: `未超标`,
                        symbol: green_icon,
                        label: '未超标',
                    },
                ],
            },
            url: 'http://192.168.1.52/arcgis/rest/services/土壤三期专题数据/土壤样点/MapServer'
        }, {
            id: 'DXSYD_D',
            title: '地下水样点',
            type: 'feature',
            visible: false,
            isCluster: false,
            index: 2,
            renderer: {
                type: 'unique-value',
                defaultSymbol: gray_icon,
                defaultLabel: '无评价结果',
                field: 'zh_5_pjjg',
                legendOptions,
                uniqueValueInfos: [
                    {
                        value: `五类水`,
                        symbol: red_icon,
                        label: '五类水',
                    },
                    {
                        value: `四类水`,
                        symbol: yellow_icon,
                        label: '四类水',
                    }, {
                        value: `三类水`,
                        symbol: green_icon,
                        label: '三类水',
                    }, {
                        value: `二类水`,
                        symbol: green_icon,
                        label: '二类水',
                    },
                    {
                        value: `一类水`,
                        symbol: green_icon,
                        label: '一类水',
                    },
                ],
            },
            url: 'http://192.168.1.52/arcgis/rest/services/土壤三期专题数据/地下水样点/MapServer'
        },
        {
            id: 'DK_M',
            title: '地块',
            type: 'feature',
            visible: false,
            index: 1,
            url: 'http://192.168.1.52/arcgis/rest/services/土壤三期专题数据/企业地块/MapServer'
        }, {
            id: 'DKZX_D',
            title: '地块质心',
            type: 'feature',
            visible: false,
            isNotOperation: true,
            url: 'http://192.168.1.52/arcgis/rest/services/土壤三期专题数据/地块质心/MapServer',
        }, {
            id: 'ST_2K_YPQDXP_S',
            title: '一片七点（农用地土壤详查）',
            type: 'feature',
            visible: true,
            isNotOperation: true,
            url: 'http://192.168.1.52/arcgis/rest/services/土壤三期专题数据/云南省一片七点/FeatureServer',
        }],
}

2. index.html中添加配置文件路径，因为要全局引用

3. 设置成全局，不然会报错

4. 使用

// 添加图层配置文件里面的图层
const layersConfig: any[] = [...window.LayersConfig.allLayers];