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.将地图 ...
随机推荐
- Web开发——CSS基础
参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...
- [cipher][archlinux][disk encryption][btrfs] 磁盘分区加密 + btrfs
科普链接:https://wiki.archlinux.org/index.php/Disk_encryption 前面的链接关于硬盘加密,讲了几种,基本上就是选dm-crypt with LUKS ...
- Eclipse + ndk+ cocos2dx 调试Cocos2dx 程序
本文是我自己尝试通过eclipse来在windows平台下搭建cocos2dx的过程,期间遇到了一些问题,都是通过网上借鉴别人的博文来解决的,下面也列出来这些参考文献.写下来的目的主要是自己以后要用的 ...
- python3实现字符串的全排列的方法(无重复字符)
https://www.jb51.net/article/143357.htm 抛出问题 求任意一个字符串的全排列组合,例如a='123',输出 123,132,213,231,312,321.(暂时 ...
- 转：CSS设置HTML元素的高度与宽度的各种情况总结
1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;"> < ...
- Celery的Web监控管理--Flower
Flower是Celery的一个实时监控和管理Web界面工具,目前仍在活跃的开发之中,但已经是一个很重要的可用工具了.这是推荐使用的Celery监控工具. 1,安装依赖 pip install flo ...
- jquery中选取兄弟节点的方法
$('#id').siblings() 当前元素所有的兄弟节点$('#id').prev() 当前元素前一个兄弟节点$('#id').prevaAll() 当前元素之前所有的兄弟节点$('#id'). ...
- C# 解构
我们以前用ref或者out在一定程度上可以解决方法只有一个返回值的问题.在C#7.0中新增了一个新元组(ValueTuple),他可以让我们返回多个值.话不多说,先上代码: 我们可以看到可以用隐式推断 ...
- Frps 家庭服务器访问解决方案
100.64.0.0/10运营商级(Carrier-grade)NAT保留IP地址 在一次跟踪路由的网络操作时发现自己路由器下一跳路由节点的IP地址比较奇怪,是100.64.0.1.好奇促使我查询 ...
- 坦克大战java版
吃了可以加血的血块类 import java.awt.*; public class Blood { //血块移动的路径 int[][] pos = { {450,250},{450,252},{45 ...