|
|
@@ -1,3 +1,12 @@
|
|
|
+<!--
|
|
|
+ * @Description:
|
|
|
+ * @Author: wangcc
|
|
|
+ * @Date: 2022-06-10 11:51:36
|
|
|
+ * @LastEditors: wangcc
|
|
|
+ * @LastEditTime: 2022-06-14 18:02:29
|
|
|
+ * @FilePath: \castgroup_bigscreen\src\components\map.vue
|
|
|
+ * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved.
|
|
|
+-->
|
|
|
<!--
|
|
|
* @LastEditors: gcz
|
|
|
-->
|
|
|
@@ -6,84 +15,88 @@
|
|
|
<div id="container"></div>
|
|
|
<div id="mask"></div>
|
|
|
<div class="yun-wrap">
|
|
|
- <img class="yun yun1" src="../assets/img/云1.png" alt="" />
|
|
|
+ <img class="yun yun1" src="../assets/img/云1.png" alt />
|
|
|
</div>
|
|
|
<div class="yun-wrap">
|
|
|
- <img class="yun yun2" src="../assets/img/云2.png" alt="" />
|
|
|
+ <img class="yun yun2" src="../assets/img/云2.png" alt />
|
|
|
</div>
|
|
|
<div class="yun-wrap">
|
|
|
- <img class="yun yun3" src="../assets/img/云3.png" alt="" />
|
|
|
+ <img class="yun yun3" src="../assets/img/云3.png" alt />
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
-import {mapMutations, mapGetters} from 'vuex';
|
|
|
+import { mapMutations, mapGetters } from 'vuex';
|
|
|
export default {
|
|
|
- name: "",
|
|
|
+ name: '',
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- AMap:null,
|
|
|
- map:null,
|
|
|
- lngLat:[106.628201,26.646694],
|
|
|
- zoom:9,
|
|
|
- adcode:'520000',
|
|
|
- mapLevel:'province',
|
|
|
- province:'',
|
|
|
- cityList:[],//市
|
|
|
- districtList:[],//区县
|
|
|
- streetList:[],//街道,乡
|
|
|
+ AMap: null,
|
|
|
+ map: null,
|
|
|
+ lngLat: [106.628201, 26.646694],
|
|
|
+ zoom: 9,
|
|
|
+ adcode: '520000',
|
|
|
+ mapLevel: 'province',
|
|
|
+ province: '',
|
|
|
+ cityList: [], //市
|
|
|
+ districtList: [], //区县
|
|
|
+ streetList: [] //街道,乡
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
vuexSelectCity: {
|
|
|
- handler: function() {
|
|
|
- // console.log('vuexSelectCity',this.vuexSelectCity);
|
|
|
- // console.log('vuexCityList',this.vuexCityList);
|
|
|
- // this.vuexCityList.forEach(element => {
|
|
|
- // if(this.vuexSelectCity==element.value){
|
|
|
- // this.mapLevel= element.level
|
|
|
- // }
|
|
|
- // });
|
|
|
- this.mapLevel= 'city';
|
|
|
- this.adcode = this.vuexSelectCity;
|
|
|
- this.getMap(this.AMap);
|
|
|
- },
|
|
|
- deep: true
|
|
|
+ handler: function () {
|
|
|
+ // console.log('vuexSelectCity',this.vuexSelectCity);
|
|
|
+ // console.log('vuexCityList',this.vuexCityList);
|
|
|
+ // this.vuexCityList.forEach(element => {
|
|
|
+ // if(this.vuexSelectCity==element.value){
|
|
|
+ // this.mapLevel= element.level
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ this.mapLevel = 'city';
|
|
|
+ this.adcode = this.vuexSelectCity;
|
|
|
+ this.getMap(this.AMap);
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
},
|
|
|
vuexSelectDistrict: {
|
|
|
- handler: function() {
|
|
|
- console.log('vuexSelectDistrict',this.vuexSelectDistrict);
|
|
|
- if(this.vuexSelectDistrict){
|
|
|
- this.mapLevel= 'district';
|
|
|
- this.adcode = this.vuexSelectDistrict;
|
|
|
- this.getMap(this.AMap);
|
|
|
- }
|
|
|
- },
|
|
|
- deep: true
|
|
|
+ handler: function () {
|
|
|
+ console.log('vuexSelectDistrict', this.vuexSelectDistrict);
|
|
|
+ if (this.vuexSelectDistrict) {
|
|
|
+ this.mapLevel = 'district';
|
|
|
+ this.adcode = this.vuexSelectDistrict;
|
|
|
+ this.getMap(this.AMap);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
},
|
|
|
vuexSelectStreet: {
|
|
|
- handler: function() {
|
|
|
- console.log('vuexSelectStreet',this.vuexSelectStreet);
|
|
|
- if(this.vuexSelectStreet){
|
|
|
- this.mapLevel= 'street';
|
|
|
- this.adcode = this.vuexSelectStreet;
|
|
|
- this.getMap(this.AMap);
|
|
|
- }
|
|
|
- },
|
|
|
- deep: true
|
|
|
- },
|
|
|
+ handler: function () {
|
|
|
+ console.log('vuexSelectStreet', this.vuexSelectStreet);
|
|
|
+ if (this.vuexSelectStreet) {
|
|
|
+ this.mapLevel = 'street';
|
|
|
+ this.adcode = this.vuexSelectStreet;
|
|
|
+ this.getMap(this.AMap);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
- // 引入getters中的计算属性，需要在 computed 中引入
|
|
|
- ...mapGetters(['vuexCityList','vuexDistrictList','vuexStreetList','vuexSelectCity','vuexSelectDistrict','vuexSelectStreet'])
|
|
|
- },
|
|
|
- created() {
|
|
|
-
|
|
|
+ // 引入getters中的计算属性，需要在 computed 中引入
|
|
|
+ ...mapGetters([
|
|
|
+ 'vuexCityList',
|
|
|
+ 'vuexDistrictList',
|
|
|
+ 'vuexStreetList',
|
|
|
+ 'vuexSelectCity',
|
|
|
+ 'vuexSelectDistrict',
|
|
|
+ 'vuexSelectStreet'
|
|
|
+ ])
|
|
|
},
|
|
|
+ created() {},
|
|
|
mounted() {
|
|
|
this.initMap();
|
|
|
// setTimeout(() => {
|
|
|
@@ -91,34 +104,45 @@ export default {
|
|
|
// }, 1000);
|
|
|
},
|
|
|
methods: {
|
|
|
- ...mapMutations(['changeCityList','changeDistrictList','changeStreetList']),
|
|
|
+ ...mapMutations([
|
|
|
+ 'changeCityList',
|
|
|
+ 'changeDistrictList',
|
|
|
+ 'changeStreetList'
|
|
|
+ ]),
|
|
|
initMap() {
|
|
|
window._AMapSecurityConfig = {
|
|
|
- securityJsCode: '4a6a8d8ea053d9aa8f4677ee1179fe57', // 密钥
|
|
|
+ securityJsCode: '4a6a8d8ea053d9aa8f4677ee1179fe57' // 密钥
|
|
|
};
|
|
|
AMapLoader.load({
|
|
|
- key:"58f9d9f14f2700689ddbc618495693b7", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
- version:"1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
- // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
- }).then((AMap)=>{
|
|
|
- this.AMap= AMap;
|
|
|
- this.map = new AMap.Map("container",{ //设置地图容器id
|
|
|
- viewMode:"3D", //是否为3D地图模式
|
|
|
- zoom:this.zoom, //初始化地图级别
|
|
|
- center:this.lngLat, //初始化地图中心点位置
|
|
|
- layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
|
|
|
- // mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536'
|
|
|
- });
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.getMap(AMap);
|
|
|
- })
|
|
|
- // this.map.on('complete', () => {
|
|
|
- // console.log('map complete');
|
|
|
- // this.getMap(AMap);
|
|
|
- // })
|
|
|
- }).catch(e=>{
|
|
|
- console.log(e);
|
|
|
+ key: '58f9d9f14f2700689ddbc618495693b7', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ version: '1.4.15' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
+ })
|
|
|
+ .then((AMap) => {
|
|
|
+ this.AMap = AMap;
|
|
|
+ this.map = new AMap.Map('container', {
|
|
|
+ //设置地图容器id
|
|
|
+ viewMode: '3D', //是否为3D地图模式
|
|
|
+ pitch: 30,
|
|
|
+ zoom: this.zoom, //初始化地图级别
|
|
|
+ center: this.lngLat, //初始化地图中心点位置
|
|
|
+ layers: [
|
|
|
+ new AMap.TileLayer.Satellite(),
|
|
|
+ new AMap.TileLayer.RoadNet()
|
|
|
+ ]
|
|
|
+ // mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536'
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getMap(AMap);
|
|
|
+ });
|
|
|
+ // this.map.on('complete', () => {
|
|
|
+ // console.log('map complete');
|
|
|
+ // this.getMap(AMap);
|
|
|
+ // })
|
|
|
})
|
|
|
+ .catch((e) => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
},
|
|
|
getMap(AMap) {
|
|
|
let that = this;
|
|
|
@@ -133,33 +157,70 @@ export default {
|
|
|
level: that.mapLevel,
|
|
|
// 显示下级行政区级数，1表示返回下一级行政区
|
|
|
subdistrict: 1
|
|
|
- })
|
|
|
+ });
|
|
|
|
|
|
- district.search(that.adcode, function(status, result) {
|
|
|
- console.log('result',result);
|
|
|
+ district.search(that.adcode, function (status, result) {
|
|
|
+ that.map.clearMap();
|
|
|
+ var outer = [
|
|
|
+ new AMap.LngLat(-360, 90, true),
|
|
|
+ new AMap.LngLat(-360, -90, true),
|
|
|
+ new AMap.LngLat(360, -90, true),
|
|
|
+ new AMap.LngLat(360, 90, true)
|
|
|
+ ];
|
|
|
+ // console.log(result);
|
|
|
+ var holes = result.districtList[0].boundaries;
|
|
|
+ // that.lngLat = [
|
|
|
+ // result.districtList[0].center.lng,
|
|
|
+ // result.districtList[0].center.lat
|
|
|
+ // ];
|
|
|
+ var pathArray = [outer];
|
|
|
+ pathArray.push.apply(pathArray, holes);
|
|
|
+ var polygon = new AMap.Polygon({
|
|
|
+ map: that.map,
|
|
|
+ path: pathArray,
|
|
|
+ strokeColor: '#00eeff',
|
|
|
+ strokeWeight: 1,
|
|
|
+ fillColor: '#1c212a', // 遮罩背景色黑色
|
|
|
+ fillOpacity: 0.8
|
|
|
+ });
|
|
|
+ polygon.setPath(pathArray);
|
|
|
+ that.map.add(polygon);
|
|
|
+ console.log('result', result);
|
|
|
let districtList = result.districtList[0].districtList;
|
|
|
switch (that.mapLevel) {
|
|
|
case 'province':
|
|
|
- console.log('province districtList',districtList);
|
|
|
+ console.log('province districtList', districtList);
|
|
|
let cityList = [];
|
|
|
- districtList.forEach(element => {
|
|
|
- cityList.push({label:element.name,value:element.adcode,level:element.level})
|
|
|
+ districtList.forEach((element) => {
|
|
|
+ cityList.push({
|
|
|
+ label: element.name,
|
|
|
+ value: element.adcode,
|
|
|
+ level: element.level
|
|
|
+ });
|
|
|
});
|
|
|
that.changeCityList(cityList);
|
|
|
break;
|
|
|
case 'city':
|
|
|
- console.log('city districtList',districtList);
|
|
|
+ console.log('city districtList', districtList);
|
|
|
let districtLists = [];
|
|
|
- districtList.forEach(element => {
|
|
|
- districtLists.push({label:element.name,value:element.adcode,level:element.level})
|
|
|
+ districtList.forEach((element) => {
|
|
|
+ districtLists.push({
|
|
|
+ label: element.name,
|
|
|
+ value: element.adcode,
|
|
|
+ level: element.level
|
|
|
+ });
|
|
|
});
|
|
|
that.changeDistrictList(districtLists);
|
|
|
break;
|
|
|
case 'street':
|
|
|
- console.log('street districtList',districtList);
|
|
|
+ console.log('street districtList', districtList);
|
|
|
let streetLists = [];
|
|
|
- districtList.forEach(element => {
|
|
|
- streetLists.push({label:element.name,value:element.adcode,level:element.level})
|
|
|
+ districtList.forEach((element) => {
|
|
|
+ streetLists.push({
|
|
|
+ label: element.name,
|
|
|
+ value: element.adcode,
|
|
|
+ level: element.level
|
|
|
+ });
|
|
|
});
|
|
|
that.changeStreetList(districtLists);
|
|
|
break;
|
|
|
@@ -168,77 +229,75 @@ export default {
|
|
|
}
|
|
|
|
|
|
// console.log('result.districtList',result.districtList);
|
|
|
- if(!result.districtList){
|
|
|
- return
|
|
|
+ if (!result.districtList) {
|
|
|
+ return;
|
|
|
}
|
|
|
+
|
|
|
// console.log('map',that.map);
|
|
|
- // 获取边界信息
|
|
|
- var bounds = result.districtList[0].boundaries
|
|
|
- var polygons = []
|
|
|
- if (bounds) {
|
|
|
- that.map.clearMap();
|
|
|
- for (var i = 0, l = bounds.length; i < l; i++) {
|
|
|
- //生成行政区划polygon
|
|
|
- var polygon = new AMap.Polygon({
|
|
|
- map: that.map,
|
|
|
- strokeWeight: 1,
|
|
|
- path: bounds[i],
|
|
|
- fillOpacity: 0.7,
|
|
|
- fillColor: '#CCF3FF',
|
|
|
- strokeColor: '#CC66CC'
|
|
|
- })
|
|
|
- // console.log('polygon',polygon);
|
|
|
- polygons.push(polygon)
|
|
|
- }
|
|
|
+ // 获取边界信息
|
|
|
+ // var bounds = result.districtList[0].boundaries;
|
|
|
+ // var polygons = [];
|
|
|
+ // if (bounds) {
|
|
|
+ // that.map.clearMap();
|
|
|
+ // // for (var i = 0, l = bounds.length; i < l; i++) {
|
|
|
+ // // //生成行政区划polygon
|
|
|
+ // // var polygon = new AMap.Polygon({
|
|
|
+ // // map: that.map,
|
|
|
+ // // strokeWeight: 1,
|
|
|
+ // // path: bounds[i],
|
|
|
+ // // fillOpacity: 0.7,
|
|
|
+ // // fillColor: '#CCF3FF',
|
|
|
+ // // strokeColor: '#CC66CC'
|
|
|
+ // // })
|
|
|
+ // // // console.log('polygon',polygon);
|
|
|
+ // // polygons.push(polygon)
|
|
|
+ // // }
|
|
|
|
|
|
- // 地图自适应
|
|
|
- that.map.setFitView()
|
|
|
- // console.log('AMap.Object3DLayer',AMap.Object3DLayer);
|
|
|
- AMap.plugin(['AMap.Object3DLayer','AMap.Object3D'], function () {
|
|
|
- // console.log('2222');
|
|
|
- //object3Dlayer可以看做一个容器,用来放多个3d对象
|
|
|
- let object3Dlayer = new AMap.Object3DLayer();
|
|
|
- //把object3Dlayer添加到map对象中
|
|
|
- that.map.add(object3Dlayer);
|
|
|
- var wall = new AMap.Object3D.Wall({
|
|
|
- //版块边界线
|
|
|
- path: bounds,
|
|
|
- //墙的高度
|
|
|
- height: 80000,
|
|
|
- //墙的颜色
|
|
|
- color: "#0dcdd1",
|
|
|
- });
|
|
|
- //wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面 默认为front
|
|
|
- wall.backOrFront = 'both';
|
|
|
- // 是否允许使用透明颜色
|
|
|
- wall.transparent = true;
|
|
|
- //将wall放到object3Dlayer中
|
|
|
- object3Dlayer.add(wall);
|
|
|
- console.log('object3Dlayer');
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
+ // // 地图自适应
|
|
|
+ // that.map.setFitView();
|
|
|
+ // // console.log('AMap.Object3DLayer',AMap.Object3DLayer);
|
|
|
+ // AMap.plugin(['AMap.Object3DLayer', 'AMap.Object3D'], function () {
|
|
|
+ // // console.log('2222');
|
|
|
+ // //object3Dlayer可以看做一个容器,用来放多个3d对象
|
|
|
+ // let object3Dlayer = new AMap.Object3DLayer();
|
|
|
+ // //把object3Dlayer添加到map对象中
|
|
|
+ // that.map.add(object3Dlayer);
|
|
|
+ // var wall = new AMap.Object3D.Wall({
|
|
|
+ // //版块边界线
|
|
|
+ // path: bounds,
|
|
|
+ // //墙的高度
|
|
|
+ // height: 80000,
|
|
|
+ // //墙的颜色
|
|
|
+ // color: '#0dcdd1'
|
|
|
+ // });
|
|
|
+ // //wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面 默认为front
|
|
|
+ // wall.backOrFront = 'both';
|
|
|
+ // // 是否允许使用透明颜色
|
|
|
+ // wall.transparent = true;
|
|
|
+ // //将wall放到object3Dlayer中
|
|
|
+ // object3Dlayer.add(wall);
|
|
|
+ // console.log('object3Dlayer');
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
-#container{
|
|
|
+#container {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
- /deep/ .tdt-pane{
|
|
|
+ /deep/ .tdt-pane {
|
|
|
z-index: auto;
|
|
|
}
|
|
|
}
|
|
|
-#mask{
|
|
|
+#mask {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
- box-shadow:inset 0px 0px 10vw 8vw rgba(38,80,179,0.54);
|
|
|
+ box-shadow: inset 0px 0px 10vw 8vw rgba(38, 80, 179, 0.54);
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
@@ -252,26 +311,29 @@ export default {
|
|
|
}
|
|
|
34% {
|
|
|
// opacity: 1;
|
|
|
- transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(34vw,0px, 0px);
|
|
|
+ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
|
|
|
+ translate3d(34vw, 0px, 0px);
|
|
|
}
|
|
|
67% {
|
|
|
- // opacity: 1;
|
|
|
- transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(67vw,0px, 0px);
|
|
|
+ // opacity: 1;
|
|
|
+ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
|
|
|
+ translate3d(67vw, 0px, 0px);
|
|
|
}
|
|
|
100% {
|
|
|
- // opacity: 0;
|
|
|
- transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(160vw,0px, 0px);
|
|
|
+ // opacity: 0;
|
|
|
+ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
|
|
|
+ translate3d(160vw, 0px, 0px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.yun-wrap{
|
|
|
+.yun-wrap {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
top: 350px;
|
|
|
width: 100vw;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
-.yun{
|
|
|
+.yun {
|
|
|
position: fixed;
|
|
|
left: -500px;
|
|
|
animation-name: imageAnimation_32630606;
|
|
|
@@ -283,12 +345,12 @@ export default {
|
|
|
filter: none;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
-.yun2{
|
|
|
+.yun2 {
|
|
|
bottom: 20px;
|
|
|
animation-duration: 90s;
|
|
|
animation-delay: 10s;
|
|
|
}
|
|
|
-.yun3{
|
|
|
+.yun3 {
|
|
|
top: 100px;
|
|
|
animation-duration: 120s;
|
|
|
animation-delay: 15s;
|
