效果
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Flickr</title>
<link rel="stylesheet" href="https://js.arcgisonline.cn/3.28/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.esriScalebar {
padding: 20px 20px;
}
#map {
padding: 0;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgisonline.cn/3.28/init.js"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/PopupTemplate",
'esri/layers/LabelClass',
"esri/request",
"esri/geometry/Point",
"esri/graphic", "esri/SpatialReference",
"dojo/on",
"dojo/_base/array",
"dojo/domReady!",
], function (
Map,
FeatureLayer, ArcGISDynamicMapServiceLayer,
PopupTemplate,
LabelClass,
esriRequest,
Point,
Graphic, SpatialReference,
on,
array,
) {
var featureLayer;
var tilemap = new ArcGISDynamicMapServiceLayer("https://linux111.esrichina.com/server/rest/services/aoj/beijing4490/MapServer");
map = new Map("map", {
center: new Point(117.13408259800008, 40.207635504000052,
new SpatialReference({ wkid: 4490 })),
showLabels: true
});
map.addLayer(tilemap);
var featureCollection = getFeatureCollection();
var labelJson = {
"labelPlacement": "below-center",
"minScale": 0,
"maxScale": 0,
"labelExpressionInfo": { "value": "{pollutantcode}" },
"symbol": {
"color": [78, 78, 78, 255],
"haloSize": 2,
"haloColor": [255, 255, 255, 255],
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"keining": true,
"type": "esriTS",
"font": { "family": "serif", "size": 10, "style": "italic", "weight": "bold", "decoration": "none" }
}
};
var layer = new FeatureLayer(featureCollection, {
id: '要素点',
showLabels: true,
outFields: ["*"]
});
window.map.addLayer(layer);
var labelArray = [];
if (Array.isArray(labelJson)) {
for (var index in labelJson) {
labelArray.push(new LabelClass(labelJson[index]));
}
} else {
labelArray.push(new LabelClass(labelJson));
}
layer.setLabelingInfo(labelArray);
var internalLabelLayer = document.getElementById('_internal_LabelLayer_layer');
if (internalLabelLayer) {
internalLabelLayer.style['pointer-events'] = 'none';
}
});
function getFeatureCollection() {
var layerDefinition = {
"geometryType": "esriGeometryPoint",
"objectIdField": "val",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": {
"color": [0, 48, 161, 255],
"size": 8,
"type": "esriSMS",
"style": "esriSMSCircle"
}
}
},
"fields": [
{
"name": "val",
"alias": "val",
"type": "esriFieldTypeOID"
}, {
"name": "pollutantcode",
"alias": "pollutantcode",
"type": "esriFieldTypeString"
}]
};
var featuresJson = [
{
"attributes": {
"val": 5041,
"pscode": "150300000020",
"ObjectID": 0,
"pollutantcode": "A21026"
},
"geometry": {
"y": 40.397174871000061,
"spatialReference": {
"wkid": 4490
},
"x": 116.42988750000006
}
},
{
"attributes": {
"val": 54471,
"pscode": "150600000082",
"ObjectID": 1,
"pollutantcode": "A21026"
},
"geometry": {
"y": 40.524859517000039,
"spatialReference": {
"wkid": 4490
},
"x": 116.98363503600001
}
},
{
"attributes": {
"val": 3399,
"pscode": "150300000016",
"ObjectID": 2,
"pollutantcode": "A21026"
},
"geometry": {
"y": 40.512648949000038,
"spatialReference": {
"wkid": 4490
},
"x": 116.14809500000001
}
},
{
"attributes": {
"val": 41,
"pscode": "150300000021",
"ObjectID": 3,
"pollutantcode": "A21026"
},
"geometry": {
"y": 40.218508750000069,
"spatialReference": {
"wkid": 4490
},
"x": 116.32859000000008
}
},
{
"attributes": {
"val": 144497,
"pscode": "150600000005",
"ObjectID": 4,
"pollutantcode": "A21026"
},
"geometry": {
"y": 40.207635504000052,
"spatialReference": {
"wkid": 4490
},
"x": 117.13408259800008
}
},
{
"attributes": {
"val": 288,
"pscode": "150600000046",
"ObjectID": 5,
"pollutantcode": "A21026"
},
"geometry": {
"y": 40.145354179000037,
"spatialReference": {
"wkid": 4490
},
"x": 116.71574623400011
}
},
{
"attributes": {
"val": 169,
"pscode": "150600000119",
"ObjectID": 6,
"pollutantcode": "A21026"
},
"geometry": {
"y": 40.042010142000038,
"spatialReference": {
"wkid": 4490
},
"x": 115.78815500000007
}
}];
var featureCollection = {
"layerDefinition": layerDefinition,
"featureSet": {
"features": featuresJson,
"geometryType": "esriGeometryPoint"
}
};
return featureCollection;
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>