The arcgis4.x version heat map in Vue does not use published services to obtain data. The heat map with weights in Vue uses the arcgis map.

# Result style

 

# Heat map json data point form rendering, without weight

First introduce

import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import Graphic from '@arcgis/core/Graphic'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import BasemapToggle from '@arcgis/core/widgets/BasemapToggle'
import Point from '@arcgis/core/geometry/Point'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import HeatmapRenderer from '@arcgis/core/renderers/HeatmapRenderer'
import Field from '@arcgis/core/layers/support/Field' //用来做权重字段
import esriConfig from "@arcgis/core/config" 

Define data in data

heatDatabase:[],
view: {},
webMap: {},

Method: First, set the base map

initMap() {

  esriConfig.apiKey = "改成自己的内容"
      this.$store.commit('getRangeCenter')
      this.webMap = new Map({
        basemap: 'osm-streets',
        // basemap: 'osm',
        ground: 'world-elevation',
      })
      this.view = new MapView({
        container: this.$refs.home,
        map: this.webMap,
        // center: (this.$store.state.rangeCenter && this.$store.state.rangeCenter.length>0) ? this.$store.state.rangeCenter : [104.05852944566121, 30.574795045027592],
        center: [104.05852944566121, 30.574795045027592], // longitude, latitude
        zoom: 16
      })
      this.view.ui._removeComponents(['zoom'])
      this.createSketch()
      // this.showBasemapToggle()
      this.createGraphicsLayer()
      this.view.when(() => {
        this.$refs.CustomZoom?.createZoom()
        // this.getLayerData('1')
      })
      this.view.on('mouse-wheel', () => {
        // e.stopPropagation()
        setTimeout(() => {
          let currentZoom = this.view.zoom
          let height = (currentZoom - 4) / 15 * 100 + '%'
          this.innerHeight = {height}
        }, 200)
      })
}

//清除图层
clearHeatMap() {
      this.webMap.allLayers.items.forEach(item => {
        if (item.id === '热力图') {
          this.webMap.remove(item)
        }
      })
    },
   
    heatmap() {
      this.clearHeatMap()
      var heatmapRenderer = new HeatmapRenderer({//设置渲染器
        colorStops: [
          { color: "rgba(0, 255, 150, 0)", ratio: 0 },
          { color: "#32C5E9", ratio: 0.083 },
          { color: "#67E0E3", ratio: 0.166 },
          { color: "#9FE6B8", ratio: 0.249 },
          { color: "#FFDB5C", ratio: 0.332 },
          { color: "#ff9f7f", ratio: 0.415 },
          { color: "#fb7293", ratio: 0.498 },
          { color: "#E062AE", ratio: 0.581 },
          { color: "#E690D1", ratio: 0.664 },
          { color: "#e7bcf3", ratio: 0.747 },
          { color: "#9d96f5", ratio: 0.83 },
          { color: "#8378EA", ratio: 0.913 },
          { color: "#96BFFF", ratio: 1 }
        ],
        blurRadius: 4,
        maxPixelIntensity: 50000,
        minPixelIntensity: 0
      });
       var data = { "heatData": [{ "lng": "104.05852944566121", "lat": " 30.574795045027592" }, { "lng": "104.06852944566121", "lat": " 30.574795045027692" }] };
      var features = [];

      for (var i = 0; i < data.heatData.length; i++) {
         var x = data.heatData[i].lng;
         var y = data.heatData[i].lat;
       
        features.push({
          geometry: {
            type: "point",
            x: x,
            y: y,
          },
          attributes: {
            ObjectID: i,//重要！！！
          },
        })
      }
      
      var featureLayer = new FeatureLayer({
        id:"热力图",
        source: features,//点数据集
        title: "热力图",
        objectIdField: "ObjectID",//重要！！！
        renderer: heatmapRenderer//渲染器
      });
      this.webMap.add(featureLayer);
    },

The following is a weighted approach

clearHeatMap() {
      this.webMap.allLayers.items.forEach(item => {
        if (item.id === '热力图') {
          this.webMap.remove(item)
        }
      })
    },
    
    heatmap() {
      this.clearHeatMap()
      var heatmapRenderer = new HeatmapRenderer({//设置渲染器
        field: "count", //设置的权重字段
        colorStops: [
          { color: "rgba(0, 255, 150, 0)", ratio: 0 },
          { color: "#32C5E9", ratio: 0.083 },
          { color: "#67E0E3", ratio: 0.166 },
          { color: "#9FE6B8", ratio: 0.249 },
          { color: "#FFDB5C", ratio: 0.332 },
          { color: "#ff9f7f", ratio: 0.415 },
          { color: "#fb7293", ratio: 0.498 },
          { color: "#E062AE", ratio: 0.581 },
          { color: "#E690D1", ratio: 0.664 },
          { color: "#e7bcf3", ratio: 0.747 },
          { color: "#9d96f5", ratio: 0.83 },
          { color: "#8378EA", ratio: 0.913 },
          { color: "#96BFFF", ratio: 1 }
        ],
        blurRadius: 4,
        maxPixelIntensity: 50000,
        minPixelIntensity: 0
      });
       var data = { "heatData": [{ "lng": "104.05852944566121", "lat": " 30.574795045027592", "count": "4" }, { "lng": "104.06852944566121", "lat": " 30.574795045027692", "count": "1" }] };
      var features = [];

      for (var i = 0; i < data.heatData.length; i++) {
         var x = data.heatData[i].lng;
        var y = data.heatData[i].lat;d;
        features.push({
          geometry: {
            type: "point",
            x: x,
            y: y,
          },
          attributes: {
            ObjectID: i,//重要！！！
             count: data.heatData[i].count
          },
        })
      }
//权重设置的用到
      const hfields = [
        new Field({
          name: "count",
          alias: "count",
          type: "string"
        })
      ];
      var featureLayer = new FeatureLayer({
        id:"热力图",
        fields: hfields, //权重字段
        source: features,//点数据集
        title: "热力图",
        objectIdField: "ObjectID",//重要！！！
        renderer: heatmapRenderer//渲染器
      });
      this.webMap.add(featureLayer);
    },