效果图：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>思路</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<script src="https://js.arcgis.com/3.24/"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#addbtn {
position: absolute;
z-index: 999;
top: 20px;
left: 100px;
}
</style>
<script>
require([
"esri/map",
"esri/SpatialReference",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/tasks/FeatureSet",
"esri/graphic",
"dojo/domReady!",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
],
function (Map, SpatialReference, FeatureLayer, Point, FeatureSet, Graphic, Color, SimpleMarkerSymbol) {
var map = new Map("map", {
basemap: "osm",
center: [106.853, 39.687],
zoom: 8
});
function addFeatureLayer_Line() {//添加线要素图层
var layerDdfinition = {//图层信息
"geometryType": "esriGeometryPolyline",//几何类型，此处为多线
"fields": [{//字段
"name": "Id",//名称
"type": "esriFieldTypeInteger",//类型
"alias": "Id"//别名
}]
};
var features = [{//要素信息
"geometry": {//几何信息
"paths": [[[11849156, 4778091], [11847385, 4834289], [11880016, 4845095], [11884468, 4864062], [11896961, 4864449]]],//多线路径
"spatialReference": { "wkid": 3857 }//空间参照的wkid
}, "attributes": { "Id": 666 }//属性
}];
var featureCollection = {//图层信息
"layerDefinition": layerDdfinition,
"featureSet": {
"geometryType": "esriGeometryPolyline",
"features": features
}
};
var featureLayer = new FeatureLayer(featureCollection, { //添加要素图层 第一个参数是图层信息，第二个参数是图层参数，id：图层名；outFields：输出字段；infoTemplate：弹出提示模板json格式，内容为html
id: "featureLayer_line",
infoTemplate: { // 点击弹框配置
title: '123',
content: 'Id值为: ${Id}<br>' // 此处值为features要素信息 定义的ID值
},
});
map.addLayer(featureLayer);
}
function addFeatureLayer_Polygon() {//添加面要素图层
var layerDefinition = {//图层定义
"geometryType": "esriGeometryPolygon",//几何类型，此处为面
"drawingInfo": {//显示信息
"renderer": {//渲染
"type": "simple",//渲染类型
"symbol": {//渲染符号
"type": "esriSFS",//符号类型
"style": "esriSFSSolid",//符号样式
"color": [202, 210, 250, 255],//符号颜色
"outline": {//边线
"type": "esriSLS",//边线类型
"style": "esriSLSSolid",//边线风格
"color": [110, 110, 110, 255],//边线颜色
"width": 0.4//边线宽度
}
}
}
},
"fields": [{//字段
"name": "FID",//名称
"type": "esriFieldTypeOID",//类型
"alias": "FID"//别名
}]
};
var featuresJson = [//要素json
{
"geometry": {//几何信息
"rings": [//面的环坐标
[
[
11887823.013574112,
4808870.640514669
],
[
11887704.550351473,
4806581.691026327
],
[
11887657.873354558,
4805764.200769341
],
[
11887459.21306391,
4802671.4226363385
],
[
11887074.549089594,
4800537.641823167
],
[
11886957.339552525,
4799720.644633449
],
[
11886884.083591843,
4799682.6463857405
],
[
11886664.571901316,
4798806.792687284
],
[
11886503.15259629,
4797516.984441191
],
[
11886267.25132002,
4796746.26610482
],
[
11886267.25132002,
4795716.161657473
],
[
11886356.640674923,
4794915.00969947
],
[
11886664.571901316,
4793398.813591384
],
[
11886664.571901316,
4792883.920080086
],
[
11886488.501404155,
4790529.267028997
],
[
11886473.850212013,
4789789.006148858
],
[
11886267.25132002,
4789280.40543016
],
[
11884479.30870418,
4786964.543564248
],
[
11883757.643599603,
4783724.155619573
],
[
11883532.131314095,
4784429.680404677
],
[
11880194.638431186,
4785149.931589167
],
[
11879135.11688106,
4785702.845174519
],
[
11876499.557025116,
4786954.902264332
],
[
11874499.71009926,
4787692.488445649
],
[
11874221.58569236,
4788087.03353978
],
[
11874070.345038384,
4788552.205763441
],
[
11873572.6287429,
4789631.054779579
],
[
11871531.990237363,
4790545.913681356
],
[
11869919.059009401,
4792344.294844773
],
[
11869158.66196508,
4792495.32871872
],
[
11868332.235155981,
4793703.607110353
],
[
11867357.475329872,
4794335.26512847
],
[
11866870.095416814,
4795818.444724049
],
[
11866756.06065013,
4797725.28241275
],
[
11867081.99972684,
4799335.006649515
],
[
11868183.90213897,
4800736.480699026
],
[
11868840.805500042,
4802550.444127303
],
[
11869540.089723114,
4803842.406297934
],
[
11871699.952729158,
4803160.080285296
],
[
11875579.36255885,
4804667.150177253
],
[
11876829.59798799,
4805574.446929034
],
[
11878058.642986132,
4805986.881731012
],
[
11880135.305224372,
4806536.821238294
],
[
11881102.083763154,
4806537.544626473
],
[
11882664.540256578,
4806752.802132575
],
[
11885199.196496153,
4807589.387436557
],
[
11886034.314447938,
4807893.6176154325
],
[
11886620.362133382,
4807988.691443278
],
[
11887514.084853696,
4808197.85704441
],
[
11887823.013574112,
4808870.640514669
]
]
],
"spatialReference": {//空间参考
"wkid": 3857
}
},
"attributes": {//属性
"FID": 0
}
},
{
"geometry": {
"rings": [
[
[
11884312.281788783,
4841389.299710365
],
[
11883873.615819713,
4843067.453213876
],
[
11884721.233059814,
4843550.43956797
],
[
11886204.563229984,
4844516.482585463
],
[
11888989.076321915,
4845767.840527422
],
[
11890707.529818019,
4845551.6327343555
],
[
11891631.079167532,
4844763.693147952
],
[
11892243.836065695,
4842446.505187579
],
[
11892932.52507329,
4840583.893425028
],
[
11893250.381538315,
4839756.1777884085
],
[
11894262.42756991,
4838459.481950988
],
[
11896398.926143097,
4839589.427892503
],
[
11899378.830502827,
4842693.664348945
],
[
11902756.055443853,
4846057.6798026385
],
[
11906388.44875989,
4850521.853097049
],
[
11907884.446726138,
4851704.55180762
],
[
11909249.156945223,
4850936.150252714
],
[
11909709.165616553,
4848905.042917432
],
[
11909355.109100241,
4846932.000448879
],
[
11908119.883291366,
4844763.693147952
],
[
11905537.299512934,
4840882.742151993
],
[
11902954.715734502,
4838037.672417351
],
[
11902415.242946917,
4836652.856566167
],
[
11902504.69626967,
4834440.79133375
],
[
11902627.147256937,
4828726.533937218
],
[
11902680.123334449,
4818947.929144405
],
[
11902892.027644467,
4815782.264191404
],
[
11903421.78841953,
4813993.418760216
],
[
11906017.616217334,
4806222.536663787
],
[
11907447.970310016,
4801617.870533963
],
[
11907553.922465015,
4801136.908160194
],
[
11908318.543582033,
4797003.808759451
],
[
11903750.145494062,
4800248.186244124
],
[
11902756.055443853,
4804990.916657739
],
[
11900769.452537367,
4804217.692275691
],
[
11900198.304201746,
4798291.621318895
],
[
11888650.11211238,
4796616.167612068
],
[
11886267.25132002,
4796488.730067894
],
[
11887459.21306391,
4802671.4226363385
],
[
11887823.013574112,
4808870.640514669
],
[
11888111.702020217,
4809862.237035475
],
[
11888044.66850551,
4811056.6581676025
],
[
11886721.079985678,
4813000.231737428
],
[
11884953.401890071,
4814032.473571326
],
[
11884734.47707919,
4814720.098608735
],
[
11885131.797660487,
4815666.151527501
],
[
11886068.59102937,
4817370.640867943
],
[
11887548.831196709,
4818633.8985444475
],
[
11888278.666554393,
4820190.046717865
],
[
11887482.611099826,
4821344.350734866
],
[
11885330.457951136,
4822420.1308980035
],
[
11884171.606255684,
4824098.5794286905
],
[
11883439.00710226,
4826165.08703715
],
[
11884131.623651193,
4829824.321030421
],
[
11883968.277893953,
4832583.672683923
],
[
11884350.400517263,
4833895.1599666085
],
[
11883926.59189722,
4835136.029011124
],
[
11884138.496207245,
4836170.204573276
],
[
11884019.57391724,
4837299.449519323
],
[
11883608.735432182,
4838790.596475104
],
[
11884615.280904794,
4840032.07535739
],
[
11884312.281788783,
4841389.299710365
]
]
],
"spatialReference": {
"wkid": 3857
}
},
"attributes": {
"FID": 1
}
}];
var featureCollection = {//图层信息
"layerDefinition": layerDefinition,//图层信息
"featureSet": {//要素集
"features": featuresJson,//要素json
"geometryType": "esriGeometryPolygon"//几何类型
}
};
var featureLayer = new FeatureLayer(featureCollection, { //添加要素图层 第一个参数是图层信息，第二个参数是图层参数，id：图层名；outFields：输出字段；infoTemplate：弹出提示模板json格式，内容为html
id: "featureLayer_polygon",
infoTemplate: { // 点击弹框配置
title: '123',
content: 'FID值为: ${FID}<br>' // 此处值为featuresJson 定义的FID值
},
});
map.addLayer(featureLayer);
}
// 地图加载完成后执行函数
map.on('load', () => {
addFeatureLayer_Line()
addFeatureLayer_Polygon()
})
})
</script>
</head>
<body>
<div id="map">
<button id="addbtn"></button>
</div>
</body>
</html>
1085
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
