<template>
|
<div class="box">
|
<!-- <mapview></mapview> -->
|
<div v-show="contLeft" class="content left">
|
<div class="layout">
|
<div id="LEFT1_1" class="layout_box">
|
<left1_1></left1_1>
|
<left1_2></left1_2>
|
</div>
|
<div class="layout_box">
|
<left2_1></left2_1>
|
</div>
|
</div>
|
</div>
|
<div class="content center">
|
<div id="SenceChange">
|
<ul id="senceli">
|
<li>农业园区</li>
|
<li>医疗机构</li>
|
</ul>
|
</div>
|
<div v-show="FullOpen" id="fullopen" @click="fullopen"></div>
|
<div v-show="FullClose" id="fullclose" @click="fullclose"></div>
|
<div id="MapView"></div>
|
</div>
|
<div v-show="contLeft" class="content right">
|
<div class="layout">
|
<div id="LEFT1_1" class="layout_box">
|
<right1_1></right1_1>
|
<right1_2></right1_2>
|
</div>
|
<div class="layout_box">
|
<right2_1></right2_1>
|
<right2_2></right2_2>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import left1_1 from "./left/left1-1.vue";
|
import left1_2 from "./left/left1-2.vue";
|
import left2_1 from "./left/left2-1.vue";
|
import right1_1 from "./right/right1-1.vue";
|
import right1_2 from "./right/right1-2.vue";
|
import right2_1 from "./right/right2-1.vue";
|
import right2_2 from "./right/right2-2.vue";
|
// import mapview from "../../../src/components/MapView.vue";
|
import { loadModules } from "esri-loader";
|
import AGCUPARK from "../../assets/json/AgriculturalPark.json";
|
import PROBASE from "../../assets/json/value2.json";
|
import $ from "jquery";
|
var map;
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
left1_1,
|
left1_2,
|
left2_1,
|
right1_1,
|
right1_2,
|
right2_1,
|
right2_2,
|
// mapview,
|
},
|
data() {
|
//这里存放数据
|
return {
|
contLeft: true,
|
FullOpen: true,
|
FullClose: false,
|
image: require("../../assets/img/YLJG.png"),
|
};
|
},
|
//方法集合
|
methods: {
|
fullclose() {
|
this.contLeft = true;
|
this.FullOpen = true;
|
this.FullClose = false;
|
document.getElementById("SenceChange").style.left = "62%";
|
},
|
fullopen() {
|
this.contLeft = false;
|
this.FullOpen = false;
|
this.FullClose = true;
|
document.getElementById("SenceChange").style.left = "95%";
|
},
|
createView() {
|
var value1 = AGCUPARK.features;
|
var value2 = PROBASE.features;
|
console.log(value2);
|
var image = this.image;
|
let options = {
|
url: "https://js.arcgis.com/3.38/",
|
css: "https://js.arcgis.com/3.38/esri/css/esri.css",
|
};
|
|
loadModules(
|
[
|
"esri/map",
|
"esri/layers/ArcGISTiledMapServiceLayer",
|
"esri/layers/ArcGISDynamicMapServiceLayer",
|
"esri/layers/GraphicsLayer",
|
"esri/graphic",
|
"esri/symbols/SimpleLineSymbol",
|
"esri/symbols/SimpleFillSymbol",
|
"dojo/colors",
|
"esri/toolbars/draw",
|
"esri/symbols/SimpleMarkerSymbol",
|
"esri/geometry/Polygon",
|
"esri/dijit/Popup",
|
"dojo/dom-class",
|
"dojo/dom-construct",
|
"esri/InfoTemplate",
|
"esri/symbols/PictureMarkerSymbol",
|
"esri/geometry/Point",
|
"dojo/domReady!",
|
],
|
options
|
).then(
|
([
|
Map,
|
ArcGISTiledMapServiceLayer,
|
ArcGISDynamicMapServiceLayer,
|
GraphicsLayer,
|
Graphic,
|
SimpleLineSymbol,
|
SimpleFillSymbol,
|
Color,
|
Draw,
|
SimpleMarkerSymbol,
|
Polygon,
|
Popup,
|
domClass,
|
domConstruct,
|
InfoTemplate,
|
PictureMarkerSymbol,
|
Point,
|
]) => {
|
var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
|
var popup = new Popup(
|
{
|
fillSymbol: fill,
|
titleInBody: false,
|
},
|
domConstruct.create("div")
|
);
|
map = new Map("MapView", {
|
slider: false,
|
logo: false,
|
infoWindow: popup,
|
});
|
|
var TileLayerOptions = {
|
id: "dzdt",
|
opacity: 1,
|
showAttribution: false,
|
};
|
var url =
|
"http://172.16.0.28:6080/arcgis/rest/services/2021/2021_SGMAP_CGCS2000_JQ/MapServer";
|
var layer1 = new ArcGISTiledMapServiceLayer(url, TileLayerOptions);
|
map.addLayer(layer1);
|
map.centerAndZoom(
|
{
|
x: 118.74986854980213,
|
y: 36.87927616901776,
|
spatialReference: {
|
wkid: 4490,
|
},
|
},
|
15
|
);
|
var polygon = new GraphicsLayer();
|
var pointer = new GraphicsLayer();
|
map.addLayer(polygon);
|
map.addLayer(pointer);
|
polygon.hide();
|
pointer.hide();
|
var polygonfille = new SimpleFillSymbol(
|
SimpleFillSymbol.STYLE_SOLID,
|
new SimpleLineSymbol(
|
SimpleLineSymbol.STYLE_SOLID,
|
new Color([0, 0, 0]),
|
0.4
|
),
|
new Color([212, 247, 200, 0.5])
|
);
|
var pointfille = new PictureMarkerSymbol(image, 30, 30);
|
for (var i in value1) {
|
var infoTemplate = new InfoTemplate("${园区名称}");
|
var result = new Polygon(value1[i].geometry.rings);
|
var graphic = new Graphic(
|
result,
|
polygonfille,
|
value1[i].attributes,
|
infoTemplate
|
);
|
polygon.add(graphic);
|
}
|
|
for (var j in value2) {
|
var infoTemplate1 = new InfoTemplate("${名称}");
|
var result1 = new Point(value2[j].geometry.x, value2[j].geometry.y);
|
|
var graphic1 = new Graphic(
|
result1,
|
pointfille,
|
value2[j].attributes,
|
infoTemplate1
|
);
|
pointer.add(graphic1);
|
}
|
|
var flag1 = 0;
|
var flag2 = 0;
|
$("#SenceChange li").on("click", function (e) {
|
var value = e.target.innerText;
|
var content = document.getElementById("senceli");
|
var items = content.getElementsByTagName("li");
|
if (value == items[0].innerText) {
|
if (flag1 == 0) {
|
polygon.show();
|
flag1 = 1;
|
} else {
|
polygon.hide();
|
flag1 = 0;
|
}
|
} else if (value == items[1].innerText) {
|
if (flag2 == 0) {
|
pointer.show();
|
flag2 = 1;
|
} else {
|
pointer.hide();
|
flag2 = 0;
|
}
|
}
|
});
|
}
|
);
|
},
|
},
|
mounted() {
|
this.createView();
|
},
|
created() {},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.box {
|
width: 100%;
|
// height: 2624px;
|
height: 100vh;
|
overflow: hidden;
|
position: relative;
|
|
display: flex;
|
|
.content {
|
font-size: 80px;
|
width: 4616px;
|
|
background-size: 100% 100%;
|
padding: 0 102px;
|
box-sizing: border-box;
|
height: 100%;
|
|
.layout {
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
|
.layout_box {
|
width: 49%;
|
height: 100%;
|
}
|
}
|
}
|
#MapView {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
padding: 0;
|
}
|
#fullopen {
|
z-index: 30;
|
bottom: 0%;
|
right: 34%;
|
width: 2%;
|
height: 10%;
|
position: absolute;
|
background: url("../../assets/img/fullopen.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
#fullclose {
|
z-index: 30;
|
bottom: 0%;
|
right: 1%;
|
width: 2%;
|
height: 10%;
|
position: absolute;
|
background: url("../../assets/img/fullclose.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
#SenceChange {
|
position: absolute;
|
z-index: 30;
|
top: 10%;
|
left: 62%;
|
}
|
#SenceChange li {
|
list-style: none;
|
padding: 15px;
|
background: rgba(0, 0, 0, 0.23);
|
text-align: center;
|
margin-top: 36%;
|
}
|
.content:nth-child(2) {
|
width: 100%;
|
height: 100%;
|
background-image: none !important;
|
padding-right: 0;
|
padding-left: 0;
|
}
|
|
.left {
|
padding-top: 316px;
|
position: absolute;
|
left: 0;
|
top: 0;
|
z-index: 30;
|
}
|
.right {
|
background-size: 100% 100%;
|
padding-top: 316px;
|
position: absolute;
|
right: 0;
|
top: 0;
|
z-index: 30;
|
}
|
.center {
|
width: 100%;
|
height: 100%;
|
background-image: none !important;
|
padding-right: 0;
|
padding-left: 0;
|
}
|
}
|
|
@media only screen and (max-width: 2560px) {
|
.box {
|
// background-color: #fff;
|
|
height: 100%; //有问题，不能被撑开
|
// height: 200%;
|
#fullopen {
|
height: 5%;
|
right: 28%;
|
}
|
|
#fullclose {
|
height: 5%;
|
}
|
#LEFT1_1 {
|
display: none;
|
}
|
.left {
|
background: rgba(8, 32, 58, 0.7);
|
width: 3800px;
|
}
|
.right {
|
background: rgba(8, 32, 58, 0.7);
|
width: 3800px;
|
}
|
.content {
|
height: 100%;
|
|
.layout {
|
height: 100%;
|
|
.layout_box {
|
height: 100%;
|
width: 100% !important;
|
}
|
.left .layout_box:nth-child(2) {
|
// margin-top: 500px;
|
}
|
}
|
}
|
}
|
}
|
|
@media only screen and (min-width: 6840px) {
|
}
|
</style>
|
