ArcGIS 前端动态地图与要素服务符号化的区别小结

news2024/11/26 20:29:05

在ArcGIS中, 除了在桌面端做配图之外,一些符号化工作也可以在代码端去进行设置,这里简单的做了一些测试及小结。

一、服务的区别

在ArcGIS中最基础的两种数据服务就是动态地图服务(MapServer)和要素服务(FeatureServer):
在这里插入图片描述动态地图服务一般用于可视化展示,当然也可以通过Query的一些方法获取到地图中的数据信息,例如geometry等信息。这里的可视化属于服务器端渲染,一般是渲染完成之后将地图对应的图片传递到浏览器进行显示。

要素服务则是偏向于用于在线编辑和分析功能,但是也可以通过代码进行符号化,属于前端渲染。所以一般动态地图服务如果需要支持某些分析功能,就需要先通过查询等手段获取到geometry之后,再去构建feature要素用于分析传递。

二、动态地图服务的符号化

如果发布的服务为MapServer, 在作图的时候没有设置相应的样式,或者有不同的符号化需求,则可以通过设置renderer来进行修改。

这里的示例代码为使用的图片符号,如果需要其他符号方式,可以具体查看官网:
在这里插入图片描述测试代码使用了PictureMarkerSymbol:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      MapImageLayer - set renderers on sublayers | Sample | ArcGIS Maps SDK for
      JavaScript 4.25
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.25/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require(["esri/Map", "esri/views/MapView", 
      "esri/layers/MapImageLayer","esri/symbols/PictureMarkerSymbol"], (
        Map,
        MapView,
        MapImageLayer,
        PictureMarkerSymbol
      ) => {

        const citiesRenderer = {
          type: "simple", 
          symbol: {
            type: "picture-marker", 
            url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
            width: "64px",
            height: "64px"
            }
        
        };


        const layer = new MapImageLayer({
          url: "http://localhost:6080/arcgis/rest/services/pointtest/MapServer",
          sublayers: [
            {
              id: 0,
              renderer: citiesRenderer,
              opacity: 0.6
            }
          ]
        });

        /*****************************************************************
         * Add the layer to a map
         *****************************************************************/

        const map = new Map({
          basemap: "dark-gray-vector",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 5,
          center: [108.5, 18.5]
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

这里采用的实际上是服务器端渲染,我们在浏览器可以看到请求返回的是渲染好的图片:
在这里插入图片描述这种方式在服务访问数比较小数据量大的情况下,理论上借助服务器的渲染能力,应该能提高渲染能力。但是如果访问渲染的数量需求过大可能会给服务器带来较大压力。

三、要素服务的符号化

同样的要素服务在代码也是使用renderer来进行符号化来设置和渲染,测试代码如下:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      MapImageLayer - set renderers on sublayers | Sample | ArcGIS Maps SDK for
      JavaScript 4.25
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.25/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require(["esri/Map", "esri/views/MapView", 
      "esri/layers/MapImageLayer",
      "esri/symbols/PictureMarkerSymbol",
    "esri/layers/FeatureLayer"], (
        Map,
        MapView,
        MapImageLayer,
        PictureMarkerSymbol,
        FeatureLayer
      ) => {
        

        const layer = new FeatureLayer({
          url: "https://localhost:6443/arcgis/rest/services/pointlighttest/FeatureServer",
          
        });

        /*****************************************************************
         * Add the layer to a map
         *****************************************************************/

        layer.renderer = {
          type: "simple", 
          symbol: {
            type: "picture-marker", 
            url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
            width: "64px",
            height: "64px"
            }
        }

        const map = new Map({
          basemap: "dark-gray-vector",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 5,
          center: [108.5, 18.5]
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

查看浏览器请求会发现,要素服务是通过query服务器获取到信息之后,在浏览器端进行渲染的,并没有export返回图片的请求:
在这里插入图片描述因此,如果访问服务的终端非常多,服务器压力较大的情况下,都需要不同的符号化渲染,其实可以考虑发布要素服务,采用前端渲染的方法来减小服务器的压力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/153713.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring Boot 教程

Spring Boot 教程Spring Boot 基础开发Spring Boot 简介Spring Boot 第一个项目Spring Boot 项目启动机制Spring Boot 数据访问Spring Boot 集成 MyBatisSpring Boot 运行管理Spring Boot 日志管理Spring Boot 异常处理Spring Boot 定时任务Spring Boot 使用拦截器Spring Boot …

C#汽车美容管理服务系统源码 功能强大代码完整,开源分享!

一套完整的汽车美容管理服务系统源码&#xff0c;专门服务于汽车美容4s店&#xff0c;终端功能强大而又简便实用&#xff0c;界面友好而美观&#xff0c;让用户更好的体验度,基于jquery技术实现页面无刷新,可广泛适用于大型以及小型汽车美容机修等公司&#xff0c;包含 洗车、机…

【异常】记一次前端因资源无法加载导致白屏异常问题

一、背景 自从运维同事强烈要求前端的环境要使用多套的&#xff0c;参考文章 【项目】参考若依的前端框架去多环境 于是一番捣鼓与改造之后&#xff0c;看似已经顺利了 但运维说&#xff0c;前端还是有问题&#xff0c;需要他帮我改下&#xff0c;于是改了如下内容 什么嘛&a…

常用的git管理逻辑

//首先创建新的分支 git branch new_branch//切换到另一个分支 git checkout new_branch//修改代码&#xff0c;添加新的文件 git add .//查看文件的状态 git status//打包自己的改变 git commit -m "comment"//推到远程服务器上 git push origin new_branch// 拉远程…

2022年度打印机行业数据报告:十大热门品牌销量排行榜

随着5G技术的发展&#xff0c;越来越多的设备与人员将通过网络实现互联互通&#xff0c;打印的输入端口与输出端口变得多样与兼容&#xff0c;打印机也在越来越多的领域发挥着强大的作用。并且&#xff0c;随着电子化教学的不断推进以及普及&#xff0c;加之线上办公等场景的需…

Hudi系列2:Hudi安装

文章目录编译环境准备一. 下载并解压hudi二. maven的下载和配置2.1 maven的下载和解压2.2 添加环境变量到/etc/profile中2.3 修改为阿里镜像三. 编译hudi3.1 修改pom文件3.2 修改源码兼容hadoop33.3 手动安装Kafka依赖3.4 解决spark模块依赖冲突3.4.1 修改hudi-spark-bundle的p…

LeetCode 3. 无重复字符的最长子串

&#x1f308;&#x1f308;&#x1f604;&#x1f604; 欢迎来到茶色岛独家岛屿&#xff0c;本期将为大家揭晓LeetCode 3. 无重复字符的最长子串&#xff0c;做好准备了么&#xff0c;那么开始吧。 &#x1f332;&#x1f332;&#x1f434;&#x1f434; 目录 一、题目名称…

(02)Cartographer源码无死角解析-(48) 2D点云扫描匹配→暴力搜索匹配原理讲解,扫面匹配总体框架梳理

讲解关于slam一系列文章汇总链接:史上最全slam从零开始&#xff0c;针对于本栏目讲解(02)Cartographer源码无死角解析-链接如下: (02)Cartographer源码无死角解析- (00)目录_最新无死角讲解&#xff1a;https://blog.csdn.net/weixin_43013761/article/details/127350885 文末…

2022消费市场并未降级?麦肯锡调研报告解读

近日全球知名咨询公司麦肯锡发布《2023中国消费者报告》&#xff0c;重磅发布重塑中国消费市场的五大趋势。 趋势一&#xff1a;中等收入人群继续壮大 MGI数据显示&#xff0c;2019~2021年&#xff0c;年收入超过16万元人民币&#xff08;2.18万美元&#xff09;的中国城镇家…

nacos配置动态刷新及监听到变化触发一些方法

介绍在使用spring 时&#xff0c;动态更新配置是常见的&#xff0c;属性值更新&#xff0c;但是需要开启支持刷新功能&#xff0c;一个是spring.cloud.nacos.config.isRefreshEnabledtrue; 这个值一般是默认的&#xff0c;可以在nacosConfigProperties这个类中看到。还要在扩展…

【C++】list介绍及使用模拟实现对比vector

文章目录1. list的介绍及使用1.1 list的介绍1.2 list的使用1.2.1 list的构造1.2.2 list iterator以及insert和erase的使用1.2.3 list的迭代器失效2. list的模拟实现2.1 模拟实现list3.&#xff08;本文精华&#xff09;list与vector的对比1. list的介绍及使用 1.1 list的介绍 …

图像识别AI程序(数据集管理/训练/预测)

出于对Python中AI智能识别程序的兴趣&#xff0c;对照AI智能识别程序应该具有的主要功能&#xff1a;数据集管理&#xff08;加载/移除/重命名&#xff09;、模型训练&#xff08;可实时监测训练进度、最终训练参数输出&#xff09;、模型预测&#xff0c;使用Python/Keras编制…

open-local本地存储使用

Open-local使用指南架构组成1. scheduler-extender&#xff1a; 作为 kube-scheduler 的扩展组件&#xff0c;通过 Extender 方式实现&#xff0c;扩展了原生调度器对本地存储资源的感知&#xff0c;以实现对包括磁盘容量、多盘感知、磁盘介质&#xff08;ssd or hdd&#xff0…

数据分析-深度学习Day5

Backpropagation反向传播我们上节课学习了深度学习&#xff0c;也知道采用梯度下降优化我们的各神经元参数&#xff0c;以语音识别为例&#xff0c;一个输入特征量1000多项&#xff0c;8层隐层&#xff0c;大致需要的w,b参数有数百万项&#xff0c;这样我们梯度下降的计算量是非…

记一次部署在docker环境项目发送邮件出现No appropriate protocol

前言 部门有个项目涉及到邮件发送&#xff0c;发送功能在本地测试可以成功发送&#xff0c;但是打包部署到docker环境中&#xff0c;却出现 No appropriate protocol (protocol is disabled or cipher suites are inappropriate)后面在网上搜索了一下&#xff0c;查到了这篇文…

技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用

首先将 Vue.js 下载到本地&#xff0c;本章就以本地的 Vue.js 为例。在本地创建一个工作区即创建一个文件夹&#xff0c;使用 vscode 打开&#xff0c;将 Vue.js 放到工作区目录下。 创建挂载元素 首先创建一个 index.html 的文件&#xff0c;使用 加载 vue.js&#xff0c;这…

NAT模式虚拟机能ping通宿主机但是telnet不通 教你如何设置网关走出误区

今天跟大家聊聊如何正确配置NAT模式下虚拟机的网关。 如标题所言&#xff0c;我一开始在设置网关的时候一直存在着误区&#xff0c;而这个误区也导致标题中的问题&#xff1a;虚拟机能ping通宿主机&#xff0c;但是telnet不通&#xff0c;这就很奇葩了。 如下网络拓扑图。 虚…

Linux ALSA 之五:ALSA Proc Info

ALSA Proc Info一、概述二、Proc Files of Alsa Driver1、/proc/asound/xxx 简述2、创建 /proc/asound 目录树2.1 /proc/asound/version 文件2.2 /proc/asound/devices 文件2.3 /proc/asound/cards 文件2.4 /proc/asound/cardx 目录2.5 /proc/asound/pcm 文件一、概述 Linux系…

企业不可忽视的舆情监测管理办法,TOOM舆情监控工作总结?

企业做好舆情监控以及舆情管理是对企业负责&#xff0c;在企业发展过程中不可能是一帆风顺的&#xff0c;少不了各种各样的流言蜚语&#xff0c;像舆情监控管理监测早知早解决。接下来我们简单了解企业不可忽视的舆情监测管理办法&#xff0c;TOOM舆情监控工作总结? 一、企业…

【NI Multisim 14.0原理图设计基础——调整元器件位置】

目录 序言 一、调整元器件位置 &#x1f34a;1.元器件的移动 &#x1f34a;2.元器件的旋转 &#x1f34a;3.元器件的对齐 序言 NI Multisim最突出的特点之一就是用户界面友好。它可以使电路设计者方便、快捷地使用虚拟元器件和仪器、仪表进行电路设计和仿真。 首先启动NI…