效果图

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

源码

<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>

文章目录

1. 效果图
2. 源码

原文链接: http://enofeng.github.io/2021/07/22/唯一值渲染、简单渲染、分级渲染、热力图渲染（完整源码实现）/

版权声明: 转载请注明出处.