<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>安监？？？</title> <link rel="stylesheet" href="js/dist/css/calcite-bootstrap.min-v0.2.css"> <link rel="stylesheet" href="js/dist/css/calcite-maps-arcgis-4.x.min-v0.2.css"> <link rel="stylesheet" href="js/esri/css/main.css"> <script src="js/init.js"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .or-wrap { background-color: #e0e0e0; height: 1px; margin: 2em 0; overflow: visible; } .or-text { background: #fff; line-height: 0; padding: 0 1em; position: relative; top: -.75em; } .symbol-text { background: #fff; line-height: 0; padding: 0 1em; position: relative; top: -.1em; } </style> <script> require([ "esri/Map", "esri/views/SceneView", "esri/config", "esri/WebScene", "esri/layers/Layer", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/layers/SceneLayer", "esri/layers/TileLayer", "esri/Graphic", "esri/widgets/Expand", "esri/widgets/Home", "esri/geometry/Extent", "esri/Viewpoint", "esri/geometry/Polygon", "esri/core/watchUtils", "dojo/_base/array", ‘script/Draw.js‘, ‘script/Draw2.js‘, ‘script/Custom.js‘, ‘script/Measure.js‘, ‘script/MeasureLenght.js‘, ‘script/MeasureArea.js‘, ‘script/MeasureConfig.js‘, ‘script/QueryByRectangle.js‘, ‘script/QueryByPolygon.js‘, ‘script/QueryByPoint.js‘, ‘script/QueryLayerConfig.js‘, ‘script/GeoQueryLayerConfig.js‘, ‘script/EditPoint.js‘, ‘script/EditPointConfig.js‘, "script/CustiomSymbolConfig.js", "script/CustomAnimation.js", "script/EditPolygonConfig.js", "script/EditPointLayerConfig.js", "esri/tasks/QueryTask", "esri/tasks/support/Query", "esri/Color", "esri/layers/BaseTileLayer", "dojo/on", "dojo/dom", "dojo/domReady!" ], function ( Map, SceneView, esriConfig, WebScene, Layer, FeatureLayer, GraphicsLayer, SceneLayer, TileLayer, Graphic, Expand, Home, Extent, Viewpoint, Polygon, watchUtils, arrayUtils, Draw, Draw2, Custom, Measure, MeasureLenght, MeasureArea, MeasureConfig, QueryByRectangle, QueryByPolygon, QueryByPoint, QueryLayerConfig, GeoQueryLayerConfig, EditPoint, EditPointConfig, CustiomSymbolConfig, CustomAnimation, EditPolygonConfig, EditPointLayerConfig, QueryTask, Query, Color, BaseTileLayer, on, dom ) { function getUniqueValueSymbol(name, color) { //点符号用图标表示。要清楚地看到点的位置 //我们将图标垂直移动并添加callout行。这条线连接了与点特征位置相连接的符号。 //图标大小 return { type: "point-3d", symbolLayers: [{ type: "icon", resource: { href: name }, size: 30, outline: { color: "white", size: 2 } }], // 垂直偏移将符号垂直移动 verticalOffset: { screenLength: 10, maxWorldLength: 0, minWorldLength: 0 }, callout: { type: "line", color: "white", size: 1, border: { color: color } } }; } var featureLayer; var map = new WebScene({ basemap: "hybrid" }); // 视图和home按钮的初始范围 var initialExtent = new Extent({ xmin: 117.2, xmax: 117.4, ymin: 39.2, ymax: 39.4, spatialReference: 4326 }); var view = new SceneView({ container: "viewDiv", extent: initialExtent, map: map }); //添加标注开始---------------------------------------------------------- //指定标注录入的图层 var fUrl = "https://services8.arcgis.com/91J2IDFbEdu7LCaR/arcgis/rest/services/enterprise/FeatureServer/0"; //var fUrl = "https://2108aa73.all123.net/arcgis/rest/services/Hosted/enterprise/FeatureServer/0"; //根据enterptype字段定义唯一值渲染器，图片符号形式 var renderer = { type: "unique-value", // autocasts as new SimpleRenderer() field: "enterptype", uniqueValueInfos: [{ value: 20, symbol: getUniqueValueSymbol("image/Museum.png", "#D13470") }, { value: 30, symbol: getUniqueValueSymbol("image/Restaurant.png", "#F97C5A") }, { value: 40, symbol: getUniqueValueSymbol("image/Restaurant.png", "#F97C5A") }, { value: 50, symbol: getUniqueValueSymbol("image/Restaurant.png", "#F97C5A") }], //根据预警级别设置符号颜色 visualVariables: [{ type: "color", field: "warnlevel", stops: [ { value: 0, color: "green" }, { value: 1, color: "blue" }, { value: 2, color: "red" }, { value: 3, color: "yellow" } ] }] }; featureLayer = new FeatureLayer({ url: fUrl, id: "enterpriselayer", renderer: renderer, visible: true, outFields: ["*"], //设置标注 labelingInfo: [ { labelExpressionInfo: { value: "{Name}" }, symbol: { type: "label-3d", // autocasts as new LabelSymbol3D() symbolLayers: [{ type: "text", // autocasts as new TextSymbol3DLayer() material: { color: "white" }, // we set a halo on the font to make the labels more visible with any kind of background halo: { size: 1, color: [50, 50, 50] }, size: 10 }] } }], labelsVisible: true }); map.add(featureLayer); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>