import store from '@/store'
class LayerUtil {
constructor(options) {
this.options = options ? options : {};
this.map = store.getters.mapModular.Map;
this.mapModular = store.getters.mapModular;
}
/**
* 添加 FeatureLayer 图层
* @param {String} url 图层URL
* @param {String} id 图层ID
* @param {String} expression 图层过滤条件
* @param {Boolean} visible 图层显示隐藏
* @param {Objct} clickFn 图层点击事件
*/
addFeatureLayer(url, id, expression, visible, clickFn) {
let layer = new this.mapModular.FeatureLayer({
url: url,
id: id,
outFields: ["*"],
visible: visible === undefined ? false : visible, // false 隐藏 true 显示,
definitionExpression: expression // 图层过滤条件
});
// 设置图层的比例范围。如果将minScale和maxScale设置为0，则该图层将在所有比例下均可见
// layer.setScaleRange(30000, 0);
let is3D = store.getters.is3D;
if (is3D) {
/**
* 图层离地面高度
*/
const currentElevationInfo = {
mode: "relative-to-scene", // 高程模式设置高程放置的类型 relative-to-scene：气球图形放置在相对于建筑物的高程上
offset: 0, // 图形偏移被添加到所有图形的高程
// featureExpressionInfo: { // 自定义高程
// expression: 10
// },
unit: "meters", // 升降单元定义为单位
};
layer.elevationInfo = currentElevationInfo;
/**
* 将图层支棱起来
*
* 官方话如下：
* 将透视缩放应用于SceneView 中的屏幕大小点符号。
* 当 时true，通过将特定透视投影应用于要素的大小调整，屏幕大小的对象（例如图标、 标签或标注）可以更好地集成到 3D 场景中。
* 这仅适用于使用SceneView 时
*/
// layer.screenSizePerspectiveEnabled = true;
this.mapModular.Map.add(layer);
/** 图层点击事件 */
let SceneView = store.getters.mapModular.SceneView
SceneView.on('click', (event) => {
let opts = {
include: layer
};
SceneView.hitTest(event, opts).then(function(response) {
if (response.results.length) {
clickFn(response.results[0])
}
});
});
} else {
this.mapModular.Map.add(layer);
/** 图层点击事件 */
let MapView = store.getters.mapModular.MapView
MapView.on('click', (event) => {
let opts = {
include: layer
};
MapView.hitTest(event, opts).then(function(response) {
if (response.results.length) {
clickFn(response.results[0])
}
});
});
};
}
/** 3D图层 */
add3DFeatureLayer(url, id, expression, visible, clickFn) {
let layer = new this.mapModular.FeatureLayer({
url: url,
id: id,
outFields: ["*"],
visible: visible === undefined ? false : visible, // false 隐藏 true 显示,
definitionExpression: expression // 图层过滤条件
});
// 设置图层的比例范围。如果将minScale和maxScale设置为0，则该图层将在所有比例下均可见
// layer.setScaleRange(30000, 0);
/**
* 图层离地面高度
*/
const currentElevationInfo = {
mode: "relative-to-scene", // 高程模式设置高程放置的类型 relative-to-scene：气球图形放置在相对于建筑物的高程上
offset: 10, // 图形偏移被添加到所有图形的高程
// featureExpressionInfo: { // 自定义高程
// expression: 1000
// },
unit: "meters", // 升降单元定义为单位
};
let symbol = {
type: "polygon-3d", // autocasts as new PolygonSymbol3D()
symbolLayers: [{
type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
size: 100, // Height of the extrusion in meters
material: { color: '#c9c434' },
// 在 3D 对象上设置轮廓边缘。
edges: {
type: "solid", // autocasts as new SolidEdges3D()
size: '1px',
color: '#cdcdcd'
},
}]
}
layer.renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: symbol
}
layer.elevationInfo = currentElevationInfo;
/**
* 将图层支棱起来
*
* 官方话如下：
* 将透视缩放应用于SceneView 中的屏幕大小点符号。
* 当 时true，通过将特定透视投影应用于要素的大小调整，屏幕大小的对象（例如图标、 标签或标注）可以更好地集成到 3D 场景中。
* 这仅适用于使用SceneView 时
*/
// layer.screenSizePerspectiveEnabled = true;
this.mapModular.Map.add(layer);
/** 图层点击事件 */
let SceneView = store.getters.mapModular.SceneView
SceneView.on('click', (event) => {
let opts = {
include: layer
};
SceneView.hitTest(event, opts).then(function(response) {
if (response.results.length) {
clickFn(response.results[0])
}
});
});
}
/**
* 选择图层
* @param {*} queryResult
* @param {*} graphicsLayerId
* @param {*} callBack
* @param {Number} transparency 透明度（0-1） 2D模式使用
*/
selectLayers2D(queryResult, graphicsLayerId, transparency, callBack) {
/* 是否存在图层 */
if (!transparency) {
transparency = 0;
}
//获得该图形的形状
let feature, geometry;
//创建客户端图形
let symbol;
geometry = queryResult.geometry;
symbol = {
type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
color: new this.mapModular.Color([0, 255, 255, transparency]),
size: 8,
outline: { // autocasts as new S impleLineSymbol()
width: 3,
color: "red"
},
}
let graphic = new this.mapModular.Graphic({
geometry: geometry,
symbol: symbol,
mode: "relative-to-scene",
});
/**
* 将客户端图形添加到map中
* 1.创建“绘制图层”GraphicsLayer
* 2.将图形（Graphic）添加到“绘制图层”
* 3.将“绘制图层”添加到地图(map)上
*/
let graphicsLayer = new this.mapModular.GraphicsLayer({
id: graphicsLayerId,
});
graphicsLayer.add(graphic);
this.mapModular.Map.add(graphicsLayer);
let is3D = store.getters.is3D;
if (is3D) {
this.mapModular.SceneView.goTo(queryResult);
} else {
this.mapModular.MapView.goTo(queryResult);
}
// 返回选中的面
if (typeof(callBack) == 'function') {
callBack(queryResult.attributes)
}
}
selectLayers3D(queryResult, graphicsLayerId, transparency, callBack) {
if (!transparency) {
transparency = 0;
}
//获得该图形的形状
let feature, geometry;
//创建客户端图形
let symbol;
geometry = queryResult.geometry;
symbol = {
type: "polygon-3d", // autocasts as new PolygonSymbol3D()
symbolLayers: [{
type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
size: 150, // Height of the extrusion in meters
material: {
size: "10px",
color: new this.mapModular.Color([0, 255, 255, 0.1])
},
// 在 3D 对象上设置轮廓边缘。
edges: {
type: "solid", // autocasts as new SolidEdges3D()
size: '1px',
color: new this.mapModular.Color([0, 255, 255, 0.5]),
},
}]
}
let graphic = new this.mapModular.Graphic({
geometry: geometry,
symbol: symbol,
mode: "relative-to-scene",
});
/**
* 将客户端图形添加到map中
* 1.创建“绘制图层”GraphicsLayer
* 2.将图形（Graphic）添加到“绘制图层”
* 3.将“绘制图层”添加到地图(map)上
*/
let graphicsLayer = new this.mapModular.GraphicsLayer({
id: graphicsLayerId,
});
graphicsLayer.add(graphic);
this.mapModular.Map.add(graphicsLayer);
// 返回选中的面
if (typeof(callBack) == 'function') {
callBack(queryResult.attributes)
}
}
/** 3D */
add3DGraphicLayer(geometry, id, offset) {
let symbol = {
type: "simple-fill", //simple-fill autocasts as new SimpleMarkerSymbol()
color: new this.mapModular.Color([0, 255, 255, .5]),
}
let graphic = new this.mapModular.Graphic({
geometry: geometry,
symbol: symbol,
});
let graphicsLayer = new this.mapModular.GraphicsLayer({
id: id,
elevationInfo: {
mode: "relative-to-ground", // 高程模式设置高程放置的类型 relative-to-scene：气球图形放置在相对于建筑物的高程上
// offset: 50, // 图形偏移被添加到所有图形的高程
featureExpressionInfo: { // 自定义高程
expression: offset
},
unit: "meters", // 升降单元定义为单位
}
});
graphicsLayer.add(graphic);
this.mapModular.Map.add(graphicsLayer);
}
/**
* 关键字：
* 根据条件对服务进行查询并渲染图层、标注
* @param {String} serverUrl 服务地址
* @param {String} layerId 图层Id
* @param {String} where 判断条件
* @param {Array} colors 颜色数组
* @param {Boolean} isTagging 是否显示标注
* @param {String} taggingName 标注显示字段（服务）
*/
conditionalRenderLayer(serverUrl, layerId, where, colors, definitionExpression, taggingName, clickFn) {
let self = this;
let featureLayer = new this.mapModular.FeatureLayer({
url: serverUrl, // 服务地址
outFields: ["*"],
id: layerId, // 图层ID
definitionExpression: definitionExpression,
editingEnabled: true,
});
/**
* 根据"where == item"判断设置渲染的方式
*
*/
let SimpleFillSymbolList = [];
let is3D = store.getters.is3D;
colors.map((item, index) => {
let symbol;
// if (is3D) {
// symbol = {
// // type: "simple-fill",
// type: "polygon-3d", // autocasts as new PolygonSymbol3D()
// symbolLayers: [{
// type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
// size: 100, // Height of the extrusion in meters
// material: { color: new this.mapModular.Color(item) },
// }]
// }
// } else {
symbol = {
type: "simple-fill",
color: new this.mapModular.Color(item)
}
// }
SimpleFillSymbolList.push(symbol)
});
let renderer = {
type: "unique-value", // autocasts as new UniqueValueRenderer()
field: where,
defaultSymbol: { type: "simple-fill" }, // autocasts as new SimpleFillSymbol()
uniqueValueInfos: [{
value: 0,
symbol: SimpleFillSymbolList[0]
}, {
value: 1,
symbol: SimpleFillSymbolList[1]
}, {
value: 2,
symbol: SimpleFillSymbolList[2]
}],
};
featureLayer.renderer = renderer;
/**
* 索引为0 让绘制的图层放在最底部，不影响其他图层显示（不然会遮盖其他图层）
*/
this.mapModular.Map.add(featureLayer);
/** 图层点击事件 */
if (is3D) {
let SceneView = store.getters.mapModular.SceneView;
SceneView.on('click', (event) => {
let opts = {
include: featureLayer
};
SceneView.hitTest(event, opts).then(function(response) {
if (response.results.length) {
clickFn(response.results[0], featureLayer)
}
});
});
} else {
let MapView = store.getters.mapModular.MapView;
MapView.on('click', (event) => {
let opts = {
include: featureLayer
};
MapView.hitTest(event, opts).then(function(response) {
if (response.results.length) {
clickFn(response.results[0], featureLayer)
}
});
});
};
this.Tagging1(featureLayer, taggingName)
}
/**
* 标注图层
* @param {object} featureLayer // 图层
* @param {String} taggingName // 标志显示内容
*/
Tagging(featureLayer, taggingName) {
let lc = new this.mapModular.LabelClass({
labelExpressionInfo: {
expression: `$feature.${taggingName}` // 标注内容
},
labelPlacement: "below-center" //标记位置为正下方
});
//设置LabelClass的symbol
let textSymbol = new this.mapModular.TextSymbol();
textSymbol.color = new this.mapModular.Color([0, 0, 0, 1]); //设置标注颜色
let font = new this.mapModular.Font("9pt", this.mapModular.Font.STYLE_NORMAL, this.mapModular.Font.VARIANT_NORMAL, this.mapModular.Font.WEIGHT_NORMAL, "Microsoft YaHei"); //设置标注字体
textSymbol.font = font;
lc.symbol = textSymbol;
featureLayer.labelingInfo([lc]);
lc.minScale = 16000
}
/**
* 标注图层
* @param {object} featureLayer // 图层
* @param {String} taggingName // 标志显示内容
*/
Tagging1(featureLayer, taggingName) {
let lc = new this.mapModular.LabelClass({
labelExpressionInfo: {
expression: `$feature.${taggingName}` // 标注内容
},
labelPlacement: "always-horizontal" //标记位置为正下方
});
//设置LabelClass的symbol
let textSymbol = new this.mapModular.TextSymbol();
textSymbol.color = new this.mapModular.Color([255, 255, 255, 1]); //设置标注颜色
let font = { family: "Arial Unicode MS", size: 10, weight: "bold" };
textSymbol.font = font;
lc.symbol = textSymbol;
featureLayer.labelingInfo = [lc];
lc.minScale = 16000
}
getLayerById(layerId) {
return this.mapModular.Map.allLayers.find((e) => {
if (e.id = layerId) {
return e
}
})
}
/**
* 临时图层（用于定位）
*/
getTempGraphicLayer() {
return this.getLayerById("tempGraphicLayer")
}
/**
* 删除
* this.utils.LayerUtil().delLayer()
*/
delLayer(id) {
let self = this;
let layerData;
if (this.mapModular.Map.allLayers) {
this.mapModular.Map.allLayers.items.map(data => {
if (data.id === id) {
// console.log(layerData)
layerData = data;
}
});
}
if (layerData) {
// console.log(layerData.id);
self.mapModular.Map.layers.remove(layerData)
}
}
/** 获取图层
* @param id 图层ID
* this.utils.LayerUtil().getLayer()
*/
getLayer(id) {
// return this.mapModular.Map.findLayerById(id)
let is3D = store.getters.is3D;
let layerData;
if (is3D) {
this.mapModular.SceneView.allLayerViews.items.map(data => {
if (data.layer.id === id) {
// console.log(layerData)
layerData = data.layer;
}
});
} else {
this.mapModular.MapView.allLayerViews.items.map(data => {
if (data.layer.id === id) {
layerData = data.layer
}
});
};
return layerData
}
/** 获取图层
* @param id 图层ID
* this.utils.LayerUtil().mapGetLayer()
*/
mapGetLayer(id) {
let layerData;
this.mapModular.Map.layers.items.map(data => {
// console.log(data.id)
if (data.id === id) {
layerData = data
}
});
return layerData
}
}
const layerUtil = (options) => new LayerUtil(options);
export default layerUtil
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
