| | |
| | | </template> |
| | | |
| | | <script> |
| | | import NCregion from "@/assets/region" |
| | | |
| | | var farmRegionLayer = null |
| | | var plotRegionLayer = null |
| | | var farmLogoLayer = null |
| | | var regionPolyLineLayer = null |
| | | var addLayers = [] |
| | | var addPlotLayers = [] |
| | | |
| | |
| | | watch: { |
| | | 'polyline' (newObj, oldObj) { |
| | | if (newObj && oldObj) { |
| | | plotRegionLayer.removeOverlay(oldObj) |
| | | plotRegionLayer.removeOverlay(oldObj) |
| | | } |
| | | } |
| | | }, |
| | |
| | | |
| | | farmLogoLayer = new global.DC.HtmlLayer('farmLogoLayer') |
| | | global.viewer.addLayer(farmLogoLayer) |
| | | // 南城县边界数据 |
| | | regionPolyLineLayer = new global.DC.VectorLayer('regionPolyLineLayer') |
| | | global.viewer.addLayer(regionPolyLineLayer) |
| | | |
| | | if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理 |
| | | global.viewer.setOptions({ |
| | |
| | | } |
| | | |
| | | global.DC.ready(initViewer) |
| | | this.addRegionPolyLine(NCregion) |
| | | }, |
| | | methods: { |
| | | /** |
| | | * 添加南城县边界的数据 |
| | | * @param {string} url arcgis服务地址 |
| | | */ |
| | | addRegionPolyLine (regionJSON) { |
| | | let position = '' |
| | | |
| | | regionJSON.features[0].geometry.rings[0].forEach(item => { |
| | | position += `${item[0]}, ${item[1]};` |
| | | }) |
| | | |
| | | // console.log(position, 565656) |
| | | |
| | | const polyline = new global.DC.Polyline(position) |
| | | polyline.setStyle({ |
| | | width: 4, |
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 244, 157, 21, |
| | | 200 |
| | | ), |
| | | clampToGround: true |
| | | }) |
| | | regionPolyLineLayer.addOverlay(polyline) |
| | | }, |
| | | addPolygon (positions, item) { |
| | | const that = this |
| | | |
| | |
| | | addPlotPolygon (positions, item) { |
| | | const that = this |
| | | const center = this.getCenter(positions) |
| | | if(item.strainUrl !=""){ |
| | | if (item.strainUrl != "") { |
| | | const urls = item.strainUrl.split(',') |
| | | let imageStr = `<div class="farm-map-icon">`; |
| | | let imageStr = `<div class="farm-map-icon">` |
| | | urls.forEach(url => { |
| | | imageStr += `<img src="${url}" alt=""width="100px" height="100px" text-align="center" class="strainImg">` |
| | | imageStr += `<img src="${url}" alt=""width="100px" height="100px" text-align="center" class="strainImg">` |
| | | }) |
| | | imageStr += `</div>` |
| | | const divIcon = new global.DC.DivIcon( |
| | | new global.DC.Position(center[0], center[1], 0),imageStr |
| | | new global.DC.Position(center[0], center[1], 0), imageStr |
| | | ) |
| | | |
| | | divIcon.attrParams = item |
| | |
| | | that.drawLandPolyLine(positions) |
| | | }) |
| | | |
| | | console.log(item, 123) |
| | | |
| | | plotRegionLayer.addOverlay(polygon) |
| | | addPlotLayers.push({ center, name: item.landName, id: item.id }) |
| | |
| | | * @param positions |
| | | */ |
| | | drawLandPolyLine (positions) { |
| | | // 画线 |
| | | this.polyline = new global.DC.Polyline(positions) |
| | | this.polyline.setStyle({ |
| | | width: 4, |
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 200, 255, 255, |
| | | 200 |
| | | ), |
| | | clampToGround: true |
| | | }) |
| | | plotRegionLayer.addOverlay(this.polyline) |
| | | // 画线 |
| | | this.polyline = new global.DC.Polyline(positions) |
| | | this.polyline.setStyle({ |
| | | width: 4, |
| | | material: global.DC.Namespace.Cesium.Color.fromBytes( |
| | | 200, 255, 255, |
| | | 200 |
| | | ), |
| | | clampToGround: true |
| | | }) |
| | | plotRegionLayer.addOverlay(this.polyline) |
| | | }, |
| | | /** |
| | | * 将数据库保存值转换成Map使用坐标 |
| | |
| | | const arr = landRange.split(',') |
| | | var brr = [] |
| | | arr.forEach(it => { |
| | | brr.push(it.split(' ')) |
| | | brr.push(it.split(' ')) |
| | | }) |
| | | |
| | | return brr |
| | |
| | | setPlotCenter (landObj) { |
| | | if (!landObj.landRange) { |
| | | this.$message({ |
| | | message: '当前地块暂未绘制', |
| | | type: 'warning' |
| | | message: '当前地块暂未绘制', |
| | | type: 'warning' |
| | | }) |
| | | return |
| | | } |
| | |
| | | z-index: 99; |
| | | overflow: hidden; |
| | | } |
| | | .div-icon{ |
| | | background-color: transparent !important; |
| | | .div-icon { |
| | | background-color: transparent !important; |
| | | } |
| | | .strainImg{ |
| | | width: 80px; |
| | | height: 80px; |
| | | border-radius:50%; |
| | | .strainImg { |
| | | width: 80px; |
| | | height: 80px; |
| | | border-radius: 50%; |
| | | } |
| | | </style> |