|
|
|
|
@ -1,19 +1,295 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="mapcontain"></div>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<!-- 顶部操作栏 -->
|
|
|
|
|
<!-- 内容区域 -->
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
<!-- 右侧地图缩略图 -->
|
|
|
|
|
<div class="map-thumbnail">
|
|
|
|
|
<div id="mars2dContainerSSS" class="mars2d-container"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import 'mars2d/mars2d.css';
|
|
|
|
|
import * as mars2d from 'mars2d';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {},
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
return {
|
|
|
|
|
configUrl: basePathUrl + "config/config.json",
|
|
|
|
|
mapOptions: {
|
|
|
|
|
copyright: false, // 不显示厂商logo
|
|
|
|
|
basemaps: [
|
|
|
|
|
{
|
|
|
|
|
"id": 2021,
|
|
|
|
|
"pid": 10,
|
|
|
|
|
"name": "高德电子",
|
|
|
|
|
"icon": "img/basemaps/gaode_vec.png",
|
|
|
|
|
"type": "gaode",
|
|
|
|
|
"layer": "vec",
|
|
|
|
|
"show": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"pid": 10,
|
|
|
|
|
"name": "高德卫星",
|
|
|
|
|
"icon": "img/basemaps/gaode_img.png",
|
|
|
|
|
"type": "group",
|
|
|
|
|
"layers": [
|
|
|
|
|
{
|
|
|
|
|
"name": "底图",
|
|
|
|
|
"type": "gaode",
|
|
|
|
|
"layer": "img_d"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "注记",
|
|
|
|
|
"type": "gaode",
|
|
|
|
|
"layer": "img_z"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
center: { lat: 31.324918, lng: 120.618391 },
|
|
|
|
|
zoom: 9,
|
|
|
|
|
zoomControl: true,
|
|
|
|
|
},
|
|
|
|
|
map: null, // 地图实例
|
|
|
|
|
markerIcon: require('@/assets/images/detailsicon/icon-定位@2x.png'), // 坐标图icon
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 初始化地图
|
|
|
|
|
initMap() {
|
|
|
|
|
this.map = new mars2d.Map('mars2dContainerSSS', this.mapOptions);
|
|
|
|
|
this.map.on('load', this.onload);
|
|
|
|
|
},
|
|
|
|
|
// 地图加载完成后的回调
|
|
|
|
|
onload() {
|
|
|
|
|
this.addDistrictsLayer();
|
|
|
|
|
},
|
|
|
|
|
// 添加各区图层
|
|
|
|
|
addDistrictsLayer() {
|
|
|
|
|
const geoJsonLayer = new mars2d.layer.GeoJsonLayer({
|
|
|
|
|
name: "苏州市各区",
|
|
|
|
|
url: "http://data.mars2d.cn/file/geojson/areas/100000_full.json",
|
|
|
|
|
symbol: {
|
|
|
|
|
type: "polygon",
|
|
|
|
|
styleOptions: {
|
|
|
|
|
fill: true,
|
|
|
|
|
fillColor: "white",
|
|
|
|
|
fillOpacity: 0.7,
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineWidth: 2,
|
|
|
|
|
outlineOpacity: 1,
|
|
|
|
|
outlineColor: "white"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
tooltip: "{name}<br/>项目数量:{num}个",
|
|
|
|
|
flyTo: true
|
|
|
|
|
});
|
|
|
|
|
this.map.addLayer(geoJsonLayer);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
// 绑定事件
|
|
|
|
|
geoJsonLayer.on(mars2d.EventType.load, (event) => {
|
|
|
|
|
console.log("数据加载完成", event);
|
|
|
|
|
|
|
|
|
|
const arrdata = [
|
|
|
|
|
{ name: "辽宁省", Y: 41.485959939, X: 124.049036594, value: 6, id: 0 },
|
|
|
|
|
{ name: "天津市", Y: 39.292278417, X: 117.337698238, value: 1, id: 1 },
|
|
|
|
|
{ name: "河北省", Y: 38.887537102, X: 115.05608039, value: 3, id: 2 },
|
|
|
|
|
{ name: "山东省", Y: 36.384634338, X: 118.335456608, value: 8, id: 3 },
|
|
|
|
|
{ name: "江苏省", Y: 31.949468221, X: 119.175534669, value: 12, id: 4 },
|
|
|
|
|
{ name: "上海市", Y: 31.205117603, X: 121.507670825, value: 1, id: 5 },
|
|
|
|
|
{ name: "浙江省", Y: 29.249913493, X: 120.438160114, value: 7, id: 6 },
|
|
|
|
|
{ name: "福建省", Y: 26.032479861, X: 118.134283206, value: 4, id: 7 },
|
|
|
|
|
{ name: "广东省", Y: 23.69235645, X: 113.489506429, value: 18, id: 8 },
|
|
|
|
|
{ name: "广西壮族自治区", Y: 23.806009465, X: 108.79016159, value: 6, id: 9 },
|
|
|
|
|
{ name: "海南省", Y: 19.210592585, X: 109.774303805, value: 11, id: 10 },
|
|
|
|
|
{ name: "云南省", Y: 24.224322869, X: 101.862567546, value: 1, id: 11 },
|
|
|
|
|
{ name: "四川省", Y: 30.627387401, X: 102.694776433, value: 2, id: 12 },
|
|
|
|
|
{ name: "重庆市", Y: 30.057271884, X: 107.874570298, value: 1, id: 13 },
|
|
|
|
|
{ name: "湖北省", Y: 30.975494014, X: 112.27112659, value: 14, id: 14 },
|
|
|
|
|
{ name: "湖南省", Y: 27.610006298, X: 111.708571339, value: 2, id: 15 },
|
|
|
|
|
{ name: "江西省", Y: 27.613817395, X: 115.721821513, value: 2, id: 16 },
|
|
|
|
|
{ name: "安徽省", Y: 31.825459619, X: 117.226379045, value: 7, id: 17 },
|
|
|
|
|
{ name: "黑龙江省", Y: 46.951327674, X: 128.132064887, value: 2, id: 18 }
|
|
|
|
|
];
|
|
|
|
|
this.bindYewuData(event.graphics, arrdata);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 绑定事件
|
|
|
|
|
geoJsonLayer.on(mars2d.EventType.click, (event) => {
|
|
|
|
|
const graphic = event.graphic;
|
|
|
|
|
this.map.fitBounds(graphic.getBounds());
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
geoJsonLayer.on(mars2d.EventType.mouseover, (event) => {
|
|
|
|
|
const graphic = event.graphic;
|
|
|
|
|
graphic.setStyle({
|
|
|
|
|
outlineColor: "#666",
|
|
|
|
|
outlineWidth: 3,
|
|
|
|
|
fillOpacity: 0.7
|
|
|
|
|
});
|
|
|
|
|
graphic.bringToFront();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
geoJsonLayer.on(mars2d.EventType.mouseout, (event) => {
|
|
|
|
|
const graphic = event.graphic;
|
|
|
|
|
graphic.setStyle({
|
|
|
|
|
outlineColor: "white",
|
|
|
|
|
outlineWidth: 2,
|
|
|
|
|
fillOpacity: 0.5
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 绑定业务数据
|
|
|
|
|
bindYewuData(graphics, arrdata) {
|
|
|
|
|
for (let i = 0; i < graphics.length; i++) {
|
|
|
|
|
const graphic = graphics[i];
|
|
|
|
|
graphic.attr.num = 0;
|
|
|
|
|
for (let j = 0; j < arrdata.length; j++) {
|
|
|
|
|
const fname = graphic.attr.name;
|
|
|
|
|
if (arrdata[j].name.indexOf(fname) !== -1) {
|
|
|
|
|
graphic.attr.num = arrdata[j].value;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
graphic.setStyle({ fillColor: this.getColor(graphic.attr.num) });
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 获取颜色
|
|
|
|
|
getColor(num) {
|
|
|
|
|
const arrSpan = [1, 5, 10, 15, 20];
|
|
|
|
|
const arrColor = ["#FFEDA0", "#FEB24C", "#FD8D3C", "#FC4E2A", "#E31A1C", "#BD0026", "#800026"];
|
|
|
|
|
let length = arrSpan.length;
|
|
|
|
|
if (length > arrColor.length) {
|
|
|
|
|
length = arrColor.length;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let k = 0; k < length; k++) {
|
|
|
|
|
if (num < arrSpan[k]) {
|
|
|
|
|
return arrColor[k];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return arrColor[length - 1];
|
|
|
|
|
},
|
|
|
|
|
// 添加图例
|
|
|
|
|
addLegend() {
|
|
|
|
|
let strHtml = "<div class='legend-title'>项目数量(个)</div>";
|
|
|
|
|
|
|
|
|
|
const arrSpan = [1, 5, 10, 15, 20];
|
|
|
|
|
const arrColor = ["#FFEDA0", "#FEB24C", "#FD8D3C", "#FC4E2A", "#E31A1C", "#BD0026", "#800026"];
|
|
|
|
|
let length = arrSpan.length;
|
|
|
|
|
if (length > arrColor.length) {
|
|
|
|
|
length = arrColor.length;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i <= length; i++) {
|
|
|
|
|
let label = arrSpan[i];
|
|
|
|
|
|
|
|
|
|
if (i === 0) {
|
|
|
|
|
label = "小于" + arrSpan[i];
|
|
|
|
|
} else if (i === length) {
|
|
|
|
|
label = "大于" + arrSpan[i - 1];
|
|
|
|
|
} else {
|
|
|
|
|
label = arrSpan[i - 1] + "-" + arrSpan[i];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
strHtml +=
|
|
|
|
|
"<div class='legend-item'><span class='legend-color' style='background:" +
|
|
|
|
|
arrColor[i] +
|
|
|
|
|
"'></span><span class='legend-des'>" +
|
|
|
|
|
label +
|
|
|
|
|
"</span></div>";
|
|
|
|
|
}
|
|
|
|
|
eventTarget.fire("initHtml", {
|
|
|
|
|
html: strHtml
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.initMap();
|
|
|
|
|
this.addLegend(); // 在 mounted 生命周期钩子中调用 addLegend
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
if (this.map) {
|
|
|
|
|
this.map.destroy();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 事件对象，用于抛出事件给vue
|
|
|
|
|
export const eventTarget = new mars2d.BaseClass()
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.mapcontain{
|
|
|
|
|
.container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
|
|
|
|
|
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 2rem;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.map-thumbnail {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 25rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mars2d-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 19rem;
|
|
|
|
|
background-image: url(../../../assets/images/map@2x.png);
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.classify {
|
|
|
|
|
width: 2.81rem;
|
|
|
|
|
height: 1.38rem;
|
|
|
|
|
background-color: rgba(43, 98, 241, 0.8);
|
|
|
|
|
border-radius: 0.69rem 0.69rem 0.69rem 0.69rem;
|
|
|
|
|
color: white;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: .5rem;
|
|
|
|
|
left: .5rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: .7rem;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-title {
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 0.3rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-color {
|
|
|
|
|
width: 1rem;
|
|
|
|
|
height: 1rem;
|
|
|
|
|
margin-right: 0.5rem;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.legend-des {
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
