import * as mars3d from 'mars3d'
import Vue from 'vue'
import {polylineVolumeC} from "@/components/Mars3D/utils/ArcGisWfsLayer";
/**
* BillboardP + ModelC
* @param index 图层序号
* @param name 图层名称
* @param image 图片
* @param model 模型
* @param scale 模型缩放
* @param condition 搜索条件
* @returns {{"3D": BaseGraphicLayer, "2D": BaseClass}}
* 章丘点、model调用
*/
export function createPointModelLayer(index, name, image, model = '', scale, condition,cluColor=null) {
const queryServer = new mars3d.query.QueryArcServer({
url: Vue.prototype.baseConfig.arcgisUrl + index,
popup: 'all',
pageSize: 5000
})
const layer = new mars3d.layer.GeoJsonLayer({
name: name,
clustering: {
enabled: true,
pixelRange: 20,
clampToGround: false,
addHeight: 20,
getImage: function (count) { //getImage是完全自定义方式
return mars3d.Util.getCircleImage(count, {
color: cluColor + 'ee',
radius: 20
})
},
},
onCreateGraphic: function(options) {
const points = options.position // 坐标
const attr = options.attr // 属性信息
const primitive = new mars3d.graphic.BillboardPrimitive({
allowDrillPick: true,
attr: attr,
id: attr.编号,
position: points,
style: {
image: image,
scale: 0.6,
hasPixelOffset: true,
pixelOffsetY: -10,
scaleByDistance: true,
scaleByDistance_far: 30000,
scaleByDistance_farValue: 0.6,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.4,
highlight: { type: 'click', image: '../static/images/high-marker.png' }
}
})
layer.addGraphic(primitive)
},
popup: 'all'
}).bindPopup(function(event) {
return mars3d.Util.getTemplateHtml({ template: 'all', attr: event.graphic.attr || {}})
}).on(mars3d.EventType.click, function(event) {
if (window.map.camera.positionCartographic.height > 5000) {
window.map.flyToPoint(event.graphic.position, {
radius: 5000, // 距离目标点的距离
duration: 1
})
}
})
window.map.addLayer(layer)
const layer3D = new mars3d.layer.GeoJsonLayer({
name: name,
onCreateGraphic: function(options) {
const points = options.position // 坐标
const attr = options.attr // 属性信息
const primitive = new mars3d.graphic.ModelPrimitive({
allowDrillPick: true,
attr: attr,
position: points,
style: {
scale: scale,
url: model
}
})
layer3D.addGraphic(primitive)
},
popup: 'all'
})
.bindPopup(function(event) {
const attr = event.graphic.attr || {}
return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
})
window.map.addLayer(layer3D)
layer3D.show = false
queryServer.query({
where: condition,
success: (result) => {
if (result.count === 0) {
console.log('未查询到相关记录！')
}
layer.load({ data: result.geojson })
layer3D.load({ data: result.geojson })
// if (model !== '') {
// const points = []
// result.geojson.features.forEach(item => {
// points.push({
// position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
// style: {
// scale: scale
// },
// attr: item.properties
// })
// })
// const modelCombine = new mars3d.graphic.ModelCombine({
// url: model,
// instances: points
// })
// layer3D.addGraphic(modelCombine)
// }
},
error: (error, msg) => {
console.log('服务访问错误,' + error)
}
})
return {
'3D': layer3D,
'2D': layer
}
}
/**
* BillboardP
* @param name 图层名称
* @param index gis图层编号
* @param image 图片
* @param condition 条件
* @returns {BaseClass}
*/
export function createPointLayer(name, index, image, condition, cluColor= null) {
const queryServer = new mars3d.query.QueryArcServer({
url: Vue.prototype.baseConfig.arcgisUrl + index,
popup: 'all',
pageSize: 5000
})
const layer = new mars3d.layer.GeoJsonLayer({
name: name,
clustering: {
enabled: true,
pixelRange: 20,
clampToGround: true,
// addHeight: 20,
getImage: function (count) { //getImage是完全自定义方式
return mars3d.Util.getCircleImage(count, {
color: cluColor + 'ee',
radius: 20,
})
},
},
onCreateGraphic: function(options) {
const points = options.position // 坐标
const attr = options.attr // 属性信息
const primitive = new mars3d.graphic.BillboardPrimitive({
allowDrillPick: true,
attr: attr,
id: attr.编号,
position: points,
style: {
image: image,
scale: 0.6,
hasPixelOffset: true,
clampToGround: true,
pixelOffsetY: -10,
scaleByDistance: true,
scaleByDistance_far: 20000,
scaleByDistance_farValue: 0.6,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.4,
highlight: { type: 'click', image: '../static/images/high-marker.png' }
}
})
layer.addGraphic(primitive)
},
popup: 'all'
}).bindPopup(function(event) {
return mars3d.Util.getTemplateHtml({ template: 'all', attr: event.graphic.attr || {}})
}).on(mars3d.EventType.click, function(event) {
if (window.map.camera.positionCartographic.height > 5000) {
window.map.flyToPoint(event.graphic.position, {
radius: 5000, // 距离目标点的距离
duration: 1
})
}
})
window.map.addLayer(layer)
queryServer.query({
where: condition,
success: (result) => {
// console.log(index, '总数:', result.count, ' data时间(s):', new Date().getSeconds())
if (result.count === 0) {
console.log('未查询到相关记录！')
}
layer.load({ data: result.geojson })
},
error: (error, msg) => {
console.log('服务访问错误,' + error)
}
})
return layer
}
/**
* ModelC
* @param index 图层序号
* @param name 图层名称
* @param model 模型
* @param scale 模型缩放
* @param condition 搜索条件
* @returns {{"3D": BaseGraphicLayer, "2D": BaseClass}}
*/
export function createModelLayer(index, name, model = '', scale, condition) {
const queryServer = new mars3d.query.QueryArcServer({
url: Vue.prototype.baseConfig.arcgisUrl + index,
popup: 'all',
pageSize: 5000
})
const layer3D = new mars3d.layer.GraphicLayer({
name: name
}).bindPopup(function(event) {
const attr = event.graphic.attr || {}
return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
})
window.map.addLayer(layer3D)
layer3D.show = false
queryServer.query({
where: condition,
success: (result) => {
if (result.count === 0) {
console.log('未查询到相关记录！')
}
if (model !== '') {
const points = []
result.geojson.features.forEach(item => {
points.push({
position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
style: {
scale: scale
},
attr: item.properties
})
})
const modelCombine = new mars3d.graphic.ModelCombine({
url: model,
instances: points
})
layer3D.addGraphic(modelCombine)
}
},
error: (error, msg) => {
console.log('服务访问错误,' + error)
}
})
return layer3D
}
export async function createModelLayerAsync(index, name, model = '', scale, condition) {
const queryServer = new mars3d.query.QueryArcServer({
url: Vue.prototype.baseConfig.arcgisUrl + index,
popup: 'all',
pageSize: 8000
})
const layer3D = new mars3d.layer.GraphicLayer({
name: name
}).bindPopup(function(event) {
const attr = event.graphic.attr || {}
return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
})
window.map.addLayer(layer3D)
layer3D.show = false
await queryServer.query({
where: condition,
success: (result) => {
if (result.count === 0) {
console.log('未查询到相关记录！')
}
if (model !== '') {
// const points = []
result.geojson.features.forEach(item => {
// points.push({
// position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
// style: {
// scale: scale
// },
// attr: item.properties
// })
const primitive = new mars3d.graphic.ModelPrimitive({
allowDrillPick: true,
// attr: attr,
position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
style: {
scale,
url: model
}
})
layer3D.addGraphic(primitive)
})
// const modelCombine = new mars3d.graphic.ModelCombine({
// url: model,
// instances: points
// })
//
// layer3D.addGraphic(modelCombine)
}
},
error: (error, msg) => {
console.log('服务访问错误,' + error)
}
})
return layer3D
}
export async function createPolylineVolumeC(index, color, name, radius, height='', where='1<>1', minimumLevel) {
const queryServer = new mars3d.query.QueryArcServer({
url: Vue.prototype.baseConfig.arcgisUrl + index,
popup: 'all',
pageSize: 8000
})
const layer3D = new mars3d.layer.GraphicLayer({
name: name
}).bindPopup(function(event) {
const attr = event.graphic.attr || {}
return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
})
window.map.addLayer(layer3D)
// layer3D.show = false
await queryServer.query({
where,
success: (result) => {
if (result.count === 0) {
console.log('未查询到相关记录！')
}
const points = []
result.geojson.features.forEach(item => {
item.geometry.coordinates[0].push(-1.5)
item.geometry.coordinates[1].push(-1.5)
points.push({
position: [item.geometry.coordinates[0], item.geometry.coordinates[1]],
attr: item.properties
})
})
console.log(points)
const modelCombine = new mars3d.graphic.PolylineVolumeCombine({
instances: points,
symbol: {
type: 'polylineVolumeC',
styleOptions: {
color: color,
shape: 'pipeline',
radius: radius,
setHeight: -1.5,
},
callback: function(attr, styleOpt) {
return { setHeight: -1.5, height: -1.5 }
}
},
})
layer3D.addGraphic(modelCombine)
},
error: (error, msg) => {
console.log('服务访问错误,' + error)
}
})
return layer3D
}
