Skip to content

F
founder_vue
Commit e9008261 by liyuhang19990520
Options

地图

parent 22537128
Showing with 483 additions and 131 deletions
package.json
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
"kindeditor": "^4.1.10", "kindeditor": "^4.1.10",
"moment": "^2.29.1", "moment": "^2.29.1",
"qs": "^6.9.4", "qs": "^6.9.4",
"ol": "^6.12.0",
"relation-graph": "^1.1.0", "relation-graph": "^1.1.0",
"sass-resources-loader": "^2.1.1", "sass-resources-loader": "^2.1.1",
"video.js": "^7.14.3", "video.js": "^7.14.3",
......
public/OpMap/DrawModifySnap.js 0 → 100644
import {Draw, Modify, Snap,Select} from 'ol/interaction.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from "ol/style";
import Polygon from "ol/geom/Polygon";
import Vue from 'vue'
import Circle from "ol/style/Circle";
var drawTool={};
/*画画
* layerId:"bzdz",//必要
type:'Point',//类型(Point、Circle、Polygon、LineString) //必要
borderColor:"#123132",
fillColor:"#455654",
strokeWidth:2
img:{src:"static/img/greenpoint.png",scale:1},*/
Vue.prototype.$setDraw=function (parms) {
var self=this;
if(!this.$getLayer({layerId:parms.layerId})){
this.$setLayer(parms)
}
if(parms.type=='Rectangle'){
var draw = new Draw({
source: this.$getLayer({layerId:parms.layerId}).getSource(),
type: 'LineString',
style: new Style({
fill: new Fill({
color: 'rgba(0,0,0,0.2)'
}),
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
image: new CircleStyle({
radius: 5,
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.7)'
}),
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
})
}),
maxPoints: 2,
geometryFunction: function(coordinates, geometry){
var start = coordinates[0];
var end = coordinates[1];
if(!geometry){
geometry=new Polygon([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
}
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
return geometry;
}
});
}
else {
var draw = new Draw({
source: this.$getLayer({layerId:parms.layerId}).getSource(),
type: parms.type,
style: new Style({
fill: new Fill({
color: 'rgba(0,0,0,0.2)'
}),
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
image: new CircleStyle({
radius: 5,
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.7)'
}),
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
})
})
});
}
draw.set('layerId',parms.layerId)
this.$Map.removeInteraction(this.$getInteractions({layerId:parms.layerId}))
this.$Map.addInteraction(draw);
}
/*修改
* var parms={
* layerId:"bzdz",
* id:'11111//必要
* }*/
Vue.prototype.$setModify=function (parms) {
var modify = new Modify({
source: this.$getLayer({layerId:parms.layerId}).getSource(),
style:new Style(
{
image: new Circle({
radius: 6,
fill: new Fill({
color: '#0332ff'
})
})
}
)
});
modify.set('layerId',parms.id)
this.$Map.addInteraction(modify);
}
/*吸附线*/
Vue.prototype.$setSnap=function (parms) {
var snap = new Snap({source: this.$getLayer({layerId:parms.layerId}).getSource()});
snap.set('layerId',parms.layerId);
this.$Map.addInteraction(snap);
}
public/index.html
<!--
* @Author: liyuhang19990520 1092680144@qq.com
* @Date: 2022-05-18 22:00:19
* @LastEditors: liyuhang19990520 1092680144@qq.com
* @LastEditTime: 2022-05-18 22:59:03
* @FilePath: \founder_vue\public\index.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
......
src/utils/olMap/DrawModifySnap.js 0 → 100644
import { Draw, Modify, Snap, Select } from 'ol/interaction.js';
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import Polygon from "ol/geom/Polygon";
import Vue from 'vue'
import Circle from "ol/style/Circle";
var drawTool = {};
/*画画
* layerId:"bzdz",//必要
type:'Point',//类型(Point、Circle、Polygon、LineString) //必要
borderColor:"#123132",
fillColor:"#455654",
strokeWidth:2
img:{src:"static/img/greenpoint.png",scale:1},*/
Vue.prototype.$setDraw = function (parms) {
var self = this;
if (!this.$getLayer({ layerId: parms.layerId })) {
this.$setLayer(parms)
}
if (parms.type == 'Rectangle') {
var draw = new Draw({
source: this.$getLayer({ layerId: parms.layerId }).getSource(),
type: 'LineString',
style: new Style({
fill: new Fill({
color: 'rgba(0,0,0,0.2)'
}),
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
image: new CircleStyle({
radius: 5,
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.7)'
}),
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
})
}),
maxPoints: 2,
geometryFunction: function (coordinates, geometry) {
var start = coordinates[0];
var end = coordinates[1];
if (!geometry) {
geometry = new Polygon([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
}
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
return geometry;
}
});
}
else {
var draw = new Draw({
source: this.$getLayer({ layerId: parms.layerId }).getSource(),
type: parms.type,
style: new Style({
fill: new Fill({
color: 'rgba(0,0,0,0.2)'
}),
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 2
}),
image: new CircleStyle({
radius: 5,
stroke: new Stroke({
color: 'rgba(0, 0, 0, 0.7)'
}),
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)'
})
})
})
});
}
draw.set('layerId', parms.layerId)
this.$Map.removeInteraction(this.$getInteractions({ layerId: parms.layerId }))
this.$Map.addInteraction(draw);
}
/*修改
* var parms={
* layerId:"bzdz",
* id:'11111//必要
* }*/
Vue.prototype.$setModify = function (parms) {
var modify = new Modify({
source: this.$getLayer({ layerId: parms.layerId }).getSource(),
style: new Style(
{
image: new Circle({
radius: 6,
fill: new Fill({
color: '#0332ff'
})
})
}
)
});
modify.set('layerId', parms.id)
this.$Map.addInteraction(modify);
}
/*吸附线*/
Vue.prototype.$setSnap = function (parms) {
var snap = new Snap({ source: this.$getLayer({ layerId: parms.layerId }).getSource() });
snap.set('layerId', parms.layerId);
this.$Map.addInteraction(snap);
}
src/utils/olMap/baseMapConfig.js 0 → 100644
import Vue from 'vue'
var relUrlIp=window.location.host.substring(0,window.location.host.length-5);
//每次部署只需要修改arcgisserver_url
if (relUrlIp == '26.3.13.120' || relUrlIp == '74.25.20.179' || relUrlIp == '68.175.7.118' || relUrlIp == '65.65.100.205' || relUrlIp == '68.175.7.150' || relUrlIp == '68.175.7.95' || relUrlIp == '68.174.25.98' || relUrlIp == '26.8.175.242' || relUrlIp == '10.5.151.81'|| relUrlIp=='10.5.151.83' || relUrlIp=='77.16.28.68' || relUrlIp=='77.16.28.60') {
var arcgisserver_url = "http://68.174.25.103:6080";
} else {
var arcgisserver_url = "http://47.92.225.109:6080";
}
/*pgis矢量底图*/
var PGIS_sldt = "http://dggis.dgs.gd/gisserver01/rest/services/TDTSLDT/MapServer/tile/{z}/{y}/{x}";
/*pgis影像*/
var PGIS_yxdt = "http://dggis.dgs.gd/gisserver01/rest/services/TDTYXDT/MapServer/tile/{z}/{y}/{x}";
/*矢量底图*/
// var basemap = "http://26.3.12.43/arcgis/rest/services/nmsl/MapServer/tile/{z}/{y}/{x}";
// var basemap = "http://74.6.54.80:8087/EzServer/client/client7/openmap7.jsp?map=tdtsl";
// http://74.6.54.80:8087/EzServer
var basemap = "/toMap/Maps/tdtsl/EzMap?Service=getImage&Type=RGB&ZoomOffset=0&Col={x}&Row={y}&Zoom={z}&V=0.3&key="
// 全国的地图
// var quanguoMap = "/toQuanGuoMap/rest/services/founder/china/MapServer/tile/{z}/{y}/{x}"
var quanguoMap = "/toQuanGuoMap/rest/services/founder/%E5%A4%A9%E5%9C%B0%E5%9B%BE%E7%9F%A2%E9%87%8F%E5%85%A8%E5%9B%BD/MapServer/tile/{z}/{y}/{x}"
/*影像*/
var image_basemap = arcgisserver_url + "/arcgis/rest/services/founder/dgimage/MapServer/tile/{z}/{y}/{x}";
var relUrlIp=window.location.host.substring(0,window.location.host.length-5);
Vue.prototype.$baseMapConfig = [
{
type: 'TileGrid', requestType: "GET", url: PGIS_sldt, layerId: 'PgisVectorTileGrid', Visible: false, projection: 'EPSG:4326', label: 'p矢量', resolutions: [
1.4062500000000002,
0.7031250000000001,
0.35156250000000006,
0.17578125000000003,
0.08789062500000001,
0.04394531250000001,
0.021972656250000003,
0.010986328125000002,
0.005493164062500001,
0.0027465820312500004,
0.0013732910156250002,
6.866455078125001E-4,
3.4332275390625005E-4,
1.7166137695312503E-4,
8.583068847656251E-5,
4.2915344238281264E-5,
2.14576721191406E-5,
1.07288360595703E-5,
5.36441802978516E-6,
2.68220901485E-6,
1.341104507425E-6,
6.705522537124998E-7
], origin: [-180.0, 90.0]
},
{
type: 'TileGrid', requestType: 'GET', url: PGIS_yxdt, layerId: 'PgisImgTileGrid', Visible: false, projection: 'EPSG:4326', label: 'p矢量', resolutions: [
1.4062500000000002,
0.7031250000000001,
0.35156250000000006,
0.17578125000000003,
0.08789062500000001,
0.04394531250000001,
0.021972656250000003,
0.010986328125000002,
0.005493164062500001,
0.0027465820312500004,
0.0013732910156250002,
6.866455078125001E-4,
3.4332275390625005E-4,
1.7166137695312503E-4,
8.583068847656251E-5,
4.2915344238281264E-5,
2.14576721191406E-5,
1.07288360595703E-5,
5.36441802978516E-6,
2.68220901485E-6,
1.341104507425E-6,
6.705522537124998E-7
], origin: [-180.0, 90.0]
},
{
type: 'TileGrid', requestType: 'GET', url: quanguoMap, layerId: 'quanguoLayerId', Visible: true, projection: 'EPSG:4326', label: '矢量', resolutions: [
0.08789062468509322,
0.04394531353227711,
0.021972656766138556,
0.010986328383069278,
0.005493164191534639,
0.0027465809060368165,
0.0013732916427489112,
], origin: [-400.0 ,399.9999999999998]
},
{
type: 'TileGrid', requestType: 'GET', url: basemap, layerId: 'OpVectorBaseMap', Visible: true, projection: 'EPSG:4326', label: '矢量', resolutions: [
1.4078260157100582,
0.703913007855028,
0.35195650392751515,
0.17597825196375638,
0.08798912598187819,
0.043994562990939096,
0.021997281495469548,
0.010998640747734774,
0.005499320373868577,
0.0027496601869330985,
0.001374830093467739,
6.874150467326798E-4,
3.437075233663399E-4,
1.7185376168316996E-4,
8.592688084158498E-5,
4.296344042198222E-5,
2.148172021099111E-5,
1.0740860104305824E-5,
5.3704300533426425E-6,
2.685215025481591E-6,
1.341104507425E-6,
6.705522537124998E-7
], origin: [-180.0, 90]
},
{
type: 'TileGrid', requestType: 'GET', url: image_basemap, layerId: 'OpImgBaseMap', Visible: false, projection: 'EPSG:4326', label: '影像', resolutions: [
0.7039144156731805,
0.35195720784848755,
0.17597860391234646,
0.08798930195617323,
0.04399465098998392,
0.02199732549499196,
0.01099866274749598,
0.00549933137374799,
0.002749665686873995,
0.0013748328434369974,
6.874164098211937E-4,
3.437082168079019E-4,
1.7185409650664595E-4,
8.592704825332297E-5,
4.296352412666149E-5,
2.148177396063577E-5,
1.0740886980317885E-5,
5.370443490158943E-6
], origin: [-180.0, 90.0]
},
]
Vue.prototype.$InitMap = {
center: [110.257125,19.358549],
zoom: 10,
minZoom: 5,
maxZoom: 19,
resolutions: [
1.4062500000000002,
0.7031250000000001,
0.35156250000000006,
0.17578125000000003,
0.08789062500000001,
0.04394531250000001,
0.021972656250000003,
0.010986328125000002,
0.005493164062500001,
0.0027465820312500004,
0.0013732910156250002,
6.866455078125001E-4,
3.4332275390625005E-4,
1.7166137695312503E-4,
8.583068847656251E-5,
4.2915344238281264E-5,
2.14576721191406E-5,
1.07288360595703E-5,
5.36441802978516E-6,
2.68220901485E-6,
1.341104507425E-6,
6.705522537124998E-7
]
}
Vue.prototype.$ZoomToMapScale = {
5: 9244667.36,
6: 4622333.68,
7: 2311166.84,
8: 1155583.42,
9: 577791.71,
10: 288895.85,
11: 144447.93,
12: 72223.96,
13: 36111.98,
14: 18055.99,
15: 9028,
16: 4514,
17: 2257
}
src/views/shse/zdcs/index.vue
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
jingdu != '' || jingdu != 'null' || weidu != '' || weidu != 'null' jingdu != '' || jingdu != 'null' || weidu != '' || weidu != 'null'
" "
> >
当前经度：{{ jingdu }}，纬度{{ weidu }} 当前经度：{{ extent[0] }}，纬度{{ extent[1] }}
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button> <el-button @click="closeDialog">取 消</el-button>
...@@ -27,36 +27,11 @@ ...@@ -27,36 +27,11 @@
<script> <script>
/*config为内网配置，config_internet为外网配置*/ /*config为内网配置，config_internet为外网配置*/
import poi from "@/assets/img/img_poi.png"; import map from "@/utils/olMap/map.js";
import DrawModifySnap from "@/utils/olMap/DrawModifySnap.js";
export default { export default {
head: {
script: [
{
src: "/jquery-3.3.1.js",
},
{
src: "/OpMap/ol.js",
},
{
src: "/OpMap/OpMap.js",
},
/*{
src: '/OpMap/config_internet.js'
},*/
{
src: "/OpMap/config.js",
},
],
link: [
{
rel: "stylesheet",
href: "/OpMap/ol.css",
},
],
},
name: "index", name: "index",
components: { components: {},
},
props: { props: {
isShowMap: Boolean, isShowMap: Boolean,
jd: String, jd: String,
...@@ -73,6 +48,7 @@ export default { ...@@ -73,6 +48,7 @@ export default {
emitWd: this.wd == null ? "" : this.wd, emitWd: this.wd == null ? "" : this.wd,
initNum: 0, initNum: 0,
nodeData: {}, nodeData: {},
extent: []
}; };
}, },
methods: { methods: {
...@@ -86,81 +62,19 @@ export default { ...@@ -86,81 +62,19 @@ export default {
} }
this.jwdDialog = false; this.jwdDialog = false;
}, },
//初始化地图
initMap() { initMap() {
let self = this; let self = this;
let parms = { this.$nextTick(() => {
id: "map", //地图id self.$SetMap({
PositionUi: "right-top", //(left-top,left-bottom,right-top,right-bottom) PositionUi: "left-top",
ShowDisplay: false, //是否显示切换按钮，可以自己写样式控制图层切换 id: "map",
};
let map = new OpMap().$InitMAP(parms);
let parmL, parmLL;
/*创建要渲染的图层*/
parmL = {
layerId: "PointD", //必填
borderColor: "#12233", //边框颜色
strokeWidth: 2, //边框宽度
fillColor: "#222233", //填充颜色
img: { src: poi, scale: 1 }, //图片和图片大小
};
new OpMap().$setLayer(parmL);
if (
self.emitJd != "" &&
self.emitJd != "null" &&
self.emitJd != null &&
self.emitWd != "" &&
self.emitWd != "null" &&
self.emitWd != null
) {
var parmCenter = {
center: [self.emitJd, self.emitWd], //中心点
};
new OpMap().$Center(parmCenter);
/*创建要渲染的图层*/
parmLL = {
layerId: "PointD", //必填
type: "Point", //类型(Point、Circle、Polygon、LineString)//必要
data: [{ geometry: [self.emitJd, self.emitWd] }], //点类型和圆[x,y]、线类型[[x,y],[x,y]]、面类型[[[x,y],[x,y],[x,y]]]attributions:{}}]
borderColor: "#12233", //边框颜色
strokeWidth: 2, //边框宽度
fillColor: "#222233", //填充颜色
img: { src: poi, scale: 1 }, //图片和图片大小
};
new OpMap().$RenderLayer(parmLL);
}
/*地图点击事件、可对点击的地图元素进行查询（手动渲染的数据，不是底图数据）*/
new OpMap().$setDraw({
zIndex: 0,
layerId: "Retrieval", //必要
type: "Point", //类型(Point、Circle、Polygon、LineString) //必要
borderColor: "rgba(255,0,0,0.6)",
fillColor: "rgba(255,0,0,0.2)",
strokeWidth: 2,
img: { src: poi, scale: 1 },
}); });
window.map = self.$Map;
var dragBox = new OpMap().$getInteractions({ layerId: "Retrieval" }); self.zoom = self.$Map.getView().getZoom();
map.addInteraction(dragBox);
dragBox.on("drawend", function (e) {
self.jingdu = e.feature.getGeometry().flatCoordinates[0].toFixed(6);
self.weidu = e.feature.getGeometry().flatCoordinates[1].toFixed(6);
});
dragBox.on("drawstart", function (e) {
/* new OpMap().$getLayer({layerId:'PointD'}).getSource().forEachFeature(function (e) {
/!*e是feature要素 下面是直接删除*!/
new OpMap().$getLayer({layerId:'PointD'}).getSource().removeFeature(e)
})*/
new OpMap().$getLayer({ layerId: "Retrieval" }).getSource().clear();
}); });
/*map.on('click', function (e) {
/!*self.$emit("parentAndChilenEvent",[e.coordinate]);*!/
self.jingdu=e.coordinate[0];
self.weidu=e.coordinate[1];
})*/
}, },
emitXzqhValue(node) { emitXzqhValue(node) {
debugger;
this.nodeData = node; this.nodeData = node;
}, },
// handleClick(data){ // handleClick(data){
...@@ -234,40 +148,34 @@ export default { ...@@ -234,40 +148,34 @@ export default {
}; };
new OpMap().$Center(parmCenter); new OpMap().$Center(parmCenter);
}, },
setPoint() {
let self = this;
self.$setDraw({
zIndex: 0,
layerId: "poisearch_draw", //必要
type: "Point", //类型(Point、Circle、Polygon、LineString) //必要
borderColor: "rgb(255,190,0)",
fillColor: "rgba(255,164,0,0.12)",
strokeWidth: 2,
img: {
src: require("@/assets/img/bluepoint2.png"),
scale: 1,
},
});
self
.$getInteractions({ layerId: "poisearch_draw" })
.on("drawend", function (e) {
self.extent = e.feature.getGeometry().getCoordinates();
// self.$getInteractions({ layerId: "poisearch_draw" }).setActive(false);
self.$clearLayer({ layerId: "poisearch_draw" });
});
}, },
computed: {
}, },
computed: {},
watch: { watch: {
newValue(val, oldVal) { newValue(val, oldVal) {
let self = this; let self = this;
debugger self.$Map.getView().setZoom(10);
self.$Map.getView().setZoom(10)
// if (val != oldVal) {
// //当前值与上一次得值若相等，地图框选则不变
// if (new OpMap().$getLayer({ layerId: "PointD" }) != undefined) {
// new OpMap()
// .$getLayer({ layerId: "PointD" })
// .getSource()
// .forEachFeature(function (e) {
// new OpMap()
// .$getLayer({ layerId: "PointD" })
// .getSource()
// .removeFeature(e);
// });
// }
// if (val != "") {
// // self.handleClick(self.nodeData);
// self
// .getJwd(JSON.stringify({ code: self.nodeData.id }))
// .then((res) => {
// var parmCenter = {
// center: [res.data.rows.jd, res.data.rows.wd], //中心点
// };
// new OpMap().$Center(parmCenter);
// new OpMap().getView().setZoom(10);
// });
// }
// }
}, },
isShowMap(val) { isShowMap(val) {
let self = this; let self = this;
...@@ -275,6 +183,9 @@ export default { ...@@ -275,6 +183,9 @@ export default {
if (val == true && self.initNum == 0) { if (val == true && self.initNum == 0) {
self.$nextTick(() => { self.$nextTick(() => {
self.initMap(); self.initMap();
setTimeout(() => {
self.setPoint();
}, 20);
self.initNum++; self.initNum++;
}); });
} }
...@@ -292,8 +203,7 @@ export default { ...@@ -292,8 +203,7 @@ export default {
} }
}, },
}, },
mounted() { mounted() {},
},
}; };
</script> </script>
......
vue.config.js
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-10-18 09:49:48 * @Date: 2021-10-18 09:49:48
* @LastEditTime: 2021-10-18 16:19:24 * @LastEditTime: 2022-05-18 23:03:08
* @LastEditors: Please set LastEditors * @LastEditors: liyuhang19990520 1092680144@qq.com
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \founder_vue\vue.config.js * @FilePath: \founder_vue\vue.config.js
*/ */
...@@ -143,6 +143,22 @@ module.exports = { ...@@ -143,6 +143,22 @@ module.exports = {
"^/hainanMap": "/" "^/hainanMap": "/"
} }
}, },
"/toMap": {
target: "http://74.6.54.80:8087/EzServer", // 线索审批管理平台
changeOrigin: true,
secure: false,
pathRewrite: {
"^/toMap": "/"
}
},
"/toQuanGuoMap": {
target: "http://68.174.25.205:6080/arcgis", // 线索审批管理平台
changeOrigin: true,
secure: false,
pathRewrite: {
"^/toQuanGuoMap": "/"
}
},
}, },
}, },
css: { css: {
......
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