arcgis api for javascript 添加图层时设置标注，自定义符号
<!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>
arcgis api for javascript 添加图层时设置标注，自定义符号的更多相关文章
- ArcGIS API for Javascript的Point clustering使用及默认符号无法显示问题
1.将包含ClusterFeatureLayer.js文件的extras文件夹放在部署的arcgis api目录下,如下图. extras路径 2.使用ClusterFeatureLayer关键代码如 ...
- ArcGIS api for javascript——鼠标悬停时显示信息窗口
描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow.本例中,要素是查询USA州图层的QueryTask的查询结果.工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形. 3. ...
- ArcGIS api for javascript——使用图层定义显示地图
描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...
- 转：ArcGIS API for JavaScript之图层
参考文章地址: https://developers.arcgis.com/javascript/3/jsapi/layer-amd.html Layer |–TiledMapServiceLayer ...
- 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务
1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
- ArcGIS API for Javascript 使用缓冲区结果做query查询出现“esri.config.defaults.io.proxyUrl 尚未进行设置”错误
1.前言 在研究ArcGIS API for JavaScript时会遇到这样的问题,比如我们在做缓冲区分析时,用分析的范围作为空间查询query的参数,在执行结果中总是会看到“esri.config ...
- arcgis api for JavaScript _加载三维图层(scene layer)
arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript 4.x 版本增加对三维的支持. 关于三维图层(sce ...
- ArcGIS API For JavaScript 开发（五）要素图层的编辑
2018-4-3 这篇博客主要讲述要素的层的编辑功能,是基于FeatureLayer的applyEdit方法.由于自己目前正在学习当中,有许多不足之处请各位指出,欢迎指导学习! 主要功能是 1.将地图 ...
随机推荐
- invariant theory 不变量理论
https://baike.baidu.com/item/不变量理论/9224903?fr=aladdininvariant theory 一组几何元素由 k个参数组成的向量 P1表示．若 T为某一变 ...
- [skill] 异或
都怪学习不好,或者老师教的不好.虽然知道异或的算法,但是始终不明白,到底有什么意义...直到今天,终于明白了. 还是应该怪我学的不好,不能怪老师. 今天有一个应用场景,写一个函数.这是一个hash表的 ...
- delphi传递变量给fastreport
delphi传递变量给fastreport 1.打开frReport报表设计.2.打开file->data dictionary加变量.这里比如加title,bm,zbr,gj,zrs3.在 ...
- python 反爬虫策略
1.限制IP地址单位时间的访问次数 : 分析:没有哪个常人一秒钟内能访问相同网站5次,除非是程序访问,而有这种喜好的,就剩下搜索引擎爬虫和讨厌的采集器了. 弊端:一刀切,这同样会阻止搜索引擎对网站的收 ...
- 20165336 学习基础与C语言基础调查
20165336 技能学习心得与c语言学习 一.心得体会 做教练 从老师的健身教练健身学员的学习关系中我懂得了学生应该有自主的学习意识,要有计划地去训练.去流汗,并且要以100分的要求严于律己,老师是 ...
- selenium+iframe 如何定位元素（实战）
场景: 在同一界面,需定位iframe里面的元素, 就需要切换至Iframe块,然后定位元素,验证完成后,再切换出来. 如果不切换至iframe ,会发现不管采取什么定位,都会报元素不存在.
- json和jsonp的区别？
json返回的是一串json格式数据:而jsonp返回的是脚本代码(包含一个函数调用): jsonp的全名叫做json with padding,就是把 json 对象用符合 js 语法的形式包裹起来 ...
- LeetCode-52.N-Queen II
The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...
- VS Code编辑器对git项目的支持
使用git随便clone一个项目下来, 然后用vscode打开项目, 随便打开某个文件, 添加几行代码: 9-11行是我新添加的, 左边绿色的竖条(点击就会看到明细)就表示这几行是新添加的. 然后修改 ...
- Laravel创建产品-CRUD之Create and Store
上一篇说了laravel用crud之index列出产品items,我们现在试着添加产品,用到CRUD的 Create 和 Store 方法,打开/app/Http/Controllers/ItemCo ...