<!--
|
* @Descripttion:
|
* @version:
|
* @Author: song
|
* @Date: 2021-04-08 15:14:57
|
* @LastEditors: song
|
* @LastEditTime: 2021-04-24 11:59:43
|
-->
|
<template>
|
<div id="map"></div>
|
</template>
|
<script>
|
import OLCesium from "olcs/OLCesium.js";
|
import "ol/ol.css";
|
import OlView from "ol/View.js";
|
import XYZ from "ol/source/XYZ";
|
import OlLayerTile from "ol/layer/Tile.js";
|
import OlMap from "ol/Map.js";
|
import tip from "./tip.vue";
|
import {
|
// eslint-disable-next-line no-unused-vars
|
defaults as OlControlDefaults,
|
defaults,
|
// 全屏控件
|
FullScreen,
|
// 比例尺控件
|
ScaleLine,
|
// 缩放滚动条控件
|
// eslint-disable-next-line no-unused-vars
|
ZoomSlider,
|
// 鼠标位置控件
|
// eslint-disable-next-line no-unused-vars
|
MousePosition,
|
// -地图属性控件
|
Attribution,
|
// 鹰眼控件
|
// eslint-disable-next-line no-unused-vars
|
OverviewMap,
|
// 缩放到范围控件
|
// eslint-disable-next-line no-unused-vars
|
ZoomToExtent,
|
Rotate,
|
} from "ol/control.js";
|
|
import VectorLayer from "ol/layer/Vector";
|
import VectorSource from "ol/source/Vector";
|
|
import { OSM, TileWMS, Vector } from "ol/source";
|
// import Draw from "ol/interaction/Draw";
|
import Draw from "./Draw";
|
|
import Feature from "ol/Feature.js";
|
import Point from "ol/geom/Point.js";
|
import LineString from "ol/geom/LineString.js";
|
import { Icon, Style, Fill, Stroke } from "ol/style.js";
|
|
// import drawFence from "./drawFence";
|
|
import OlFeature from "ol/Feature";
|
import OlGeomPoint from "ol/geom/Point";
|
// import OlLayerVector from "ol/layer/Vector";
|
// import OlSourceVector from "ol/source/Vector";
|
import OlStyleStyle from "ol/style/Style";
|
import OlStyleIcon from "ol/style/Icon";
|
// // 用来添加相关文字描述的
|
import OlStyleText from "ol/style/Text";
|
import OlStyleFill from "ol/style/Fill";
|
// import Cesium from "libs/Cesium/Cesium.js";
|
|
export default {
|
name: "MapInThere",
|
components: {
|
tip,
|
},
|
data() {
|
return {
|
gunAddlayer: new VectorLayer({
|
// 图标图层
|
zIndex: 22,
|
source: new VectorSource(),
|
}),
|
peopleAddlayer: new VectorLayer({
|
// 图标图层
|
zIndex: 22,
|
source: new VectorSource(),
|
}),
|
carAddlayer: new VectorLayer({
|
// 图标图层
|
zIndex: 22,
|
source: new VectorSource(),
|
}),
|
// peopleLineAddlayer: new VectorLayer({
|
// // 图标图层
|
// zIndex: 22,
|
// source: new VectorSource(),
|
// }),
|
beginsPoint: new VectorLayer({
|
// 图标图层
|
zIndex: 22,
|
source: new VectorSource(),
|
}),
|
DrawLayer: new VectorLayer({
|
// 图标图层
|
// zIndex: 1000,
|
source: new VectorSource(),
|
}),
|
oldService: "",
|
mapService: [
|
// {
|
// id: "",
|
// value: "",
|
// show:''
|
// },
|
],
|
};
|
},
|
// computed: {
|
// mapServiceSee() {
|
// },
|
// },
|
// watch: {
|
// // openDrawChiose() {
|
// // console.log(this.openDrawChiose, "openDrawChiose");
|
// // },
|
// mapServiceValue: {
|
// handler(val) {
|
// // console.log("深度监听：", val);
|
// // this.checkDom("getMapDataRefs", (dom) => {
|
// // dom.setServiceData(this.mapServiceValue);
|
// // });
|
// },
|
// deep: true,
|
// },
|
// },
|
mounted() {
|
const ol2d = new OlMap({
|
layers: [
|
// new OlLayerTile({
|
// zIndex: 4,
|
// title: "影像",
|
// source: new XYZ({
|
// url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
|
// }),
|
// }),
|
// new OlLayerTile({
|
// zIndex: 5,
|
// title: "道路+中文注记",
|
// source: new XYZ({
|
// url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
|
// }),
|
// }),
|
new OlLayerTile({
|
zIndex: 4,
|
title: "矢量",
|
source: new XYZ({
|
url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
|
// url: "/localData/sl/{z}/{x}/{y}.png",
|
tileUrlFunction: function (tileCoord) {
|
var z = tileCoord[0];
|
var x = tileCoord[1];
|
var y = Math.pow(2, z) + tileCoord[2];
|
return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
|
},
|
}),
|
}),
|
new OlLayerTile({
|
zIndex: 5,
|
title: "中文注记",
|
source: new XYZ({
|
url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
|
}),
|
}),
|
],
|
|
// 注意地图控件的写法
|
controls: defaults().extend([
|
// new FullScreen(),
|
// new ScaleLine(),
|
// new MousePosition(),
|
// new Rotate(),
|
// new Attribution()
|
]),
|
target: "map",
|
view: new OlView({
|
center: [0, 0],
|
zoom: 2,
|
projection: "EPSG:4326",
|
}),
|
});
|
window.ol2d = ol2d;
|
|
var view = ol2d.getView();
|
|
// let provider = new Cesium.UrlTemplateImageryProvider({
|
// url: "/wp/{z}/{x}/{y}.png",
|
// fileExtension: "png",
|
// });
|
// view.imageryLayers.addImageryProvider(provider);
|
|
// view.setCenter([115.85883507433789, 28.708432053474827])
|
view.setCenter([114.03858862, 27.63088262]);
|
|
//
|
view.setZoom(18);
|
this.view = view;
|
// const ol3d = new OLCesium({ map: window.ol2d });
|
// window.ol3d = ol3d;
|
|
// ol2d.addLayer(this.gunAddlayer);
|
// ol2d.addLayer(this.peopleAddlayer);
|
// ol2d.addLayer(this.carAddlayer);
|
// ol2d.addLayer(this.peopleLineAddlayer);
|
// ol2d.addLayer(this.beginsPoint);
|
},
|
methods: {
|
clearServiceData() {
|
this.mapService = [];
|
},
|
setServiceData(data) {
|
let that = this;
|
// console.log(data);
|
//判断是否是新增
|
if (data.length == that.mapService.length) {
|
// console.log("不是新增判断显影");
|
// 不是新增判断显影
|
for (let k in data) {
|
if (data[k].show != that.mapService[k].show) {
|
//如果有改变
|
that.mapService[k].show = data[k].show; // 同步最新show状态
|
if (data[k].show) {
|
//显示
|
// console.log(window.ol2d);
|
// console.log(that.mapService);
|
window.ol2d.addLayer(that.mapService[k].layer);
|
} else {
|
//隐藏
|
window.ol2d.removeLayer(that.mapService[k].layer);
|
}
|
}
|
}
|
} else if (data.length > that.mapService.length) {
|
// console.log("新增直接push");
|
//新增直接push
|
let layer = new OlLayerTile({
|
// source: new XYZ({
|
// url: "http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga",
|
// }),
|
// new OlLayerTile({
|
zIndex: 5,
|
title: data.length - 1,
|
source: new XYZ({
|
url: data[data.length - 1].service, // 注记
|
}),
|
// }),
|
});
|
// console.log(data[data.length - 1].service);
|
// console.log(that.oldService);
|
// let str = "";
|
// for (let k in that.oldService) {
|
// if (that.oldService[k] != data[data.length - 1].service[k]) {
|
// // console.log(that.oldService[k]);
|
// // console.log(data[data.length - 1].service[k]);
|
// str += that.oldService[k];
|
// }
|
// }
|
// console.log("str", str);
|
that.oldService = data[data.length - 1].service;
|
window.ol2d.addLayer(layer);
|
that.mapService.push({
|
...data[data.length - 1],
|
layer: layer,
|
});
|
} else if (data.length < that.mapService.length) {
|
// console.log("删除的情况", this.$store.state.map.deleteIndex);
|
//删除的情况
|
if (that.$store.state.map.deleteIndex != -1) {
|
window.ol2d.removeLayer(
|
that.mapService[that.$store.state.map.deleteIndex].layer
|
);
|
that.mapService.splice(that.$store.state.map.deleteIndex, 1);
|
}
|
}
|
// console.log(this.mapService);
|
// for()
|
},
|
// addMapService(data) {
|
// let layer = new OlLayerTile({
|
// // source: new XYZ({
|
// // url: "http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga",
|
// // }),
|
// // new OlLayerTile({
|
// zIndex: 5,
|
// title: "中文注记",
|
// source: new XYZ({
|
// url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
|
// }),
|
// // }),
|
// });
|
// this.mapService.push({
|
// layer: layer,
|
// });
|
// window.ol2d.addLayer(layer);
|
// setTimeout(() => {
|
// window.ol2d.removeLayer(layer);
|
// }, 2000);
|
// },
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
#map {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
.controlMap {
|
position: absolute;
|
top: 10px;
|
// left: calc(50% - 97px);
|
left: 390px;
|
z-index: 2 !important;
|
#openTitle {
|
background-color: #fff;
|
border-radius: 5px;
|
}
|
#openDrawLine,
|
#openDrawPoiton {
|
width: 174px;
|
// position: relative;
|
// top: 43px;
|
// top: 10px;
|
// left: calc(50% - 96px);
|
// left: 20px;
|
}
|
.openDrawsb {
|
background-color: #fff;
|
color: black;
|
}
|
.activeDraw {
|
background-color: #409eff;
|
color: #fff;
|
}
|
}
|
#dataConfirm {
|
position: absolute;
|
top: 43px;
|
// left: calc(50% + 82px);
|
left: 564px;
|
z-index: 3 !important;
|
}
|
}
|
</style>
|
