专栏首页ArcGIS JS API开发ArcGIS JS API 4.17更改测量控件黄白相间的默认样式

ArcGIS JS API 4.17更改测量控件黄白相间的默认样式

当我们使用ArcGIS JS API开发项目时,经常会用到地图测量控件,用于测量地图上两点之间的距离、一片区域的面积或周长等,但是ArcGIS JS API测量控件自带的默认样式是黄白相间的大粗线,这在用户看来是很不美观的,所以就需要我们对其进行一些样式优化。

问题描述

在使用ArcGIS API for JavaScript 4.17开发项目时,有一个需求是需要在地图上添加距离测量和面积测量的控件,这其实很简单,直接调用ArcGIS JS API自带的测量控件就可以实现,但是客户对控件自带的黄白相间、并且略粗的默认样式不满意,所以需要修改ArcGIS JS API自带的测量控件默认样式。

我们先来看看ArcGIS JS API自带的默认样式:

然后再来看看客户想要的样式:

其实说白了就是要更改默认样式的宽度和颜色。

解决思路

遇到这种需求的话,下意识就去看看ArcGIS JS API的官网有没有提供可以直接使用的API,但是经过一番查找后发现是没有的,那接下来就只能找找其他的地图JS库里面有没有了,如果有的话就试试能不能用于ArcGIS的底图,其实除了这种做法之外还有另一种做法,就是找到ArcGIS JS API的源码文件,直接改里面的css样式代码就可以,最后在”AriaGIS“大佬的帮助下发现确实是行得通的,但是考虑到目前项目中使用的ArcGIS JS API地址是在线的官网地址,所以没法用这种方法,那就只能再想想其他办法了。 最后找了好久没找到最优的方法,就先自己写了一个方法,但是最近在逛ArcGIS知乎的时候发现我当初的帖子有大佬回复了,并且还附加demo,所以我就拿来试试,结果测试发现是可行的。知乎帖子链接如下:

http://zhihu.geoscene.cn/question/38481

解决方法

解决方法的话其实很简单,就是监听测量控件的激活事件,然后修改它的绘制句柄里面自带的样式属性即可。但是虽然说简单,自己找了好久也没找到,所以大佬还是牛批啊。下面分别介绍在二维和三维下的修改方法,demo代码就是对大佬的代码做了一下简单修改过后的。

1、二维下的测量控件样式更改(关键代码)

const measurement = new Measurement();
// 监听测量控件的激活事件
measurement.watch('activeWidget', function (evt) {
    if (evt !== null) {
        // 分别修改距离测量和面积测量句柄的默认样式
        if (measurement.activeTool === 'distance') {
            evt.viewModel.palette.handleColor = [
                255,
                64,
                64,
                0.5,
            ];
            evt.viewModel.palette.pathPrimaryColor = [
                255,
                48,
                48,
                1,
            ];
            evt.viewModel.palette.pathSecondaryColor = [
                255,
                48,
                48,
                1,
            ];
            evt.viewModel.palette.handleWidth = 8;
            evt.viewModel.palette.pathWidth = 2;
        } else {
            evt.viewModel.palette.fillColor = [
                255,
                48,
                48,
                0.3,
            ];
            evt.viewModel.palette.handleColor = [
                255,
                64,
                64,
                0.5,
            ];
            evt.viewModel.palette.pathColor = [
                255,
                48,
                48,
                0.8,
            ];
        }
    }
});
measurement.activeTool = 'distance';  // 距离测量
measurement.activeTool = 'area';  // 面积测量

2、三维下的测量控件样式更改(关键代码)

三维下如果按照二维的方式修改的话会报错,具体原因是三维下绘制句柄中并没有palette属性导致的,所以三维下测量控件的样式更改暂未找到方法,最后跟用户沟通,取消了三维中的测量功能,但是回到公司后验证发现,三维下的测量确实比较复杂,而且我感觉ArcGIS JS API三维下的测量已经做的很厉害了,哈哈,没必要修改啊,比如下面的效果图这样:

如果实在想更改的话,就等我后期再找找资源吧,此处代码待更新

完整代码

1、二维下的测量控件样式更改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
        />
        <title>
            Measurement widget | Sample | ArcGIS API for JavaScript 4.17
        </title>
        <style>
            html,
            body,
            #viewDiv {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            #toolbarDiv {
                position: absolute;
                top: 15px;
                right: 15px;
                cursor: default;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
            }
            #infoDiv {
                position: absolute;
                top: 15px;
                left: 60px;
            }
            #infoDiv input {
                border: none;
                box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
            }
            .esri-widget--button.active,
            .esri-widget--button.active:hover,
            .esri-widget--button.active:focus {
                cursor: default;
                background-color: #999696;
            }
            .esri-widget--button.active path,
            .esri-widget--button.active:hover path,
            .esri-widget--button.active:focus path {
                fill: #e4e4e4;
            }
        </style>
        <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.17/esri/themes/light/main.css"
        />
        <script src="https://js.arcgis.com/4.17/"></script>
        <script>
            require([
                'esri/Map',
                'esri/views/MapView',
                'esri/widgets/Measurement',
            ], function (Map, MapView, Measurement) {
                const map = new Map({
                    basemap: 'osm',
                });
                const mapView = new MapView({
                    container: 'viewDiv',
                    zoom: 6,
                    center: [26.1025, 44.4268],
                    map: map,
                });
                const measurement = new Measurement();
                // 监听测量控件的激活事件
                measurement.watch('activeWidget', function (evt) {
                    if (evt !== null) {
                        // 分别修改距离测量和面积测量句柄的默认样式
                        if (measurement.activeTool === 'distance') {
                            evt.viewModel.palette.handleColor = [
                                255,
                                64,
                                64,
                                0.5,
                            ];
                            evt.viewModel.palette.pathPrimaryColor = [
                                255,
                                48,
                                48,
                                1,
                            ];
                            evt.viewModel.palette.pathSecondaryColor = [
                                255,
                                48,
                                48,
                                1,
                            ];
                            evt.viewModel.palette.handleWidth = 8;
                            evt.viewModel.palette.pathWidth = 2;
                        } else {
                            evt.viewModel.palette.fillColor = [
                                255,
                                48,
                                48,
                                0.3,
                            ];
                            evt.viewModel.palette.handleColor = [
                                255,
                                64,
                                64,
                                0.5,
                            ];
                            evt.viewModel.palette.pathColor = [
                                255,
                                48,
                                48,
                                0.8,
                            ];
                        }
                    }
                });
                const distanceButton = document.getElementById('distance');
                const areaButton = document.getElementById('area');
                const clearButton = document.getElementById('clear');
                distanceButton.addEventListener('click', function () {
                    distanceMeasurement();
                });
                areaButton.addEventListener('click', function () {
                    areaMeasurement();
                });
                clearButton.addEventListener('click', function () {
                    clearMeasurements();
                });
                loadView();
                function loadView() {
                    mapView.ui.add(measurement, 'bottom-right');
                    measurement.view = mapView;
                }
                // 距离测量
                function distanceMeasurement() {
                    measurement.activeTool = 'distance';
                    distanceButton.classList.add('active');
                    areaButton.classList.remove('active');
                }
                // 面积测量
                function areaMeasurement() {
                    measurement.activeTool = 'area';
                    distanceButton.classList.remove('active');
                    areaButton.classList.add('active');
                }
                // 清屏
                function clearMeasurements() {
                    distanceButton.classList.remove('active');
                    areaButton.classList.remove('active');
                    measurement.clear();
                }
            });
        </script>
    </head>
    <body>
        <div id="viewDiv"></div>
        <div id="toolbarDiv" class="esri-component esri-widget">
            <button
                id="distance"
                class="esri-widget--button esri-interactive esri-icon-measure-line"
                title="Distance Measurement Tool"
            ></button>
            <button
                id="area"
                class="esri-widget--button esri-interactive esri-icon-measure-area"
                title="Area Measurement Tool"
            ></button>
            <button
                id="clear"
                class="esri-widget--button esri-interactive esri-icon-trash"
                title="Clear Measurements"
            ></button>
        </div>
    </body>
</html>

2、三维下的测量控件样式更改

代码待更新
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.xbeichenbei.com/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgis/core

    ArcGIS API for JavaScript 4.18中新增加了一种基于ES Modules的新开发方式@arcgis/core,这篇文章就来介绍一下如何...

    X北辰北
  • ArcGIS Pro3.0已发布,快来看功能

    大家好,我是南南,esri于前段时间发布了全新一代 ArcGIS Pro 3.0,将采用全新的界面.

    陈南GISer
  • 地理信息系统(GIS)系列——ArcGIS API for JavaScript 3.9(2)

    魏晓蕾
  • 使用开源Cesium+Vue实现倾斜摄影三维展示

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

    Kiba518
  • Chrome 83 发布,支持直接读写本地文件!新的跨域策略!

    受新冠疫情影响,Chrome 稳定版本的更新直接跳过 v82 来到 Chrome 83,因此很多原本在 Chrome 82上就要正式发布的功能也悉数积攒到了本次...

    ConardLi
  • 配电网WebGIS研究与开发[3]

      在上一章中,对基本的AJAX进行了一些介绍,但是Web GIS开发框架Web ADF提供的AJAX对上述基本的AJAX又进行了一层封装。ArcGIS Se...

    用户1170933
  • 配电网WebGIS研究与开发[4]

      停电区域是指供电公司在某一天的某些区域的台区进行停电,台区的下属表箱均受到影响。这是一个地域性问题,所以通过在地图上进行标识这些区域,将数据可视化地展示到...

    用户1170933
  • SuperMap iClient for JavaScript 新手入门

    地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,...

    Esofar
  • 初步了解小程序

    前端江太公
  • Pentaho CDE详细开发使用手册

    3、添加应用的资源(资源类型有CSS和Javascript,导入内容形式有代码或具体文件)

    ZhangXianSheng
  • 正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp

    今天,篇幅可能比较短,主要介绍最近这段时间开发的一款脚手架——FastReactApp。这是一款基于Parcel2 开发的React.js项目脚手架。虽然比不上...

    Vam的金豆之路
  • UpdatePanel 控件

    使用了 UpdatePanel 控件的方案是 ASP.NET AJAX 扩展中的重要方案。我们收到了许多关于此控件、UpdateProgress 控件以及二者功...

    全栈程序员站长
  • Quill 富文本编辑器简介

    Quill 是一个免费的,开源的 WYSIWYG (What You See Is What You Get)编辑器,专为现代网络而打造。凭借其模块化架构和富有...

    阿宝哥
  • 浏览器的常见考点

    这个过程要注意标签位置,以及script标签位置和HTML提供的async defer属性

    心谭博客
  • 配电网WebGIS研究与开发[2]

        本次毕业设计所涉及平台有服务器和客户端两个平台、所处理的数据有地理数据和非地理数据、所涉及的编程语言主要有C#和JavaScript,都比较多样化,所以...

    用户1170933
  • 手写原生代码专题 | 简易手写画板(二)

    如视频所示,在这个示例中,我们用到了画布 canvas 相关的知识,比如创建画布、画圆形、画直线的基础知识,有了这些基础后,我们就能轻松完成本示例,示例效果如下...

    前端达人
  • picker-extend 移动端级联选择插件

    <h1 align="center" >picker-extend.js</h1>

    念念不忘
  • 《101 Windows Phone 7 Apps》读书笔记-Weight Tracker

    课程内容 Ø Charts & Graphs     你平时关注自己的体重吗?Weight Tracker使得你可以随时跟踪自己的体重,并且提供几种体重发展趋...

    ShiJiong
  • 地理信息系统(GIS)系列——ArcGIS中的各种图层

    Arcgis Javascript API 提供了5种类型的图层,分别是地图切片图层、动态地图图层、图形图层、带地理参考的影像图层以及KML图层,这些图层类都继...

    魏晓蕾

扫码关注腾讯云开发者

领取腾讯云代金券