|
|
|
|
@ -22,7 +22,7 @@ |
|
|
|
|
</view> |
|
|
|
|
<view class="btn-location right-btn" @click="location"> |
|
|
|
|
<image src="/static/dw.png" class="img-location" /> |
|
|
|
|
<view>定位</view> |
|
|
|
|
<view>{{locationing?'定位中':'定位'}}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="btn-mjcl right-btn" @click="showJwdPopup"> |
|
|
|
|
<image src="/static/jwd.png" class="img-jwd" /> |
|
|
|
|
@ -135,6 +135,7 @@ |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
locationing: false, |
|
|
|
|
searchVisible: false, |
|
|
|
|
searchValue: '', |
|
|
|
|
mapData: { |
|
|
|
|
@ -251,7 +252,7 @@ |
|
|
|
|
this.mapData = { |
|
|
|
|
center: [formData.longitude, formData.latitude, Math.random()] |
|
|
|
|
} |
|
|
|
|
this.$refs.jwdPopup.close(); |
|
|
|
|
this.$refs.jwdPopup.close(); |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
console.log('error', err, formData) |
|
|
|
|
@ -384,14 +385,18 @@ |
|
|
|
|
console.log('查询值:' + res.value); |
|
|
|
|
}, |
|
|
|
|
location() { |
|
|
|
|
this.locationing = true; |
|
|
|
|
uni.getLocation({ |
|
|
|
|
type: 'gcj02', |
|
|
|
|
success: (res) => { |
|
|
|
|
console.log('当前位置的经度:' + res.longitude); |
|
|
|
|
console.log('当前位置的纬度:' + res.latitude); |
|
|
|
|
console.log(res); |
|
|
|
|
this.locationing = false; |
|
|
|
|
this.mapData = { |
|
|
|
|
center: [res.longitude, res.latitude, Math.random()] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
fail: () => { |
|
|
|
|
this.locationing = false; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
@ -515,10 +520,12 @@ |
|
|
|
|
} from 'ol/style' |
|
|
|
|
import helper from '../../common/helper'; |
|
|
|
|
import { |
|
|
|
|
Image |
|
|
|
|
Image, |
|
|
|
|
Tile |
|
|
|
|
} from 'ol/layer'; |
|
|
|
|
import { |
|
|
|
|
ImageWMS |
|
|
|
|
ImageWMS, |
|
|
|
|
WMTS |
|
|
|
|
} from 'ol/source'; |
|
|
|
|
import { |
|
|
|
|
GeoJSON, |
|
|
|
|
@ -527,6 +534,9 @@ |
|
|
|
|
import { |
|
|
|
|
getForViewAndSize |
|
|
|
|
} from 'ol/extent'; |
|
|
|
|
import { |
|
|
|
|
WMTS as WMTSGrid |
|
|
|
|
} from 'ol/tilegrid' |
|
|
|
|
let map, vectorLayer; |
|
|
|
|
export default { |
|
|
|
|
name: 'c-ol-map', |
|
|
|
|
@ -549,13 +559,26 @@ |
|
|
|
|
const pFeature = new Feature({ |
|
|
|
|
geometry: point |
|
|
|
|
}); |
|
|
|
|
pFeature.setStyle(new Style({ |
|
|
|
|
image: new IconStyle({ |
|
|
|
|
src: './static/wz.png', |
|
|
|
|
scale: 0.5, |
|
|
|
|
anchor: [0.5, 0] |
|
|
|
|
pFeature.setStyle([new Style({ |
|
|
|
|
image: new IconStyle({ |
|
|
|
|
src: './static/wz.png', |
|
|
|
|
scale: 0.5, |
|
|
|
|
anchor: [0.5, 1] |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
})) |
|
|
|
|
// , new Style({ |
|
|
|
|
// image: new CircleStyle({ |
|
|
|
|
// radius: 8, |
|
|
|
|
// fill: new Fill({ |
|
|
|
|
// color: 'rgba(0,0,0,0)', |
|
|
|
|
// }), |
|
|
|
|
// stroke: new Stroke({ |
|
|
|
|
// width: 3, |
|
|
|
|
// color: '#00ffff' |
|
|
|
|
// }), |
|
|
|
|
// }) |
|
|
|
|
// }) |
|
|
|
|
]) |
|
|
|
|
vectorLayer.getSource().clear(); |
|
|
|
|
vectorLayer.getSource().addFeature(pFeature); |
|
|
|
|
map.getView().fit(point, { |
|
|
|
|
@ -571,23 +594,69 @@ |
|
|
|
|
return l.get('businessIndex') === opt.layerIndex; |
|
|
|
|
}) |
|
|
|
|
if (!layer) { |
|
|
|
|
layer = new Image({ |
|
|
|
|
businessId: 'business-layer', |
|
|
|
|
businessName: opt.layerName, |
|
|
|
|
businessIndex: opt.layerIndex, |
|
|
|
|
source: new ImageWMS({ |
|
|
|
|
ratio: 1, |
|
|
|
|
url: `${opt.geoserverUrl}/geoserver/yzt/wms`, |
|
|
|
|
params: { |
|
|
|
|
'FORMAT': 'image/png', |
|
|
|
|
'VERSION': '1.1.1', |
|
|
|
|
"STYLES": opt.layerStyle || '', |
|
|
|
|
"LAYERS": `${opt.layerWorkspace}:${opt.layerName}`, |
|
|
|
|
"exceptions": 'application/vnd.ogc.se_inimage', |
|
|
|
|
} |
|
|
|
|
}), |
|
|
|
|
zIndex: opt.zIndex |
|
|
|
|
}); |
|
|
|
|
if (opt.layerType === 'wmts') { |
|
|
|
|
var gridsetName = 'EPSG:4326'; |
|
|
|
|
var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', |
|
|
|
|
'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', |
|
|
|
|
'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', |
|
|
|
|
'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', |
|
|
|
|
'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', |
|
|
|
|
'EPSG:4326:20', 'EPSG:4326:21' |
|
|
|
|
]; |
|
|
|
|
var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, |
|
|
|
|
0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, |
|
|
|
|
0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, |
|
|
|
|
1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, |
|
|
|
|
2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, |
|
|
|
|
2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, |
|
|
|
|
3.3527612686157227E-7 |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
// const url = `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/gwc/service/wmts?layer=${opt.layerWorkspace}:${opt.layerName}&style=${opt.layerStyle||''}&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{z}&TileCol={y}&TileRow={x}` |
|
|
|
|
// console.log(url) |
|
|
|
|
var source = new WMTS({ |
|
|
|
|
url: `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/gwc/service/wmts`, |
|
|
|
|
// url, |
|
|
|
|
layer: `${opt.layerWorkspace}:${opt.layerName}`, |
|
|
|
|
matrixSet: gridsetName, |
|
|
|
|
format: 'image/png', |
|
|
|
|
projection: "EPSG:4326", |
|
|
|
|
tileGrid: new WMTSGrid({ |
|
|
|
|
tileSize: [256, 256], |
|
|
|
|
extent: [-180.0, -90.0, 180.0, 90.0], |
|
|
|
|
origin: [-180.0, 90.0], |
|
|
|
|
resolutions: resolutions, |
|
|
|
|
matrixIds: gridNames |
|
|
|
|
}), |
|
|
|
|
style: opt.layerStyle || '', |
|
|
|
|
wrapX: true |
|
|
|
|
}); |
|
|
|
|
layer = new Tile({ |
|
|
|
|
businessId: 'business-layer', |
|
|
|
|
businessName: opt.layerName, |
|
|
|
|
businessIndex: opt.layerIndex, |
|
|
|
|
zIndex: opt.zIndex, |
|
|
|
|
source |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
layer = new Image({ |
|
|
|
|
businessId: 'business-layer', |
|
|
|
|
businessName: opt.layerName, |
|
|
|
|
businessIndex: opt.layerIndex, |
|
|
|
|
source: new ImageWMS({ |
|
|
|
|
ratio: 1, |
|
|
|
|
url: `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/wms`, |
|
|
|
|
params: { |
|
|
|
|
'FORMAT': 'image/png', |
|
|
|
|
'VERSION': '1.1.1', |
|
|
|
|
"STYLES": opt.layerStyle || '', |
|
|
|
|
"LAYERS": `${opt.layerWorkspace}:${opt.layerName}`, |
|
|
|
|
"exceptions": 'application/vnd.ogc.se_inimage', |
|
|
|
|
} |
|
|
|
|
}), |
|
|
|
|
zIndex: opt.zIndex |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
businessLayers.push(layer); |
|
|
|
|
map.addLayer(layer); |
|
|
|
|
} else { |
|
|
|
|
|