HC_YFZX
/
Shu_Ju_Wei_Hu_Ping_Tai
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

绘图点吸附、影像更换、遮罩添加

yishuixian
徐景良 2024-05-14 15:47:21 +08:00
parent cc648f2d25
commit f3fd0717a3
6 changed files with 333 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -9642,6 +9642,14 @@
}
}
},
"mapbox-gl-draw-snap-mode": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/mapbox-gl-draw-snap-mode/-/mapbox-gl-draw-snap-mode-0.2.0.tgz",
"integrity": "sha512-c6u8wL1cHgzFAAi6wtuoJVBKAF4qzGorpCn4IeninkzkUaYGVrNtUNPky3ECx9C3P9QbNOwD60j8bYj5wQI8hA==",
"requires": {
"@turf/turf": "^6.5.0"
}
},
"mapbox-gl-utils": {
"version": "0.39.0",
"resolved": "https://registry.npmmirror.com/mapbox-gl-utils/-/mapbox-gl-utils-0.39.0.tgz",

3
package.json
View File

@ -19,7 +19,8 @@
"element-ui": "^2.15.8",
"jquery": "^3.6.4",
"less-loader": "^6.0.0",
"mapbox-gl": "^2.13.0",
"mapbox-gl": "^2.0.0",
"mapbox-gl-draw-snap-mode": "^0.2.0",
"mapbox-gl-utils": "^0.39.0",
"qs": "^6.11.1",
"terraformer-wkt-parser": "^1.2.1",

9
src/api/urlPatterns.js
View File

@ -22,10 +22,7 @@ export const globalApi = {
// netBASE_URL: "http://223.99.16.253:9001", //.net
// 沂水县
BASE_URL: "http://60.217.22.180:9006", // java
GEOSERVER_URL:"http://60.217.22.180:9007", // geoserver
netBASE_URL: "http://60.217.22.180:9001", //.net
BASE_URL: "http://60.217.22.153:9006", // java
GEOSERVER_URL:"http://60.217.22.153:9007", // geoserver
netBASE_URL: "http://60.217.22.153:9001", //.net
}

67
src/views/ServiceList/components/ditu.vue
View File

@ -5,6 +5,7 @@
<script>
import mapboxgl from "mapbox-gl";
import { globalApi } from "../../../api/urlPatterns.js";
import { waiData } from "../../data_draw/lib/xianjiewai";
import { getLayer, getGeomData } from "../../../api/Datadetails";
mapboxgl.accessToken =
"pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
@ -56,9 +57,31 @@ export default {
let _this = this;
this.map = new mapboxgl.Map({
container: this.$refs.datamap,
style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
center: [117.977325, 35.265961],
zoom: 14,
style: {
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
"tileSize": 256,
}
},
"layers": [
{
"id": "tdt-img-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
},
]
},
center: [118.628869, 35.895011],
zoom: 8.4,
maxZoom: 20,
minZoom: 5,
pitch: 0,
language: "zh-cmn",
projection: "globe",
});
@ -67,6 +90,7 @@ export default {
_this.loadDianZiLayer();
_this.addGeoJsonLayer(url, jwd);
_this.loadMengban();
});
},
@ -92,7 +116,7 @@ export default {
'type': 'raster',
'source': {
'type': 'raster',
'tiles': ["http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"],
'tiles': ["http://60.217.22.153:9007/geoserver/yishui/wms?service=WMS&version=1.1.0&request=GetMap&layers=yishui:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"],
'tileSize': 256
},
'layout': {
@ -105,6 +129,39 @@ export default {
},
// 'http://localhost:8080/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=topp:states&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png'
// http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/ksp:shp_1681969689@EPSG:4326@png
loadMengban(){
this.map.addLayer({
//蒙版图层 //通过边界数据反选 达到挖洞效果
id: 'mb-tag',
type: 'fill',
source: {
type: 'geojson',
data: {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [
[
// 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
[-180, 90],
[180, 90],
[180, -90],
[-180, -90],
],
waiData.DATA,
],
},
},
},
paint: {
'fill-color': '#1a274b',
'fill-opacity': 1 /* 透明度 */,
},
layout: {
visibility: 'visible',
},
});
},
addGeoJsonLayer(url, jwd) {
// console.log(Object(url));
this.map.addSource("wmsSource", {
@ -131,7 +188,7 @@ export default {
});
this.map.flyTo({
center: [Number(jwd[0]), Number(jwd[1])],
zoom: 10,
zoom: 9.2,
speed: 5,
});
},

248
src/views/data_draw/index.vue
View File

@ -282,6 +282,14 @@
// 图形绘制工具类
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import {
SnapPolygonMode,
SnapPointMode,
SnapLineMode,
SnapModeDrawStyles,
SnapDirectSelect,
} from "mapbox-gl-draw-snap-mode";
// WKT和GeoJson数据转换工具类
import WKT from "terraformer-wkt-parser";
@ -364,6 +372,11 @@
drawTool: null,
drowLat: "",
drowLng: "",
nearbyGeoJson:{
features:[],
type:"FeatureCollection"
},
editId:null,
};
},
watch: {
@ -380,6 +393,27 @@
},
},
created() {
// let geojson = {
// "type": "Feature",
// "properties": {
// },
// "geometry": {
// "type": "Polygon",
// "coordinates": [
// [
// [117.693347, 35.572576, 148.8],
// [117.695488, 35.561282, 148.4],
// [117.713418, 35.56302, 163],
// [117.70992, 35.574224, 186.2]
// ]
// ]
// }
// };
// let wktdata = WKT.convert(geojson.geometry);
// alert(wktdata)
// 初始化图层数据
this.layerInfo = { ...this.$route.query };
console.log(this.layerInfo);
@ -397,6 +431,73 @@
},
methods: {
loadNearbyData(){
// 获取当前区域范围
let bounds = this.globalMap.getBounds();
let boundsStr = Math.min(bounds._ne.lng,bounds._sw.lng)+"%2C"+Math.min(bounds._ne.lat,bounds._sw.lat)+"%2C"+Math.max(bounds._ne.lng,bounds._sw.lng)+"%2C"+Math.max(bounds._ne.lat,bounds._sw.lat);
let queryInfo = {
tablename:this.listQuery.tableName,
startlng:bounds._ne.lng,
startlat:bounds._ne.lat,
endlng:bounds._sw.lng,
endlat:bounds._sw.lat,
num:this.currentData.id ? this.currentData.id : null
}
axios({
method:"get",
url:globalApi.netBASE_URL+"/api/FireCodePC/GetLayerInfoByTable",
params:queryInfo
}).then((res)=>{
if(res.data.code == 200){
if(res.data.data.length>0){
this.nearbyGeoJson.features = [];
res.data.data.forEach((item,index)=>{
let geom = item.geom;
let geometry = WKT.parse(geom)
let feature = {
geometry:geometry,
}
// console.log("feature"+index,feature.geometry.coordinates);
this.nearbyGeoJson.features.push(feature);
})
}
}
// 绘制区域范围内的图斑
this.updateBBoxFeatures();
})
},
// 绘制区域范围内的图斑
updateBBoxFeatures(){
let features = [];
this.nearbyGeoJson.features.forEach((item,index)=>{
let feature = {
geometry:item.geometry,
properties:{
isOldData:true
}
}
if (this.layerInfo.dataType == '面') {
this.geojson.type = "Polygon";
feature.geometry.coordinates = feature.geometry.coordinates[0]
} else if (this.layerInfo.dataType == '点') {
this.geojson.type = "Point";
} else if (this.layerInfo.dataType == '线') {
this.geojson.type = "LineString";
feature.geometry.coordinates = feature.geometry.coordinates[0]
}
feature.geometry.type = this.geojson.type
features.push(feature);
})
let geojson = {
"type": "FeatureCollection",
"features": features
};
// 隐藏原有图层
this.globalMap.setLayoutProperty("pbfLayer", "visibility", "none");
// console.log("nearbyGeoJson",geojson);
this.drawTool.add(geojson);
},
changePo(name) {
console.log(name);
if (name == "lng" || name == "lat") {
@ -541,7 +642,9 @@
}
});
},
editByMap() {
editByMap(id) {
this.currentData.id = id;
this.editType = "edit";
if (this.drawTool) {
return null;
@ -552,8 +655,7 @@
this.isEdit = true;
},
editData() {
console.log("编辑")
console.log(this.drawTool)
this.editType = "edit";
if (this.drawTool) {
return null;
@ -588,11 +690,33 @@
};
}
// this.drawTool = new MapboxDraw({
// displayControlsDefault: false,
// controls: controlConfig,
// });
this.drawTool = new MapboxDraw({
displayControlsDefault: false,
controls: controlConfig,
modes: {
...MapboxDraw.modes,
draw_point: SnapPointMode,
draw_polygon: SnapPolygonMode,
draw_line_string: SnapLineMode,
direct_select: SnapDirectSelect,
},
// Styling guides
styles: SnapModeDrawStyles,
userProperties: true,
// Config snapping features
snap: true,
snapOptions: {
snapPx: 15, // defaults to 15
snapToMidPoints: true, // defaults to false
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
},
guides: false,
});
this.globalMap.addControl(this.drawTool, "top-right");
// this.geojson = this.clickMapData;
@ -624,7 +748,8 @@
};
console.log(geojson);
this.globalMap.setLayoutProperty("pbfLayer", "visibility", "none");
this.drawTool.set(geojson);
this.drawTool.add(geojson);
this.loadNearbyData();
},
addData() {
if (this.isEdit) {
@ -664,13 +789,36 @@
trash: true,
};
}
this.drawTool = new MapboxDraw({
displayControlsDefault: false,
controls: controlConfig,
// defaultMode: 'draw_polygon'
// this.drawTool = new MapboxDraw({
// displayControlsDefault: false,
// controls: controlConfig,
// // defaultMode: 'draw_polygon'
// });
this.drawTool = new MapboxDraw({
modes: {
...MapboxDraw.modes,
draw_point: SnapPointMode,
draw_polygon: SnapPolygonMode,
draw_line_string: SnapLineMode,
direct_select: SnapDirectSelect,
},
// Styling guides
styles: SnapModeDrawStyles,
userProperties: true,
// Config snapping features
snap: true,
snapOptions: {
snapPx: 15, // defaults to 15
snapToMidPoints: true, // defaults to false
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
},
guides: false,
});
this.globalMap.addControl(this.drawTool, "top-right");
this.isEdit = true;
this.loadNearbyData();
},
saveData() {
this.loader = "el-icon-loading";
@ -700,8 +848,6 @@
console.log(this.formData);
if (this.editType == "edit") {
console.log("111", this.currentData);
console.log("222", this.formData);
postMethodCommon("/geoserver/updateLayerData", this.formData).then(
(res) => {
if (res.data.code == 200) {
@ -871,10 +1017,30 @@
minZoom: 5,
pitch: 0,
// style:"mapbox://styles/mapbox/satellite-v9"
style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
// style:"mapbox://styles/mapbox/dark-v10"
// style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
style: {
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
"tileSize": 256,
}
},
"layers": [
{
"id": "tdt-img-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
},
]
},
});
// 地图加载完毕事件
let _this = this;
@ -893,13 +1059,15 @@
// add the DEM source as a terrain layer with exaggerated height
_this.globalMap.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });
// _this.loadGaoQingLayer();
_this.loadGaoQingLayer();
_this.loadDianZiLayer();
_this.loadXianJieLayer();
_this.loadMengban()
_this.loadMengban();
_this.loadRoadNet();
_this.globalMap.loadImage(
"https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png",
@ -941,12 +1109,11 @@
// 设置 popup 的位置和内容
_this.popup
.setLngLat(e.lngLat)
.setHTML(
`
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="getDetail(${_this.attributeInfo.id})">查看信息</div>
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="editByMap();">编辑信息</div>
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="deleteByContexmenu();">删除数据</div>`
)
.setHTML(`
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="getDetail(${_this.attributeInfo.id})">查看信息</div>
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="editByMap(${_this.attributeInfo.id});">编辑信息</div>
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="deleteByContexmenu();">删除数据</div>`
)
.addTo(_this.globalMap);
});
@ -1010,6 +1177,7 @@
type: "raster",
tiles: [
"http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9",
// "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9"
],
tileSize: 256,
},
@ -1025,7 +1193,7 @@
source: {
type: "raster",
tiles: [
"http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
"http://60.217.22.153:9007/geoserver/yishui/wms?service=WMS&version=1.1.0&request=GetMap&layers=yishui:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
],
tileSize: 256,
},
@ -1045,7 +1213,7 @@
source: {
type: "geojson",
data:
"http://60.217.22.180:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson",
"http://60.217.22.153:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson",
},
paint: {
"line-width": 2,
@ -1054,6 +1222,38 @@
});
},
loadRoadNet(){
this.globalMap.addLayer({
'id': 'historyLayerVector-line0',
'type': 'line',
'source': {
type: 'vector',
tiles: ["http://60.213.14.14:6050" + '/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=view_drone_shp_data&filter=streetid in ( select \"SecondId\" from relevance where \"Key\" = \'UserOrg\' and \"FirstId\" = \'' + this.userId + '\')&field=\"Id\",\"handle_status_id\",&X-Token=' + localStorage.getItem("X-Token")],
minzoom: 1,
maxzoom: 20
},
"source-layer": "yishuixian",
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
// 'filter':['==','handle_status_id',0],
'paint': {
'line-color': [
"case",
["==", ["get", "handle_status_id"], 0],
"#E6A23C",
["==", ["get", "handle_status_id"], 1],
"#409EFF",
["==", ["get", "handle_status_id"], 2],
"#67C23A",
// 默认
"#67C23A",
],
'line-width': 4
}
})
},
loadMengban(){
this.globalMap.addLayer({
//蒙版图层 //通过边界数据反选 达到挖洞效果

41
src/views/mars3d/mars3d.vue
View File

@ -728,8 +728,6 @@
proper = this.multipleSelection;
}
let newArr = {};
console.log(this.dataType)
console.log(this.symbolData)
this.symbolData.map(itm => {
if (this.dataType == '点') {
newArr[itm.name] = { image: itm.image }
@ -739,12 +737,41 @@
// }
}
})
console.log(this.columnName)
this.form.symbol.styleField = this.columnName
this.form.symbol.styleOptions={
opacity: 0.6,
color: "#0000FF"
},
console.log("this.form.symbol",this.form.symbol);
this.form.symbol.styleOptions = {
"image":this.form.symbol.styleOptions ? this.form.symbol.styleOptions.image : null,
"scale":this.form.symbol.styleOptions ? this.form.symbol.styleOptions.scale : null,
"scaleByDistance": true,
"scaleByDistance_far": 20000,
"scaleByDistance_farValue": 0.5,
"scaleByDistance_near": 1000,
"scaleByDistance_nearValue": 1,
"verticalOrigin": 1,
"horizontalOrigin": 0,
"clampToGround": true,
"label": {
"text": "{name}",
"font_size": 15,
"color": "#ffffff",
"outline": true,
"outlineColor": "#000000",
"pixelOffsetY": 10,
"scaleByDistance": true,
"scaleByDistance_far": 80000,
"scaleByDistance_farValue": 0.5,
"scaleByDistance_near": 1000,
"scaleByDistance_nearValue": 1,
"distanceDisplayCondition": true,
"distanceDisplayCondition_far": 80000,
"distanceDisplayCondition_near": 0
}
}
this.form.symbol.styleOptions.opacity = 0.6;
this.form.symbol.styleOptions.color = "#0000ff";
this.form.symbol.styleFieldOptions = newArr;
if (this.resource == "样式一") {
this.form.center = this.marsform;