首頁 > 開發者 > JavaScript
標籤：enter render conf tom hal halo screen call link
<!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>
arcgis api for javascript 添加圖層時設定標註，自訂符號
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
