youngsuk
2023-06-29
230629 서영석 기본 지도 위치 수정 & 교차로 size로 벡터 레이어 (수정중)
@61a6a5b51249f268567c2d831b27121969b34f7b
--- client/views/component/OpenLayers.vue
+++ client/views/component/OpenLayers.vue
... | ... | @@ -82,8 +82,8 @@ |
| 82 | 82 |
// View 정보 |
| 83 | 83 |
this.mapView = new View({
|
| 84 | 84 |
projection: this.baseSource, ///EPSG:3857 |
| 85 |
- center: transform([126.9757184, 37.564388], "EPSG:4326", vm.baseSource), //126.9757184, 37.564388 |
|
| 86 |
- zoom: 17, |
|
| 85 |
+ center: transform([340830.93607841985, 264929.33868609794], "EPSG:5181", vm.baseSource), //126.9757184, 37.564388 |
|
| 86 |
+ zoom: 12, |
|
| 87 | 87 |
minZoom : 8, |
| 88 | 88 |
maxZoom : 19 |
| 89 | 89 |
}); |
... | ... | @@ -132,7 +132,7 @@ |
| 132 | 132 |
}, |
| 133 | 133 |
|
| 134 | 134 |
// 벡터레이어 추가 JSON |
| 135 |
- addVectorLayerByUrl: function (sourceUrl, layerName, geoType, style, type, dong_cd) {
|
|
| 135 |
+ addVectorLayerByUrl: function (sourceUrl, layerName, geoType, style, type, dong_cd ,node_id) {
|
|
| 136 | 136 |
const vm = this; |
| 137 | 137 |
|
| 138 | 138 |
axios({
|
... | ... | @@ -141,9 +141,9 @@ |
| 141 | 141 |
headers: {
|
| 142 | 142 |
'Content-Type': 'application/json; charset=UTF-8' |
| 143 | 143 |
}, |
| 144 |
- data: { "dong_cd": dong_cd },
|
|
| 144 |
+ data: { "dong_cd": dong_cd ,"node_id" : node_id},
|
|
| 145 | 145 |
}).then(function (response) {
|
| 146 |
- console.log(response) |
|
| 146 |
+ console.log(response.data) |
|
| 147 | 147 |
const tempfeatures = new GeoJSON().readFeatures(response.data); |
| 148 | 148 |
let layerSource = new VectorSource({});
|
| 149 | 149 |
if (geoType === vm.baseSource) {
|
... | ... | @@ -174,6 +174,8 @@ |
| 174 | 174 |
} |
| 175 | 175 |
}, |
| 176 | 176 |
}); |
| 177 |
+ vm.map.getView().setCenter(transform([ tempfeatures[0].values_.geometry.flatCoordinates[0],tempfeatures[0].values_.geometry.flatCoordinates[1]], "EPSG:5181", vm.baseSource)); |
|
| 178 |
+ |
|
| 177 | 179 |
vector.setZIndex(10); |
| 178 | 180 |
vm.map.addLayer(vector); |
| 179 | 181 |
|
... | ... | @@ -241,7 +243,7 @@ |
| 241 | 243 |
|
| 242 | 244 |
}, |
| 243 | 245 |
// 기본맵 세팅 |
| 244 |
- setBaseMap: function (map,zoom,dong_cd) {
|
|
| 246 |
+ setBaseMap: function (map,zoom,dong_cd, node_id) {
|
|
| 245 | 247 |
const vm = this; |
| 246 | 248 |
var x; |
| 247 | 249 |
var y; |
... | ... | @@ -256,11 +258,11 @@ |
| 256 | 258 |
headers: {
|
| 257 | 259 |
'Content-Type': 'application/json; charset=UTF-8' |
| 258 | 260 |
}, |
| 259 |
- data: { "dong_cd": dong_cd },
|
|
| 261 |
+ data: { "dong_cd" : dong_cd ,"node_id" : node_id},
|
|
| 260 | 262 |
}).then(function (response) {
|
| 261 | 263 |
const tempfeatures = new GeoJSON().readFeatures(response.data); |
| 262 |
- console.log("tempfeatures :", tempfeatures);
|
|
| 263 |
- console.log("tempfeatures :", tempfeatures[0].values_.geometry.flatCoordinates);
|
|
| 264 |
+ // console.log("tempfeatures :", tempfeatures);
|
|
| 265 |
+ // console.log("tempfeatures :", tempfeatures[0].values_.geometry.flatCoordinates);
|
|
| 264 | 266 |
vm.map.getView().setCenter(transform([ tempfeatures[0].values_.geometry.flatCoordinates[0],tempfeatures[0].values_.geometry.flatCoordinates[1]], "EPSG:5181", vm.baseSource)); |
| 265 | 267 |
|
| 266 | 268 |
// this.map.getView().setCenter(transform([338492.222420045, 243951.915081981], "EPSG:5181", this.baseSource)); |
--- client/views/pages/Analysis/Analysis.vue
+++ client/views/pages/Analysis/Analysis.vue
... | ... | @@ -25,7 +25,7 @@ |
| 25 | 25 |
<span>~</span> |
| 26 | 26 |
<input type="date" name="" id="" /> |
| 27 | 27 |
</div> |
| 28 |
- <DongSelectList @setDongCd="setDongCd"></DongSelectList> |
|
| 28 |
+ <DongSelectList @setDongCd="setDongCd" :azimuthHiddenCk=false></DongSelectList> |
|
| 29 | 29 |
<div class="flex-between m-b"> |
| 30 | 30 |
<label for="">횡단보도</label> |
| 31 | 31 |
<select name="" id=""></select> |
--- client/views/pages/CrosswalkManagement/CrosswalkInsert.vue
+++ client/views/pages/CrosswalkManagement/CrosswalkInsert.vue
... | ... | @@ -6,10 +6,6 @@ |
| 6 | 6 |
<h2>횡단보도 등록</h2> |
| 7 | 7 |
<div class="box"> |
| 8 | 8 |
<DongSelectList @setDongCd="setDongCd"></DongSelectList> |
| 9 |
- <div class="flex-between m-b"> |
|
| 10 |
- <label for="">방위각</label> |
|
| 11 |
- <select name="" id=""></select> |
|
| 12 |
- </div> |
|
| 13 | 9 |
<div class="m-b"> |
| 14 | 10 |
<div class="flex m-b"> |
| 15 | 11 |
<label for="" class="m-r">횡단보도 좌표</label |
... | ... | @@ -179,32 +175,32 @@ |
| 179 | 175 |
import {baseStyles} from '../../component/OpenLayersStyle.vue';
|
| 180 | 176 |
import DongSelectList from '../../component/dongSelectList.vue'; |
| 181 | 177 |
|
| 182 |
-// var freeBus = {
|
|
| 183 |
-// "type": "FeatureCollection", |
|
| 184 |
-// "features": [ |
|
| 185 |
-// {
|
|
| 186 |
-// "type": "Feature", |
|
| 187 |
-// "properties": {
|
|
| 188 |
-// "popupContent": "18th & California Light Rail Stop", |
|
| 189 |
-// "data" : 123 |
|
| 190 |
-// }, |
|
| 191 |
-// "geometry": {
|
|
| 192 |
-// "type": "Point", |
|
| 193 |
-// "coordinates": [126.9757184, 37.564388] |
|
| 194 |
-// } |
|
| 195 |
-// },{
|
|
| 196 |
-// "type": "Feature", |
|
| 197 |
-// "properties": {
|
|
| 198 |
-// "popupContent": "20th & Welton Light Rail Stop", |
|
| 199 |
-// "data" : 456 |
|
| 200 |
-// }, |
|
| 201 |
-// "geometry": {
|
|
| 202 |
-// "type": "Point", |
|
| 203 |
-// "coordinates": [124.9748523, 37.5796212] |
|
| 204 |
-// } |
|
| 205 |
-// } |
|
| 206 |
-// ] |
|
| 207 |
-// }; |
|
| 178 |
+var freeBus = {
|
|
| 179 |
+ "type": "FeatureCollection", |
|
| 180 |
+ "features": [ |
|
| 181 |
+ {
|
|
| 182 |
+ "type": "Feature", |
|
| 183 |
+ "properties": {
|
|
| 184 |
+ "popupContent": "18th & California Light Rail Stop", |
|
| 185 |
+ "data" : 123 |
|
| 186 |
+ }, |
|
| 187 |
+ "geometry": {
|
|
| 188 |
+ "type": "Point", |
|
| 189 |
+ "coordinates": [126.9757184, 37.564388] |
|
| 190 |
+ } |
|
| 191 |
+ },{
|
|
| 192 |
+ "type": "Feature", |
|
| 193 |
+ "properties": {
|
|
| 194 |
+ "popupContent": "20th & Welton Light Rail Stop", |
|
| 195 |
+ "data" : 456 |
|
| 196 |
+ }, |
|
| 197 |
+ "geometry": {
|
|
| 198 |
+ "type": "Point", |
|
| 199 |
+ "coordinates": [124.9748523, 37.5796212] |
|
| 200 |
+ } |
|
| 201 |
+ } |
|
| 202 |
+ ] |
|
| 203 |
+}; |
|
| 208 | 204 |
|
| 209 | 205 |
export default {
|
| 210 | 206 |
data() {
|
... | ... | @@ -261,14 +257,14 @@ |
| 261 | 257 |
}, |
| 262 | 258 |
childClick : function(prop,coordinate){
|
| 263 | 259 |
|
| 264 |
- console.log(prop); |
|
| 265 |
- console.log(coordinate); |
|
| 260 |
+ console.log("prop : ",prop);
|
|
| 261 |
+ console.log("coordinate : ",coordinate);
|
|
| 266 | 262 |
|
| 267 | 263 |
// 레이어 삭제 |
| 268 | 264 |
this.$refs.open_layers.removeLayer('point1');
|
| 269 | 265 |
|
| 270 | 266 |
// Icon 그리기 |
| 271 |
- this.$refs.open_layers.createIcon(coordinate[0],coordinate[1],'/client/resources/images/icon/fin.png',0.3, 'point1'); |
|
| 267 |
+ this.$refs.open_layers.createIcon(coordinate[0],coordinate[1],'/client/resources/images/icon/fin.png',0.3, 'point1','EPSG:5181'); |
|
| 272 | 268 |
|
| 273 | 269 |
}, |
| 274 | 270 |
|
--- client/views/pages/RealtimeStatus/RealtimeStatus.vue
+++ client/views/pages/RealtimeStatus/RealtimeStatus.vue
... | ... | @@ -14,7 +14,7 @@ |
| 14 | 14 |
<div class="search slide-content" v-if="showSlide"> |
| 15 | 15 |
<h2>지역설정</h2> |
| 16 | 16 |
<div class="box"> |
| 17 |
- <DongSelectList @setDongCd="setDongCd" :hiddenCk=false></DongSelectList> |
|
| 17 |
+ <DongSelectList @setDongCd="setDongCd" :azimuthHiddenCk=false></DongSelectList> |
|
| 18 | 18 |
</div> |
| 19 | 19 |
<h2>조건설정</h2> |
| 20 | 20 |
<div class="box"> |
... | ... | @@ -246,8 +246,15 @@ |
| 246 | 246 |
console.log("statusSearch this.address : ", this.address);
|
| 247 | 247 |
//지도 영역 수정 |
| 248 | 248 |
this.$refs.open_layers.removeLayerAll(); |
| 249 |
- this.$refs.open_layers.setBaseMap(vworldBaseLayer,12,this.address.dong_cd); |
|
| 250 |
- this.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json', 'realtimeStatusMap', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
|
|
| 249 |
+ if(this.address.node_id==null){
|
|
| 250 |
+ this.$refs.open_layers.setBaseMap(vworldBaseLayer,this.address.zoomLevel,this.address.dong_cd); |
|
| 251 |
+ this.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json', 'realtimeStatusMap', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
|
|
| 252 |
+ } |
|
| 253 |
+ else{
|
|
| 254 |
+ this.$refs.open_layers.setBaseMap(vworldBaseLayer,this.address.zoomLevel,this.address.dong_cd, this.address.node_id); |
|
| 255 |
+ |
|
| 256 |
+ this.$refs.open_layers.addVectorLayerByUrl('/node/getNodeGeoJson.json', 'realtimeStatusMap', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd, this.address.node_id);
|
|
| 257 |
+ } |
|
| 251 | 258 |
// this.$refs.open_layers.addClusterLayer('/common/getDongsGeoJson.json', 'realtimeStatusMap', 'EPSG:5181', '', '', this.address.dong_cd);
|
| 252 | 259 |
// this.situationOccurrenceStatusSearch(); |
| 253 | 260 |
|
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?