GeoDrawElementWidget

标绘元素绘制控件类

new Cesium.GeoDrawElementWidget(options)

Name Type Description
options Object optional 参数选项:
Name Type Description
viewer Viewer optional 关联视图对象
layer GeoElementLayer optional 关联标绘元素图层对象
libData Object optional 标绘符号库数据
actionType String optional 控件动作类型:"draw"为绘制元素,"edit"为编辑元素
elementType String optional 标绘元素类型
elementOptions Object optional 绘制生成标绘元素对象时的构造参数
Author:
  • zj
Example:
var elementLayer = new Cesium.GeoElementLayer();
elementLayer.addTo(viewer);

let iconUrl = "/geomap-api/JsCesuimDemo/public/Plot/plotIcons/";
let libData = [{
		name: "arrowSymbol",
		title: "箭头符号",
		list: [{
				name: "singlearrow",
				type: "singlearrow",
				options: {
					lineColor: Cesium.Color.fromCssColorString('#01F0FE'),
					lineWidth: 5,
					lineStyle: GeoElement.LINE_STYLE.NONE,
					fillMode: "gradient",
					fillColor: Cesium.Color.fromCssColorString('#01F0FE'),
					fillStartColor: Cesium.Color.fromCssColorString('#01F0FE'),
					fillEndColor: Cesium.Color.fromCssColorString('#4FACFE'),
					visibleSwallowTail: true
				},
				title: "粗单尖直箭头",
				img: iconUrl + "cudanjianzhi.png"
			},
			{
				name: "doublearrow",
				type: "doublearrow",
				options: {
					lineColor: Cesium.Color.fromCssColorString('#01F0FE'),
					lineWidth: 5,
					lineStyle: GeoElement.LINE_STYLE.NONE,
					fillMode: "gradient",
					fillColor: Cesium.Color.fromCssColorString('#01F0FE'),
					fillStartColor: Cesium.Color.fromCssColorString('#01F0FE'),
					fillEndColor: Cesium.Color.fromCssColorString('#4FACFE'),
					visibleSwallowTail: true
				},
				title: "钳击箭头",
				img: iconUrl + "qianji.png"
			},
			{
				name: "linearrow",
				type: "linearrow",
				options: {
					lineColor: Cesium.Color.fromCssColorString('#01F0FE'),
					lineWidth: 20,
					lineStyle: GeoElement.LINE_STYLE.SOLID
				},
				title: "直线箭头",
				img: iconUrl + "cuzhi.png"
			},
			{
				name: "curvearrow",
				type: "curvearrow",
				options: {
					lineColor: Cesium.Color.fromCssColorString('#01F0FE'),
					lineWidth: 20,
					lineStyle: GeoElement.LINE_STYLE.SOLID
				},
				title: "曲线箭头",
				img: iconUrl + "gongji.png"
			},
		]
	},
	{
		name: "lableSymbol",
		title: "点及文字",
		list: [{
				name: "iconText",
				type: "billboard",
				title: "文字",
				options: {
					labelGraphcis: {
						"text": "test",
						"fontSize": 30,
						"fillColor": Cesium.Color.fromCssColorString('#01F0FE'),
						"outlineColor": Cesium.Color.fromCssColorString('#ff0000'),
						"outlineWidth": 2,
					}
				},
				img: iconUrl + "i-text.png"
			},
			{
				name: "iconLabel",
				type: "billboard",
				options: {
					labelGraphcis: {
						"text": "test",
						"fontSize": 20,
						"fillColor": Cesium.Color.fromCssColorString('#01F0FE'),
						"outlineColor": Cesium.Color.fromCssColorString('#ff0000'),
						"outlineWidth": 2,
						"pixelOffset": [0, -10]
					},
					billboardGraphics: {
						"image": iconUrl + "i-icon1.png",
						"scale": 1,
						"color": null,
						"width": 30,
						"height": 30,
						"pixelOffset": [0, 30]
					}
				},
				title: "注记",
				img: iconUrl + "i-label.png"
			}, {
				name: "iconDot1",
				type: "billboard",
				options: {
					billboardGraphics: {
						"image": iconUrl + "i-icon1.png",
						"scale": 1,
						"color": null,
						"width": 40,
						"height": 40,
						"pixelOffset": [0, 10]
					}
				},
				title: "图标点1",
				img: iconUrl + "i-icon1.png"
			},
			{
				name: "iconDot2",
				type: "billboard",
				options: {
					billboardGraphics: {
						"image": iconUrl + "i-icon2.png",
						"scale": 1,
						"color": null,
						"width": 50,
						"height": 50,
						"pixelOffset": [0, 10]
					}
				},
				title: "图标点2",
				img: iconUrl + "i-icon2.png"
			},
			{
				name: "iconDot3",
				type: "billboard",
				options: {
					billboardGraphics: {
						"image": iconUrl + "i-icon3.png",
						"scale": 1,
						"color": null,
						"width": 60,
						"height": 60,
						"pixelOffset": [0, 10]
					}

				},
				title: "图标点3",
				img: iconUrl + "i-icon3.png"
			},
		]
	},
	{
		name: "basicSymbol",
		title: "基本符号",
		list: [{
				name: "polyline",
				type: "polyline",
				options: {
					lineColor: Cesium.Color.fromCssColorString('#01F0FE'),
					lineWidth: 5,
					lineStyle: GeoElement.LINE_STYLE.SOLID
				},
				title: "折线",
				img: iconUrl + "polyline.png"
			},
			{
				name: "polygon",
				type: "polygon",
				options: {
					fillColor: Cesium.Color.fromCssColorString('#01F0FE'),
				},
				title: "多边形",
				img: iconUrl + "polygon.png"
			},
		]
	}
];

var drawElementWidget = new Cesium.GeoDrawElementWidget({
	viewer: viewer,
	libData: libData,
	layer: elementLayer
});		
Demo:

Methods

activate()

激活符号绘制控件

deactivate()

关闭符号绘制控件对象

destroy()

销毁对象

editElement(element)

编辑指定标绘元素
Name Type Description
element Object 标绘元素

endEditElement()

结束编辑标绘元素

hideElementLibPanel()

隐藏标绘符号库面板

showElementLibPanel()

显示标绘符号库面板