|
|
|
@ -32,7 +32,7 @@ |
|
|
|
</div> |
|
|
|
<div class="main_content"> |
|
|
|
<div class="con_head"> |
|
|
|
<div class="head_btn"> |
|
|
|
<!-- <div class="head_btn"> |
|
|
|
<span |
|
|
|
:class="{ activeSpan1: activeName == '1' }" |
|
|
|
@click="chooseName('1')" |
|
|
|
@ -43,29 +43,30 @@ |
|
|
|
@click="chooseName('2')" |
|
|
|
>机构地图</span |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
<div class="con_info"> |
|
|
|
<div class="info_left"> |
|
|
|
<div class="infoItem"> |
|
|
|
<!-- <div class="infoItem"> |
|
|
|
<span>总项目数</span> |
|
|
|
<span>12688</span> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div class="infoItem"> |
|
|
|
<span>初步批复</span> |
|
|
|
<span>8688</span> |
|
|
|
<span>{{ total }}</span> |
|
|
|
</div> |
|
|
|
<div class="infoItem"> |
|
|
|
<span>施工中</span> |
|
|
|
<span>6588</span> |
|
|
|
<span>{{ acc["noAcc"] || 0 }}</span> |
|
|
|
</div> |
|
|
|
<div class="infoItem"> |
|
|
|
<span>已完工</span> |
|
|
|
<span>8688</span> |
|
|
|
<span>{{ acc["acc"] || 0 }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="info_right"> |
|
|
|
<img src="@/assets/image/SMap.png" alt="" /> |
|
|
|
<!-- <img src="@/assets/image/SMap.png" alt="" /> --> |
|
|
|
<div id="map" ref="map" style="width: 100%; height: 100%"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -76,6 +77,33 @@ |
|
|
|
import { returnToken } from "@/api/login"; |
|
|
|
import { setToken, removeToken } from "@/utils/auth"; |
|
|
|
import { getAreasData } from "@/api/areas/index"; |
|
|
|
import { getTypeNum, getForewarningNum } from "@/api/projectStatistics/sort"; |
|
|
|
|
|
|
|
import "ol/ol.css"; |
|
|
|
import { Map, View } from "ol"; |
|
|
|
import { defaults as defaultControls } from "ol/control"; |
|
|
|
import Tile from "ol/layer/Tile"; |
|
|
|
import { fromLonLat } from "ol/proj"; |
|
|
|
import OSM from "ol/source/OSM"; |
|
|
|
import WMTS from "ol/source/WMTS"; |
|
|
|
import WMTSTileGrid from "ol/tilegrid/WMTS.js"; |
|
|
|
import VectorSource from "ol/source/Vector.js"; |
|
|
|
import Cluster from "ol/source/Cluster.js"; |
|
|
|
import { TileSuperMapRest } from "@supermap/iclient-ol/mapping/TileSuperMapRest"; |
|
|
|
|
|
|
|
import VectorLayer from "ol/layer/Vector.js"; |
|
|
|
import { Style, Fill, Stroke, Circle, Text } from "ol/style"; |
|
|
|
|
|
|
|
import { Draw, Select } from "ol/interaction"; |
|
|
|
import { SingleClick } from "ol/events/condition"; |
|
|
|
|
|
|
|
import Feature from "ol/Feature.js"; |
|
|
|
import LineString from "ol/geom/LineString.js"; |
|
|
|
import Point from "ol/geom/Point.js"; |
|
|
|
import { WMTSCapabilities, GML2 } from "ol/format"; |
|
|
|
import { getWidth, getTopLeft } from "ol/extent"; |
|
|
|
import GeoJSON from "ol/format/GeoJSON.js"; |
|
|
|
import Overlay from "ol/Overlay"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
@ -96,21 +124,513 @@ export default { |
|
|
|
parmas: { |
|
|
|
token: null, |
|
|
|
}, |
|
|
|
total: 0, |
|
|
|
acc: {}, |
|
|
|
ms: {}, |
|
|
|
zd: {}, |
|
|
|
adcd: [ |
|
|
|
"1100", |
|
|
|
"4400", |
|
|
|
"4408", |
|
|
|
"4409", |
|
|
|
"4414", |
|
|
|
"4419", |
|
|
|
"4420", |
|
|
|
"4451", |
|
|
|
"4452", |
|
|
|
"4453", |
|
|
|
], |
|
|
|
formattedZd: {}, |
|
|
|
formattedMs: {}, |
|
|
|
projectType: [], |
|
|
|
sourceFound: {}, |
|
|
|
year: "2024", |
|
|
|
rightInfoData: [], |
|
|
|
warnInfo: [], |
|
|
|
zd_warnTypeOptions: [], |
|
|
|
|
|
|
|
map: null, |
|
|
|
// projection: "EPSG:4326", |
|
|
|
pointDrawFlag: "", |
|
|
|
lineDrawFlag: "", |
|
|
|
sketch: "", // 存储草图 |
|
|
|
geometries: [], // 存储绘制的几何图形 |
|
|
|
lastPointFeature: null, |
|
|
|
lastLineFeature: null, |
|
|
|
all_draw_feature: [], |
|
|
|
all_point_coords: [], |
|
|
|
all_line_coords: [], |
|
|
|
pointVectorSource: null, |
|
|
|
lineVectorSource: null, |
|
|
|
ClusterSource: null, |
|
|
|
pointVectorLayer: null, |
|
|
|
lineVectorLayer: null, |
|
|
|
zoom: 10, |
|
|
|
interaction: null, |
|
|
|
lonALat: { |
|
|
|
lon: null, |
|
|
|
lat: null, |
|
|
|
}, |
|
|
|
viewCenter: [113.36502, 22.9787], |
|
|
|
tirggerChartIndex: 1, |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
console.log("this.$route", this.$route); |
|
|
|
this.parmas.token = this.$route.query.token; |
|
|
|
returnToken(this.parmas).then((res) => { |
|
|
|
console.log("有效token", res); |
|
|
|
let token = res.token; |
|
|
|
setToken(token).thren(() => { |
|
|
|
this.getTreeData(); |
|
|
|
// returnToken(this.parmas).then((res) => { |
|
|
|
// console.log("有效token", res); |
|
|
|
// let token = res.token; |
|
|
|
// setToken(token).thren(() => { |
|
|
|
// this.getTreeData(); |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
getTypeNum({ |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
ids: null, |
|
|
|
data: { |
|
|
|
projectName: null, |
|
|
|
projectType: null, |
|
|
|
total: null, |
|
|
|
projectPhase: null, |
|
|
|
}, |
|
|
|
}).then((res) => { |
|
|
|
// this.zd = res.data.zd; |
|
|
|
// this.ms = res.data.ms; |
|
|
|
console.log("res", res); |
|
|
|
|
|
|
|
this.acc = res.data.acc; |
|
|
|
Object.entries(this.zd).forEach(([key, value]) => { |
|
|
|
this.zdTotal = this.zdTotal + Number(value); |
|
|
|
let name = this.zdProjectTypeFormat(key); |
|
|
|
let obj = { |
|
|
|
name: name, |
|
|
|
value: Number(value), |
|
|
|
}; |
|
|
|
this.projectType.push(obj); |
|
|
|
}); |
|
|
|
Object.entries(this.ms).forEach(([key, value]) => { |
|
|
|
this.msTotal = this.msTotal + Number(value); |
|
|
|
let name = this.msProjectTypeFormat(key); |
|
|
|
let obj = { |
|
|
|
name: name, |
|
|
|
value: Number(value), |
|
|
|
}; |
|
|
|
this.projectType.push(obj); |
|
|
|
}); |
|
|
|
this.total = Number(this.acc["acc"]) + Number(this.acc["noAcc"]); |
|
|
|
}); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.initMap(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
msProjectTypeFormat(key) { |
|
|
|
return this.selectDictLabel(this.ms_projectTypeOptions, key); |
|
|
|
}, |
|
|
|
zdProjectTypeFormat(key) { |
|
|
|
return this.selectDictLabel(this.zd_projectTypeOptions, key); |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 初始化一个 openlayers 地图 |
|
|
|
*/ |
|
|
|
initMap() { |
|
|
|
let that = this; |
|
|
|
const projection = "EPSG:4326"; |
|
|
|
this.map = new Map({ |
|
|
|
target: "map", |
|
|
|
view: new View({ |
|
|
|
center: that.viewCenter, |
|
|
|
zoom: 10, |
|
|
|
// maxZoom: 12, |
|
|
|
minZoom: 5, |
|
|
|
projection: projection, |
|
|
|
multiWorld: true, |
|
|
|
}), |
|
|
|
}); |
|
|
|
var matrixIds = new Array(18); |
|
|
|
var resolutions = []; |
|
|
|
for (var z = 0; z < 18; ++z) { |
|
|
|
var res = 360 / 512; //0.703125 |
|
|
|
resolutions[z] = res / Math.pow(2, z - 1); |
|
|
|
matrixIds[z] = z; |
|
|
|
} |
|
|
|
|
|
|
|
// 加载第一层地图轮廓图层 |
|
|
|
var osm = new Tile({ |
|
|
|
source: new WMTS({ |
|
|
|
url: "http://t0.tianditu.gov.cn/img_c/wmts?tk=42a5dfa93ea7a9cbf423c4c1bb9ec16d", |
|
|
|
service: "wmts", |
|
|
|
version: "1.0.0", |
|
|
|
matrixSet: "c", |
|
|
|
layer: "img", |
|
|
|
format: "Tile", |
|
|
|
projection: "EPSG:4326", |
|
|
|
tileGrid: new WMTSTileGrid({ |
|
|
|
extent: [-180, -90, 180, 90], |
|
|
|
origin: [-180, 90], |
|
|
|
resolutions: resolutions, |
|
|
|
matrixIds: matrixIds, |
|
|
|
}), |
|
|
|
style: "default", |
|
|
|
// wrapX: false |
|
|
|
}), |
|
|
|
}); |
|
|
|
this.map.addLayer(osm); |
|
|
|
|
|
|
|
// let point = new Point([115.36502, 22.7787]); |
|
|
|
// this.map.addLayer(point); |
|
|
|
|
|
|
|
// 加载其他数据图层 |
|
|
|
// 所需展示的所有图层列表 |
|
|
|
// 不同类型的地图服务主要区分于type |
|
|
|
const layerList = [ |
|
|
|
// { |
|
|
|
// index: 0, |
|
|
|
// code: 'YZT1610609202768', |
|
|
|
// name: '广东2020年7_17级矢量图', |
|
|
|
// url: 'http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke', |
|
|
|
// type: 'YZT-WMTS' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// index: 1, |
|
|
|
// code: "YZT1597746916315", |
|
|
|
// name: "广东7_17级界线电子地图", |
|
|
|
// url: "http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke", |
|
|
|
// type: "YZT-WMTS", |
|
|
|
// }, |
|
|
|
{ |
|
|
|
index: 2, |
|
|
|
code: "YZT1610609681389", |
|
|
|
name: "广东2020年7_17级矢量注记", |
|
|
|
url: "http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke", |
|
|
|
type: "YZT-WMTS", |
|
|
|
}, |
|
|
|
{ |
|
|
|
index: 3, |
|
|
|
code: "0", |
|
|
|
text: "", |
|
|
|
url: "http://19.25.37.25:8090/iserver/services/map-XingZhengQuHua/rest/maps/行政区划", |
|
|
|
type: "rest-map", |
|
|
|
}, |
|
|
|
// { |
|
|
|
// index: 4, |
|
|
|
// code: "0", |
|
|
|
// text: "", |
|
|
|
// url: "http://19.25.35.204:31190/iserver/services/map-GuangDongShengDaoLu/rest/maps/广东省道路", |
|
|
|
// type: "rest-map", |
|
|
|
// }, |
|
|
|
{ |
|
|
|
index: 5, |
|
|
|
code: "0", |
|
|
|
text: "", |
|
|
|
url: "http://19.25.35.204:31190/iserver/services/map-ShengJiXingZhengQuHuaMian/rest/maps/省级行政区划面", |
|
|
|
type: "rest-map", |
|
|
|
}, |
|
|
|
// { |
|
|
|
// index: 6, |
|
|
|
// code: '0', |
|
|
|
// text: '', |
|
|
|
// url: 'http://19.25.35.204:31190/iserver/services/map-YiZhangTuShuiKu/rest/maps/水库', |
|
|
|
// type: 'rest-map' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// index: 7, |
|
|
|
// code: '0', |
|
|
|
// text: '', |
|
|
|
// url: 'http://19.25.35.204:31190/iserver/services/map-ShiJiXingZhengQuHuaMian/rest/maps/市级行政区划面', |
|
|
|
// type: 'rest-map' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// index: 8, |
|
|
|
// code: '0', |
|
|
|
// text: '', |
|
|
|
// url: 'http://19.25.35.204:31190/iserver/services/map-XianJiXingZhengQuHuaMian/rest/maps/县级行政区划面', |
|
|
|
// type: 'rest-map' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// index: 9, |
|
|
|
// code: '0', |
|
|
|
// text: '', |
|
|
|
// url: 'http://19.25.35.204:31190/iserver/services/map-ZhenJiXingZhengQuHuaMian/rest/maps/镇级行政区划面', |
|
|
|
// type: 'rest-map' |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// index: 10, |
|
|
|
// code: '0', |
|
|
|
// text: '', |
|
|
|
// url: 'http://19.25.35.204:31190/iserver/services/map-CunJiXingZhengQuHuaMian/rest/maps/村级行政区划面', |
|
|
|
// type: 'rest-map' |
|
|
|
// } |
|
|
|
{ |
|
|
|
index: 11, |
|
|
|
code: "0", |
|
|
|
text: "", |
|
|
|
url: "http://19.25.35.204:31190/iserver/services/map-YiZhangTuShuiZha/rest/maps/水闸", |
|
|
|
type: "rest-map", |
|
|
|
}, |
|
|
|
{ |
|
|
|
index: 12, |
|
|
|
code: "0", |
|
|
|
text: "", |
|
|
|
url: "http://19.25.35.204:31190/iserver/services/map-YiZhangTuDiFang/rest/maps/堤防", |
|
|
|
type: "rest-map", |
|
|
|
}, |
|
|
|
]; |
|
|
|
// 绘制图层列表 |
|
|
|
for (let i = 0; i < layerList.length; i++) { |
|
|
|
loadIndex(layerList[i].type, i); |
|
|
|
} |
|
|
|
|
|
|
|
// 初始化绘制点、线图层 |
|
|
|
// 创建一个矢量数据源 |
|
|
|
this.pointVectorSource = new VectorSource({ |
|
|
|
wrapX: false, |
|
|
|
}); |
|
|
|
// 创建一个矢量图层并将数据源与之关联 |
|
|
|
this.pointVectorLayer = new VectorLayer({ |
|
|
|
source: this.pointVectorSource, |
|
|
|
style: new Style({ |
|
|
|
fill: new Fill({ |
|
|
|
color: "rgba(255, 255, 255, 0.2)", // 填充颜色 |
|
|
|
}), |
|
|
|
stroke: new Stroke({ |
|
|
|
// color: "#409eff", // 边框颜色 |
|
|
|
width: 4, // 边框宽度 |
|
|
|
}), |
|
|
|
image: new Circle({ |
|
|
|
radius: 8, // 圆点半径 |
|
|
|
fill: new Fill({ |
|
|
|
color: "blue", // 圆点填充颜色 |
|
|
|
}), |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
this.lineVectorLayer = new VectorLayer({ |
|
|
|
source: this.lineVectorSource, |
|
|
|
style: new Style({ |
|
|
|
fill: new Fill({ |
|
|
|
color: "rgba(255, 255, 255, 0.2)", // 填充颜色 |
|
|
|
}), |
|
|
|
stroke: new Stroke({ |
|
|
|
// color: "#409eff", // 边框颜色 |
|
|
|
width: 4, // 边框宽度 |
|
|
|
}), |
|
|
|
image: new Circle({ |
|
|
|
radius: 8, // 圆点半径 |
|
|
|
fill: new Fill({ |
|
|
|
color: "blue", // 圆点填充颜色 |
|
|
|
}), |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
// this.map.addLayer(this.pointVectorLayer); |
|
|
|
this.map.addLayer(this.lineVectorLayer); |
|
|
|
|
|
|
|
// 监听事件 |
|
|
|
// 监听点图层的change事件来获取点坐标 |
|
|
|
|
|
|
|
// this.map.getViewport().addEventListener('click', () => { |
|
|
|
// this.pointVectorSource.on('addfeature', (event) => { |
|
|
|
// const coordinate = event.feature.getGeometry().getCoordinates(); |
|
|
|
// console.log(coordinate); |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
|
|
|
|
function loadIndex(type, index) { |
|
|
|
var path = ""; |
|
|
|
if (type === "YZT-WMTS") { |
|
|
|
path = "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities"; |
|
|
|
} else if (type === "rest-map") { |
|
|
|
} else { |
|
|
|
path = "VERSION=1.0.0&REQUEST=GetFeature&SERVICE=WFS"; |
|
|
|
} |
|
|
|
let xhr = new XMLHttpRequest(); |
|
|
|
let sign = ""; |
|
|
|
xhr.open( |
|
|
|
"GET", |
|
|
|
layerList[index].url.replace( |
|
|
|
/{{serviceCode}}/, |
|
|
|
layerList[index].code |
|
|
|
) + |
|
|
|
sign + |
|
|
|
path |
|
|
|
); |
|
|
|
xhr.onload = function () { |
|
|
|
let data = xhr.response; |
|
|
|
if (type === "YZT-WMTS") { |
|
|
|
addYztWmtsLayer(data, index); |
|
|
|
} else if (type === "YZT-YSFW") { |
|
|
|
addYsfwLayer(data, index); |
|
|
|
} else { |
|
|
|
addRestMapLayer(layerList[index], index); |
|
|
|
} |
|
|
|
}; |
|
|
|
xhr.send(); |
|
|
|
} |
|
|
|
|
|
|
|
// 加载wmts服务 |
|
|
|
function addYztWmtsLayer(res, index) { |
|
|
|
console.log(layerList[index]); |
|
|
|
console.log("加载次数"); |
|
|
|
// console.log("输出WMTS服务数据", res); |
|
|
|
var format = new WMTSCapabilities(); |
|
|
|
if (!res) { |
|
|
|
return; |
|
|
|
} |
|
|
|
var result = format.read(res); |
|
|
|
const item = result.Contents.Layer[0]; |
|
|
|
const layerParam = { |
|
|
|
layerName: item.Abstract || item.Title, |
|
|
|
styleName: item.Style[0].Identifier, |
|
|
|
tilematrixset: item.TileMatrixSetLink[0].TileMatrixSet, |
|
|
|
format: item.Format[0], |
|
|
|
}; |
|
|
|
var projectionExtent = [-180, -90, 180, 90]; |
|
|
|
const size = getWidth(projectionExtent) / 256; |
|
|
|
const resolutionsYzt = []; |
|
|
|
const matrixIdsTzt = []; |
|
|
|
for (var z = 2; z < 19; ++z) { |
|
|
|
resolutionsYzt[z] = size / Math.pow(2, z); |
|
|
|
matrixIdsTzt.push(z - 2); |
|
|
|
} |
|
|
|
const source = new WMTS({ |
|
|
|
url: |
|
|
|
layerList[index].url.replace( |
|
|
|
/{{serviceCode}}/, |
|
|
|
layerList[index].code |
|
|
|
) + |
|
|
|
"?layer=" + |
|
|
|
layerParam.layerName, |
|
|
|
style: layerParam.styleName, |
|
|
|
matrixSet: layerParam.tilematrixset, |
|
|
|
format: layerParam.format, |
|
|
|
wrapX: true, |
|
|
|
tileGrid: new WMTSTileGrid({ |
|
|
|
origin: getTopLeft(projectionExtent), |
|
|
|
resolutions: resolutionsYzt, |
|
|
|
matrixIds: matrixIdsTzt, |
|
|
|
}), |
|
|
|
}); |
|
|
|
let lastIndex = index + 10 * (1 + index); |
|
|
|
var layer = new Tile({ |
|
|
|
id: lastIndex, |
|
|
|
source: source, |
|
|
|
}); |
|
|
|
console.log(source.urls); |
|
|
|
layer.setZIndex(lastIndex); |
|
|
|
that.map.addLayer(layer); |
|
|
|
} |
|
|
|
// ------------------------------------------------------------------------------------- |
|
|
|
// 接入粤政图要素服务(wfs) |
|
|
|
function addYsfwLayer(res, index) { |
|
|
|
console.log("输出WFS服务数据", res); |
|
|
|
var result = res; |
|
|
|
var format = new GML2(); |
|
|
|
var features = format.readFeatures(result); |
|
|
|
var style = null; |
|
|
|
if (features[0].getGeometry() instanceof ol.geom.Polygon) { |
|
|
|
style = new Style({ |
|
|
|
stroke: new Stroke({ |
|
|
|
color: "#868f98", |
|
|
|
width: 1, |
|
|
|
}), |
|
|
|
fill: new Fill({ |
|
|
|
color: "#DEECFB", |
|
|
|
}), |
|
|
|
}); |
|
|
|
} else if (features[0].getGeometry() instanceof ol.geom.Point) { |
|
|
|
features.forEach((each) => { |
|
|
|
var info = each.values_; |
|
|
|
var name = ""; |
|
|
|
for (let key in info) { |
|
|
|
if (key.indexOf("名称") > -1) { |
|
|
|
name = info[key]; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
style = new Style({ |
|
|
|
image: new Circle({ |
|
|
|
fill: new Fill({ |
|
|
|
color: "#ff0721", |
|
|
|
}), |
|
|
|
radius: 5, |
|
|
|
}), |
|
|
|
text: new Text({ |
|
|
|
text: name, |
|
|
|
offsetY: 30, |
|
|
|
font: "12px Calibri,sans-serif", |
|
|
|
fill: new Fill({ |
|
|
|
color: "#fff", |
|
|
|
}), |
|
|
|
stroke: new Stroke({ |
|
|
|
color: "#f00", |
|
|
|
width: 3, |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
each.setStyle(style); |
|
|
|
}); |
|
|
|
} else if (features[0].getGeometry() instanceof ol.geom.LineString) { |
|
|
|
style = new Style({ |
|
|
|
stroke: new Stroke({ |
|
|
|
color: "#2899fb", |
|
|
|
width: 4, |
|
|
|
}), |
|
|
|
}); |
|
|
|
} |
|
|
|
var source = new VectorSource({ |
|
|
|
features: features, |
|
|
|
}); |
|
|
|
var wfsObj = { source: source, style: style }; |
|
|
|
|
|
|
|
var vectorLayer = new VectorLayer({ |
|
|
|
id: layerList[index].code, |
|
|
|
source: wfsObj.source, |
|
|
|
style: wfsObj.style, |
|
|
|
}); |
|
|
|
that.map.addLayer(vectorLayer); |
|
|
|
} |
|
|
|
|
|
|
|
// 接入rest-map服务 |
|
|
|
function addRestMapLayer(params, index) { |
|
|
|
var restLayer = new Tile({ |
|
|
|
source: new TileSuperMapRest({ |
|
|
|
url: params.url, |
|
|
|
prjCoordSys: { epsgCode: 4326 }, |
|
|
|
projection: "EPSG:4326", |
|
|
|
}), |
|
|
|
}); |
|
|
|
let lastIndex = index + 10 * (1 + index); |
|
|
|
restLayer.setZIndex(lastIndex); |
|
|
|
that.map.addLayer(restLayer); |
|
|
|
} |
|
|
|
|
|
|
|
// 缩放 |
|
|
|
this.map.on("moveend", function () { |
|
|
|
that.zoom = that.map.getView().getZoom(); |
|
|
|
console.log("zomm", that.zoom); |
|
|
|
}); |
|
|
|
// 鼠标移入元素样式 |
|
|
|
this.map.on("pointermove", (e) => { |
|
|
|
let pixel = this.map.getEventPixel(e.originalEvent); |
|
|
|
let feature = this.map.forEachFeatureAtPixel(pixel, (feature) => { |
|
|
|
return feature; |
|
|
|
}); |
|
|
|
|
|
|
|
if (feature != undefined) { |
|
|
|
this.map.getTargetElement().style.cursor = "pointer"; |
|
|
|
} else { |
|
|
|
this.map.getTargetElement().style.cursor = "auto"; |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// this.addGuangdongJson(); |
|
|
|
// this.ProjectCoordinatePoint(); |
|
|
|
// this.addPopup(); |
|
|
|
}, |
|
|
|
chooseName(key) { |
|
|
|
this.activeName = key; |
|
|
|
}, |
|
|
|
@ -292,7 +812,7 @@ export default { |
|
|
|
.info_right { |
|
|
|
// width: 800px; |
|
|
|
width: 70%; |
|
|
|
// height: 600px; |
|
|
|
height: 600px; |
|
|
|
// border: 1px solid red; |
|
|
|
& > img { |
|
|
|
width: 100%; |
|
|
|
|
