Skip to content

W
whp-xl
Commit 50a41759 authored by yaqizhang's avatar yaqizhang
Browse files
Options

修改

parent f327a915
Show whitespace changes
Inline Side-by-side
Showing with 44 additions and 50 deletions
dcit-hcsystem-hcsystem-master/src/utils/mapUtil.js
View file @ 50a41759
...@@ -40,9 +40,8 @@ export default class Mutil { ...@@ -40,9 +40,8 @@ export default class Mutil {
let MAP,tianSlA = new TileLayer({ let MAP,tianSlA = new TileLayer({
className: "mapTypeC", className: "mapTypeC",
source: new XYZ({ source: new XYZ({
// url: // url:"http://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c8df739f047ce17cfe41b63cbeae6997",
// "http://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c8df739f047ce17cfe41b63cbeae6997", // url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
//url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
}), }),
visible: true, visible: true,
...@@ -51,7 +50,7 @@ export default class Mutil { ...@@ -51,7 +50,7 @@ export default class Mutil {
let tianSlB = new TileLayer({ let tianSlB = new TileLayer({
className: "mapTypeC", className: "mapTypeC",
source: new XYZ({ source: new XYZ({
//url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997", // url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
url: " http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7", url: " http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
}), }),
visible: false, visible: false,
...@@ -60,7 +59,7 @@ export default class Mutil { ...@@ -60,7 +59,7 @@ export default class Mutil {
let tianSlC = new TileLayer({ let tianSlC = new TileLayer({
className: "mapTypeC", className: "mapTypeC",
source: new XYZ({ source: new XYZ({
//url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997", // url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}", url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
}), }),
visible: false, visible: false,
...@@ -306,36 +305,14 @@ export default class Mutil { ...@@ -306,36 +305,14 @@ export default class Mutil {
//对获取的点坐标数据进行处理，重构，得到我们需要的数据结构 //对获取的点坐标数据进行处理，重构，得到我们需要的数据结构
for (let i = 0; i < points.length; i++) { for (let i = 0; i < points.length; i++) {
let region = points[i]; //单个面 let region = points[i]; //单个面
//let pointArr = region.split(',');
//let p = pointArr[j];
let pArr = region.split(','); let pArr = region.split(',');
let pos = fromLonLat(pArr); //将坐标转为默认投影，默认投影是EPSG：3857 let pos = fromLonLat(pArr); //将坐标转为默认投影，默认投影是EPSG：3857
//let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换，由前面的坐标转为后面坐标系坐标 let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换，由前面的坐标转为后面坐标系坐标
pointsz.push(pos) //将转化格式后的点坐标存储起来 pointsz.push(pArr) //将转化格式后的点坐标存储起来
}; };
//自己造的地图数据（GeoJSON数据） //自己造的地图数据（GeoJSON数据）
let geojsonObject = this.structureGeojson(pointsz);
let vectorSource = new VectorSource({ //提供矢量图层的数据
features: (new GeoJSON().readFeatures(geojsonObject))
});
let vectorLayer = new VectorLayer({
source: vectorSource, //来源
style: new Style({
stroke: new Stroke({
color: '#08d527',
width: 4
}),
fill: new Fill({
color: 'rgba(212, 220, 29, 0.1)'
})
})
});
if (this.tempLayer != ' ') {
this.MAP.removeLayer(this.tempLayer);
}
this.MAP.addLayer(vectorLayer);
this.tempLayer = vectorLayer;
}
structureGeojson(pointsz){
let geojsonObject = { let geojsonObject = {
'type': 'FeatureCollection', //要素集合 'type': 'FeatureCollection', //要素集合
'crs': { 'crs': {
...@@ -355,15 +332,39 @@ export default class Mutil { ...@@ -355,15 +332,39 @@ export default class Mutil {
} }
}] }]
}; };
return geojsonObject; let vectorSource = new VectorSource({ //提供矢量图层的数据
features: (new GeoJSON().readFeatures(geojsonObject))
});
let vectorLayer = new VectorLayer({
source: vectorSource, //来源
style: new Style({
stroke: new Stroke({
color: 'yellow',
width: 6
}),
fill: new Fill({
color: 'rgba(255,255,0,0.1)'
})
})
});
if (this.tempLayer != ' ') {
this.MAP.removeLayer(this.tempLayer);
}
this.MAP.addLayer(vectorLayer);
this.tempLayer = vectorLayer;
} }
getBoundaries(name) { //根据name传参 changeCenter(name) { //根据name传参
axios.get('https://restapi.amap.com/v3/config/district?key=cb087c0fb3b8bc56a4af064630495bb9&subdistrict=0&extensions=all&keywords='+name).then(res => { axios.get('https://restapi.amap.com/v3/config/district?key=cb087c0fb3b8bc56a4af064630495bb9&subdistrict=0&extensions=all&keywords='+name).then(res => {
let local = res.data.districts[0].center.split(","); let local = res.data.districts[0].center.split(",");
let view = this.MAP.getView(); let view = new View({
view.setCenter(fromLonLat(local)); center: transform(fromLonLat(local), 'EPSG:3857', 'EPSG:4326'), //将中心点坐标转为EPSG：4326
view.setZoom(10); projection: get('EPSG:4326'), //投影坐标系 EPSG：4326
zoom: 10
});
this.MAP.setView(view);
this.drawArea(res.data.districts[0]) this.drawArea(res.data.districts[0])
}) })
} }
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ 50a41759
...@@ -31,11 +31,13 @@ ...@@ -31,11 +31,13 @@
<div style=""> <div style="">
<div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.4);position: absolute;top: 0;left: 10px;float: left;"> <div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.4);position: absolute;top: 0;left: 10px;float: left;">
<div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;">
<div id="main1" style="width:480px;height:250px;"></div>
</div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></div> --> <!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></div> -->
</div> </div>
<div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(0, 0, 0, 0.3);position: absolute;top: 0;right: 10px;float: right"> <div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(2, 40, 90, 0.3);position: absolute;top: 0;right: 10px;float: right">
<!-- <dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" > <!-- <dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<div class="markBox"> <div class="markBox">
<ul> <ul>
...@@ -91,16 +93,7 @@ import METHOD from "@/utils/methods"; ...@@ -91,16 +93,7 @@ import METHOD from "@/utils/methods";
}, },
}) })
export default class GIS extends Vue { export default class GIS extends Vue {
data() {
return {
charts: "",
opinion: ["及格人数", "未及格人数"],
opinionData: [
{ value: 12, name: "及格人数", itemStyle: "#1ab394" },
{ value: 18, name: "未及格人数", itemStyle: "#79d2c0" }
]
};
}
@Provide() Mutil: any; @Provide() Mutil: any;
@Provide() mapLoadDone = false; @Provide() mapLoadDone = false;
...@@ -296,9 +289,9 @@ export default class GIS extends Vue { ...@@ -296,9 +289,9 @@ export default class GIS extends Vue {
if (id) that.getPopcon(id); if (id) that.getPopcon(id);
}) })
this.getStatiData(); this.getStatiData();
this.Mutil.getBoundaries("石家庄"); this.Mutil.getBoundaries("石家庄");
} }
getStatiData() { getStatiData() {
let that = this; let that = this;
METHOD.axiosPost( METHOD.axiosPost(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment