</div> | </div> | ||||
<div class="placeChart" v-if="isPlace"> | <div class="placeChart" v-if="isPlace"> | ||||
<div class="placeTitle">土地利用数据分析</div> | |||||
<div class="placeTitle">疑似污染源统计</div> | |||||
<land-use :dataList="landuseList" :color="landColor"></land-use> | <land-use :dataList="landuseList" :color="landColor"></land-use> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
this.view = new View({ | this.view = new View({ | ||||
// minZoom: 11, | // minZoom: 11, | ||||
maxZoom: 19, | |||||
maxZoom: 18.9, | |||||
zoom: 15, | zoom: 15, | ||||
center: transform([118.89744, 31.889104], "EPSG:4326", "EPSG:3857"), | center: transform([118.89744, 31.889104], "EPSG:4326", "EPSG:3857"), | ||||
}); | }); | ||||
.mapItem { | .mapItem { | ||||
display: flex; | display: flex; | ||||
} | } | ||||
.google .mapText { | |||||
width: 0.8rem; | |||||
} | |||||
.mapText { | .mapText { | ||||
width: 0.6rem; | width: 0.6rem; | ||||
height: 0.24rem; | height: 0.24rem; | ||||
cursor: pointer; | cursor: pointer; | ||||
} | } | ||||
.google { | .google { | ||||
margin-left: -0.16rem; | |||||
margin-left: -0.06rem; | |||||
} | |||||
.google .mapText { | |||||
width: 0.8rem; | |||||
} | } | ||||
#changeMap input { | #changeMap input { | ||||
display: none; | display: none; |
}, | }, | ||||
}); | }); | ||||
chart.coordinate("theta", { | chart.coordinate("theta", { | ||||
radius: 0.55, | |||||
innerRadius: 0.6, | |||||
radius: 0.65, | |||||
innerRadius: 0.7, | |||||
}); | }); | ||||
chart.tooltip({ | chart.tooltip({ | ||||
showTitle: false, | showTitle: false, | ||||
// 辅助文本 | // 辅助文本 | ||||
chart | chart | ||||
.annotation() // 注释 | .annotation() // 注释 | ||||
// .text({ | |||||
// position: ["50%", "50%"], | |||||
// content: "疑似污染源", | |||||
// style: { | |||||
// fontSize: 12, | |||||
// fill: "#333", | |||||
// textAlign: "center", | |||||
// }, | |||||
// offsetY: -5, | |||||
// }) | |||||
.text({ | .text({ | ||||
position: ["50%", "50%"], | position: ["50%", "50%"], | ||||
content: "土地利用占比", | |||||
content: "单位 ", | |||||
style: { | style: { | ||||
fontSize: 12, | fontSize: 12, | ||||
fill: "#333", | fill: "#333", | ||||
textAlign: "center", | textAlign: "center", | ||||
}, | }, | ||||
offsetY: -5, | |||||
}) | |||||
.text({ | |||||
position: ["50%", "50%"], | |||||
content: "单位:", | |||||
style: { | |||||
fontSize: 10, | |||||
fill: "#333", | |||||
textAlign: "center", | |||||
}, | |||||
offsetX: -10, | offsetX: -10, | ||||
offsetY: 20, | |||||
offsetY: 0, | |||||
}) | }) | ||||
.text({ | .text({ | ||||
position: ["50%", "50%"], | position: ["50%", "50%"], | ||||
content: "公顷", | |||||
content: " (公顷)", | |||||
style: { | style: { | ||||
fontSize: 10, | |||||
fontSize: 12, | |||||
fill: "#333", | fill: "#333", | ||||
textAlign: "center", | textAlign: "center", | ||||
}, | }, | ||||
offsetY: 20, | |||||
offsetY: 0, | |||||
offsetX: 15, | offsetX: 15, | ||||
}); | }); | ||||
chart | chart |
<div id="placeComponent"> | <div id="placeComponent"> | ||||
<!-- 点数据 --> | <!-- 点数据 --> | ||||
<p class="popupNav"> | <p class="popupNav"> | ||||
<span class="title">土地利用详情</span> | |||||
<span class="title">疑似污染源详情</span> | |||||
<img class="closePopup" src="../../assets/img/gisdemo/close.png" alt="" @click="closeOverlay"> | <img class="closePopup" src="../../assets/img/gisdemo/close.png" alt="" @click="closeOverlay"> | ||||
</p> | </p> | ||||
<ul class="paramsList"> | <ul class="paramsList"> | ||||
<li class="placeValue">用地类型:{{dataList.lc}}</li> | |||||
<li class="placeValue">占地面积为:{{(parseFloat(dataList.area)/10000).toFixed(2)}}公顷</li> | |||||
<li class="placeValue">土地占比:{{parseFloat(dataList.ratio).toFixed(2)}}%</li> | |||||
<li class="placeValue">污染源类型:{{dataList.lc}}</li> | |||||
<li class="placeValue">面积:{{(parseFloat(dataList.area)/10000).toFixed(2)}}公顷</li> | |||||
<li class="placeValue">占比:{{parseFloat(dataList.ratio).toFixed(2)}}%</li> | |||||
</ul> | </ul> | ||||
<!-- 土地数据 --> | <!-- 土地数据 --> |