suzhou-jichuang-lanhai
/
taicangPopulation2
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初步处理渲染二维面以及图标

Browse Source
master
许宏杰 1 month ago
parent 8e316d061f
commit cf83b60115
8 changed files with 781 additions and 33 deletions
Show Stats Download Patch File Download Diff File

14
src/components/NavigationBar/index.vue
Unescape View File

@ -19,7 +19,10 @@
<div class="navigation-right" v-show="showRight">
<div class="reset"></div>
<el-button type="text">后台管理</el-button>
<el-button type="text">美丽街区</el-button>
<el-button type="text" v-show="showStreet">美丽街区</el-button>
<el-button type="text" @click="handleBack()" v-show="!showStreet"
>返回街道</el-button
>
<userModel :name="name" />
</div>
@ -68,6 +71,10 @@ export default {
type: Boolean,
default: true,
},
showStreet: {
type: Boolean,
default: true,
},
mainTitle: {
type: String,
default: "娄东街道人口数据管理系统",
@ -91,6 +98,9 @@ export default {
},
mounted() {},
methods: {
handleBack() {
this.$router.back();
},
/**
* 是个中心
*/
@ -129,7 +139,7 @@ export default {
.main-title {
font-size: 36px;
color: #ffffff;
letter-spacing: 2px;
letter-spacing: 3px;
text-shadow: #333 2px 2px 2px;
font-family: "xiniu";
}

2
src/store/index.js
Unescape View File

@ -7,6 +7,7 @@ import tagsView from "./modules/tagsView";
import permission from "./modules/permission";
import settings from "./modules/settings";
import taicang from "./modules/taicang";
import xiaoqu from "./modules/xiaoqu";
import getters from "./getters";
Vue.use(Vuex);
@ -20,6 +21,7 @@ const store = new Vuex.Store({
permission,
settings,
taicang,
xiaoqu,
},
getters,
});

7
src/store/modules/xiaoqu.js
Unescape View File

@ -0,0 +1,7 @@
const xiaoqu = {
state: {},
mutations: {},
actions: {},
};
export default xiaoqu;

128
src/views/components/xiaoqu/map/garden.json
Unescape View File

@ -0,0 +1,128 @@
{
"202": {
"雍景苑": {
"id": 6,
"color": "#19FA63",
"x": 121.1494,
"y": 31.454864,
"icon": "info",
"height": 100
},
"深柳苑": {
"id": 3,
"color": "#E7FF64",
"x": 121.14574,
"y": 31.453061,
"icon": "info",
"height": 100
},
"疏芦苑": {
"id": 2,
"color": "#FF667C",
"x": 121.145399,
"y": 31.451567,
"icon": "info",
"height": 50
},
"碧波苑": {
"id": 7,
"color": "#A0BAFF",
"x": 121.1489,
"y": 31.4532,
"icon": "info",
"height": 50
},
"春晖苑": {
"id": 4,
"color": "#FF87CE",
"x": 121.147274,
"y": 31.452,
"icon": "info",
"height": 50
},
"茗馨苑": {
"id": 8,
"color": "#33BEFE",
"x": 121.150812,
"y": 31.454044,
"icon": "info",
"height": 50
},
"翠庭苑": {
"id": 5,
"color": "#FFD015",
"x": 121.150611,
"y": 31.451333,
"icon": "info",
"height": 50
},
"涵乐苑": {
"id": 8,
"color": "#25F9FF",
"x": 121.147349,
"y": 31.45067,
"icon": "info",
"height": 50
}
},
"245": {
"嘉华园": {
"id": 5,
"color": "#FFD015",
"x": 121.138134,
"y": 31.452655,
"icon": "info",
"height": 50
},
"聚星园": {
"id": 4,
"color": "#FF87CE",
"x": 121.137979,
"y": 31.453921,
"icon": "info",
"height": 50
},
"景华园": {
"id": 2,
"color": "#FF667C",
"x": 121.140859,
"y": 31.453405,
"icon": "info",
"height": 50
},
"雍华园": {
"id": 7,
"color": "#A0BAFF",
"x": 121.139129,
"y": 31.453472,
"icon": "info",
"height": 50
},
"云峰园": {
"id": 6,
"color": "#19FA63",
"x": 121.139446,
"y": 31.454976,
"icon": "info",
"height": 50
}
},
"215": {
"景瑞荣御蓝湾北侧": {
"id": 5,
"color": "#FFD015",
"x": 121.147831,
"y": 31.459577,
"icon": "info",
"height": 50
},
"景瑞荣御蓝湾南侧": {
"id": 4,
"color": "#FF87CE",
"x": 121.145985,
"y": 31.457467,
"icon": "info",
"height": 50
}
}
}

243
src/views/components/xiaoqu/map/index.vue
Unescape View File

@ -0,0 +1,243 @@
<template>
<div class="xiaoqu-map">
<mars-map @mapLoad="mapLoad" :options="options"></mars-map>
</div>
</template>
<script>
import configJson from "./map-config.json";
import garden from "./garden.json";
import MarsMap from "@/components/mars-map";
export default {
props: {
xiaoquId: {
type: Number,
default: 0,
},
},
data() {
const basePathUrl = window.basePathUrl || "";
return {
map: null,
mapLayer: {},
config: {},
options: {
scene: {
showSun: false, //太阳
showMoon: false, //月亮
showSkyAtmosphere: false, //是否显示地球大气层外光圈
globe: {
showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
depthTestAgainstTerrain: false,
baseColor: "#546a53",
},
},
basemaps: [
{
name: "ArcGIS影像",
icon: "img/basemaps/esriWorldImagery.png",
type: "arcgis",
layer: "img_d", // 使用layer时会自动用内部固定url "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
enablePickFeatures: false,
show: true,
},
],
},
configUrl: basePathUrl,
};
},
components: {
MarsMap,
},
created() {
this.config = configJson[JSON.parse(this.xiaoquId)];
},
methods: {
mapLoad(map) {
let _this = this;
this.map = map;
map.centerAt(this.config.viewHome, {
complete: function () {
//加载图层数据
_this.addMapLayer();
},
});
},
//图层组
mapGraphicLayer() {
this.mapLayer.garden = new mars3d.layer.GraphicLayer();
this.map.addLayer(this.mapLayer.garden);
this.mapLayer.plane = new mars3d.layer.GraphicLayer();
this.map.addLayer(this.mapLayer.plane);
this.mapLayer.planePoint = new mars3d.layer.GraphicLayer();
this.map.addLayer(this.mapLayer.planePoint);
},
addMapLayer() {
this.mapGraphicLayer();
if (
this.xiaoquId === 202 ||
this.xiaoquId === 245 ||
this.xiaoquId === 215 ||
this.xiaoquId === 248
) {
this.addGardenLayer();
}
this.addbuildingLayer();
},
//苑图层
addGardenLayer() {
const data = garden[this.xiaoquId];
Object.keys(data).map((key, index) => {
const item = data[key];
const graphic = new mars3d.graphic.BillboardEntity({
position: new mars3d.LngLatPoint(item.x, item.y, item.height),
style: {
image:
"http://www.jichuanglanhai.com/demo/taicang-file/images/" +
item.icon +
".png",
scale: 1,
width: 70,
height: 45,
clampToGround: false,
visibleDepth: true,
label: {
text: key,
font_size: 14,
font_family: "黑体",
color: "#ffffff",
pixelOffsetY: -5,
background: true,
backgroundColor: "#000000",
backgroundOpacity: 1,
backgroundPadding: new Cesium.Cartesian2(4, 3),
},
},
});
this.mapLayer.garden.addGraphic(graphic);
});
},
pointFilter(attr) {
let data = garden[this.xiaoquId];
let yuanName = "";
let buildingNumber = "";
let image = "";
let buildingColor = "";
const match = attr["幢号"].match(/^(.*?)(\d+)/);
const match2 = attr["幢号"].match(/\d+/);
if (match) {
// 215是景瑞
yuanName = this.xiaoquId == 215 ? attr["网格名"] : match[1];
}
buildingNumber = match2 ? match2[0] : "";
if (
this.xiaoquId == 245 ||
this.xiaoquId == 202 ||
this.xiaoquId == 215 ||
this.xiaoquId == 248
) {
buildingColor = data[yuanName].color;
image =
"//122.193.93.182:19002/profile/3DDATA/images/" +
data[yuanName].id +
".png";
} else {
buildingColor = "#19FA63";
image = "//122.193.93.182:19002/profile/3DDATA/images/6.png";
}
return { yuanName, buildingNumber, buildingColor, image };
},
//平面 + 图标
addbuildingLayer() {
let _this = this;
mars3d.Util.fetchJson({
url:
this.configUrl + `lib/geoJson/xiaoqu/building${this.xiaoquId}.json`,
}).then((res) => {
const arr = mars3d.Util.geoJsonToGraphics(res);
console.log(arr);
arr.map((item, index) => {
const { yuanName, buildingNumber, buildingColor, image } =
this.pointFilter(item.attr);
const polygon = new mars3d.graphic.PolygonEntity({
id: `building${index}`,
positions: item.positions,
style: {
color: "transparent",
opacity: 0,
outline: false,
outlineColor: "transparent",
outlineWidth: 0,
},
});
this.mapLayer.plane.addGraphic(polygon);
const point = new mars3d.graphic.BillboardEntity({
id: `planePoint${index}`,
position: polygon.centerPoint,
style: {
image: image,
scale: 1,
width: 46,
height: 42,
visibleDepth: false,
clampToGround: true, //贴地
label: {
clampToGround: true, //贴地
pixelOffsetY: -3,
scale: 1,
text: buildingNumber,
height: 0,
opacity: 1,
font_size: 12,
font_weight: "bold",
color: buildingColor,
font_family: "微软雅黑",
outline: true,
outlineColor: "#0C212C",
outlineWidth: 2,
outlineOpacity: 1,
visibleDepth: false,
},
},
attr: {
id: index,
yuanName: yuanName,
buildingNumber: buildingNumber,
},
});
point.on(mars3d.EventType.click, function (e) {
let buildingItem = _this.mapLayer.plane.getGraphicByAttr(
`building${e.target.options.attr.id}`
);
buildingItem.openHighlight({
color: "#FFA200",
opacity: 0.3,
outline: true,
outlineColor: "#F5DC02",
outlineWidth: 2,
});
});
this.mapLayer.planePoint.addGraphic(point);
});
});
},
},
};
</script>
<style lang="scss" scoped>
.xiaoqu-map {
position: absolute;
z-index: 10;
height: 100%;
width: 100%;
}
</style>

317
src/views/components/xiaoqu/map/map-config.json
Unescape View File

@ -0,0 +1,317 @@
{
"202": {
"name": "大庆锦绣新城",
"viewHome": {
"lat": 31.447811,
"lng": 121.151369,
"alt": 1122,
"heading": 333,
"pitch": -60
},
"viewBuilding": {
"lat": 31.450778,
"lng": 121.148479,
"alt": 1406,
"heading": 332,
"pitch": -81
},
"zhengshe": {
"url": "//122.193.93.182:19004/geoserver/taicang/wms",
"layers": "taicang:geotiff_new_daqing"
},
"qingxie": {
"url": "//122.193.93.182:19003/3d202new/tileset.json",
"position": { "lng": 121.14546, "lat": 31.46104, "alt": 0 },
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
},
"215": {
"viewHome": {
"lat": 31.452984,
"lng": 121.150223,
"alt": 1231,
"heading": 333,
"pitch": -60
},
"viewBuilding": {
"lat": 31.452984,
"lng": 121.150223,
"alt": 1406,
"heading": 332,
"pitch": -81
},
"zhengshe": {
"url": "//122.193.93.182:19004/geoserver/taicang/wms",
"layers": "taicang:geotiff_215"
},
"qingxie": {
"url": "//122.193.93.182:19003/3d215/tileset.json",
"position": { "lng": 121.14546, "lat": 31.46104, "alt": 0 },
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
},
"235": {
"name": "华盛六园",
"viewHome": {
"lat": 31.465871,
"lng": 121.092674,
"alt": 933,
"heading": 329,
"pitch": -63
},
"viewBuilding": {
"lat": 31.465871,
"lng": 121.092674,
"alt": 933,
"heading": 329,
"pitch": -63
},
"zhengshe": {
"url": "//122.193.93.182:19004/geoserver/taicang/wms",
"layers": "taicang:geotiff_235"
},
"qingxie": {
"url": "//122.193.93.182:19003/3d235/tileset.json",
"position": { "lng": 121.090056, "lat": 31.469341, "alt": 0 },
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
},
"242": {
"name": "星雨华府",
"viewHome": {
"lat": 31.448791,
"lng": 121.126525,
"alt": 684,
"heading": 329,
"pitch": -63
},
"viewBuilding": {
"lat": 31.448791,
"lng": 121.126525,
"alt": 684,
"heading": 329,
"pitch": -63
},
"zhengshe": {
"url": "//122.193.93.182:19004/geoserver/taicang/wms",
"layers": "taicang:geotiff_242"
},
"qingxie": {
"url": "//122.193.93.182:19003/3d242/tileset.json",
"position": { "lat": 31.448791, "lng": 121.126525, "alt": 0 },
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
},
"245": {
"name": "高尔夫湖滨花苑",
"viewHome": {
"lat": 31.450944,
"lng": 121.140931,
"alt": 684,
"heading": 329,
"pitch": -63
},
"viewBuilding": {
"lat": 31.450944,
"lng": 121.140931,
"alt": 684,
"heading": 329,
"pitch": -63
},
"zhengshe": {
"url": "//39.101.188.84:9099/geoserver/taicang/wms",
"layers": "taicang:geotiff_gaoerfuhubinghuyuan"
},
"qingxie": {
"url": "//39.101.188.84:7777/gaoerfuhubinghuyuan0245/tileset.json",
"position": {
"lat": 31.450944,
"lng": 121.140931,
"alt": 0
},
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
},
"251": {
"name": "世福园",
"viewHome": {
"lat": 31.453353,
"lng": 121.138882,
"alt": 684,
"heading": 329,
"pitch": -63
},
"viewBuilding": {
"lat": 31.453353,
"lng": 121.138882,
"alt": 684,
"heading": 329,
"pitch": -63
},
"zhengshe": {
"url": "//39.101.188.84:9099/geoserver/taicang/wms",
"layers": "taicang:geotiff_gaoerfuhubinghuyuan"
},
"qingxie": {
"url": "//39.101.188.84:7777/gaoerfuhubinghuyuan0245/tileset.json",
"position": {
"lat": 31.453353,
"lng": 121.138882,
"alt": 0
},
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
},
"248": {
"name": "华侨花园",
"viewHome": {
"lat": 31.448208,
"lng": 121.13611,
"alt": 1003,
"heading": 329,
"pitch": -63
},
"viewBuilding": {
"lat": 31.448121,
"lng": 121.136065,
"alt": 1003,
"heading": 329,
"pitch": -63
},
"zhengshe": {
"url": "//39.101.188.84:9099/geoserver/taicang/wms",
"layers": "taicang:geotiff_gaoerfuhubinghuyuan"
},
"qingxie": {
"url": "//39.101.188.84:7777/gaoerfuhubinghuyuan0245/tileset.json",
"position": {
"lat": 31.448121,
"lng": 121.136065,
"alt": 0
},
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
},
"254": {
"name": "碧桂园天珵",
"viewHome": {
"lat": 31.457987,
"lng": 121.136399,
"alt": 500,
"heading": 329,
"pitch": -63
},
"viewBuilding": {
"lat": 31.457987,
"lng": 121.136399,
"alt": 500,
"heading": 329,
"pitch": -63
},
"zhengshe": {
"url": "//39.101.188.84:9099/geoserver/taicang/wms",
"layers": "taicang:geotiff_gaoerfuhubinghuyuan"
},
"qingxie": {
"url": "//39.101.188.84:7777/gaoerfuhubinghuyuan0245/tileset.json",
"position": {
"lat": 31.457987,
"lng": 121.136399,
"alt": 0
},
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
},
"257": {
"name": "吴中锦绣朝阳",
"viewHome": {
"lat": 31.456552,
"lng": 121.137757,
"alt": 466,
"heading": 329,
"pitch": -63
},
"viewBuilding": {
"lat": 31.456552,
"lng": 121.137757,
"alt": 466,
"heading": 329,
"pitch": -63
},
"zhengshe": {
"url": "//39.101.188.84:9099/geoserver/taicang/wms",
"layers": "taicang:geotiff_gaoerfuhubinghuyuan"
},
"qingxie": {
"url": "//39.101.188.84:7777/gaoerfuhubinghuyuan0245/tileset.json",
"position": {
"lat": 31.456552,
"lng": 121.137757,
"alt": 0
},
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
},
"260": {
"name": "中南君樾阁",
"viewHome": {
"lat": 31.454591,
"lng": 121.136109,
"alt": 877,
"heading": 329,
"pitch": -63
},
"viewBuilding": {
"lat": 31.454591,
"lng": 121.136109,
"alt": 877,
"heading": 329,
"pitch": -63
},
"zhengshe": {
"url": "//39.101.188.84:9099/geoserver/taicang/wms",
"layers": "taicang:geotiff_gaoerfuhubinghuyuan"
},
"qingxie": {
"url": "//39.101.188.84:7777/gaoerfuhubinghuyuan0245/tileset.json",
"position": {
"lat": 31.454591,
"lng": 121.136109,
"alt": 0
},
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
},
"267": {
"name": "森茂汽车城",
"viewHome": {
"lat": 31.475628,
"lng": 121.091869,
"alt": 642,
"heading": 329,
"pitch": -63
},
"viewBuilding": {
"lat": 31.475628,
"lng": 121.091869,
"alt": 642,
"heading": 329,
"pitch": -63
},
"zhengshe": {
"url": "//122.193.93.182:19004/geoserver/taicang/wms",
"layers": "taicang:geotiff_267"
},
"qingxie": {
"url": "//122.193.93.182:19003/3d267/tileset.json",
"position": {
"lat": 31.454591,
"lng": 121.136109,
"alt": 0
},
"rotation": { "x": 0, "y": 0, "z": 0.6 }
}
}
}

52
src/views/index.vue
Unescape View File

@ -33,6 +33,7 @@
clearable
v-show="xiaoquList.length > 0"
:popper-append-to-body="false"
@change="goXiaoqu"
>
<el-option
v-for="dict in xiaoquList"
@ -138,6 +139,15 @@ export default {
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;
@ -160,14 +170,14 @@ export default {
return;
}
if (level >= 14) {
graphic.openHighlight(
{
label: {
opacity: 0,
},
},
false
);
// graphic.openHighlight(
// {
// label: {
// opacity: 0,
// },
// },
// false
// );
} else {
graphic.closeHighlight();
}
@ -276,9 +286,11 @@ export default {
//小区
addXiaoqu() {
mars3d.Util.fetchJson({ url: this.xiaoquUrl }).then((res) => {
let _this = this;
const arr = mars3d.Util.geoJsonToGraphics(res);
arr.map((item, index) => {
const polygonEntity = new mars3d.graphic.PolygonEntity({
id: item.id,
positions: item.positions,
style: {
addHeight: 10,
@ -322,6 +334,11 @@ export default {
},
});
this.mapLayer.xiaoqu.addGraphic(polygonEntity);
polygonEntity.on(mars3d.EventType.click, function (e) {
// console.log(e.id);
_this.goXiaoqu(e.id);
});
});
});
},
@ -352,6 +369,7 @@ export default {
outlineWidth: 3,
hasPixelOffset: true,
pixelOffsetY: -2,
visibleDepth: false,
// 视距的设置
scaleByDistance: true,
scaleByDistance_far: 20000000,
@ -426,16 +444,24 @@ export default {
this.zoomChange();
}, 1200);
} else {
let shequItem = this.mapLayer.shequ.getGraphicByAttr(
`shequ${e}`
).centerPoint;
let shequItem = this.mapLayer.shequ.getGraphicByAttr(`shequ${e}`);
this.map.flyToPoint(
new mars3d.LngLatPoint(shequItem._lng, shequItem._lat),
new mars3d.LngLatPoint(
shequItem.centerPoint._lng,
shequItem.centerPoint._lat
),
{
radius: 2776.4,
duration: 1,
complete: function () {
_this.zoomChange();
if (_this.xiaoquList.length == 0) {
shequItem.openHighlight({
outlineColor: "#ffeb3b",
outlineWidth: 5,
});
} else {
_this.zoomChange();
}
},
}
);

51
src/views/xiaoqu.vue
Unescape View File

@ -1,33 +1,48 @@
<template>
<div class="pc-container"></div>
<div class="pc-container">
<NavigationBar
:mainTitle="xiaoquIntroduce.deptName + '人口数据管理系统'"
:showStreet="false"
></NavigationBar>
<mars-map ref="map" :xiaoquId="queryParamsIndex.xiaoquId"></mars-map>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import NavigationBar from "@/components/NavigationBar/index.vue";
import MarsMap from "@/views/components/xiaoqu/map/index.vue";
export default {
data() {
return {};
},
// mounted() {
// if (this.$auth.authRoleNet("network")) {
// window.addEventListener("popstate", this.preventBack);
// // 初始化时添加一个历史记录条目
// window.history.pushState(null, "", window.location.href);
// }
// },
// methods: {
// preventBack() {
// window.history.pushState(null, "", window.location.href);
// },
// },
// beforeDestroy() {
// window.removeEventListener("popstate", this.preventBack);
// },
components: {
MarsMap,
NavigationBar,
},
computed: {
...mapGetters(["xiaoquIntroduce", "queryParamsIndex"]),
},
created() {
let id = this.$route.query.xiaoquId;
this.$store.commit("SET_QUERY_PARAMS", {
xiaoquId: parseInt(id),
});
this.$store.dispatch("GetXiaoquInfo", id);
this.$store.dispatch("GetYjtotal", {
xiaoquId: id,
});
},
methods: {},
};
</script>
<style lang="scss" scoped>
<style scoped lang="scss">
.pc-container {
position: relative;
height: 100%;
border: 1px solid red;
box-sizing: border-box;
background-size: 100% 100%;
overflow: hidden;
}
</style>

Write Preview
Loading…
Cancel
Save