parent
3edab50a1a
commit
eddbfcbe18
@ -1,556 +1,32 @@
|
||||
<template>
|
||||
<div class="pc-container">
|
||||
<NavigationBar></NavigationBar>
|
||||
<foldpanelLeft :title="xiaoquIntroduce.deptName + '简介'">
|
||||
<IndexModelLeft />
|
||||
</foldpanelLeft>
|
||||
<foldpanelRight>
|
||||
<IndexModelRight />
|
||||
</foldpanelRight>
|
||||
<mars-map @mapLoad="mapLoad" :options="options" ref="map">
|
||||
<template #select>
|
||||
<div class="select-search">
|
||||
<el-select
|
||||
v-model="community"
|
||||
placeholder="选择社区"
|
||||
clearable
|
||||
@change="handleChange"
|
||||
:popper-append-to-body="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in communityList"
|
||||
:key="dict.dept_id"
|
||||
:label="dict.dept_name"
|
||||
:value="dict.dept_id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
style="margin-left: 10px"
|
||||
v-model="xiaoqu"
|
||||
placeholder="选择小区"
|
||||
clearable
|
||||
v-show="xiaoquList.length > 0"
|
||||
:popper-append-to-body="false"
|
||||
@change="goXiaoqu"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in xiaoquList"
|
||||
:key="dict.xiaoqu_id"
|
||||
:label="dict.dept_name"
|
||||
:value="dict.xiaoqu_id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
</mars-map>
|
||||
</div>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MarsMap from "@/components/mars-map";
|
||||
import NavigationBar from "@/components/NavigationBar/index.vue";
|
||||
import { mapGetters } from "vuex";
|
||||
import {
|
||||
foldpanelLeft,
|
||||
IndexModelLeft,
|
||||
foldpanelRight,
|
||||
IndexModelRight,
|
||||
} from "@/views/components/index.js";
|
||||
import { getCommunitylist, getXiaoqulist } from "@/api/taicangpop/data.js";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
computed: {
|
||||
...mapGetters(["dept", "xiaoquIntroduce"]),
|
||||
},
|
||||
components: {
|
||||
MarsMap,
|
||||
NavigationBar,
|
||||
foldpanelLeft,
|
||||
IndexModelLeft,
|
||||
foldpanelRight,
|
||||
IndexModelRight,
|
||||
},
|
||||
data() {
|
||||
const basePathUrl = window.basePathUrl || "";
|
||||
return {
|
||||
options: {
|
||||
scene: {
|
||||
center: {
|
||||
lat: 31.344002,
|
||||
lng: 121.120196,
|
||||
alt: 21247.4,
|
||||
heading: 355.1,
|
||||
pitch: -53.8,
|
||||
},
|
||||
showSun: false,
|
||||
showMoon: false,
|
||||
showSkyBox: false,
|
||||
showSkyAtmosphere: false,
|
||||
fog: false,
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
backgroundImage: `url(${require("../assets/images/ui/index_bg.jpg")})`,
|
||||
orderIndependentTranslucency: false,
|
||||
contextOptions: { webgl: { antialias: mars3d.Util.isPCBroswer() } },
|
||||
globe: {
|
||||
show: false, // 不显示地球
|
||||
showGroundAtmosphere: false,
|
||||
enableLighting: false,
|
||||
},
|
||||
clock: {
|
||||
currentTime: "2023-11-01 12:00:00", // 固定光照时间
|
||||
return {};
|
||||
},
|
||||
cameraController: {
|
||||
zoomFactor: 1.5,
|
||||
minimumZoomDistance: 0.1,
|
||||
maximumZoomDistance: 200000,
|
||||
enableCollisionDetection: false, // 允许进入地下
|
||||
},
|
||||
},
|
||||
},
|
||||
community: 100,
|
||||
communityList: [],
|
||||
xiaoqu: "",
|
||||
xiaoquList: [],
|
||||
map: null,
|
||||
mapLayer: {},
|
||||
streetUrl: basePathUrl + "lib/geoJson/loujiangjiedao.json",
|
||||
shequUrl: basePathUrl + "lib/geoJson/shequ.json",
|
||||
xiaoquUrl: basePathUrl + "lib/geoJson/xiaoqu.json",
|
||||
roaduUrl: basePathUrl + "lib/geoJson/road.json",
|
||||
roaduNameUrl: basePathUrl + "lib/geoJson/road-name.json",
|
||||
riveruUrl: basePathUrl + "lib/geoJson/river.json",
|
||||
riverNameUrl: basePathUrl + "lib/geoJson/river-name.json",
|
||||
};
|
||||
computed: {
|
||||
...mapGetters(["dept"]),
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.$auth.hasRoleNet("network")) {
|
||||
this.$router.replace("/xiaoqu");
|
||||
return;
|
||||
}
|
||||
this.getCommunity();
|
||||
this.$store.dispatch("GetYjtotal");
|
||||
this.$store.dispatch("GetXiaoquInfo", this.dept.deptId);
|
||||
this.$store.dispatch("getThreeCell");
|
||||
this.$store.dispatch("GetcolorList");
|
||||
},
|
||||
methods: {
|
||||
goXiaoqu(id) {
|
||||
if (id == 260 || id == 254 || id == 257) {
|
||||
this.$modal.msgWarning("该小区功能暂未开放!");
|
||||
return;
|
||||
}
|
||||
|
||||
this.$router.push({ path: "/xiaoqu", query: { xiaoquId: id } });
|
||||
},
|
||||
|
||||
mapLoad(map) {
|
||||
let _this = this;
|
||||
this.map = map;
|
||||
|
||||
map.setSceneOptions({
|
||||
cameraController: {
|
||||
// enableZoom: false,
|
||||
// enableTranslate: true,
|
||||
// enableRotate: false,
|
||||
enableTilt: false,
|
||||
},
|
||||
});
|
||||
|
||||
map.on(mars3d.EventType.wheel, function (e) {
|
||||
_this.zoomChange();
|
||||
if (this.$auth.hasRoleOr(["admin", "leader"])) {
|
||||
this.$router.replace({
|
||||
path: "/shequ",
|
||||
});
|
||||
|
||||
this.addLayer();
|
||||
this.addstreet();
|
||||
this.addShequ();
|
||||
this.addXiaoqu();
|
||||
this.addRoad();
|
||||
this.addRiver();
|
||||
},
|
||||
zoomChange() {
|
||||
let level = this.map.level;
|
||||
this.mapLayer.shequ.eachGraphic((graphic) => {
|
||||
if (graphic.isPrivate) {
|
||||
return;
|
||||
}
|
||||
if (level >= 14) {
|
||||
// graphic.openHighlight(
|
||||
// {
|
||||
// label: {
|
||||
// opacity: 0,
|
||||
// },
|
||||
// },
|
||||
// false
|
||||
// );
|
||||
} else {
|
||||
graphic.closeHighlight();
|
||||
}
|
||||
if (this.$auth.hasRole("xiaoqu")) {
|
||||
this.$router.replace({
|
||||
path: "/xiaoqu",
|
||||
query: { xiaoquId: this.dept.deptId },
|
||||
});
|
||||
if (level >= 14) {
|
||||
this.mapLayer.xiaoqu.show = true;
|
||||
} else {
|
||||
this.mapLayer.xiaoqu.show = false;
|
||||
}
|
||||
},
|
||||
//河 - 河名
|
||||
addRiver() {
|
||||
mars3d.Util.fetchJson({ url: this.riveruUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
const graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: item.positions,
|
||||
style: {
|
||||
visibleDepth: false,
|
||||
addHeight: 10,
|
||||
width: 2,
|
||||
color: "#33816D",
|
||||
opacity: 0.8,
|
||||
},
|
||||
});
|
||||
this.mapLayer.river.addGraphic(graphic);
|
||||
});
|
||||
});
|
||||
mars3d.Util.fetchJson({ url: this.riverNameUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
const graphic = new mars3d.graphic.LabelEntity({
|
||||
name: "贴地文字",
|
||||
position: item.position,
|
||||
style: {
|
||||
addHeight: 11,
|
||||
visibleDepth: false,
|
||||
text: item.attr.TextString,
|
||||
font_size: 12,
|
||||
color: "#fff",
|
||||
outline: true,
|
||||
outlineColor: "#33816D",
|
||||
outlineOpacity: 1,
|
||||
outlineWidth: 4,
|
||||
hasPixelOffset: true,
|
||||
|
||||
// 视距的设置
|
||||
scaleByDistance: true,
|
||||
scaleByDistance_far: 20000000,
|
||||
scaleByDistance_farValue: 0.1,
|
||||
scaleByDistance_near: 1000,
|
||||
scaleByDistance_nearValue: 1,
|
||||
},
|
||||
});
|
||||
this.mapLayer.river.addGraphic(graphic);
|
||||
});
|
||||
});
|
||||
},
|
||||
//路 - 路名
|
||||
addRoad() {
|
||||
mars3d.Util.fetchJson({ url: this.roaduUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
const graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: item.positions,
|
||||
style: {
|
||||
visibleDepth: false,
|
||||
addHeight: 1,
|
||||
width: 3,
|
||||
color: "#9D6E00",
|
||||
opacity: 0.8,
|
||||
},
|
||||
});
|
||||
this.mapLayer.road.addGraphic(graphic);
|
||||
});
|
||||
});
|
||||
mars3d.Util.fetchJson({ url: this.roaduNameUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
const graphic = new mars3d.graphic.LabelEntity({
|
||||
name: "贴地文字",
|
||||
position: item.position,
|
||||
style: {
|
||||
visibleDepth: false,
|
||||
text: item.attr.name,
|
||||
font_size: 12,
|
||||
color: "#fff",
|
||||
outline: true,
|
||||
outlineColor: "#9D6E00",
|
||||
outlineOpacity: 1,
|
||||
outlineWidth: 4,
|
||||
hasPixelOffset: true,
|
||||
|
||||
// 视距的设置
|
||||
scaleByDistance: true,
|
||||
scaleByDistance_far: 20000000,
|
||||
scaleByDistance_farValue: 0.1,
|
||||
scaleByDistance_near: 1000,
|
||||
scaleByDistance_nearValue: 1,
|
||||
},
|
||||
});
|
||||
this.mapLayer.road.addGraphic(graphic);
|
||||
});
|
||||
});
|
||||
},
|
||||
//小区
|
||||
addXiaoqu() {
|
||||
mars3d.Util.fetchJson({ url: this.xiaoquUrl }).then((res) => {
|
||||
let _this = this;
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
let id = item.attr.Id;
|
||||
if (
|
||||
id == 245 ||
|
||||
id == 251 ||
|
||||
id == 248 ||
|
||||
id == 254 ||
|
||||
id == 257 ||
|
||||
id == 260
|
||||
)
|
||||
return;
|
||||
const polygonEntity = new mars3d.graphic.PolygonEntity({
|
||||
id: item.id,
|
||||
positions: item.positions,
|
||||
style: {
|
||||
addHeight: 10,
|
||||
fill: false,
|
||||
outline: true,
|
||||
fill: true,
|
||||
color: "#ffeb3b",
|
||||
opacity: 0.3,
|
||||
outlineWidth: 2,
|
||||
outlineColor: "#ffeb3b",
|
||||
label: {
|
||||
opacity: 1,
|
||||
text: item.attr.name,
|
||||
position: "center",
|
||||
font_size: 15,
|
||||
font_weight: "bold",
|
||||
color: "#ffeb3b",
|
||||
outline: true,
|
||||
outlineColor: "#111",
|
||||
outlineOpacity: 1,
|
||||
outlineWidth: 4,
|
||||
hasPixelOffset: true,
|
||||
pixelOffsetY: -2,
|
||||
// 视距的设置
|
||||
scaleByDistance: true,
|
||||
scaleByDistance_far: 20000000,
|
||||
scaleByDistance_farValue: 0.1,
|
||||
scaleByDistance_near: 1000,
|
||||
scaleByDistance_nearValue: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
this.mapLayer.xiaoqu.addGraphic(polygonEntity);
|
||||
|
||||
polygonEntity.on(mars3d.EventType.click, function (e) {
|
||||
// console.log(e.id);
|
||||
_this.goXiaoqu(e.id);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
// 社区
|
||||
addShequ() {
|
||||
mars3d.Util.fetchJson({ url: this.shequUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
const polygonEntity = new mars3d.graphic.PolygonEntity({
|
||||
id: `shequ${item.id}`,
|
||||
positions: item.positions,
|
||||
style: {
|
||||
fill: true,
|
||||
color: "#057BEB",
|
||||
outline: true,
|
||||
outlineWidth: 2,
|
||||
outlineColor: "#6ED2FB",
|
||||
label: {
|
||||
opacity: 1,
|
||||
text: item.attr.COMNAME,
|
||||
position: "center",
|
||||
font_size: 15,
|
||||
font_weight: "bold",
|
||||
color: "#fff",
|
||||
outline: true,
|
||||
outlineColor: "#111",
|
||||
outlineOpacity: 0.5,
|
||||
outlineWidth: 3,
|
||||
hasPixelOffset: true,
|
||||
pixelOffsetY: -2,
|
||||
visibleDepth: false,
|
||||
// 视距的设置
|
||||
scaleByDistance: true,
|
||||
scaleByDistance_far: 20000000,
|
||||
scaleByDistance_farValue: 0.1,
|
||||
scaleByDistance_near: 1000,
|
||||
scaleByDistance_nearValue: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
this.mapLayer.shequ.addGraphic(polygonEntity);
|
||||
});
|
||||
});
|
||||
},
|
||||
//创建图层到map
|
||||
addLayer() {
|
||||
this.mapLayer.river = new mars3d.layer.GraphicLayer();
|
||||
this.map.addLayer(this.mapLayer.river);
|
||||
|
||||
this.mapLayer.road = new mars3d.layer.GraphicLayer();
|
||||
this.map.addLayer(this.mapLayer.road);
|
||||
|
||||
this.mapLayer.xiaoqu = new mars3d.layer.GraphicLayer({ show: false });
|
||||
this.map.addLayer(this.mapLayer.xiaoqu);
|
||||
|
||||
this.mapLayer.shequ = new mars3d.layer.GraphicLayer();
|
||||
this.map.addLayer(this.mapLayer.shequ);
|
||||
|
||||
this.mapLayer.street = new mars3d.layer.GraphicLayer();
|
||||
this.map.addLayer(this.mapLayer.street);
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载社区底图面
|
||||
*/
|
||||
addstreet() {
|
||||
mars3d.Util.fetchJson({ url: this.streetUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
|
||||
arr.map((item, index) => {
|
||||
const wall = new mars3d.graphic.WallPrimitive({
|
||||
positions: item.positions[0],
|
||||
style: {
|
||||
setHeight: -2000,
|
||||
diffHeight: 2000, // 墙高
|
||||
width: 10,
|
||||
materialType: mars3d.MaterialType.Image2,
|
||||
materialOptions: {
|
||||
image: require("../assets/images/ui/fence-top.png"),
|
||||
color: "#4CE2F5",
|
||||
},
|
||||
},
|
||||
});
|
||||
this.mapLayer.street.addGraphic(wall);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
handleChange(e) {
|
||||
if (!e) return;
|
||||
let _this = this;
|
||||
this.$store.dispatch("GetXiaoquInfo", e);
|
||||
this.xiaoqu = "";
|
||||
this.xiaoquList = this.communityList.filter(
|
||||
(item) => item.dept_id == e
|
||||
)[0].children;
|
||||
|
||||
if (e == 100) {
|
||||
e = undefined;
|
||||
this.map.flyHome({
|
||||
duration: 1,
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.zoomChange();
|
||||
}, 1200);
|
||||
} else {
|
||||
let shequItem = this.mapLayer.shequ.getGraphicByAttr(`shequ${e}`);
|
||||
this.map.flyToPoint(
|
||||
new mars3d.LngLatPoint(
|
||||
shequItem.centerPoint._lng,
|
||||
shequItem.centerPoint._lat
|
||||
),
|
||||
{
|
||||
radius: 2776.4,
|
||||
duration: 1,
|
||||
complete: function () {
|
||||
if (_this.xiaoquList.length == 0) {
|
||||
shequItem.openHighlight({
|
||||
outlineColor: "#ffeb3b",
|
||||
outlineWidth: 5,
|
||||
});
|
||||
} else {
|
||||
_this.zoomChange();
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
this.$store.dispatch("GetYjtotal", {
|
||||
shequId: e,
|
||||
});
|
||||
this.$store.commit("SET_QUERY_PARAMS", { shequId: e });
|
||||
this.$store.dispatch("getThreeCell", {
|
||||
shequId: e,
|
||||
});
|
||||
this.$store.dispatch("GetcolorList", {
|
||||
shequId: e,
|
||||
});
|
||||
},
|
||||
|
||||
getCommunity() {
|
||||
let community = new Promise((resolve, reject) => {
|
||||
getCommunitylist().then((res) => {
|
||||
res.data["社区list集合"].unshift({
|
||||
dept_name: "全部社区",
|
||||
dept_id: this.dept.deptId,
|
||||
});
|
||||
resolve(res.data["社区list集合"]);
|
||||
});
|
||||
});
|
||||
|
||||
let xiaoqu = new Promise((resolve, reject) => {
|
||||
getXiaoqulist().then((res) => {
|
||||
resolve(res.data["小区list集合"]);
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all([community, xiaoqu]).then((res) => {
|
||||
this.communityList = res[0].map((item) => {
|
||||
item.children = [];
|
||||
res[1].forEach((it) => {
|
||||
if (item.dept_id == it.shequ_id) item.children.push(it);
|
||||
});
|
||||
return item;
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pc-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
// background: url("~@/assets/images/ui/index_bg.jpg");
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::v-deep .select-search {
|
||||
position: absolute;
|
||||
left: 410px;
|
||||
top: 110px;
|
||||
|
||||
.el-select {
|
||||
width: 160px;
|
||||
.el-input {
|
||||
background: transparent;
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
color: #fff;
|
||||
background: url("~@/assets/images/ui/img_btn_search.png");
|
||||
background-size: 100% 100%;
|
||||
border: 0px !important;
|
||||
}
|
||||
.el-input__inner::placeholder,
|
||||
.el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@ -0,0 +1,552 @@
|
||||
<template>
|
||||
<div class="pc-container">
|
||||
<NavigationBar></NavigationBar>
|
||||
<foldpanelLeft :title="xiaoquIntroduce.deptName + '简介'">
|
||||
<IndexModelLeft />
|
||||
</foldpanelLeft>
|
||||
<foldpanelRight>
|
||||
<IndexModelRight />
|
||||
</foldpanelRight>
|
||||
<mars-map @mapLoad="mapLoad" :options="options" ref="map">
|
||||
<template #select>
|
||||
<div class="select-search">
|
||||
<el-select
|
||||
v-model="community"
|
||||
placeholder="选择社区"
|
||||
clearable
|
||||
@change="handleChange"
|
||||
:popper-append-to-body="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in communityList"
|
||||
:key="dict.dept_id"
|
||||
:label="dict.dept_name"
|
||||
:value="dict.dept_id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
style="margin-left: 10px"
|
||||
v-model="xiaoqu"
|
||||
placeholder="选择小区"
|
||||
clearable
|
||||
v-show="xiaoquList.length > 0"
|
||||
:popper-append-to-body="false"
|
||||
@change="goXiaoqu"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in xiaoquList"
|
||||
:key="dict.xiaoqu_id"
|
||||
:label="dict.dept_name"
|
||||
:value="dict.xiaoqu_id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
</mars-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MarsMap from "@/components/mars-map";
|
||||
import NavigationBar from "@/components/NavigationBar/index.vue";
|
||||
import { mapGetters } from "vuex";
|
||||
import {
|
||||
foldpanelLeft,
|
||||
IndexModelLeft,
|
||||
foldpanelRight,
|
||||
IndexModelRight,
|
||||
} from "@/views/components/index.js";
|
||||
import { getCommunitylist, getXiaoqulist } from "@/api/taicangpop/data.js";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
computed: {
|
||||
...mapGetters(["dept", "xiaoquIntroduce"]),
|
||||
},
|
||||
components: {
|
||||
MarsMap,
|
||||
NavigationBar,
|
||||
foldpanelLeft,
|
||||
IndexModelLeft,
|
||||
foldpanelRight,
|
||||
IndexModelRight,
|
||||
},
|
||||
data() {
|
||||
const basePathUrl = window.basePathUrl || "";
|
||||
return {
|
||||
options: {
|
||||
scene: {
|
||||
center: {
|
||||
lat: 31.344002,
|
||||
lng: 121.120196,
|
||||
alt: 21247.4,
|
||||
heading: 355.1,
|
||||
pitch: -53.8,
|
||||
},
|
||||
showSun: false,
|
||||
showMoon: false,
|
||||
showSkyBox: false,
|
||||
showSkyAtmosphere: false,
|
||||
fog: false,
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
backgroundImage: `url(${require("../assets/images/ui/index_bg.jpg")})`,
|
||||
orderIndependentTranslucency: false,
|
||||
contextOptions: { webgl: { antialias: mars3d.Util.isPCBroswer() } },
|
||||
globe: {
|
||||
show: false, // 不显示地球
|
||||
showGroundAtmosphere: false,
|
||||
enableLighting: false,
|
||||
},
|
||||
clock: {
|
||||
currentTime: "2023-11-01 12:00:00", // 固定光照时间
|
||||
},
|
||||
cameraController: {
|
||||
zoomFactor: 1.5,
|
||||
minimumZoomDistance: 0.1,
|
||||
maximumZoomDistance: 200000,
|
||||
enableCollisionDetection: false, // 允许进入地下
|
||||
},
|
||||
},
|
||||
},
|
||||
community: 100,
|
||||
communityList: [],
|
||||
xiaoqu: "",
|
||||
xiaoquList: [],
|
||||
map: null,
|
||||
mapLayer: {},
|
||||
streetUrl: basePathUrl + "lib/geoJson/loujiangjiedao.json",
|
||||
shequUrl: basePathUrl + "lib/geoJson/shequ.json",
|
||||
xiaoquUrl: basePathUrl + "lib/geoJson/xiaoqu.json",
|
||||
roaduUrl: basePathUrl + "lib/geoJson/road.json",
|
||||
roaduNameUrl: basePathUrl + "lib/geoJson/road-name.json",
|
||||
riveruUrl: basePathUrl + "lib/geoJson/river.json",
|
||||
riverNameUrl: basePathUrl + "lib/geoJson/river-name.json",
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getCommunity();
|
||||
this.$store.dispatch("GetYjtotal");
|
||||
this.$store.dispatch("GetXiaoquInfo", this.dept.deptId);
|
||||
this.$store.dispatch("getThreeCell");
|
||||
this.$store.dispatch("GetcolorList");
|
||||
},
|
||||
methods: {
|
||||
goXiaoqu(id) {
|
||||
if (id == 260 || id == 254 || id == 257) {
|
||||
this.$modal.msgWarning("该小区功能暂未开放!");
|
||||
return;
|
||||
}
|
||||
|
||||
this.$router.push({ path: "/xiaoqu", query: { xiaoquId: id } });
|
||||
},
|
||||
|
||||
mapLoad(map) {
|
||||
let _this = this;
|
||||
this.map = map;
|
||||
|
||||
map.setSceneOptions({
|
||||
cameraController: {
|
||||
// enableZoom: false,
|
||||
// enableTranslate: true,
|
||||
// enableRotate: false,
|
||||
enableTilt: false,
|
||||
},
|
||||
});
|
||||
|
||||
map.on(mars3d.EventType.wheel, function (e) {
|
||||
_this.zoomChange();
|
||||
});
|
||||
|
||||
this.addLayer();
|
||||
this.addstreet();
|
||||
this.addShequ();
|
||||
this.addXiaoqu();
|
||||
this.addRoad();
|
||||
this.addRiver();
|
||||
},
|
||||
zoomChange() {
|
||||
let level = this.map.level;
|
||||
this.mapLayer.shequ.eachGraphic((graphic) => {
|
||||
if (graphic.isPrivate) {
|
||||
return;
|
||||
}
|
||||
if (level >= 14) {
|
||||
// graphic.openHighlight(
|
||||
// {
|
||||
// label: {
|
||||
// opacity: 0,
|
||||
// },
|
||||
// },
|
||||
// false
|
||||
// );
|
||||
} else {
|
||||
graphic.closeHighlight();
|
||||
}
|
||||
});
|
||||
if (level >= 14) {
|
||||
this.mapLayer.xiaoqu.show = true;
|
||||
} else {
|
||||
this.mapLayer.xiaoqu.show = false;
|
||||
}
|
||||
},
|
||||
//河 - 河名
|
||||
addRiver() {
|
||||
mars3d.Util.fetchJson({ url: this.riveruUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
const graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: item.positions,
|
||||
style: {
|
||||
visibleDepth: false,
|
||||
addHeight: 10,
|
||||
width: 2,
|
||||
color: "#33816D",
|
||||
opacity: 0.8,
|
||||
},
|
||||
});
|
||||
this.mapLayer.river.addGraphic(graphic);
|
||||
});
|
||||
});
|
||||
mars3d.Util.fetchJson({ url: this.riverNameUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
const graphic = new mars3d.graphic.LabelEntity({
|
||||
name: "贴地文字",
|
||||
position: item.position,
|
||||
style: {
|
||||
addHeight: 11,
|
||||
visibleDepth: false,
|
||||
text: item.attr.TextString,
|
||||
font_size: 12,
|
||||
color: "#fff",
|
||||
outline: true,
|
||||
outlineColor: "#33816D",
|
||||
outlineOpacity: 1,
|
||||
outlineWidth: 4,
|
||||
hasPixelOffset: true,
|
||||
|
||||
// 视距的设置
|
||||
scaleByDistance: true,
|
||||
scaleByDistance_far: 20000000,
|
||||
scaleByDistance_farValue: 0.1,
|
||||
scaleByDistance_near: 1000,
|
||||
scaleByDistance_nearValue: 1,
|
||||
},
|
||||
});
|
||||
this.mapLayer.river.addGraphic(graphic);
|
||||
});
|
||||
});
|
||||
},
|
||||
//路 - 路名
|
||||
addRoad() {
|
||||
mars3d.Util.fetchJson({ url: this.roaduUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
const graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: item.positions,
|
||||
style: {
|
||||
visibleDepth: false,
|
||||
addHeight: 1,
|
||||
width: 3,
|
||||
color: "#9D6E00",
|
||||
opacity: 0.8,
|
||||
},
|
||||
});
|
||||
this.mapLayer.road.addGraphic(graphic);
|
||||
});
|
||||
});
|
||||
mars3d.Util.fetchJson({ url: this.roaduNameUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
const graphic = new mars3d.graphic.LabelEntity({
|
||||
name: "贴地文字",
|
||||
position: item.position,
|
||||
style: {
|
||||
visibleDepth: false,
|
||||
text: item.attr.name,
|
||||
font_size: 12,
|
||||
color: "#fff",
|
||||
outline: true,
|
||||
outlineColor: "#9D6E00",
|
||||
outlineOpacity: 1,
|
||||
outlineWidth: 4,
|
||||
hasPixelOffset: true,
|
||||
|
||||
// 视距的设置
|
||||
scaleByDistance: true,
|
||||
scaleByDistance_far: 20000000,
|
||||
scaleByDistance_farValue: 0.1,
|
||||
scaleByDistance_near: 1000,
|
||||
scaleByDistance_nearValue: 1,
|
||||
},
|
||||
});
|
||||
this.mapLayer.road.addGraphic(graphic);
|
||||
});
|
||||
});
|
||||
},
|
||||
//小区
|
||||
addXiaoqu() {
|
||||
mars3d.Util.fetchJson({ url: this.xiaoquUrl }).then((res) => {
|
||||
let _this = this;
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
let id = item.attr.Id;
|
||||
if (
|
||||
id == 245 ||
|
||||
id == 251 ||
|
||||
id == 248 ||
|
||||
id == 254 ||
|
||||
id == 257 ||
|
||||
id == 260
|
||||
)
|
||||
return;
|
||||
const polygonEntity = new mars3d.graphic.PolygonEntity({
|
||||
id: item.id,
|
||||
positions: item.positions,
|
||||
style: {
|
||||
addHeight: 10,
|
||||
fill: false,
|
||||
outline: true,
|
||||
fill: true,
|
||||
color: "#ffeb3b",
|
||||
opacity: 0.3,
|
||||
outlineWidth: 2,
|
||||
outlineColor: "#ffeb3b",
|
||||
label: {
|
||||
opacity: 1,
|
||||
text: item.attr.name,
|
||||
position: "center",
|
||||
font_size: 15,
|
||||
font_weight: "bold",
|
||||
color: "#ffeb3b",
|
||||
outline: true,
|
||||
outlineColor: "#111",
|
||||
outlineOpacity: 1,
|
||||
outlineWidth: 4,
|
||||
hasPixelOffset: true,
|
||||
pixelOffsetY: -2,
|
||||
// 视距的设置
|
||||
scaleByDistance: true,
|
||||
scaleByDistance_far: 20000000,
|
||||
scaleByDistance_farValue: 0.1,
|
||||
scaleByDistance_near: 1000,
|
||||
scaleByDistance_nearValue: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
this.mapLayer.xiaoqu.addGraphic(polygonEntity);
|
||||
|
||||
polygonEntity.on(mars3d.EventType.click, function (e) {
|
||||
// console.log(e.id);
|
||||
_this.goXiaoqu(e.id);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
// 社区
|
||||
addShequ() {
|
||||
mars3d.Util.fetchJson({ url: this.shequUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
arr.map((item, index) => {
|
||||
const polygonEntity = new mars3d.graphic.PolygonEntity({
|
||||
id: `shequ${item.id}`,
|
||||
positions: item.positions,
|
||||
style: {
|
||||
fill: true,
|
||||
color: "#057BEB",
|
||||
outline: true,
|
||||
outlineWidth: 2,
|
||||
outlineColor: "#6ED2FB",
|
||||
label: {
|
||||
opacity: 1,
|
||||
text: item.attr.COMNAME,
|
||||
position: "center",
|
||||
font_size: 15,
|
||||
font_weight: "bold",
|
||||
color: "#fff",
|
||||
outline: true,
|
||||
outlineColor: "#111",
|
||||
outlineOpacity: 0.5,
|
||||
outlineWidth: 3,
|
||||
hasPixelOffset: true,
|
||||
pixelOffsetY: -2,
|
||||
visibleDepth: false,
|
||||
// 视距的设置
|
||||
scaleByDistance: true,
|
||||
scaleByDistance_far: 20000000,
|
||||
scaleByDistance_farValue: 0.1,
|
||||
scaleByDistance_near: 1000,
|
||||
scaleByDistance_nearValue: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
this.mapLayer.shequ.addGraphic(polygonEntity);
|
||||
});
|
||||
});
|
||||
},
|
||||
//创建图层到map
|
||||
addLayer() {
|
||||
this.mapLayer.river = new mars3d.layer.GraphicLayer();
|
||||
this.map.addLayer(this.mapLayer.river);
|
||||
|
||||
this.mapLayer.road = new mars3d.layer.GraphicLayer();
|
||||
this.map.addLayer(this.mapLayer.road);
|
||||
|
||||
this.mapLayer.xiaoqu = new mars3d.layer.GraphicLayer({ show: false });
|
||||
this.map.addLayer(this.mapLayer.xiaoqu);
|
||||
|
||||
this.mapLayer.shequ = new mars3d.layer.GraphicLayer();
|
||||
this.map.addLayer(this.mapLayer.shequ);
|
||||
|
||||
this.mapLayer.street = new mars3d.layer.GraphicLayer();
|
||||
this.map.addLayer(this.mapLayer.street);
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载社区底图面
|
||||
*/
|
||||
addstreet() {
|
||||
mars3d.Util.fetchJson({ url: this.streetUrl }).then((res) => {
|
||||
const arr = mars3d.Util.geoJsonToGraphics(res);
|
||||
|
||||
arr.map((item, index) => {
|
||||
const wall = new mars3d.graphic.WallPrimitive({
|
||||
positions: item.positions[0],
|
||||
style: {
|
||||
setHeight: -2000,
|
||||
diffHeight: 2000, // 墙高
|
||||
width: 10,
|
||||
materialType: mars3d.MaterialType.Image2,
|
||||
materialOptions: {
|
||||
image: require("../assets/images/ui/fence-top.png"),
|
||||
color: "#4CE2F5",
|
||||
},
|
||||
},
|
||||
});
|
||||
this.mapLayer.street.addGraphic(wall);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
handleChange(e) {
|
||||
if (!e) return;
|
||||
let _this = this;
|
||||
this.$store.dispatch("GetXiaoquInfo", e);
|
||||
this.xiaoqu = "";
|
||||
this.xiaoquList = this.communityList.filter(
|
||||
(item) => item.dept_id == e
|
||||
)[0].children;
|
||||
|
||||
if (e == 100) {
|
||||
e = undefined;
|
||||
this.map.flyHome({
|
||||
duration: 1,
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.zoomChange();
|
||||
}, 1200);
|
||||
} else {
|
||||
let shequItem = this.mapLayer.shequ.getGraphicByAttr(`shequ${e}`);
|
||||
this.map.flyToPoint(
|
||||
new mars3d.LngLatPoint(
|
||||
shequItem.centerPoint._lng,
|
||||
shequItem.centerPoint._lat
|
||||
),
|
||||
{
|
||||
radius: 2776.4,
|
||||
duration: 1,
|
||||
complete: function () {
|
||||
if (_this.xiaoquList.length == 0) {
|
||||
shequItem.openHighlight({
|
||||
outlineColor: "#ffeb3b",
|
||||
outlineWidth: 5,
|
||||
});
|
||||
} else {
|
||||
_this.zoomChange();
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
this.$store.dispatch("GetYjtotal", {
|
||||
shequId: e,
|
||||
});
|
||||
this.$store.commit("SET_QUERY_PARAMS", { shequId: e });
|
||||
this.$store.dispatch("getThreeCell", {
|
||||
shequId: e,
|
||||
});
|
||||
this.$store.dispatch("GetcolorList", {
|
||||
shequId: e,
|
||||
});
|
||||
},
|
||||
|
||||
getCommunity() {
|
||||
let community = new Promise((resolve, reject) => {
|
||||
getCommunitylist().then((res) => {
|
||||
res.data["社区list集合"].unshift({
|
||||
dept_name: "全部社区",
|
||||
dept_id: this.dept.deptId,
|
||||
});
|
||||
resolve(res.data["社区list集合"]);
|
||||
});
|
||||
});
|
||||
|
||||
let xiaoqu = new Promise((resolve, reject) => {
|
||||
getXiaoqulist().then((res) => {
|
||||
resolve(res.data["小区list集合"]);
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all([community, xiaoqu]).then((res) => {
|
||||
this.communityList = res[0].map((item) => {
|
||||
item.children = [];
|
||||
res[1].forEach((it) => {
|
||||
if (item.dept_id == it.shequ_id) item.children.push(it);
|
||||
});
|
||||
return item;
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pc-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
// background: url("~@/assets/images/ui/index_bg.jpg");
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::v-deep .select-search {
|
||||
position: absolute;
|
||||
left: 410px;
|
||||
top: 110px;
|
||||
|
||||
.el-select {
|
||||
width: 160px;
|
||||
.el-input {
|
||||
background: transparent;
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
color: #fff;
|
||||
background: url("~@/assets/images/ui/img_btn_search.png");
|
||||
background-size: 100% 100%;
|
||||
border: 0px !important;
|
||||
}
|
||||
.el-input__inner::placeholder,
|
||||
.el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue