<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArcGIS JS API Example</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.26/"></script>
</head>
<body class=" Esri-Theme--Light">
<div id="viewDiv" style="width: 100%; height: 100vh;"></div>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/renderers/SimpleRenderer",
"esri/renderers/UniqueValueRenderer",
], function (Map, MapView, FeatureLayer, Graphic, Point, SimpleMarkerSymbol, SimpleRenderer, UniqueValueRenderer) {
// 创建地图
var map = new Map({
basemap: "streets-navigation-vector"
});
// 创建视图
var view = new MapView({
container: "viewDiv",
map: map,
center: [104.065735, 30.659462], // 经度，纬度
zoom: 10 // 缩放级别
});
// 模拟数据
var mockData = [
{ name: "点1", description: "这是点1", type: '1', longitude: 104.065735, latitude: 30.659462 },
{ name: "点2", description: "这是点2", type: '1', longitude: 104.067735, latitude: 30.661462 },
{ name: "点3", description: "这是点3", type: '1', longitude: 104.066735, latitude: 30.662462 },
{ name: "点4", description: "这是点4", type: '1', longitude: 104.068735, latitude: 30.663462 },
{ name: "点5", description: "这是点5", type: '2', longitude: 104.069735, latitude: 30.664462 },
{ name: "点6", description: "这是点6", type: '2', longitude: 104.070735, latitude: 30.665462 },
{ name: "点7", description: "这是点7", type: '2', longitude: 104.071735, latitude: 30.666462 },
{ name: "点8", description: "这是点8", type: '2', longitude: 104.072735, latitude: 30.667462 }
];
const clusterConfig = {
type: "cluster", // 使用聚合
clusterRadius: "100px", // 聚合半径
clusterMinSize: "30px", // 最小聚合大小
clusterMaxSize: "60px", // 最大聚合大小
fieldInfos: [
{
fieldName: "cluster_count",
format: {
places: 0,
digitSeparator: true
}
}],
// 聚合点字体
labelingInfo: [
{
deconflictionStrategy: "none",
labelExpressionInfo: {
expression: "Text($feature.cluster_count, '#,###')"
},
symbol: {
type: "text",
color: "white",
font: {
weight: "bold",
family: "Noto Sans",
size: "18px"
},
haloSize: 1
},
labelPlacement: "center-center"
}
],
// renderer: {
// type: "simple",
// symbol: {
// type: "simple-marker",
// size: 4,
// color: "#69dcff",
// outline: {
// color: "rgba(0, 139, 174, 0.5)",
// width: 5
// }
// }
// },
}
// 创建 FeatureLayer
var featureLayer = new FeatureLayer({
featureReduction: clusterConfig,
fields: [
{ name: "name", type: "string", alias: "名称" },
{ name: "description", type: "string", alias: "描述" },
{ name: "type", type: "string", alias: "类型" },
],
objectIdField: "ObjectID",
//确保 view.on "click"显示以上fields所有字段
outFields: ["*"],
geometryType: "point",
spatialReference: { wkid: 4326 },
popupTemplate: {
title: "{name}--{type}",
content: "{description}"
},
source: [], // 初始化为空
// renderer: {
// type: "simple",
// symbol: {
// type: "simple-marker",
// size: 4,
// color: "#69dcff",
// outline: {
// color: "rgba(0, 139, 174, 0.5)",
// width: 5
// }
// }
// }
// renderer: {
// type: "simple",
// symbol: {
// type: "picture-marker",
// url: "https://arcgis.github.io/arcgis-samples-javascript/sample-data/layers-ogcfeaturelayer/windmill.png",
// // url: "http://192.168.3.92:8019/dxsk.png",
// width: "20px",
// height: "20px"
// }
// }
});
// 定义渲染器
var uniqueValueRenderer = new UniqueValueRenderer({
field: "type", // 根据字段类型进行渲染
defaultSymbol: new SimpleMarkerSymbol({
color: "red",
size: "10px"
}),
uniqueValueInfos: [
{
value: "1",
symbol: {
type: "picture-marker",
url: "https://arcgis.github.io/arcgis-samples-javascript/sample-data/layers-ogcfeaturelayer/windmill.png",
// url: "http://192.168.3.92:8019/dxsk.png",
width: "20px",
height: "20px"
},
label: "Type 1"
},
{
value: "2",
symbol: new SimpleMarkerSymbol({
color: "blue",
size: "10px"
}),
label: "Type 2"
}
]
});
// 将渲染器应用到图层
featureLayer.renderer = uniqueValueRenderer;
// 将 FeatureLayer 添加到地图
map.add(featureLayer);
// 添加模拟数据到 FeatureLayer
let points = []
mockData.forEach(function (data) {
var point = new Point({
longitude: data.longitude,
latitude: data.latitude
});
var pointGraphic = new Graphic({
geometry: point,
//attributes中属性 layer fields可以声明调用
attributes: data
// symbol: new SimpleMarkerSymbol({
// color: "red",
// size: "20px"
// })
});
points.push(pointGraphic)
});
featureLayer.applyEdits({
addFeatures: points
}).then(function (result) {
console.log("点已添加:", result);
}).catch(function (error) {
console.error("添加点时出错:", error);
});
// 添加点击事件
view.on("click", function (event) {
// 使用 hitTest 方法查找点击的要素
view.hitTest(event).then(function (response) {
// 检查是否点击到要素
if (response.results.length > 0) {
var graphic = response.results[0].graphic; // 获取点击的图形
var attributes = graphic.attributes; // 获取属性
console.log("attributes", attributes)
// 创建弹出窗口并设置内容
// var popupContent = "点击的要素: <br>" + JSON.stringify(attributes, null, 2);
// view.popup.open({
// title: "要素信息",
// content: popupContent,
// location: event.mapPoint // 弹出窗口位置
// });
}
});
});
});
</script>
</body>
</html>
扫一扫
2852
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
