Vue入門027- 求和案例_vuex版（mapMutations與mapActions的使用）

. mapState方法：用于幫助我們映射state中的數據為計算屬性

computed: {
//借助mapState生成計算屬性：sum、school、subject（對象寫法）
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成計算屬性：sum、school、subject（數組寫法）
...mapState(['sum','school','subject']),
},

2. mapGetters方法：用于幫助我們映射getters中的數據為計算屬性

computed: {
//借助mapGetters生成計算屬性：bigSum（對象寫法）
...mapGetters({bigSum:'bigSum'}),

//借助mapGetters生成計算屬性：bigSum（數組寫法）
...mapGetters(['bigSum'])
},

3. mapActions方法：用于幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數

methods:{
//靠mapActions生成：incrementOdd、incrementWait（對象形式）
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

//靠mapActions生成：incrementOdd、incrementWait（數組形式）
...mapActions(['jiaOdd','jiaWait'])
}

4. mapMutations方法：用于幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數

methods:{
//靠mapActions生成：increment、decrement（對象形式）
...mapMutations({increment:'JIA',decrement:'JIAN'}),

//靠mapMutations生成：JIA、JIAN（對象形式）
...mapMutations(['JIA','JIAN']),
}

備注：mapActions與mapMutations使用時，若需要傳遞參數需要：在模板中綁定事件時傳遞好參數，否則參數是事件對象。

這里是演示 mapMutations mapActions 的使用

store/index.js

//該文件用于創建Vuex中最為核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應用Vuex插件
Vue.use(Vuex)

//準備actions——用于響應組件中的動作
const actions = {
	/* jia(context,value){
		console.log('actions中的jia被調用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被調用了')
		context.commit('JIAN',value)
	}, */
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被調用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被調用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//準備mutations——用于操作數據（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被調用了')
		state.sum += value
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被調用了')
		state.sum -= value
	}
}
//準備state——用于存儲數據
const state = {
	sum:0, //當前的和
	school:'尚硅谷',
	subject:'前端'
}
//準備getters——用于將state中的數據進行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

//創建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})

Count.vue 組件

<template>
	<div>
		<h1>當前求和為：{{sum}}</h1>
		<h3>當前求和放大10倍為：{{bigSum}}</h3>
		<h3>我在{{school}}，學習{{subject}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">當前求和為奇數再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用戶選擇的數字
			}
		},
		computed:{
			//借助mapState生成計算屬性，從state中讀取數據。（對象寫法）
			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

			//借助mapState生成計算屬性，從state中讀取數據。（數組寫法）
			...mapState(['sum','school','subject']),

			/* ******************************************************************** */

			//借助mapGetters生成計算屬性，從getters中讀取數據。（對象寫法）
			// ...mapGetters({bigSum:'bigSum'})
			
			//借助mapGetters生成計算屬性，從getters中讀取數據。（數組寫法）
			...mapGetters(['bigSum'])

		},
		methods: {
			//程序員親自寫方法
			/* increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			}, */

			//借助mapMutations生成對應的方法，方法中會調用commit去聯系mutations(對象寫法)
			...mapMutations({increment:'JIA',decrement:'JIAN'}),

			//借助mapMutations生成對應的方法，方法中會調用commit去聯系mutations(數組寫法)
			// ...mapMutations(['JIA','JIAN']),

			/* ************************************************* */

			//程序員親自寫方法
			/* incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			}, */

			//借助mapActions生成對應的方法，方法中會調用dispatch去聯系actions(對象寫法)
			...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

			//借助mapActions生成對應的方法，方法中會調用dispatch去聯系actions(數組寫法)
			// ...mapActions(['jiaOdd','jiaWait'])
		},
		mounted() {
			const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
			console.log(x)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

代碼摘錄于尚硅谷Vue學習課件

者：秋天不落葉

轉發鏈接：https://mp.weixin.qq.com/s/KmDLcJ0jhB667ZouDB8tyg

言

Cesium是一個非常優秀的三維地球GIS引擎（開源且免費, 能夠加載各種符合標準的地圖圖層，瓦片圖、矢量圖等都支持。而AutoCAD是為微型計算機上應用CAD技術而開發的繪圖程序，它有很強的圖形編輯能力，非常適合繪制工程圖紙，繪圖的精確性和繪圖方法的豐富性使得它在機械、電子、建筑、航空航天等領域有著廣泛的應用,常見的一些工程圖紙基本上都是AutoCAD繪制的DWG格式的圖紙；在實際中經常會遇到需要將CAD的圖紙疊加到cesium上面，與地表地形疊加顯示查看。那如何實現在Cesium中實現與CAD的DWG圖疊加顯示分析呢？

技術分析

業內一般的做法步驟為:

(1) 在AutoCAD中把DWG圖導出為DXF明碼格式文件
(2) 利用第三方工具如GDAL，把dxf轉為shp等GIS數據格式
(3) 利用開源的gis服務，如geoserver或mapserver把shp文件發布成gis服務
(4) 在cesium中加載gis服務的瓦片圖層

上面的方案的優點很明顯，基本上利用開源的方案能把流程跑通。但在實際項目中缺點也很明顯，主要是在步驟 (1)(2), 因為dwg是私有格式，通過dwg轉出成dxf再轉化成shp文件時，會丟失圖中的很多數據，CAD數據類型較為豐富，支持點、塊符號、線、面、多段線、橢圓、塊、文字等多種數據類型，而轉換到GIS中，只轉換為點、線、面、注記等類型，這使得CAD圖形數據不能很好的滿足GIS的要求，如：CAD中的Text數據類型，直接轉換后只轉換為GIS中的Point。通過這種轉換去繪制，會導致和原始CAD圖形繪制不太一樣，同時CAD里面有線型、字體也會導致繪制上的差異性。

唯杰地圖vjmap完全兼容AutoCAD格式的DWG文件，無需通過轉換可直接發布成gis的WMS格式，可有效解決上面問題。實現步驟為:

(1) 打開DWG圖形，利用唯杰地圖發布為WMS圖層
(2) 在cesium中加載wms瓦片圖層

實現

先上效果圖，（紅色的線為cad圖層)

具體步驟:

確定CAD圖的坐標系
在打開的CAD圖中，隨便找了圖中的一個點坐標，坐標為”614802.89177, 3257472.36997”
那怎么確定這個坐標是哪個坐標系呢？如果已經知道坐標能不能倒推坐標系呢？
可以，但是得分情況。這里我們只討論高斯克呂格投影。
假設已經知道數據的投影是高斯克呂格，怎樣判定是6°帶還是3°帶？怎樣判定中央經線是多少呢？
如果坐標范圍是6位，我們可以判定坐標系不帶帶號的。如果Y值范圍在333000m~667000m，可能是3°分帶法；如果Y值范圍在166 000m~834000m，一定是6°分帶法。如果取值范圍重合的部分有可能3°分帶法也可能在6°分帶法。
如果坐標范圍是8位，我們可以判定坐標系是以帶號命名，并且根據帶號可以知道是3°帶還是6°帶。我們國家的經度范圍大致在73°33′E~105°05′E，所以如果是以帶號命名，帶號在13~23帶之間的，說明是6°分帶法；帶號在25~45帶之間的，說明是3°分帶法。
在這個圖中，坐標為”614802“為6位，大概率能確定為省去了帶系的3°分帶坐標。并且根據圖中圖框中坐標系寫的為2000坐標系，同時地點為重慶附近。而重慶的經度差不多是以106開頭。我們去epsg官網查詢得知，該坐標系應該是"EPSG:4544".

打開CAD圖
如果在Web網頁端展示CAD圖形(唯杰地圖云端圖紙管理平臺 https://vjmap.com/app/cloud),這個在前面的博文中已講過，這里不再重復，有需要的朋友可下載工程源代碼研究下。
在cesium增加cad圖層

let imageryProvider= new Cesium.WebMapTileServiceImageryProvider({
  url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=3346bb6ad29b5013c5952cf1117b80e9",
  layer: "img",
  style: "default",
  tileMatrixSetID: "w",
  format: "tiles",
  maximumLevel: 14,
});

let viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: imageryProvider,
  contextOptions: {
    webgl: {
      alpha: true
    }
  },
  selectionIndicator: false,
  animation: false, //是否顯示動畫控件
  baseLayerPicker: false, //是否顯示圖層選擇控件
  geocoder: false, //是否顯示地名查找控件
  timeline: false, //是否顯示時間線控件
  sceneModePicker: false, //是否顯示投影方式控件
  navigationHelpButton: false, //是否顯示幫助信息控件
  infoBox: false, //是否顯示點擊要素之后顯示的信息
  fullscreenButton: false,
  shouldAnimate: true //動畫播放
});

var layers = viewer.scene.imageryLayers;

layers.addImageryProvider(
  new Cesium.WebMapServiceImageryProvider({
    // 通過vjmap的wms加載cad圖
    url: `https://vjmap.com/server/api/v1/map/cmd/wms/
sys_cadcesium/v1?mapbounds=&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:4326&transparent=true&width=256&height=256&layers=se92105f73&crs=EPSG:4544&fourParameter=&token=your token`,
  })
);

上面的代碼好像簡單明了，可實際中發現，在cesium中，cad可以和天地圖影像疊加。但在放大的過程中，發現wms生成的瓦片有錯開的問題。如下圖所示:

問題分析

在cesium中，是WGS84坐標系，而CAD圖是4544坐標系。兩個不同的橢球體之間轉換，在WMS中瓦片生成是根據坐標轉換生成的瓦片數據，而由于坐標轉換是非線性的，導致生成的圖片內容不能完全對上。所以有錯開的問題。

那怎么解決呢？

最終的方案是：

先通過四參數，把CAD與墨卡托3857的轉換參數求出來
再墨卡托3857轉wgs4326
通過這樣的轉換，數據轉換是線性轉換了，就不會有錯開的問題了。
具體代碼如下:

// --Cesium中加載CAD圖(WMS圖層)--
// 地圖服務對象
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打開地圖
let mapId = "sys_cadcesium";
let res = await svc.openMap({
    mapid: mapId, // 地圖ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以幾何數據渲染方式打開
    style: vjmap.openMapDarkStyle() // div為深色背景顏色時，這里也傳深色背景樣式
})
if (res.error) {
    // 如果打開出錯
    message.error(res.error)
}
let layer = res.layer;//圖層樣式名

let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
let boundsArray = mapBounds.toPointArray();

// 得到坐標轉換后的墨卡托點
let mktPoints = await svc.cmdTransform("EPSG:4544", "EPSG:3857", boundsArray.map(a => vjmap.geoPoint(a)));
// cad上面的點坐標
let cadPoints = [...boundsArray];
// 通過坐標參數求出四參數
let fourparam = vjmap.coordTransfromGetFourParamter(
    mktPoints.map(a => vjmap.geoPoint(a)),
    cadPoints.map(a => vjmap.geoPoint(a)),
    true
);

if (typeof Cesium !== "object") {
    // 如果沒有環境
    await vjmap.addScript([{
        src: "js/Cesium/Cesium.js"
    }, {
        src: "js/Cesium/Widgets/widgets.css"
    }])
}

let imageryProvider= new Cesium.WebMapTileServiceImageryProvider({
    url: "https://t0.tianditu.gov.cn/img_w/wmts?tk=3346bb6ad29b5013c5952cf1117b80e9",
    layer: "img",
    style: "default",
    tileMatrixSetID: "w",
    format: "tiles",
    maximumLevel: 14,
});

let viewer = new Cesium.Viewer('map', {
    imageryProvider: imageryProvider,
    contextOptions: {
        webgl: {
            alpha: true
        }
    },
    selectionIndicator: false,
    animation: false, //是否顯示動畫控件
    baseLayerPicker: false, //是否顯示圖層選擇控件
    geocoder: false, //是否顯示地名查找控件
    timeline: false, //是否顯示時間線控件
    sceneModePicker: false, //是否顯示投影方式控件
    navigationHelpButton: false, //是否顯示幫助信息控件
    infoBox: false, //是否顯示點擊要素之后顯示的信息
    fullscreenButton: false,
    shouldAnimate: true //動畫播放
});


var layers = viewer.scene.imageryLayers;

// 加一個高德注記圖層
layers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
        url: "https://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    })
);


// 增加cad的wms圖層
let wmsUrl = svc.wmsTileUrl({
    mapid: mapId, // 地圖id
    layers: layer, // 圖層名稱
    bbox: '', // bbox這里不需要傳，cesium會自動加上
    srs: "EPSG:4326", // cesium地圖是wgs84
    crs: "EPSG:3857", // 先把wgs84轉3857
    fourParameter: [fourparam.dx,fourparam.dy,fourparam.scale,fourparam.rotate] // 轉成 3857后，再用四參數去轉成cad坐標
})
layers.addImageryProvider(
    new Cesium.WebMapServiceImageryProvider({
        url: wmsUrl,
    })
);


// cad圖坐標轉web wgs84坐標
const cadToWebCoordinate = point => {
    // 先用四參數轉成墨卡托3857，再墨卡托3857轉wgs84
    // 這里需要用四參數反算，因為上面的四參數是3857轉cad的，這里是反過來，要cad轉3857，所以需要反算
    let ptMkt = vjmap.coordTransfromByInvFourParamter(vjmap.geoPoint(point), fourparam);
    return vjmap.Projection.mercator2LngLat(ptMkt);// 再墨卡托3857轉經緯度
}
// 轉web wgs84坐標轉cad圖坐標
const webTocadCoordinate = point => {
    // 先wgs84轉墨卡托3857,再用四參數轉成cad
    let ptMkt = vjmap.Projection.lngLat2Mercator(vjmap.geoPoint(point));
    return vjmap.coordTransfromByFourParamter(ptMkt, fourparam);
}
// 根據cad圖的中心點，計算wgs84的中心點坐標
let cadCenter = mapBounds.center();
let webCenter = cadToWebCoordinate(cadCenter);
//設置初始位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(webCenter[0], webCenter[1], 30000)
});

// 如果需要在地圖上查詢cad的實體坐標，可通過svc.rectQueryFeature來實現，需要傳入兩個cad的點坐標范圍
// 可以通過 webTocadCoordinate 接口把wgs84的坐標轉成 cad 的坐標去查詢.

出于對數據保密的需要，我們對CAD圖進行了脫敏處理，疊加的效果如下

上面的案例代碼已開源。訪問 (https://vjmap.com/demo/#/demo/map/web/07cesiumCadWmsLayer) ，查看效果和代碼即可。

在線咨詢

上一篇：程序員私活攻略 (上)
下一篇：HTML <area> 標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商