|
|
|
@ -7,8 +7,7 @@
|
|
|
|
|
<foldpanelRight>
|
|
|
|
|
<IndexModelRight />
|
|
|
|
|
</foldpanelRight>
|
|
|
|
|
<mars-map @mapLoad="mapLoad" :options="options"></mars-map>
|
|
|
|
|
<!-- <LeafletMap>
|
|
|
|
|
<mars-map @mapLoad="mapLoad" :options="options" ref="map">
|
|
|
|
|
<template #select>
|
|
|
|
|
<div class="select-search">
|
|
|
|
|
<el-select
|
|
|
|
@ -45,7 +44,7 @@
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</LeafletMap> -->
|
|
|
|
|
</mars-map>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
@ -59,7 +58,6 @@ import {
|
|
|
|
|
foldpanelRight,
|
|
|
|
|
IndexModelRight,
|
|
|
|
|
} from "@/views/components/index.js";
|
|
|
|
|
// import LeafletMap from "@/components/LeafletMap";
|
|
|
|
|
import { getCommunitylist, getXiaoqulist } from "@/api/taicangpop/data.js";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
@ -74,7 +72,6 @@ export default {
|
|
|
|
|
IndexModelLeft,
|
|
|
|
|
foldpanelRight,
|
|
|
|
|
IndexModelRight,
|
|
|
|
|
// LeafletMap,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
@ -146,28 +143,7 @@ export default {
|
|
|
|
|
this.map = map;
|
|
|
|
|
|
|
|
|
|
map.on(mars3d.EventType.wheel, function (e) {
|
|
|
|
|
_this.mapLayer.shequ.eachGraphic((graphic) => {
|
|
|
|
|
if (graphic.isPrivate) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (e.target.level >= 14) {
|
|
|
|
|
graphic.openHighlight(
|
|
|
|
|
{
|
|
|
|
|
label: {
|
|
|
|
|
opacity: 0,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
false
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
graphic.closeHighlight();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (e.target.level >= 14) {
|
|
|
|
|
_this.mapLayer.xiaoqu.show = true;
|
|
|
|
|
} else {
|
|
|
|
|
_this.mapLayer.xiaoqu.show = false;
|
|
|
|
|
}
|
|
|
|
|
_this.zoomChange();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.addLayer();
|
|
|
|
@ -177,6 +153,31 @@ export default {
|
|
|
|
|
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) => {
|
|
|
|
@ -224,37 +225,6 @@ export default {
|
|
|
|
|
this.mapLayer.river.addGraphic(graphic);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
// mars3d.Util.fetchJson({ url: this.riveruUrl }).then((res) => {
|
|
|
|
|
// const arr = mars3d.Util.geoJsonToGraphics(res);
|
|
|
|
|
// console.log(arr);
|
|
|
|
|
// arr.map((item) => {
|
|
|
|
|
// const graphic = new mars3d.graphic.Water({
|
|
|
|
|
// positions: item.positions,
|
|
|
|
|
// style: {
|
|
|
|
|
// height: 3, // 水面高度
|
|
|
|
|
// normalMap: require("../assets/images/ui/waterNormals.jpg"), // 水正常扰动的法线图
|
|
|
|
|
// frequency: 8000.0, // 控制波数的数字。
|
|
|
|
|
// animationSpeed: 0.02, // 控制水的动画速度的数字。
|
|
|
|
|
// amplitude: 5.0, // 控制水波振幅的数字。
|
|
|
|
|
// specularIntensity: 0.8, // 控制镜面反射强度的数字。
|
|
|
|
|
// baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
|
|
|
|
|
// blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
|
|
|
|
|
// opacity: 0.7, // 透明度
|
|
|
|
|
// clampToGround: false, // 是否贴地
|
|
|
|
|
// textureCoordinates: {
|
|
|
|
|
// positions: [
|
|
|
|
|
// new Cesium.Cartesian2(0, 1),
|
|
|
|
|
// new Cesium.Cartesian2(0, 0),
|
|
|
|
|
// new Cesium.Cartesian2(0.5, 0),
|
|
|
|
|
// new Cesium.Cartesian2(1, 0),
|
|
|
|
|
// new Cesium.Cartesian2(1, 1),
|
|
|
|
|
// ],
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// this.mapLayer.river.addGraphic(graphic);
|
|
|
|
|
// });
|
|
|
|
|
// });
|
|
|
|
|
},
|
|
|
|
|
//路 - 路名
|
|
|
|
|
addRoad() {
|
|
|
|
@ -361,6 +331,7 @@ export default {
|
|
|
|
|
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,
|
|
|
|
@ -418,6 +389,7 @@ export default {
|
|
|
|
|
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],
|
|
|
|
@ -439,12 +411,35 @@ export default {
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
if (e == 100) {
|
|
|
|
|
e = undefined;
|
|
|
|
|
this.map.flyHome({
|
|
|
|
|
duration: 1,
|
|
|
|
|
});
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.zoomChange();
|
|
|
|
|
}, 1200);
|
|
|
|
|
} else {
|
|
|
|
|
let shequItem = this.mapLayer.shequ.getGraphicByAttr(
|
|
|
|
|
`shequ${e}`
|
|
|
|
|
).centerPoint;
|
|
|
|
|
this.map.flyToPoint(
|
|
|
|
|
new mars3d.LngLatPoint(shequItem._lng, shequItem._lat),
|
|
|
|
|
{
|
|
|
|
|
radius: 2776.4,
|
|
|
|
|
duration: 1,
|
|
|
|
|
complete: function () {
|
|
|
|
|
_this.zoomChange();
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
this.$store.dispatch("GetYjtotal", {
|
|
|
|
|
shequId: e,
|
|
|
|
|
});
|
|
|
|
|