您的位置：首页 > Web前端 > JavaScript

arcgis api for javascript 添加图层时设置标注，自定义符号

2017-12-13 11:36 633 查看 
<!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,
elevationInfo: {
// 高程模式，将点放在建筑物顶部或其他场景三维物体上，否则与三维模型一起展示时会被覆盖掉
mode: "relative-to-scene"
},

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>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航