唯一值渲染、简单渲染、分级渲染、热力图渲染（完整源码实现）

最新推荐文章于 2022-08-30 11:08:08 发布
最新推荐文章于 2022-08-30 11:08:08 发布
阅读量1.7k 收藏 5
点赞数 3
分类专栏： WebGIS - ArcGIS API For Js Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DanBo_C/article/details/105884201
版权
效果图

在这里插入图片描述

系统中进行了简单封装和提示信息，不需要可以直接删掉，单独成块，不会影响功能。

源码
<template>
  <div id="home">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item>Analysis</el-breadcrumb-item>
      <el-breadcrumb-item>唯一值渲染</el-breadcrumb-item>
    </el-breadcrumb>

    <div id="map"></div>
    <div class="btnclass">
      <el-card>
        <el-switch v-model="weiyiswithvalue" @change="weiyiswitchchange()" active-color="#13ce66"
                   inactive-color="#ff4949" class="mar10"></el-switch>
        <br>

        <el-switch v-model="simpleswithvalue" @change="simpleswitchchange()" active-color="#13ce66"
                   inactive-color="#ff4949" class="mar10"></el-switch>
        <br>

        <el-switch v-model="fenjiswithvalue" @change="fenjiswitchchange()" active-color="#13ce66"
                   inactive-color="#ff4949" class="mar10"></el-switch>
        <br>

        <el-switch v-model="heatswithvalue" @change="heatswitchchange()" active-color="#13ce66"
                   inactive-color="#ff4949" class="mar10"></el-switch>
      </el-card>
    </div>
    <button id="weiyibtn" class="noable" @click="weiyiopen"></button>
    <button id="weiyinobtn" class="noable" @click="weiyinoopen"></button>
    <button id="simplebtn" class="noable" @click="simpleopen"></button>
    <button id="simplenobtn" class="noable" @click="simplenoopen"></button>
    <button id="fenjibtn" class="noable" @click="fenjiopen"></button>
    <button id="fenjinobtn" class="noable" @click="fenjinoopen"></button>
    <button id="heatbtn" class="noable" @click="heatopen"></button>
    <button id="heatnobtn" class="noable" @click="heatnoopen"></button>
  </div>
</template>

<script>
import * as esriLoader from 'esri-loader'
import $ from 'jquery'

export default {
  data() {
    return {
      lendgeVisible: true,
      layerlistVisible: true,
      measurementVisible: true,
      weiyiswithvalue: false,
      simpleswithvalue: false,
      fenjiswithvalue: false,
      heatswithvalue: false,
      mapurl: 'http://localhost:6080/arcgis/rest/services/webgis/China_POI_dizhou/MapServer'
    }
  },
  // 我们需要在该组件装载之后做的事情都放在该方法里
  mounted() {
    esriLoader.setDefaultOptions({
      version: '3.28'
    })
    this.createMap(this)
  },
  // 我们需要执行的方法都定义在该属性里
  methods: {
    createMap: function (that) {
      esriLoader.loadModules(['esri/map',
        'esri/layers/ArcGISDynamicMapServiceLayer',
        'esri/layers/FeatureLayer',
        'dojo/on',
        'dojo/colors',
        'esri/symbols/SimpleMarkerSymbol',
        'esri/symbols/SimpleLineSymbol',
        'esri/renderers/UniqueValueRenderer',
        'esri/renderers/SimpleRenderer',
        'esri/renderers/ClassBreaksRenderer',
        'esri/renderers/HeatmapRenderer',
        'dojo/domReady!'], {
        css: true
      })
        .then(([Map, ArcGISDynamicMapServiceLayer, FeatureLayer, on, Color, SimpleMarkerSymbol, SimpleLineSymbol, UniqueValueRenderer, SimpleRenderer, ClassBreaksRenderer, HeatmapRenderer]) => {
          var map = new Map('map')
          var layer = new FeatureLayer(that.mapurl + '/1')
          map.addLayer(layer)

          var weiyifeatureLayer
          var simplefeatureLayer
          var fenjifeatureLayer
          var heatfeatureLayer
          // 唯一值渲染
          on($('#weiyibtn'), 'click', function () {
            weiyifeatureLayer.show()
          })
          on($('#weiyinobtn'), 'click', function () {
            weiyifeatureLayer.hide()
          })

          function addWeiyiFeatureLayer() {
            weiyifeatureLayer = new FeatureLayer(that.mapurl + '/0',
              {
                mode: FeatureLayer.MODE_SNAPSHOT,
                outFields: ['*']
              })
            var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([255, 0, 0]), 0)
            var marker1 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12, lineSymbol, new Color([255, 218, 185, 0.4]))
            var marker2 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 15, lineSymbol, new Color([244, 164, 96, 0.4]))
            var marker3 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 18, lineSymbol, new Color([210, 105, 30, 0.4]))
            var marker4 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12, lineSymbol, new Color([205, 133, 63, 0.4]))
            var marker5 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 25, lineSymbol, new Color([139, 69, 19, 0.4]))

            var renderer = new UniqueValueRenderer(marker1, 'jishu')
            renderer.addValue('1', marker1)
            renderer.addValue('2', marker2)
            renderer.addValue('3', marker3)
            renderer.addValue('4', marker4)
            renderer.addValue('5', marker5)

            weiyifeatureLayer.setRenderer(renderer)
            map.addLayer(weiyifeatureLayer)
            weiyifeatureLayer.hide()
          }

          // 简单渲染
          on($('#simplebtn'), 'click', function () {
            console.log('show')
            simplefeatureLayer.show()
          })
          on($('#simplenobtn'), 'click', function () {
            console.log('hide')
            simplefeatureLayer.hide()
          })

          function addSimpleFeatureLayer() {
            simplefeatureLayer = new FeatureLayer(that.mapurl + '/0')
            var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([255, 0, 0]), 0)
            var simplemarker = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 18, lineSymbol, new Color([100, 149, 237, 0.4]))

            var smpRenderer = new SimpleRenderer(simplemarker)
            var sizeInfo = {
              field: 'pm_2_5',
              valueUnit: 'unknown',
              minSize: 1,
              maxSize: 50,
              minDataValue: 0,
              maxDataValue: 50000
            }
            smpRenderer.setSizeInfo(sizeInfo)
            simplefeatureLayer.setRenderer(smpRenderer)
            map.addLayer(simplefeatureLayer)
            simplefeatureLayer.hide()
          }

          // 分级渲染
          on($('#fenjibtn'), 'click', function () {
            fenjifeatureLayer.show()
          })
          on($('#fenjinobtn'), 'click', function () {
            fenjifeatureLayer.hide()
          })

          function addFenjiFeatureLayer() {
            fenjifeatureLayer = new FeatureLayer(that.mapurl + '/0')
            var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([255, 0, 0]), 0)
            var marker1 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12, lineSymbol, new Color([152, 251, 152, 0.4]))
            var marker2 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 15, lineSymbol, new Color([0, 255, 0, 0.4]))
            var marker3 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 18, lineSymbol, new Color([50, 205, 50, 0.4]))
            var marker4 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12, lineSymbol, new Color([60, 179, 113, 0.4]))
            var marker5 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 25, lineSymbol, new Color([46, 139, 87, 0.4]))

            var fjRenderer = new ClassBreaksRenderer(marker3, 'AQI')

            fjRenderer.addBreak(0, 100, marker1)
            fjRenderer.addBreak(100, 200, marker2)
            fjRenderer.addBreak(200, 300, marker3)
            fjRenderer.addBreak(300, 400, marker4)
            fjRenderer.addBreak(500, 600, marker5)

            fenjifeatureLayer.setRenderer(fjRenderer)
            map.addLayer(fenjifeatureLayer)
            fenjifeatureLayer.hide()
          }

          // 热力图渲染
          on($('#heatbtn'), 'click', function () {
            heatfeatureLayer.show()
          })
          on($('#heatnobtn'), 'click', function () {
            heatfeatureLayer.hide()
          })

          function addHeatFeatureLayer() {
            heatfeatureLayer = new FeatureLayer(that.mapurl + '/0')
            var heatmapRenderer = new HeatmapRenderer({
              colorStops: [
                { color: 'rgba(63, 40, 102, 0)', ratio: 0 },
                { color: '#472b77', ratio: 0.083 },
                { color: '#4e2d87', ratio: 0.166 },
                { color: '#563098', ratio: 0.249 },
                { color: '#5d32a8', ratio: 0.332 },
                { color: '#6735be', ratio: 0.415 },
                { color: '#7139d4', ratio: 0.498 },
                { color: '#7b3ce9', ratio: 0.581 },
                { color: '#853fff', ratio: 0.664 },
                { color: '#a46fbf', ratio: 0.747 },
                { color: '#c29f80', ratio: 0.83 },
                { color: '#e0cf40', ratio: 0.913 },
                { color: '#ffff00', ratio: 1 }
              ],
              blurRadius: 7,
              // field: 'pm2_5',
              maxPixelIntensity: 180,
              minPixeltIntensiy: 10
            })
            heatfeatureLayer.setRenderer(heatmapRenderer)
            console.log(heatfeatureLayer)
            map.addLayer(heatfeatureLayer)
            heatfeatureLayer.hide()
          }

          addFenjiFeatureLayer()
          addSimpleFeatureLayer()
          addWeiyiFeatureLayer()
          addHeatFeatureLayer()
          // $('#fenjibtn').click()
        })
    },
    weiyiswitchchange() {
      if (this.weiyiswithvalue === true) $('#weiyibtn').click()
      else $('#weiyinobtn').click()
    },
    simpleswitchchange() {
      if (this.simpleswithvalue === true) $('#simplebtn').click()
      else $('#simplenobtn').click()
    },
    fenjiswitchchange() {
      if (this.fenjiswithvalue === true) $('#fenjibtn').click()
      else $('#fenjinobtn').click()
    },
    heatswitchchange() {
      if (this.heatswithvalue === true) $('#heatbtn').click()
      else $('#heatnobtn').click()
    },
    weiyiopen() {
      const h = this.$createElement

      this.$notify({
        title: 'Message',
        message: h('i', { style: 'color: teal' }, 'AQI级数唯一值渲染'),
        type: 'success'
      })
    },
    weiyinoopen() {
      const h = this.$createElement

      this.$notify({
        title: 'Message',
        message: h('i', { style: 'color: teal' }, '取消AQI级数唯一值渲染'),
        type: 'warning'
      })
    },
    simpleopen() {
      const h = this.$createElement

      this.$notify({
        title: 'Message',
        message: h('i', { style: 'color: teal' }, 'pm2.5简单渲染'),
        type: 'success'
      })
    },
    simplenoopen() {
      const h = this.$createElement

      this.$notify({
        title: 'Message',
        message: h('i', { style: 'color: teal' }, '取消pm2.5简单渲染'),
        type: 'warning'
      })
    },
    fenjiopen() {
      const h = this.$createElement

      this.$notify({
        title: 'Message',
        message: h('i', { style: 'color: teal' }, 'AQI分级渲染'),
        type: 'success'
      })
    },
    fenjinoopen() {
      const h = this.$createElement

      this.$notify({
        title: 'Message',
        message: h('i', { style: 'color: teal' }, '取消AQI分级渲染'),
        type: 'warning'
      })
    },
    heatopen() {
      const h = this.$createElement

      this.$notify({
        title: 'Message',
        message: h('i', { style: 'color: teal' }, '热力图渲染'),
        type: 'success'
      })
    },
    heatnoopen() {
      const h = this.$createElement

      this.$notify({
        title: 'Message',
        message: h('i', { style: 'color: teal' }, '取消热力图渲染'),
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
</style>
Devin·Finn
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UniqueValueRenderer唯一值渲染
WH23的专栏
07-11 6605
为了使地图更加美观，我们可以利用渲染来实现，比如要是某一图层中某一字段下的不同值的要素显示不同颜色，以此来区分，可以通过UniqueValueRender唯一值渲染器。唯一值渲染的定义是根据要素属性值来设置地图符号，具有相同属性值得要素采用相同的符号，而属性值不同的要素则采用不同的符号。由以上定义可知，唯一值渲染法的基本步骤是，设置要渲染的属性字段，找到该字段的不同值设置不同的符号。下面采用XAM
唯一值渲染代码
05-25
此代码使馆以专题图唯一值渲染，开发平台是c#
渲染---唯一值渲染
DanBo_C的博客
08-11 1200
1.效果图 2.通过定义唯一值渲染器，渲染字段，设置渲染方式渲染 唯一值写死，方式设置参考官方api //定义唯一值渲染器，对字段alias进行渲染，fill是默认的渲染符号 var renderer = new UniqueValueRenderer(fill, "name"); //设置渲染的方式 renderer.addValue("C区宿舍", new SimpleFillSymbol(...
唯一值渲染
谢雨枫
08-26 1640
public static void UniqueValueRenderer(ILayer layer)  {   IFeatureLayer pFLayer = layer  as IFeatureLayer;   IGeoFeatureLayer geoLayer = layer as IGeoFeatureLayer;   IFeatureClass fcls = pFLayer.Featu
acer.rar_唯一值_唯一值渲染_图层渲染
最新发布
09-24
要实现唯一值渲染，通常需要以下步骤： 1. **选择数据字段**：确定你要基于哪个字段进行渲染，这个字段的值应该具有足够的多样性且有意义。 2. **定义颜色或符号**：为每个唯一的字段值分配一个颜色、符号或图案。...
c#唯一值渲染实例代码
09-04
在 C# 唯一值渲染实例代码中，需要使用 IUniqueValueRenderer 接口来实现唯一值渲染。 5. 使用 ICursor 接口：ICursor 是 ArcGIS Desktop 中的一个接口，用于遍历要素的记录。在 C# 唯一值渲染实例代码中，需要使用...
易语言源码易语言GDI图形渲染源码.rar
02-17
易语言源码易语言GDI图形渲染源码.rar 易语言源码易语言GDI图形渲染源码.rar 易语言源码易语言GDI图形渲染源码.rar 易语言源码易语言GDI图形渲染源码.rar 易语言源码易语言GDI图形渲染源码.rar 易语言源码...
易语言图形容器和渲染原点源码,易语言GDI图形渲染
08-21
易语言GDI图形渲染源码系统结构:取指针,置指针,方法_置指针,new,delete,方法_置指针,销毁,创建自窗口句柄,创建自DC,创建自图像,获取DC,释放DC,取混合模式,置混合模式,取渲染原点,置渲染原
PIE SDK矢量唯一值渲染
weixin_33735077的博客
12-24 103
1. 功能简介 图层的唯一值渲染即是根据矢量图层的某一个数值字段的属性值，按照值的不同大小设置不同的显示符号。属性数值相等的所有要素归为同一种类，即同一符号。 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 实例化唯一值渲染对象 第二步 设置唯一值渲染字段 第三步 设置是否使用默认...
MFC画图，温度和湿度曲线含源码
05-18
MFC画图，温度和湿度曲线含源码
基于openlayers实现点密度、分级渲染等专题图
10-16
基于openlayers实现点密度、比例符号、分级渲染等专题图，效果还不错，里面附带演示数据。
ArcEngine 专题图制作 IUniqueValueRenderer唯一值渲染 指定颜色
weixin_42146388的博客
08-30 513
ArcEngine 专题图制作 IUniqueValueRenderer唯一值渲染 指定颜色
OpenLayer3实现分级渲染（初级版本）
weixin_30563917的博客
07-18 325
ol2支持要素图层加载的时候进行各种渲染，例如唯一值、分级等，但是到OpenLayer3则不能进行这些操作，不知道为何。今天看官方文档的时候发现Feature类一个方法→get()方法可以获取指定属性的值，需要给该方法传进去一个字符串属性，看到这我眼前一亮，这不就是各种渲染主要的方法，废话不多说进入正题： 一、思路 1、首先我们要用到的是样式函数styleFunction，这个函数用...
AE 唯一值渲染
qq_40216244的博客
01-19 980
private ISymbol GetSymbol(IColor pColor)        {            ISymbol pSymbol;            ISimpleFillSymbol pSymbolFillSymbol = new SimpleFillSymbolClass();            pSymbolFillSymbol.Color = pColor;
AE分级渲染
weixin_30855761的博客
12-18 545
分级渲染classbreakrenderer位于carto类库中，进行分级渲染时，首先要将相应图层按照某一Field分级。可使用esrisystem类库中的iclassifyGEN类的classify进行分类 1 private ISymbol GetSymbol(IColor pColor) 2 { 3 ISymbol pSymbol; ...
C#AE练习 （3）地图的简单渲染和唯一值渲染
加油！
03-07 2105
要求：   编写程序，访问位于文件型Geodatabase的FeatureClass，并实现两种Renderer   1、加载数据显示到地图中。   2、实现一个简单Renderer，能够World Lakes采用RGB颜色进行填充。   3、实现一个唯一值Renderer，根据World Countries的CNTRY_NAME字段进行唯一值Renender。 作答： 1.☆访问File...
渲染---分类渲染
DanBo_C的博客
08-11 753
1.效果图 2.与唯一值渲染相比 不同的只有渲染方式的设置 唯一值渲染： renderer.addValue("C", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 0.5]))); renderer.addValue("B", new SimpleFillSymbol(...
AE 栅格图分级渲染
weixin_34019144的博客
01-10 274
转自AE 栅格图分级渲染 ArcEngine对矢量数据进行风格化实在是得心应手，同样的对于栅格图像也能进行风格化！以前没接触过，今天正好需要，做出了栅格图像的渲染！下面实现的思路： 1.定义渲染的一系列接口 2.判断图像是否建立了直方图，如果没有则进行创建。 3.定义颜色序列，为渲染提供渲染的方案。 4.调用Render方法进行渲染。 下...
搜索引擎-三维图形引擎中渲染器的研究与设计.pdf
06-27
搜索引擎-三维图形引擎中渲染器的研究与设计.pdf

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值