WAB for arvgis(三)sceneview添加特征图层

方法一:直接加路径

废话不多说,上代码:

define([
	'dojo/_base/declare',
	'jimu/BaseWidget',
	'dijit/_WidgetsInTemplateMixin',
	'dojo/on',
	'dojo/_base/lang',
	'dojo/_base/html',
	'jimu/utils',
	'esri/core/watchUtils',
	'esri/layers/FeatureLayer',
	"esri/layers/MapImageLayer",
	'dijit/form/HorizontalSlider',
	'dijit/form/Select',
	'jimu/dijit/CheckBox',
	'dijit/form/DateTextBox'
], function(declare,
	BaseWidget,
	_WidgetsInTemplateMixin,
	on,
	lang,
	html,
	jimuUtils,
	watchUtils,
	FeatureLayer,
	MapImageLayer) {
	return declare([BaseWidget], {
		// Custom widget code goes here 
		name: 'Zhuanti',
		baseClass: 'jimu-widget-zhuanti',
		postCreate: function() { //初始化
			var domNode = this.domNode;
			this.inherited(arguments);
			this.cameralayer = new FeatureLayer({
				url: "",//保密
				outFields: ["*"]//输出所有属性
			})
		},
		startup: function() { //开始使用
			this.inherited(arguments);
			var that = this;
			$.parser.parse('.jimu-widget-zhuanti');
			$("#zhuanti_btn1").click(function() {
				that.sceneView.map.add(that.cameralayer);//sceneView是用WAB创建项目时集成好的
			});
		},
		onOpen: function() { //打开微件面板时的响应函数
		},
		onClose: function() { //关闭微件面板后的响应函数
			this.sceneView.map.remove(this.cameralayer);//关闭后删除特征图层
		},
	});
});

方法二:使用config.json存储相关信息并读取

config.json:

{
  "dataUrl": " ",//路径
  "icons": [
    " ",
    " ",
    " ",
    " "
  ],
  "colors": ["#884614", "#1497db", "#F97C5A", "#884614"]
}

widget.js:

 ///
// Copyright © Esri. All Rights Reserved.
//
// Licensed under the Apache License Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///
define([
	'dojo/_base/declare',
	'jimu/BaseWidget',
	'dijit/_WidgetsInTemplateMixin',
	'dojo/on',
	'dojo/_base/lang',
	'dojo/_base/html',
	'jimu/utils',
	'esri/core/watchUtils',
	'esri/layers/FeatureLayer',
	"esri/layers/MapImageLayer",
	'dijit/form/HorizontalSlider',
	'dijit/form/Select',
	'jimu/dijit/CheckBox',
	'dijit/form/DateTextBox'
], function(declare,
	BaseWidget,
	_WidgetsInTemplateMixin,
	on,
	lang,
	html,
	jimuUtils,
	watchUtils,
	FeatureLayer,
	MapImageLayer) {
	return declare([BaseWidget], {
		// Custom widget code goes here 
		name: 'Zhuanti',
		baseClass: 'jimu-widget-zhuanti',
		//
		//添加
		featureLayers: [], //专题图层的featurelayer集合,点图层,为实现3D符号
		
		
		//
		//添加,render的函数
		_createPointRenderer3D: function(iconUrl, borderColor) {
			return {
				type: "simple",
				symbol: {
					type: "point-3d",
					symbolLayers: [{
						type: "icon",
						size: 25,
						resource: {
							href: iconUrl
						},
						outline: {
							color: "white",
							size: 2
						}
					}],
					verticalOffset: {
						screenLength: 60,
						maxWorldLength: 300,
						minWorldLength: 35
					},
					callout: {
						type: "line",
						color: "white",
						size: 2,
						border: {
							color: borderColor
						}
					}
				}
			}
		},
		///
		postCreate: function() { //初始化
			var domNode = this.domNode;
			this.inherited(arguments);
			//
			//修改
			this.featureLayers[0] = new FeatureLayer({
				url: this.config.Url + "/" + 1,
				outFields: ["*"],
				renderer: this._createPointRenderer3D(this.config.icons[1], this.config.colors[1]), //函数
			//
			})
		},

		startup: function() { //开始使用
			this.inherited(arguments);
			var that = this;
			$.parser.parse('.jimu-widget-zhuanti');
			$("#zhuanti_btn1").click(function() {
				that.sceneView.map.add(that.featureLayers[0]);
			});
		},

		onOpen: function() { //打开微件面板时的响应函数
		},

		onClose: function() { //关闭微件面板后的响应函数
			this.sceneView.map.remove(this.featureLayers[0]);
		},

	});
});

一般此方法常用于多各特征图层的叠加,代码美观简便

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值