-
+
+
{{ node.label }}
+ @click="() => drawNode(data)">
绘制
- 已绘制
+
@@ -45,6 +45,7 @@ import MapComponent from './map.component.vue';
import screenfull from "screenfull"
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import * as turf from '@turf/turf'
@Component({
components:{
MapComponent,
@@ -64,14 +65,28 @@ export default class DrawComponent extends Vue {
})
public params!:any;
+ public fromList = false;
+
@Watch("params",{immediate:true,deep:true})
onChanges(newVal,odlVal){
console.log(this.draw)
this.updateParams = JSON.parse(JSON.stringify(newVal))
- this.positions = JSON.parse(newVal.geoJson);
- this.positions.forEach(feature=>{
- this.draw.add(feature)
- })
+ if(newVal.geoJson){
+ this.positions = JSON.parse(newVal.geoJson);
+ this.positions.forEach(feature=>{
+ this.draw.add(feature)
+ })
+ const center = turf.centerOfMass(turf.featureCollection(this.positions));
+ this.map.flyTo({center:center.geometry.coordinates,zoom:17})
+ }
+ }
+
+ @Watch("viewModel",{immediate:true,deep:true})
+ onModelChanges(newVal){
+ if(newVal==="list"){
+ this.fromList = true;
+ }
+ this.buildUpdate()
}
public modelMap = {
@@ -80,6 +95,17 @@ export default class DrawComponent extends Vue {
unit:"单元绘制"
}
+ public listForm = [{
+ name:"关键词",
+ key:"keyword",
+ width:"100%",
+ type:"text",
+ placeholder:"请输入名称关键词",
+ }];
+ public listParams = {
+ keyword:""
+ }
+
public map:any;
public center = [-91.874, 42.76];
@@ -152,6 +178,61 @@ export default class DrawComponent extends Vue {
}
}
+ public getAllFeatures(datas,result?){
+ if(!result){
+ result = []
+ }
+ datas.forEach((item)=>{
+ result.push(...JSON.parse(item.geoJson));
+ if(item.children){
+ result = this.getAllFeatures(item.children,result)
+ }
+ });
+ return result
+ }
+
+ public addAllPolygon(){
+ const features = this.getAllFeatures(this.treeData);
+ const featureCollection = turf.featureCollection(features);
+ const center = turf.centerOfMass(featureCollection);
+ this.map.flyTo({center:center.geometry.coordinates,zoom:12})
+ if(!this.map.getSource('allDataSource')){
+ this.map.addSource("allDataSource", {
+ type: "geojson",
+ data: featureCollection,
+ });
+ this.map.addLayer({
+ id:"allDataLayer",
+ source:"allDataSource",
+ type:"fill-extrusion",
+ paint:{
+ "fill-extrusion-color":"#38fcf9",
+ "fill-extrusion-base":["get","bottomHeight"],
+ "fill-extrusion-height":["get","topHeight"],
+ "fill-extrusion-opacity":0.6
+ }
+ });
+ this.map.addLayer({
+ "id": "textLayer",
+ "type": "symbol",
+ "source": "polygonSource",
+ "layout": {
+ "text-field": ["get", "text"],
+ "text-size": 24,
+ "text-allow-overlap": true
+ },
+ "paint": {
+ "text-color": "#FFF",
+ "text-halo-color": "#000",
+ "text-halo-width": 5
+ }
+ })
+ }else{
+ this.map.getSource("allDataSource").setData(featureCollection)
+ }
+
+ }
+
public drawCallback(e){
if(e.type ==="draw.create"){
this.positions = this.positions.concat(e.features)
@@ -181,10 +262,19 @@ export default class DrawComponent extends Vue {
}
public handleNodeClick(node){
- console.log(node)
this.positions = JSON.parse(node.geoJson);
}
+ public drawNode(data){
+ if(data.area_id){
+ this.viewModel = "unit"
+ }else{
+ this.viewModel = "area"
+ }
+ }
+
+
+
public callback(action){
if(action.value==="draw"){
if(!this.map){
@@ -209,20 +299,30 @@ export default class DrawComponent extends Vue {
this.positions.forEach(feature=>{
feature.properties = this.updateParams
})
- this.updateParams.geoJson = JSON.stringify(this.positions)
+ this.updateParams.geoJson = JSON.stringify(this.positions);
+ if(this.fromList){
+ this.viewModel = "list"
+ }else{
+ this.visible = false;
+ }
}else {
- this.removeMap()
- this.visible = false;
+ if(this.fromList){
+ this.viewModel = "list";
+ this.draw.deleteAll()
+ }else{
+ this.visible = false;
+ }
this.updateParams = {} as any;
}
}
- mounted(){
+
+ public buildUpdate(){
this.options = [{
name:"区域名称",
width:"100%",
- hide:this.viewModel !== "area",
+ hide:this.viewModel === "unit",
key:"name",
disable:true,
type:"text",
@@ -230,29 +330,20 @@ export default class DrawComponent extends Vue {
},{
name:"单元名称",
key:"unitName",
- hide:this.viewModel !== "unit",
+ hide:this.viewModel === "area",
width:"100%",
disable:true,
type:"text",
placeholder:"请输入单元名称",
- },{
- name:"关键词",
- key:"keyword",
- hide:this.viewModel !== "list",
- width:"100%",
- type:"text",
- placeholder:"请输入名称关键词",
},{
name:"顶部高度",
key:"topHeight",
- hide:this.viewModel === "list",
width:"100%",
type:"number",
placeholder:"",
},{
name:"底部高度",
key:"bottomHeight",
- hide:this.viewModel === "list",
width:"100%",
type:"number",
placeholder:"",
@@ -261,23 +352,23 @@ export default class DrawComponent extends Vue {
this.actions = [{
name:"绘制",
value:"draw",
- hide:this.viewModel === "list",
icon:"el-icon-edit",
type:"primary"
},{
name:"保存",
value:"save",
- hide:this.viewModel === "list",
icon:"el-icon-s-order",
type:"primary"
},{
name:"取消",
- hide:this.viewModel === "list",
icon:"el-icon-tickets",
value:"cancel"
}] as any;
}
+ mounted(){
+ }
+
public removeMap(){
this.map.off('draw.create', this.drawCallback);
this.map.off('draw.delete', this.drawCallback);
diff --git a/vue.config.js b/vue.config.js
index 4b6efc5..b5953b5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -65,9 +65,9 @@ module.exports = defineConfig({
.end()
},
devServer: {
- // client: {
- // overlay: false,
- // },
+ client: {
+ overlay: false,
+ },
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_GATEWAY_URL]: {