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.将地图 ...
随机推荐
- 新的ipad,用xcode编译报错 dyld_shared_cache_extract_dylibs
删掉 ~/Library/Developer/Xcode/iOS DeviceSupport/ 这个目录下的特定文件夹就行啦. 其实是因为 device is busy 生成文件夹过程中拔掉了设 ...
- ios开发dismiss所有控制器
-(void)dismissToRootViewController { UIViewController *vc = self; while (vc.presentingViewController ...
- 树和二叉树->基础知识
树的表示方法 1 一般表示法 2 广义表表示法 3 凹入表示法 树的基本术语: 树:n(n>=0)个结点的有限集 结点:包含一个数据元素及若干指向其子树的分支 结点的度:结点拥有的子树数成为结点 ...
- mysql大表更新sql的优化策略（转）
看了该文章之后,很受启发,mysql在update时,一般也是先select.但注意,在Read Committed隔离级别下,如果没有使用索引,并不会锁住整个表, 还是只锁住满足查询条件的记录而已. ...
- There are 0 datanode(s) running and no node(s) are excluded in this operation.
向hadoop导入文件,报错 .... There are 0 datanode(s) running and no node(s) are excluded in this operation. . ...
- git的配置操作
git配置信息 一.配置git config git config user.name 'yourName' git config user.name 'yourEmail@gmail.com' 二. ...
- Log4j Append属性指定是否追加内容
Log4j默认是不断的把日志内容追加到日志文件: 这里就有个属性 Append 默认就是true: 假如我们设置成false 就不追加了 直接覆盖前面的内容: 我们来测试下: log4j.rootLo ...
- thinkphp模板使用
1.模板文件 就是个html,可以保存到View的Public文件夹下,比如叫base.html(参考onethink) <block name="a">a</b ...
- ps切图插件
ps切图工具插件 下载网址:http://www.cutterman.cn/zh/cutterman 安装完插件,关闭ps,重新打开,窗口- 扩展,即可使用
- linux中cmake语法的学习
在linux 下进行开发很多人选择编写makefile 文件进行项目环境搭建,而makefile 文件依赖关系复杂,工作量很大,搞的人头很大.常常,写代码,效率才是王道.这里还有自动化的项目构建工具C ...