自定义arcgis 底图配色

最新推荐文章于 2024-05-21 11:15:34 发布
最新推荐文章于 2024-05-21 11:15:34 发布
阅读量1k 收藏
点赞数
文章标签： arcgis javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sweet_flower/article/details/126782534
版权 
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #topbar {
            padding: 10px;
        }

        .action-button {
            font-size: 14px;
            height: 32px;
            margin-top: 10px;
            border: 1px solid #0079c1;
            color: #0079c1;
        }

        .action-button:hover {
            background: #0079c1;
            color: #e4e4e4;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.19/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/VectorTileLayer",
            'esri/layers/WebTileLayer',
        ], (Map, MapView, VectorTileLayer,WebTileLayer) => {
            let tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址http://t0.tianditu.gov.cn/ibo_w/wmts?
            let token = " "; //天地图token
            const map = new Map();

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [38.5795, 39.8282],
                zoom: 2
            });
            //影响图注记
            let tiledLayer3 = new WebTileLayer({
                urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_w&x={col}&y={row}&l={level}&tk=" + token,
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                title:"天地图加载"
            });
            //矢量图注记
            let tiledLayer4 = new WebTileLayer({
                urlTemplate: tiandituBaseUrl + "/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=" + token,
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                title:"天地图加载"
            });



            document.getElementById("paintButton").addEventListener("click", () => {
                const paintProperties = vtLayer.getPaintProperties("Marine area/1");
                debugger

                paintProperties["fill-color"] = paintProperties["fill-color"] == "#93CFC7" ? "#0759C1" : "#93CFC7";
                vtLayer.setPaintProperties("Marine area/1", paintProperties);
            });


            const vtLayer = new VectorTileLayer({
                style: {
                    layers: [
                        {
                            layout: {},
                            paint: {
                                "fill-color": "#00182B"
                                // "fill-color": "#fff"
                            },
                            source: "esri",
                            minzoom: 0,
                            "source-layer": "Land",
                            type: "fill",
                            id: "Land/0"
                        },
                        {
                            layout: {},
                            paint: {
                                "fill-pattern": "Landpattern",
                                "fill-opacity": 0.25
                            },
                            source: "esri",
                            minzoom: 0,
                            "source-layer": "Land",
                            type: "fill",
                            id: "Land/1"
                        },
                        {
                            layout: {},
                            paint: {
                                "fill-color": "#002E45"
                            },
                            source: "esri",
                            minzoom: 0,
                            "source-layer": "Marine area",
                            type: "fill",
                            id: "Marine area/1"
                        },
                        {
                            layout: {},
                            paint: {
                                "fill-pattern": "Marine area",
                                "fill-opacity": 0.08
                            },
                            source: "esri",
                            "source-layer": "Marine area",
                            type: "fill",
                            id: "Marine area/2"
                        },
                        {
                            layout: {
                                "line-cap": "round",
                                "line-join": "round"
                            },
                            paint: {
                                "line-color": "#525253",
                                "line-dasharray": [7, 5.33333],
                                "line-width": 1
                            },
                            source: "esri",
                            minzoom: 1,
                            "source-layer": "Boundary line",
                            type: "line",
                            id: "Boundary line/Admin0/0"
                        },
                        {
                            layout: {
                                "text-font": ["Risque Regular"],
                                "text-anchor": "center",
                                "text-field": "{_name_global}"
                            },
                            paint: {
                                "text-halo-blur": 1,
                                "text-color": "#AF420A",
                                "text-halo-width": 1,
                                "text-halo-color": "#f0efec"
                            },
                            source: "esri",
                            "source-layer": "Continent",
                            type: "symbol",
                            id: "Continent"
                        },
                        {
                            layout: {
                                "text-font": ["Atomic Age Regular"],
                                "text-field": "{_name}",
                                "text-transform": "none"
                            },
                            paint: {
                                "text-halo-blur": 1,
                                "text-color": "#AF420A",
                                "text-halo-width": 1,
                                "text-halo-color": "#f0efec"
                            },
                            source: "esri",
                            minzoom: 2,
                            "source-layer": "Admin0 point",
                            maxzoom: 10,
                            type: "symbol",
                            id: "Admin0 point/large"
                        }
                    ],
                    glyphs:
                        // "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf",
                        "",
                    version: 8,
                    sprite:
                        "https://cdn.arcgis.com/sharing/rest/content/items/5e9b3685f4c24d8781073dd928ebda50/resources/sprites/sprite",
                    sources: {
                        esri: {
                            url:
                                "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
                            type: "vector"
                        }
                    }
                }
            });
            map.add(vtLayer);
            map.add(tiledLayer3);

            view.ui.add("topbar", "top-right");
        });
    </script>
</head>

<body>
<div id="viewDiv">
    <div id="topbar" class="esri-widget">
        <button class="action-button" id="paintButton" type="button" title="Change water fill color">
            改变海洋颜色
        </button>
    </div>
</div>
</body>
</html>
Sweet_flower
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ArcGIS作图配色方案超级详细教程-让你的作图同样漂亮
qq_20245171的博客
04-19 2005
推荐一个工具“ColorBrewer 2.0”，既有网页版本，也可以作为样式文件导入ArcGIS中。2）如果文件不可用，您也可以从以下网站免费下载获取，网址为：https://github.com/ISUEOGTP/GISTaskSheets。单击将样式添加到列表，并浏览到在步骤2中下载的ColorBrewer.style文件的位置。c) 选择符号系统选项卡，然后单击窗口左侧显示框中的要素。在“符号选择器”窗口中，单击“样式参照”。b) 将任何形状文件添加到空白ArcMap文档中，右键文件进入属性窗口。
[原]Arcgis arcmap修改图元配色
weixin_30606669的博客
07-11 1781
感谢南师大的“深爱”提供的帮助 1.选择识别工具，点击海洋，确定海洋色块的color index为255 2.右键tif选择属性 3.选择分页栏中的符号化（Symbology） 4.找到对应的Label Index进行修改颜色 5.随Tif文件一起，保存mxd文档，下次加载即可直接读取配色方案 以上 下面是转自百度经验的方...
ArcGIS必杀技：轻松实现简洁美观的制图配色
最新发布
tianfeng1611的博客
05-21 531
添加图面标准元素，使人们能够轻易理解地图上的信息，如指北针、图例、比例尺、图名、经纬网格、制图人、制图单位、制图时间等，其中图名、指北针、图例、比例尺、经纬网格一般是必不可少的元素。打开ArcGIS软件，将准备好的数据加载到ARCGIS中，可以通过多种格式进行导入，如Shapefile、GeoJSON、KML等。相关的专题制图都有严格的要求和标准的符号系统，创意制图则可以天马行空的发挥，符合自己的审美就可以。利用ARCGIS的专题制图功能，可以制作各种复杂的专题地图，如分级色阶图、点密度图、流向图等。
ARCGIS制图配色参考.pdf
09-02
北美制图协会制图，配色美、适合制图者学习和数据参考，arcgis制图参考，arcmap制图参考、qgis制图参考
arcgis四色配色工具.zip
04-03
arcgis地图配色工具
arcgis10之对栅格或者tiff数据进行配色
xuxu96
11-10 7427
第一步 第二步 操作如下图所示。 配色效果如下。 将配色方案导出，以备他用
Arcgis使用教程（十）ARCGIS地图制图之基于颜色搭配器的地图颜色配色
热门推荐
soderayer的博客
04-15 1万+
1.颜色搭配器选择 直接在网上搜索颜色搭配网站 1）颜色搭配网站 选择蓝紫色为基色，自动配置为7中不同颜色 配色方案有几种，这里就默认为单色 2.根据颜色搭配器色调修改地图颜色 鼠标双击以下颜色框，弹出颜色选择器. 点击Fill Color右边的颜色框： 点击More Color打开颜色选择器进行颜色设置 颜色模型有CMYK\HSV\RGB三种。 对上面5中地图要素类型选取5种颜色： 这里就选择前面5种吧： 330099、8866CC、BFACE6、392
arcgis 底图下载工具
11-17
《ArcGIS底图下载工具深度解析与应用指南》 ArcGIS底图下载工具是一款专为GIS（地理信息系统）用户设计的实用软件，它允许用户从多种地图服务中下载地图数据，包括百度、谷歌等知名地图服务，以供离线使用或进行...
ArcGIS API for js4.15加载高德地图作为底图
12-25
在初始化Map时，可以设置`basemap`属性为空，因为我们将自定义底图。 ```javascript var map = new esri.Map({ container: "viewDiv", basemap: "", center: [116.404, 39.915], // 北京的经纬度 zoom: 10 }); ...
中国省级arcgis底图
02-23
【标题】"中国省级arcgis底图"涉及的是地理信息系统（GIS）中的一项核心内容——地图数据。在GIS领域，arcGIS是一款广泛使用的专业软件，它由Esri公司开发，用于地理信息的处理、分析、展示和管理。这里的“中国省级...
电子地图配色方案
09-15
电地物 颜色 5X36值 16进制 备注 居民地 浅灰色 R235 G230 B220 #EBE6DC 无线框 道路 高速路 黄棕色 R247 G190 B33 #F7BE21 有线框 匝道 土黄色 R255 G223 B74 #FFDF4A 有线框 主要道路 浅黄色 R255 G251 B115 #FFFB73 有线框 最小道路 纯白色 R255 G255 B255 #FFFFFF 有线框 河流 蓝灰色 R156 G178 B206 #9CB2CE 无线框 植被 淡绿色 R165 G207 B148 #A5CF94 无线框 注记 街道 黑色 R0 G0 B0 #000000 宋体9号 景点、湖泊 深绿色 R74 G106 B68 #4A6A44 饭店、山脉、站点、单位 灰色 R98 G98 B98 #626262 政府机构 红色 R255 G0 B0 #FF0000 铁路 蓝白相间 R39 G114 B191R255 G255 B255 #2772BF#FFFFFF 要素点 主要用矢量符号表示，加少量位图符号 子地图配色方法
ArcGIS批量设置栅格图层背景色为透明
03-03
ArcGIS批量设置栅格图层背景色为透明
ArcGIS高级制图教程
01-10
arcgis制图基础介绍、数据处理方法及技巧、制图要素可视化、地图打印输出与制图自动化......
arcgis底图配准教学
01-06
ArcGIS 底图配准教学 ArcGIS 底图配准是指使用 ArcGIS 软件将两张图像进行配准，以便将它们正确地叠加在一起。本文将对 ArcGIS 底图配准教学进行详细的讲解。 一、构建金字塔 在 ArcGIS 中，构建金字塔是指将多个...
ArcGis全国地图
11-06
ArcGIS全国地图是一款基于Esri公司的ArcGIS平台创建的地理信息系统(GIS)应用，它提供了中国全境的详细地理信息，包括地级区划、河流湖泊、省界以及海洋领土的"九段线"等重要地理要素。这些数据对于地理分析、城市...
arcgis高程dem之间颜色不一致，需要镶嵌操作
qq_38618788的博客
08-20 649
然后点击确定，稍等几秒到几分钟生成的新文件，就是统一的色值了。比如河南和山西之间的高程交界色差差异太大了。然后给他们设置自己需要的高程色卡，大功告成。
Arcgis小技巧【17】——如何修改ArcGIS中影像的背景颜色
规划GIS会
02-20 2803
然后右键点击影像图层，点击【属性】，在【符号系统】下找到【RGB合成】，勾选【显示背景值】。不过这需要拿到影像的边界线，上面例子中，影像是分乡镇的，所以只要拿到乡镇界就可以了。【为...】后面的那个就保持默认的空值即可，当然如果你想改颜色，就是在这里修改。首先，用【识别】工具在背景色是点击一下，查看弹出的窗口，记住背景色的RGB值。移除图层后，再从目录中把影像加载到地图中，还是会有红色的背景色。这里的背景色是红色，RGB色是【255，0，0】。把图层移除，再拖进地图中，还是没有背景色的，完美。
ArcGIS更多颜色调配
杨过
05-23 3466
ArcGIS“更多颜色”处提供了CMYK、RGB、HSV调色板。输入相应数字即可得到各种颜色。 以下是RGB颜色表，作为笔记备存。
arcgis底图配色插件
08-31
ArcGIS底图配色插件是一种用于ArcGIS软件的插件，用于快速制图并进行图层组织的工具。该插件提供了快速分组和一键应用到同名图层的功能，可以帮助用户快速设置和应用颜色配色方案。通过该插件，用户可以自定义配色方案或使用内置的配色方案，并将其应用到图层上。该插件可以提高制图的效率和准确性，使得底图的配色更加美观和清晰。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [ArcGIS Engine环境下VS窗体与Unity虚拟现实地理空间的嵌套和交互](https://blog.csdn.net/weixin_46862566/article/details/125959589)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [ArcGIS快速制图插件介绍](https://blog.csdn.net/liyuanxiang1984/article/details/52774293)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值