# 结果样式
# 热力图json数据点形式渲染,不带权重
首先引入
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"
data内定义数据
heatDatabase:[],
view: {},
webMap: {},
方法 首先是设置底图
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);
},
下面是带权重的方式
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);
},