Niko
/
shuili_manager
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update

master
KeXuCong 4 months ago
parent
72d4764510
commit
cdf4b99baa
1 changed files with 496 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 500
      jwtech-admin-page/src/views/largeScreen/index2.vue

500
jwtech-admin-page/src/views/largeScreen/index2.vue
View File

@ -47,10 +47,17 @@
</div>
<div class="group_4 flex-col justify-between">
<div class="group_5 flex-col justify-end">
<div
class="map-wrapper"
style="background-color: aliceblue; width: 100px; height: 100px"
></div>
<div class="map-wrapper" style="">
<div id="content">
<div id="map" ref="map"></div>
<!-- <div id="popup" class="ol-popup" style="background-color: #fff">
<div id="popup-closer" class="popup-closer">
<i class="el-icon-error"></i>
</div>
<div id="popup-content" class="popup-content"></div>
</div> -->
</div>
</div>
<!-- <div class="box_13 flex-row">
<div class="text-wrapper_11 flex-col">
<span class="text_30">预警中心</span>
@ -338,6 +345,32 @@ import { getTypeNum, getForewarningNum } from "@/api/projectStatistics/sort";
import { getInfo, getSourceFundsNum } from "@/api/projectStatistics/sort";
import { codeToText } from "element-china-area-data";
import { information, getWarnNumber } from "@/api/enterprise/enterpriseInfo";
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 {
@ -381,6 +414,30 @@ export default {
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],
};
},
created() {
@ -442,6 +499,7 @@ export default {
this.rightInfoData = res.data;
this.FunnelChartInit();
});
this.initMap();
},
methods: {
goIndex() {
@ -750,6 +808,405 @@ export default {
zdWarningType(key) {
return this.selectDictLabel(this.zd_warnTypeOptions, 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();
},
},
};
</script>
@ -777,4 +1234,39 @@ export default {
height: 100vh;
}
}
.map-wrapper {
width: 100%;
height: 650px;
#content {
width: 100%;
height: 100%;
#map {
width: 100%;
height: 100%;
}
.ol-popup {
position: relative;
padding: 20px;
width: 400px;
height: auto;
background-color: rgb(255, 255, 255);
border-radius: 5px;
.popup-closer {
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
&:hover {
opacity: 0.6;
}
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save