我要评论1.gis点聚类：
2.前期准备
2.1 配置arcgis api
2.1.1 安装arcgis api
npm install @arcgis/core@4.292.1.2 引入css
在vue项目中找到“index.html”，引入外部的css文件，粘贴到哪里见下图（非常贴心的）
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
2.1.3 准备数据
以下为聚类分析所用数据的注意点：
1.数据表头必须有"x"和"y"，其对应的就是经度和纬度，不要搞反了，也不要用其他命名。
2.csv文件的编码最好为“utf-8”，“utf-8-bom”的格式应该也不行，需要转码的话推荐使用“notepad++”这个ide，特别特别好用，其他博主有详细安装教程→
（根据博主给的数据进行参考，绝对不会出错）
2.1.4 数据存放
全栈程序猿应该有自己的云服务器吧，以及自己搭后台，然后把需要分析的数据放在后台。这里可以教大家个简单方法，把数据放vue项目的public文件夹下，该文件夹用于存放不需要通过webpack打包处理的静态资源，如图片、字体文件、favicon.ico等，方便但不安全哟！
3.代码示例
<script setup>
import { onmounted, ref } from "vue";
import map from "@arcgis/core/map";
import mapview from "@arcgis/core/views/mapview";
import csvlayer from "@arcgis/core/layers/csvlayer";
onmounted(() => {
mapinit();
});
// 全局地图实例
let view;
let map;
// 聚类
let isclustering = ref("取消聚类");
let crime_clustering;
let crime_clustering_layer;
function mapinit() {
//↓==========================================================================================
// 犯罪点聚类
crime_clustering = {
type: "cluster",
clusterradius: "50px",
popuptemplate: {
title: "犯罪案件聚类",
content: "总共{cluster_count}个案件",
},
//聚类圆形最小值
clusterminsize: "10px",
//聚类圆形最大值
clustermaxsize: "50px",
labelinginfo: [
{
deconflictionstrategy: "none",
labelexpressioninfo: {
//统计数字的显示与显示格式
expression: "text($feature.cluster_count, '#,###')", //显示统计数字
},
symbol: {
type: "text",
color: "#fffff",
font: {
//统计数字的字体颜色
weight: "bold",
// family: "noto sans",
//统计数字的字体大小
size: "10px",
},
// 调整标注的水平偏移量，使其向左偏移
//xoffset: -20,
// 调整标注的垂直偏移量，使其显示在图标的正上方
//yoffset: -30,
},
//聚类统计的数字居中对齐
labelplacement: "above-center",
},
],
};
crime_clustering_layer = new csvlayer({
url: "http://127.0.0.1:5173/csv/crimes_2016q4_handle.csv",
featurereduction: crime_clustering,
popuptemplate: {
title: "{type}",
content: [
{
type: "fields",
fieldinfos: [
{
fieldname: "type",
label: "案件",
},
{
fieldname: "brief_description",
label: "描述",
},
{
fieldname: "时间",
label: "date",
},
{
fieldname: "block",
label: "地点",
},
],
},
],
},
});
// 犯罪点聚类
//↑==========================================================================================
map = new map({
basemap: {
style: {
id: "arcgis/streets-night",
language: "zh-cn",
},
},
layers: [crime_clustering_layer],
});
view = new mapview({
container: "map_box",
map: map,
center: [-87.69878684514447, 41.830316350748234],
scale: 200000,
});
// 不显示底部logo
view.ui.remove("attribution");
// 不显示层级缩放组件
view.ui.remove("zoom");
// 地图旋转-60°
view.rotation = -60;
}
function clusteringclick() {
if (isclustering.value == "取消聚类") {
isclustering.value = "开始聚类";
// 取消聚类
crime_clustering_layer.featurereduction = null;
} else {
isclustering.value = "取消聚类";
// 开始聚类
crime_clustering_layer.featurereduction = crime_clustering;
}
}
</script>
<template>
<div id="map_box"></div>
<button class="clusteringbtn" @click="clusteringclick()">
{{ isclustering }}
</button>
</template>
<style>
#map_box {
position: absolute;
left: 0.5vw;
top: 1vh;
height: 56vh;
width: 71vw;
background: rgba(74, 122, 172, 0.1);
}
.clusteringbtn {
position: absolute;
bottom: 1vh;
right: 1vw;
z-index: 100;
}
</style>
代码这么长汗流浃背了吧，先别慌，这是vue完整代码示例当然多啦，核心代码就那一段。接下里我逐一讲解：
1、数据地址“url”不一定和我是一模一样的，大家注意自己的vue项目运行端口号，这个其实就是获取我放在public下的静态资源。
2、对于popuptemplate(点击打开弹窗)的代码，大家可以对照着我给的数据进行理解。这里的"fieldname:type"可以对应到数据表头"type",就是大家理解的那个属性字段；而"label:'案件'"就是字段名咯。
（ps：创作不易，如果文章对你有帮助，感谢点个赞鼓励下博主哟，后续还会继续发布webgis开发案例。如果有特殊需求或者问题可以咨询博主q1476701700~~~）
发表评论