|
|
|
|
@ -0,0 +1,579 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="btna">
|
|
|
|
|
<!-- -->
|
|
|
|
|
<el-button type="primary" :icon="collapsechange ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline '"
|
|
|
|
|
@click="collapsechange = !collapsechange">
|
|
|
|
|
{{ collapsechange ? '收起' : ' 展开' }}
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="box1" v-if="collapsechange">
|
|
|
|
|
<div class="titlestyle">{{ leafletitle }}分布</div>
|
|
|
|
|
<div id="leafletMap" class="leafletMap"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box2" id="box2" v-if="collapsechange">
|
|
|
|
|
<div class="titlestyle">{{ echartstitle }}统计</div>
|
|
|
|
|
<div class="echarts" id="echarts"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import cityJson from "@/utils/mapJson/liaoning-city.json";
|
|
|
|
|
import cityCenter from "@/utils/mapJson/cityCenter.json";
|
|
|
|
|
import province from "@/utils/mapJson/liaoning-province.json";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import elementResizeDetectorMaker from 'element-resize-detector'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'MapCars',
|
|
|
|
|
components: {},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
collapsechange: true,
|
|
|
|
|
cityData: {
|
|
|
|
|
沈阳市: 0,
|
|
|
|
|
大连市: 0,
|
|
|
|
|
鞍山市: 0,
|
|
|
|
|
抚顺市: 0,
|
|
|
|
|
本溪市: 0,
|
|
|
|
|
丹东市: 0,
|
|
|
|
|
锦州市: 0,
|
|
|
|
|
营口市: 0,
|
|
|
|
|
阜新市: 0,
|
|
|
|
|
辽阳市: 0,
|
|
|
|
|
盘锦市: 0,
|
|
|
|
|
铁岭市: 0,
|
|
|
|
|
朝阳市: 0,
|
|
|
|
|
葫芦岛市: 0,
|
|
|
|
|
沈抚示范区: 0,
|
|
|
|
|
},
|
|
|
|
|
allInspector: 0,
|
|
|
|
|
//字典
|
|
|
|
|
dict: {},
|
|
|
|
|
legendList: [
|
|
|
|
|
{ color: "#28599C", text: ">=600" },
|
|
|
|
|
{ color: "#3477B2", text: "400-599" },
|
|
|
|
|
{ color: "#4499CE", text: "200-399" },
|
|
|
|
|
{ color: "#59BBEC", text: "100-199" },
|
|
|
|
|
{ color: "#9BD3F5", text: "1-99" },
|
|
|
|
|
{ color: "#C5F0FF", text: "0" },
|
|
|
|
|
],
|
|
|
|
|
globalMap: null,
|
|
|
|
|
latitude: "40.904726971438656",
|
|
|
|
|
longitude: "122.80196410332945",
|
|
|
|
|
zoom: 8,
|
|
|
|
|
maxZoom: 18,
|
|
|
|
|
minZoom: 6,
|
|
|
|
|
layerObj: {
|
|
|
|
|
provinceLayer: null,
|
|
|
|
|
cityLayer: null,
|
|
|
|
|
textLayer1: null,
|
|
|
|
|
},
|
|
|
|
|
mylayer: null,
|
|
|
|
|
myChart: null,
|
|
|
|
|
mygeojson: null,
|
|
|
|
|
mystort: null,
|
|
|
|
|
mystortTow: null,
|
|
|
|
|
chartData: ["其他"],
|
|
|
|
|
chartDatatow: [
|
|
|
|
|
{ value: 10, name: '其他' },
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
leafletitle: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '档案'
|
|
|
|
|
},
|
|
|
|
|
echartstitle: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '档案'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
created() { },
|
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
this.mystort = this.$store.getters.usersort
|
|
|
|
|
this.mystortTow = this.$store.getters.usersort
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
// this.mycharts();
|
|
|
|
|
// this.mycharts()
|
|
|
|
|
this.isEcharts()
|
|
|
|
|
this.isLefleat()
|
|
|
|
|
});
|
|
|
|
|
// 监听窗口大小变化事件
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
async isEcharts() {
|
|
|
|
|
console.log(this.leafletitle);
|
|
|
|
|
this.chartDatatow = []
|
|
|
|
|
this.chartData = []
|
|
|
|
|
if (this.leafletitle == "医疗器械") {
|
|
|
|
|
console.log(777, this.mystortTow);
|
|
|
|
|
let msg1 = await this.$api.apparatus.typecount({ area: this.mystortTow });
|
|
|
|
|
if (msg1.code == 200) {
|
|
|
|
|
console.log(msg1.data);
|
|
|
|
|
|
|
|
|
|
msg1.data.forEach(item => {
|
|
|
|
|
let obj = {
|
|
|
|
|
value: item.count,
|
|
|
|
|
name: item.cplb,
|
|
|
|
|
}
|
|
|
|
|
this.chartDatatow.push(obj)
|
|
|
|
|
this.chartData.push(item.cplb)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
} else if(this.leafletitle == "药品") {
|
|
|
|
|
this.chartData = ["中药",'生物制品','化学药品']
|
|
|
|
|
this.chartDatatow = [
|
|
|
|
|
{ value: 100, name: '中药' },
|
|
|
|
|
{ value: 120, name: '生物制品' },
|
|
|
|
|
{ value: 130, name: '化学药品' },
|
|
|
|
|
]
|
|
|
|
|
}else if(this.leafletitle == "化妆品") {
|
|
|
|
|
this.chartData = ["国产化妆品",'国产特殊化妆品','进口化妆品','进口特殊化妆品']
|
|
|
|
|
this.chartDatatow = [
|
|
|
|
|
{ value: 100, name: '国产化妆品' },
|
|
|
|
|
{ value: 120, name: '国产特殊化妆品' },
|
|
|
|
|
{ value: 130, name: '进口化妆品' },
|
|
|
|
|
{ value: 140, name: '进口特殊化妆品' },
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (this.leafletitle == "药品") {
|
|
|
|
|
// let msg1 = await this.$api.apparatus.vRdgYpwhGxwztypecount({ area: this.mystortTow });
|
|
|
|
|
// if (msg1.code == 200) {
|
|
|
|
|
// console.log(msg1.data);
|
|
|
|
|
// msg1.data.forEach(item => {
|
|
|
|
|
// let obj = {
|
|
|
|
|
// value: item.count,
|
|
|
|
|
// name: item.ypfl,
|
|
|
|
|
// }
|
|
|
|
|
// this.chartDatatow.push(obj)
|
|
|
|
|
// this.chartData.push(item.ypfl)
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
this.mycharts()
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
async isLefleat() {
|
|
|
|
|
if (this.leafletitle == "医疗器械") {
|
|
|
|
|
let msg2 = await this.$api.apparatus.ylqxJnyelcpareacount();
|
|
|
|
|
if (msg2.code == 200) {
|
|
|
|
|
console.log(msg2.data);
|
|
|
|
|
msg2.data.forEach(item => {
|
|
|
|
|
this.cityData[item.area] = item.count
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
console.log(this.cityData);
|
|
|
|
|
this.initMap()
|
|
|
|
|
} else if (this.leafletitle == "药品") {
|
|
|
|
|
let msg2 = await this.$api.apparatus.vRdgYpwhGxwztareacount()
|
|
|
|
|
if (msg2.code == 200) {
|
|
|
|
|
console.log(msg2.data);
|
|
|
|
|
msg2.data.forEach(item => {
|
|
|
|
|
this.cityData[item.area] = item.count
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
console.log(this.cityData);
|
|
|
|
|
this.initMap()
|
|
|
|
|
} else {
|
|
|
|
|
this.initMap()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mycharts() {
|
|
|
|
|
this.myChart = echarts.init(document.getElementById("echarts"));
|
|
|
|
|
let option = {
|
|
|
|
|
// title: {
|
|
|
|
|
// text: '天气情况统计',
|
|
|
|
|
// subtext: '虚构数据',
|
|
|
|
|
// left: 'center'
|
|
|
|
|
// },
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: "{b} : {c} ({d}%)"
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
|
|
|
|
|
type: 'scroll', // 设置图例分页滚动显示
|
|
|
|
|
orient: 'vertical', // 设置图例垂直排列
|
|
|
|
|
right: '20', // 将图例放到左侧
|
|
|
|
|
top: 'center',
|
|
|
|
|
itemWidth: 20, // 设置图例标记的宽度
|
|
|
|
|
itemHeight: 20, // 设置图例标记的高度
|
|
|
|
|
itemGap: 10,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: '14px'
|
|
|
|
|
},
|
|
|
|
|
formatter: function (name) {
|
|
|
|
|
// 获取数据
|
|
|
|
|
let chartData = option.series[0].data;
|
|
|
|
|
let total = 0;
|
|
|
|
|
for (let i = 0; i < chartData.length; i++) {
|
|
|
|
|
total += chartData[i].value; // 计算总数
|
|
|
|
|
}
|
|
|
|
|
let value = 0;
|
|
|
|
|
for (let i = 0; i < chartData.length; i++) {
|
|
|
|
|
if (chartData[i].name === name) {
|
|
|
|
|
value = chartData[i].value; // 获取当前图例项对应的值
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
let percent = ((value / total) * 100).toFixed(2) + '%'; // 计算百分比
|
|
|
|
|
// 返回格式化的内容
|
|
|
|
|
return `${name} ${value} ${percent}`;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data: this.chartData,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['25%', '70%'],
|
|
|
|
|
center: ['35%', '50%'],
|
|
|
|
|
selectedMode: 'single',
|
|
|
|
|
roseType: 'radius',
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
position: 'outside',
|
|
|
|
|
formatter: '{b}: {d}%'
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
normal: {
|
|
|
|
|
length: 15,
|
|
|
|
|
length2: 10,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#333'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: this.chartDatatow,
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
emphasis: {
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
shadowOffsetX: 0,
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
|
|
},
|
|
|
|
|
normal: {
|
|
|
|
|
color: function (params) {
|
|
|
|
|
// 颜色变浅
|
|
|
|
|
var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B'];
|
|
|
|
|
return colorList[params.dataIndex % colorList.length];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 添加内圆
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['0%', '20%'],
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
hoverAnimation: false, // 禁用鼠标悬停动画
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
[{ value: 2702, name: '总量' }]
|
|
|
|
|
],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: 'transparent',
|
|
|
|
|
borderColor: '#ccc',
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.myChart.setOption(option, true);
|
|
|
|
|
let erd = elementResizeDetectorMaker();
|
|
|
|
|
let that = this;
|
|
|
|
|
erd.listenTo(document.getElementById("echarts"), function (element) {
|
|
|
|
|
that.myChart.resize();
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
initMap() {
|
|
|
|
|
this.globalMap = L.map("leafletMap", {
|
|
|
|
|
center: [this.latitude, this.longitude], // 地图中心[纬度，经度]
|
|
|
|
|
zoom: this.zoom,
|
|
|
|
|
maxZoom: this.maxZoom,
|
|
|
|
|
minZoom: this.minZoom,
|
|
|
|
|
zoomControl: true, // 放大缩小按钮
|
|
|
|
|
attributionControl: false, // 右下角leaflet图标
|
|
|
|
|
dragging: false,
|
|
|
|
|
doubleClickZoom: false,
|
|
|
|
|
scrollWheelZoom: false,
|
|
|
|
|
dragging: true,
|
|
|
|
|
});
|
|
|
|
|
// 省
|
|
|
|
|
this.globalMap.createPane("provinceLayer");
|
|
|
|
|
this.globalMap.getPane("provinceLayer").style.zIndex = 504;
|
|
|
|
|
this.globalMap.getPane("provinceLayer").style.pointerEvents = "none";
|
|
|
|
|
this.layerObj.provinceLayer = L.layerGroup().addTo(this.globalMap);
|
|
|
|
|
//市
|
|
|
|
|
this.globalMap.createPane("cityLayer");
|
|
|
|
|
this.globalMap.getPane("cityLayer").style.zIndex = 505;
|
|
|
|
|
this.globalMap.getPane("cityLayer").style.pointerEvents = "none";
|
|
|
|
|
this.layerObj.cityLayer = L.layerGroup().addTo(this.globalMap);
|
|
|
|
|
|
|
|
|
|
this.globalMap.createPane("textLayer1");
|
|
|
|
|
this.globalMap.getPane("textLayer1").style.zIndex = 506;
|
|
|
|
|
this.globalMap.getPane("textLayer1").style.pointerEvents = "none";
|
|
|
|
|
this.layerObj.textLayer1 = L.layerGroup().addTo(this.globalMap);
|
|
|
|
|
|
|
|
|
|
this.provinceLayer();
|
|
|
|
|
this.initCityLayer(this.cityData);
|
|
|
|
|
this.initPoitCenter(this.cityData);
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
//省级图层
|
|
|
|
|
provinceLayer() {
|
|
|
|
|
let mygeojson = L.geoJSON(province, {
|
|
|
|
|
style: function () {
|
|
|
|
|
return {
|
|
|
|
|
weight: 2,
|
|
|
|
|
color: "#36527D",
|
|
|
|
|
fillColor: "",
|
|
|
|
|
fillOpacity: 1,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
}).addTo(this.layerObj.provinceLayer);
|
|
|
|
|
this.globalMap.fitBounds(mygeojson.getBounds());
|
|
|
|
|
},
|
|
|
|
|
showinitCityLayer() {
|
|
|
|
|
this.initCityLayer(this.cityData)
|
|
|
|
|
this.mystortTow = this.$store.getters.usersort
|
|
|
|
|
this.isEcharts()
|
|
|
|
|
// this.isLefleat()
|
|
|
|
|
},
|
|
|
|
|
// 市级图层
|
|
|
|
|
initCityLayer(data) {
|
|
|
|
|
console.log(798, data);
|
|
|
|
|
let _this = this;
|
|
|
|
|
let geojson = L.geoJSON(cityJson, {
|
|
|
|
|
onEachFeature: function onEachFeature(feature, layer) {
|
|
|
|
|
if (this.mystort) {
|
|
|
|
|
layer.on({
|
|
|
|
|
// mouseover: thit.highlightFeature,
|
|
|
|
|
// mouseout: function resetHighlight(e) {
|
|
|
|
|
// geojson.resetStyle(e.target);
|
|
|
|
|
// },
|
|
|
|
|
click: function zoomToFeature(e) {
|
|
|
|
|
_this.highlightFeature(e, geojson)
|
|
|
|
|
console.log(feature);
|
|
|
|
|
_this.$emit('arealist', feature.properties.name)
|
|
|
|
|
_this.mystortTow = feature.properties.name
|
|
|
|
|
_this.isEcharts()
|
|
|
|
|
// thit.globalMap.fitBounds(geojson.getBounds());
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
layer.on({
|
|
|
|
|
// mouseover: thit.highlightFeature,
|
|
|
|
|
// mouseout: function resetHighlight(e) {
|
|
|
|
|
// geojson.resetStyle(e.target);
|
|
|
|
|
// },
|
|
|
|
|
click: function zoomToFeature(e) {
|
|
|
|
|
_this.highlightFeature(e, geojson)
|
|
|
|
|
console.log(feature);
|
|
|
|
|
_this.$emit('arealist', feature.properties.name)
|
|
|
|
|
_this.mystortTow = feature.properties.name
|
|
|
|
|
_this.isEcharts()
|
|
|
|
|
// thit.globalMap.fitBounds(geojson.getBounds());
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// if (feature.properties.name == this.mystort) {
|
|
|
|
|
// layer.on({
|
|
|
|
|
// // mouseover: thit.highlightFeature,
|
|
|
|
|
// // mouseout: function resetHighlight(e) {
|
|
|
|
|
// // geojson.resetStyle(e.target);
|
|
|
|
|
// // },
|
|
|
|
|
// click: function zoomToFeature(e) {
|
|
|
|
|
// _this.highlightFeature(e, geojson)
|
|
|
|
|
// console.log(feature);
|
|
|
|
|
// // thit.globalMap.fitBounds(geojson.getBounds());
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
style: (geoJsonFeature) => {
|
|
|
|
|
let num = data[geoJsonFeature.properties.name];
|
|
|
|
|
let style = {
|
|
|
|
|
weight: 0.5,
|
|
|
|
|
color: "#fff",
|
|
|
|
|
fillColor: "#87CEEB",
|
|
|
|
|
fillOpacity: 1,
|
|
|
|
|
};
|
|
|
|
|
if (geoJsonFeature.properties.name == this.mystort) {
|
|
|
|
|
style.fillColor = "#FFFF00";
|
|
|
|
|
}
|
|
|
|
|
// if (num == 0) {
|
|
|
|
|
// style.fillColor = "#C5F0FF";
|
|
|
|
|
// } else if (num >= 1 && num <= 99) {
|
|
|
|
|
// style.fillColor = "#9BD3F5";
|
|
|
|
|
// } else if (num >= 100 && num <= 199) {
|
|
|
|
|
// style.fillColor = "#59BBEC";
|
|
|
|
|
// } else if (num >= 200 && num <= 399) {
|
|
|
|
|
// style.fillColor = "#4499CE";
|
|
|
|
|
// } else if (num >= 400 && num <= 599) {
|
|
|
|
|
// style.fillColor = "#3477B2";
|
|
|
|
|
// } else {
|
|
|
|
|
// style.fillColor = "#28599C";
|
|
|
|
|
// }
|
|
|
|
|
return style;
|
|
|
|
|
},
|
|
|
|
|
}).addTo(this.layerObj.cityLayer);
|
|
|
|
|
|
|
|
|
|
// 市中心点
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
initPoitCenter(data) {
|
|
|
|
|
let ismyobj = {
|
|
|
|
|
"沈阳市": "稽查一处",
|
|
|
|
|
"大连市": "稽查二处",
|
|
|
|
|
"鞍山市": "稽查三处",
|
|
|
|
|
"抚顺市": "稽查四处",
|
|
|
|
|
"本溪市": "稽查五处",
|
|
|
|
|
"丹东市": "稽查六处",
|
|
|
|
|
"锦州市": "稽查七处",
|
|
|
|
|
"营口市": "稽查八处",
|
|
|
|
|
"阜新市": "稽查九处",
|
|
|
|
|
"辽阳市": "稽查十处",
|
|
|
|
|
"铁岭市": "稽查十一处",
|
|
|
|
|
"朝阳市": "稽查十二处",
|
|
|
|
|
"盘锦市": "稽查十三处",
|
|
|
|
|
"葫芦岛市": "稽查十四处"
|
|
|
|
|
}
|
|
|
|
|
L.geoJSON(cityCenter, {
|
|
|
|
|
pointToLayer: (feature, latlng) => {
|
|
|
|
|
if (!this.mystort && feature.properties.fName != '沈抚示范区') {
|
|
|
|
|
return L.marker(latlng, {
|
|
|
|
|
icon: L.divIcon({
|
|
|
|
|
className: "city-marker",
|
|
|
|
|
html: `<div class="marker-data">
|
|
|
|
|
<div class="data-box">
|
|
|
|
|
${data[feature.properties.fName]}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="circle"></div>
|
|
|
|
|
<div class="city-name">${ismyobj[feature.properties.fName]}</div>
|
|
|
|
|
<div class="city-name">（${feature.properties.fName}）</div>
|
|
|
|
|
</div>`,
|
|
|
|
|
}),
|
|
|
|
|
});
|
|
|
|
|
} else if (feature.properties.fName == this.mystort && feature.properties.fName != '沈抚示范区') {
|
|
|
|
|
return L.marker(latlng, {
|
|
|
|
|
icon: L.divIcon({
|
|
|
|
|
className: "city-marker",
|
|
|
|
|
html: `<div class="marker-data" >
|
|
|
|
|
<div class="data-box">
|
|
|
|
|
${data[feature.properties.fName]}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="circle"></div>
|
|
|
|
|
<div class="city-name">${ismyobj[feature.properties.fName]}</div>
|
|
|
|
|
<div class="city-name">（${feature.properties.fName}）</div>
|
|
|
|
|
</div>`,
|
|
|
|
|
}),
|
|
|
|
|
});
|
|
|
|
|
} else if (feature.properties.fName != '沈抚示范区') {
|
|
|
|
|
return L.marker(latlng, {
|
|
|
|
|
icon: L.divIcon({
|
|
|
|
|
className: "city-marker",
|
|
|
|
|
html: `<div class="marker-data">
|
|
|
|
|
|
|
|
|
|
<div class="circle"></div>
|
|
|
|
|
<div class="city-name">${feature.properties.fName}</div>
|
|
|
|
|
</div>`,
|
|
|
|
|
}),
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
}).addTo(this.layerObj.textLayer1);
|
|
|
|
|
},
|
|
|
|
|
highlightFeature(e, geojson) {
|
|
|
|
|
if (this.mylayer) {
|
|
|
|
|
geojson.resetStyle(this.mylayer);
|
|
|
|
|
}
|
|
|
|
|
this.mylayer = e.target;
|
|
|
|
|
this.mylayer.setStyle({
|
|
|
|
|
weight: 0.3,
|
|
|
|
|
color: "#000",
|
|
|
|
|
dashArray: "",
|
|
|
|
|
fillOpacity: 1,
|
|
|
|
|
fillColor: "#FFFF00"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.mylayer.bringToFront();
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
computed: {}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang='scss'>
|
|
|
|
|
.box {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.btna {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 20px;
|
|
|
|
|
top: -40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.echarts {
|
|
|
|
|
width: 45vw;
|
|
|
|
|
height: 50vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box1 {
|
|
|
|
|
width: 45vw;
|
|
|
|
|
height: 50vh;
|
|
|
|
|
|
|
|
|
|
.leafletMap {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
/* 水平居中 */
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .leaflet-map-pane {}
|
|
|
|
|
|
|
|
|
|
.titlestyle {
|
|
|
|
|
padding: 0 0 0 10px;
|
|
|
|
|
margin: 0 0 0 20px;
|
|
|
|
|
border-left: 5px solid #1e80eb;
|
|
|
|
|
color: #1e80eb;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
