Commit 50a41759 authored by yaqizhang's avatar yaqizhang

修改

parent f327a915
......@@ -40,9 +40,8 @@ export default class Mutil {
let MAP,tianSlA = new TileLayer({
className: "mapTypeC",
source: new XYZ({
// 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",
//url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
// 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",
// 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}",
}),
visible: true,
......@@ -51,7 +50,7 @@ export default class Mutil {
let tianSlB = new TileLayer({
className: "mapTypeC",
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",
}),
visible: false,
......@@ -60,7 +59,7 @@ export default class Mutil {
let tianSlC = new TileLayer({
className: "mapTypeC",
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}",
}),
visible: false,
......@@ -306,13 +305,33 @@ export default class Mutil {
//对获取的点坐标数据进行处理,重构,得到我们需要的数据结构
for (let i = 0; i < points.length; i++) {
let region = points[i]; //单个面
//let pointArr = region.split(',');
//let p = pointArr[j];
let pArr = region.split(',');
let pos = fromLonLat(pArr); //将坐标转为默认投影,默认投影是EPSG:3857
//let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换,由前面的坐标转为后面坐标系坐标
pointsz.push(pos) //将转化格式后的点坐标存储起来
let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换,由前面的坐标转为后面坐标系坐标
pointsz.push(pArr) //将转化格式后的点坐标存储起来
};
//自己造的地图数据(GeoJSON数据)
let geojsonObject = this.structureGeojson(pointsz);
let geojsonObject = {
'type': 'FeatureCollection', //要素集合
'crs': {
'type': 'name',
'properties': { //特性
'name': 'EPSG:3857'
}
},
'features': [{ //要素
'type': 'Feature',
'geometry': { //几何图形
'type': 'GeometryCollection', //几何图形集合
'geometries': [{ //几何形状
'type': 'Polygon', //多边形
'coordinates': [pointsz] //坐标
}]
}
}]
};
let vectorSource = new VectorSource({ //提供矢量图层的数据
features: (new GeoJSON().readFeatures(geojsonObject))
});
......@@ -320,11 +339,11 @@ export default class Mutil {
source: vectorSource, //来源
style: new Style({
stroke: new Stroke({
color: '#08d527',
width: 4
color: 'yellow',
width: 6
}),
fill: new Fill({
color: 'rgba(212, 220, 29, 0.1)'
color: 'rgba(255,255,0,0.1)'
})
})
});
......@@ -335,35 +354,17 @@ export default class Mutil {
this.MAP.addLayer(vectorLayer);
this.tempLayer = vectorLayer;
}
structureGeojson(pointsz){
let geojsonObject = {
'type': 'FeatureCollection', //要素集合
'crs': {
'type': 'name',
'properties': { //特性
'name': 'EPSG:3857'
}
},
'features': [{ //要素
'type': 'Feature',
'geometry': { //几何图形
'type': 'GeometryCollection', //几何图形集合
'geometries': [{ //几何形状
'type': 'Polygon', //多边形
'coordinates': [pointsz] //坐标
}]
}
}]
};
return geojsonObject;
}
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 => {
let local = res.data.districts[0].center.split(",");
let view = this.MAP.getView();
view.setCenter(fromLonLat(local));
view.setZoom(10);
let view = new View({
center: transform(fromLonLat(local), 'EPSG:3857', 'EPSG:4326'), //将中心点坐标转为EPSG:4326
projection: get('EPSG:4326'), //投影坐标系 EPSG:4326
zoom: 10
});
this.MAP.setView(view);
this.drawArea(res.data.districts[0])
})
}
......
......@@ -31,11 +31,13 @@
<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 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: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></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;" >
<div class="markBox">
<ul>
......@@ -91,16 +93,7 @@ import METHOD from "@/utils/methods";
},
})
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() mapLoadDone = false;
......@@ -296,9 +289,9 @@ export default class GIS extends Vue {
if (id) that.getPopcon(id);
})
this.getStatiData();
this.Mutil.getBoundaries("石家庄");
}
getStatiData() {
let that = this;
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