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

首页地图使用mark3d

Browse Source
master
许宏杰 6 months ago
parent 626982692b
commit 76c6dcff42
25 changed files with 664 additions and 6610 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape View File

@ -1,5 +1,6 @@
.DS_Store
node_modules/
public/lib/
dist/
npm-debug.log*
yarn-debug.log*

69
public/index.html
Unescape View File

@ -1,13 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<link
href="./lib/Cesium/Widgets/widgets.css"
rel="stylesheet"
type="text/css"
/>
<script src="./lib/Cesium/Cesium.js" type="text/javascript"></script>
<script src="./lib/turf.min.js" type="text/javascript"></script>
<!--引入mars3d库lib-->
<link href="./lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="./lib/mars3d/mars3d.js" type="text/javascript"></script>
<script
src="./lib/mars3d/plugins/echarts/echarts.min.js"
type="text/javascript"
></script>
<script
src="./lib/mars3d/plugins/echarts/mars3d-echarts.js"
type="text/javascript"
></script>
<script src="./lib/localforage.js" type="text/javascript"></script>
<script src="./lib/CesiumNetworkPlug.js" type="text/javascript"></script>
<title><%= webpackConfig.name %></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<!--[if lt IE 11
]><script>
window.location.href = "/html/ie.html";
</script><!
[endif]-->
<style>
html,
body,
@ -42,7 +74,7 @@
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
@ -60,7 +92,7 @@
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
@ -77,7 +109,7 @@
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
@ -85,7 +117,6 @@
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
@ -112,13 +143,12 @@
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
background: #7171c6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
@ -133,21 +163,20 @@
right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader {
@ -174,8 +203,8 @@
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-family: "Open Sans";
color: #fff;
font-size: 19px;
width: 100%;
text-align: center;
@ -190,7 +219,7 @@
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
color: #fff;
opacity: 0.5;
}
</style>

2269
src/assets/data/loujiangjiedao-move.json
View File

File diff suppressed because it is too large Load Diff

2269
src/assets/data/loujiangjiedao.json
View File

File diff suppressed because it is too large Load Diff

1521
src/assets/data/shequ.json
View File

File diff suppressed because it is too large Load Diff

313
src/assets/data/小区.json
Unescape View File

@ -1,313 +0,0 @@
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:4490"
}
},
"features": [
{
"type": "Feature",
"id": 202,
"geometry": {
"type": "Polygon",
"coordinates": [
[
[121.15210206300003, 31.453490119000094],
[121.15130613400015, 31.45483670700014],
[121.15030696000008, 31.456521351000049],
[121.14706991800017, 31.454924208000193],
[121.14324918900013, 31.45304202400024],
[121.14528287800022, 31.450400786000159],
[121.1461368790001, 31.449216880000108],
[121.14660267700015, 31.448841845000061],
[121.1493941870001, 31.450028493000218],
[121.15117412200004, 31.450787285000104],
[121.15124973500019, 31.450653987000067],
[121.1532992880002, 31.451514098000075],
[121.15330743900006, 31.451544017000174],
[121.15250676300013, 31.452819680000118],
[121.15210206300003, 31.453490119000094]
]
]
},
"properties": {
"FID": 201,
"Id": 202,
"name": "大庆锦绣新城"
}
},
{
"type": "Feature",
"id": 215,
"properties": {
"FID": 231,
"Id": 215,
"name": "景瑞·荣御蓝湾"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[121.14371380584339, 31.460461572031647],
[121.14702601556337, 31.455255311350925],
[121.15022401115527, 31.456816237770738],
[121.14697842634337, 31.46223189101994],
[121.14371380584339, 31.460461572031647]
]
]
}
},
{
"type": "Feature",
"id": 235,
"geometry": {
"type": "Polygon",
"coordinates": [
[
[121.08689169600007, 31.469446161000064],
[121.08679089200007, 31.469379570000058],
[121.08766088700008, 31.468154330000061],
[121.08837364100009, 31.467199571000037],
[121.0886989060001, 31.466824578000057],
[121.09114914800011, 31.468210549000048],
[121.09357745900002, 31.469619566000063],
[121.09148624200009, 31.47194227600005],
[121.08689169600007, 31.469446161000064]
]
]
},
"properties": {
"FID": 238,
"Id": 235,
"name": "华盛六园"
}
},
{
"type": "Feature",
"id": 242,
"properties": {
"FID": 225,
"Id": 242,
"name": "星雨华府"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[121.12279891402805, 31.451721436414346],
[121.12331740390771, 31.452040003075219],
[121.12408569179644, 31.452512861528238],
[121.12470258830108, 31.452893988241954],
[121.12531929737979, 31.452327845565964],
[121.12626502014109, 31.451461741968533],
[121.12547674999021, 31.450947315995919],
[121.1260359762196, 31.450347077116263],
[121.12500371372785, 31.449677312470119],
[121.12494091096249, 31.449662354657587],
[121.12475474951661, 31.449689043304577],
[121.12441000674728, 31.450051372156416],
[121.12390550630934, 31.450573576700819],
[121.12279891402805, 31.451721436414346]
]
]
}
},
{
"type": "Feature",
"id": 245,
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[121.13567298958456, 31.454102406409948, 0],
[121.13768475821482, 31.454661905928795, 0],
[121.13907670620884, 31.45514106131147, 0],
[121.14015895699522, 31.45555853531014, 0],
[121.14214039978316, 31.45300449914922, 0],
[121.14107437717665, 31.45254633383576, 0],
[121.13844127068502, 31.45162250056609, 0],
[121.13567298958456, 31.454102406409948, 0]
]
]
]
},
"properties": {
"FID": 229,
"Id": 245,
"name": "高尔夫湖滨花苑"
}
},
{
"type": "Feature",
"id": 251,
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[121.13478750396366, 31.4554114542002, 0],
[121.13800290880931, 31.45706533280174, 0],
[121.1385358975176, 31.456301828615167, 0],
[121.13920674454972, 31.45662609333331, 0],
[121.13988031553205, 31.455681185608626, 0],
[121.13848990390939, 31.454984894100864, 0],
[121.13564086372101, 31.454161945136057, 0],
[121.13478750396366, 31.4554114542002, 0]
]
]
]
},
"properties": {
"FID": 228,
"Id": 251,
"name": "世福园"
}
},
{
"type": "Feature",
"id": 248,
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[121.12910044289922, 31.451999629749007, 0],
[121.1335163778425, 31.454900251289484, 0],
[121.13387411488705, 31.45502115967714, 0],
[121.13505183479573, 31.453894050411556, 0],
[121.1367634499105, 31.45226589209519, 0],
[121.13755914025558, 31.45154599141533, 0],
[121.13402259627087, 31.44996079650474, 0],
[121.13332372310879, 31.449707498096036, 0],
[121.13224567213331, 31.44945754835756, 0],
[121.13005052215875, 31.451209814357746, 0],
[121.12928936509174, 31.45185480022009, 0],
[121.12910044289922, 31.451999629749007, 0]
]
]
]
},
"properties": {
"FID": 230,
"Id": 248,
"name": "华侨花园"
}
},
{
"type": "Feature",
"id": 254,
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[121.13337712525555, 31.4599390265864, 0],
[121.13433252807067, 31.46049940365059, 0],
[121.13560636225301, 31.4612421079844, 0],
[121.13667649840896, 31.459857209704648, 0],
[121.13660222255425, 31.45981491992953, 0],
[121.1366219258422, 31.45977537507781, 0],
[121.13661593417916, 31.45974023389423, 0],
[121.13660080319006, 31.4596974191384, 0],
[121.13659677651934, 31.459652119762985, 0],
[121.13662457023656, 31.459591028573232, 0],
[121.1346309182915, 31.45843238118359, 0],
[121.13439275771833, 31.458707098456827, 0],
[121.13439856151928, 31.458726732038407, 0],
[121.13417547742985, 31.4589822268822, 0],
[121.13411281956859, 31.459037661187136, 0],
[121.13337712525555, 31.4599390265864, 0]
]
]
]
},
"properties": {
"FID": 225,
"Id": 254,
"name": "碧桂园天珵"
}
},
{
"type": "Feature",
"id": 257,
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[121.1346309182915, 31.45843238118359, 0],
[121.13662457023656, 31.459591028573232, 0],
[121.13665450784781, 31.459571077860772, 0],
[121.13675295393595, 31.459540378264492, 0],
[121.1368099534709, 31.459535100152895, 0],
[121.13683066951084, 31.459521792924335, 0],
[121.13685947594122, 31.459486939340177, 0],
[121.13693089629705, 31.45952328917581, 0],
[121.13814370947021, 31.457959191630987, 0],
[121.13694638390011, 31.45734945191755, 0],
[121.1364901969794, 31.457951209075937, 0],
[121.13552176739715, 31.457394303700475, 0],
[121.1346309182915, 31.45843238118359, 0]
]
]
]
},
"properties": {
"FID": 225,
"Id": 257,
"name": "吴中锦绣朝阳"
}
},
{
"type": "Feature",
"id": 260,
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[121.1310254406712, 31.458598471707873, 0],
[121.13304914184576, 31.459759296020913, 0],
[121.13570284420756, 31.45678196603628, 0],
[121.13405432659054, 31.45582401657525, 0],
[121.13200466980022, 31.45770566446173, 0],
[121.1310254406712, 31.458598471707873, 0]
]
]
]
},
"properties": {
"FID": 225,
"Id": 260,
"name": "中南君樾阁"
}
},
{
"type": "Feature",
"id": 267,
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[121.090062550702143, 31.480153267271167],
[121.092243209269853, 31.47733104878057],
[121.089840505197145, 31.476009361892121],
[121.087443982342165, 31.478827408937555],
[121.090062550702143, 31.480153267271167]
]
]
]
},
"properties": {
"FID": 238,
"Id": 267,
"name": "森茂汽车城"
}
}
]
}

BIN
src/assets/images/ui/fence-top.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

1
src/assets/styles/index.scss
Unescape View File

@ -197,6 +197,7 @@ aside {
}
.taicang-dialog {
width: 1100px !important;
.el-dialog__close {
color: #fff;
}

13
src/components/ColorCell/index.vue
Unescape View File

@ -1,6 +1,9 @@
<template>
<div class="grid-item-main">
<div class="corlor-grid">
<div
class="corlor-grid"
:style="`width:${realWidth};height:${realHeight};`"
>
<div class="left-color" :style="{ background: item.leftColor }"></div>
<div class="rigth-color">
<div :style="{ background: item.rightTopColor }"></div>
@ -25,6 +28,14 @@ export default {
return {};
},
methods: {},
computed: {
realWidth() {
return typeof this.width == "string" ? this.width : `${this.width}px`;
},
realHeight() {
return typeof this.height == "string" ? this.height : `${this.height}px`;
},
},
};
</script>

3
src/components/LeafletMap/index.vue
Unescape View File

@ -84,7 +84,7 @@ export default {
this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap);
this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap);
this.mapLayers.mapLayer3 = L.featureGroup();
this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.globalMap);
this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap);
this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap);
@ -175,7 +175,6 @@ export default {
addXiaoqu() {
L.geoJSON(xiaoqu, {
pane: "mapLayer3",
style: function (feature) {
let id = feature.properties.Id;
/* 没有人口数据面给灰色 */

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

@ -27,7 +27,6 @@
<el-dialog
:visible.sync="open"
:modal="false"
width="990px"
custom-class="taicang-dialog"
>
<div class="dialog-main">
@ -215,6 +214,6 @@ export default {
padding: 1px;
}
::v-deep .el-dialog:not(.is-fullscreen) {
margin-top: 10vh !important;
margin-top: 6vh !important;
}
</style>

8
src/components/NavigationBar/logCentre.vue
Unescape View File

@ -179,7 +179,13 @@
<div class="table-cell1">分色</div>
<div class="table-cell1">类型</div>
</div>
<div class="table-body" style="overflow: auto" v-infinite-scroll="load">
<div
class="table-body"
style="overflow: auto"
v-infinite-scroll="load"
:infinite-scroll-distance="10"
:infinite-scroll-delay="500"
>
<div
class="body-rows"
v-for="(item, index) in list"

8
src/components/NavigationBar/peopleCentre.vue
Unescape View File

@ -167,7 +167,13 @@
<div class="table-cell2">家庭地址</div>
<div class="table-cell1">分色</div>
</div>
<div class="table-body" style="overflow: auto" v-infinite-scroll="load">
<div
class="table-body"
style="overflow: auto"
v-infinite-scroll="load"
:infinite-scroll-distance="10"
:infinite-scroll-delay="500"
>
<div
class="body-rows"
v-for="(item, index) in list"

8
src/components/NavigationBar/recycleCentre.vue
Unescape View File

@ -173,7 +173,13 @@
<div class="table-cell1">分色</div>
<div class="table-cell1">操作</div>
</div>
<div class="table-body" style="overflow: auto" v-infinite-scroll="load">
<div
class="table-body"
style="overflow: auto"
v-infinite-scroll="load"
:infinite-scroll-distance="10"
:infinite-scroll-delay="500"
>
<div
class="body-rows"
v-for="(item, index) in list"

8
src/components/NavigationBar/warningCentre.vue
Unescape View File

@ -172,7 +172,13 @@
<div class="table-cell1">分色</div>
<div class="table-cell1">未更新天数</div>
</div>
<div class="table-body" style="overflow: auto" v-infinite-scroll="load">
<div
class="table-body"
style="overflow: auto"
v-infinite-scroll="load"
:infinite-scroll-distance="10"
:infinite-scroll-delay="500"
>
<div
class="body-rows"
v-for="(item, index) in list"

50
src/components/mars-map/index.vue
Unescape View File

@ -0,0 +1,50 @@
<template>
<div class="map-container">
<mars-map :url="configUrl" :options="options" @onload="onMapload" />
</div>
</template>
<script>
import MarsMap from "@/components/mars-work/mars-map.vue";
export default {
data() {
const basePathUrl = window.basePathUrl || "";
return {
configUrl: basePathUrl + "lib/config/config.json",
tiles3dLayer: null,
map: null,
};
},
props: {
show: {
type: Number,
default: 1,
},
// 自定义参数
options: Object,
},
components: {
MarsMap,
},
methods: {
onMapload(map) {
this.map = map;
this.$emit("mapLoad", map);
},
},
};
</script>
<style lang="scss" scoped>
.map-container {
position: absolute;
left: 0;
top: 0;
z-index: 9;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

175
src/components/mars-work/mars-map.vue
Unescape View File

@ -0,0 +1,175 @@
<template>
<div :id="`mars3d-container${mapKey}`" class="mars3d-container"></div>
</template>
<script>
import Vue from "vue";
let mars3d = window.mars3d;
// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/architecture.html)
// echarts插件
// import 'mars3d-echarts'
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d;
Vue.prototype.Cesium = mars3d.Cesium;
export default {
name: "mars3dViewer",
props: {
// 地图唯一性标识
mapKey: {
type: String,
default: "",
},
// 初始化配置config.json的地址
url: String,
// 自定义参数
options: Object,
},
mounted() {
mars3d.Util.fetchJson({ url: this.url }).then((data) => {
// 构建地图
this.initMars3d({
...data.map3d,
...this.options,
});
});
},
beforeDestroy() {
const map = this[`map${this.mapKey}`];
if (map) {
map.destroy();
delete this[`map${this.mapKey}`];
}
console.log(">>>>> 地图卸载完成 >>>>");
},
methods: {
initMars3d(mapOptions) {
if (this[`map${this.mapKey}`]) {
this[`map${this.mapKey}`].destroy();
}
// 创建三维地球场景
var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions);
this[`map${this.mapKey}`] = map;
console.log("地图创建成功");
// 抛出事件
this.$emit("onload", map);
},
},
};
</script>
<style>
.mars3d-container {
height: calc(100% + 25px);
overflow: hidden;
}
/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {
top: auto !important;
bottom: 35px !important;
left: 12px !important;
right: auto !important;
}
.cesium-toolbar-button img {
height: 100%;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
margin-bottom: 5px;
float: left;
clear: both;
text-align: center;
}
.cesium-button {
background-color: #3f4854;
color: #e6e6e6;
fill: #e6e6e6;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
line-height: 32px;
}
/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {
bottom: 0;
left: 40px;
max-height: 700px;
margin-bottom: 5px;
}
/**cesium 帮助面板*/
.cesium-navigation-help {
top: auto;
bottom: 0;
left: 40px;
transform-origin: left bottom;
}
/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {
width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
float: right;
margin: 0 3px;
}
/**cesium POI查询输入框*/
.cesium-viewer-geocoderContainer .search-results {
left: 0;
right: 40px;
width: auto;
z-index: 9999;
}
.cesium-geocoder-searchButton {
background-color: #3f4854;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
background-color: #3f4854;
}
/**cesium info信息框*/
.cesium-infoBox {
top: 50px;
background: rgba(63, 72, 84, 0.9);
}
.cesium-infoBox-title {
background-color: #3f4854;
}
/**cesium 任务栏的FPS信息*/
.cesium-performanceDisplay-defaultContainer {
top: auto;
bottom: 35px;
right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
color: #fff;
}
/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer {
top: 10px;
left: 10px;
right: auto;
background-color: #3f4854;
}
</style>

2
src/views/components/IndexModel/components/colorList.vue
Unescape View File

@ -42,7 +42,7 @@ export default {
<style lang="scss" scoped>
.color-list {
margin-top: 10px;
height: 550px;
flex: 1;
background: url("~@/assets/images/ui/colorList_bg.png");
background-size: 100% 100%;
display: flex;

7
src/views/components/IndexModel/components/pieChart.vue
Unescape View File

@ -124,7 +124,7 @@ export default {
{
name: "",
type: "pie",
radius: ["90%", "80%"],
radius: ["70%", "80%"],
silent: true,
clockwise: true,
startAngle: 90,
@ -189,9 +189,11 @@ export default {
<style lang="scss" scoped>
.pie-chart {
margin-top: 10px;
flex: 1;
// flex: 1;
height: 20%;
display: flex;
align-items: center;
.tabLits {
height: 100%;
width: 25px;
@ -231,7 +233,6 @@ export default {
#pie-echarts {
flex: 1;
margin: 5px 0;
height: 70%;
width: 70%;
}
.lable {

8
src/views/components/IndexModel/components/threeCell.vue
Unescape View File

@ -53,8 +53,8 @@ export default {
align-items: center;
img {
display: block;
width: 60px;
height: 65px;
width: 50px;
height: 55px;
}
.lable-value {
display: flex;
@ -69,14 +69,14 @@ export default {
}
.value-data {
margin: 2px 0;
font-size: 18px;
font-size: 16px;
color: #ffffff;
font-family: "DIN-Medium-2.otf";
text-shadow: 0 0 10px #278873, 0 0 10px #278873, 0 0 30px #278873,
0 0 50px #278873;
}
.value-lable {
font-size: 15px;
font-size: 14px;
color: #30ecf9;
font-family: "Alibaba-PuHuiTi-Medium.otf";
}

21
src/views/components/IndexModel/left.vue
Unescape View File

@ -60,39 +60,34 @@ export default {
<style lang="scss" scoped>
.model-left {
flex: 1;
padding: 25px 0;
padding: 15px 0;
display: flex;
flex-direction: column;
overflow: hidden;
.community-table {
margin-top: 20px;
height: 290px;
border: 1px solid #1b4296;
border-radius: 6px;
display: flex;
flex-direction: column;
overflow: hidden;
.table-row {
flex: 1;
display: flex;
align-items: center;
font-family: "Alibaba-PuHuiTi-Regular.otf";
border-bottom: 1px solid #1b4296;
.row-lable {
padding: 7px 0;
padding: 5px 0;
width: 30%;
text-align: center;
font-size: 15px;
font-size: 14px;
color: #00ff9c;
border-right: 1px solid #1b4296;
overflow: hidden;
}
.row-value {
padding: 7px;
padding: 5px;
flex: 1;
font-size: 15px;
font-size: 14px;
color: #d3e9ff;
}
}
@ -103,8 +98,8 @@ export default {
.introduce-content {
flex: 1;
box-sizing: border-box;
margin-top: 20px;
padding: 35px 15px;
margin-top: 15px;
padding: 30px 15px;
padding-right: 0;
background: url("~@/assets/images/ui/introduce-text.png");
background-size: 100% 100%;

2
src/views/components/IndexModel/right.vue
Unescape View File

@ -21,7 +21,7 @@ export default {
<style lang="scss" scoped>
.model-right {
flex: 1;
padding: 25px 0;
padding: 15px 0;
display: flex;
flex-direction: column;
overflow: hidden;

2
src/views/components/foldpanelLeft/index.vue
Unescape View File

@ -60,7 +60,7 @@ export default {
z-index: 10;
height: 100%;
box-sizing: border-box;
padding-top: 110px;
padding-top: 100px;
cursor: pointer;
background: url("~@/assets/images/ui/panel_left.png");
background-size: 100% 100%;

2
src/views/components/foldpanelRight/index.vue
Unescape View File

@ -52,7 +52,7 @@ export default {
z-index: 10;
height: 100%;
box-sizing: border-box;
padding-top: 110px;
padding-top: 100px;
cursor: pointer;
background: url("~@/assets/images/ui/panel_right.png");
background-size: 100% 100%;

153
src/views/index.vue
Unescape View File

@ -7,8 +7,8 @@
<foldpanelRight>
<IndexModelRight />
</foldpanelRight>
<LeafletMap>
<mars-map @mapLoad="mapLoad" :options="options"></mars-map>
<!-- <LeafletMap>
<template #select>
<div class="select-search">
<el-select
@ -45,11 +45,12 @@
</el-select>
</div>
</template>
</LeafletMap>
</LeafletMap> -->
</div>
</template>
<script>
import MarsMap from "@/components/mars-map";
import NavigationBar from "@/components/NavigationBar/index.vue";
import { mapGetters } from "vuex";
import {
@ -58,27 +59,68 @@ import {
foldpanelRight,
IndexModelRight,
} from "@/views/components/index.js";
import LeafletMap from "@/components/LeafletMap";
// import LeafletMap from "@/components/LeafletMap";
import { getCommunitylist, getXiaoqulist } from "@/api/taicangpop/data.js";
export default {
name: "Index",
computed: {
...mapGetters(["dept", "xiaoquIntroduce"]),
},
components: {
MarsMap,
NavigationBar,
foldpanelLeft,
IndexModelLeft,
foldpanelRight,
IndexModelRight,
LeafletMap,
// LeafletMap,
},
data() {
const basePathUrl = window.basePathUrl || "";
return {
options: {
scene: {
center: {
lat: 31.378424,
lng: 121.121825,
alt: 15419.6,
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",
};
},
@ -94,6 +136,105 @@ export default {
this.$store.dispatch("GetcolorList");
},
methods: {
mapLoad(map) {
let _this = this;
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();
}
});
});
this.addLayer();
this.addstreet();
this.addShequ();
},
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({
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,
color: "#fff",
outline: true,
outlineColor: "#111",
outlineOpacity: 0.5,
outlineWidth: 3,
hasPixelOffset: true,
pixelOffsetY: -2,
// 视距的设置
scaleByDistance: true,
scaleByDistance_far: 20000000,
scaleByDistance_farValue: 0.1,
scaleByDistance_near: 1000,
scaleByDistance_nearValue: 1,
},
},
});
this.mapLayer.shequ.addGraphic(polygonEntity);
});
});
},
//创建图层到map
addLayer() {
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;
this.$store.dispatch("GetXiaoquInfo", e);
@ -150,7 +291,7 @@ export default {
position: relative;
height: 100%;
box-sizing: border-box;
background: url("~@/assets/images/ui/index_bg.jpg");
// background: url("~@/assets/images/ui/index_bg.jpg");
background-size: 100% 100%;
overflow: hidden;
}

Write Preview
Loading…
Cancel
Save