<!--
|
* @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 TileArcGISRest from "ol/source/TileArcGISRest";
|
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";
|
|
export default {
|
name: "MapInThere",
|
components: {
|
tip,
|
},
|
data() {
|
return {
|
toMoveTime: null,
|
oldService: "",
|
mapService: [],
|
};
|
},
|
mounted() {
|
const ol2d = new OlMap({
|
layers: [
|
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();
|
//设置中心点
|
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 TileArcGISRest({
|
url: data[data.length - 1].service, // 注记
|
// '水系图', http://59.55.128.156:6080/arcgis/rest/services/fuzhoupcsdhl/MapServer
|
// '行政区', http://59.55.128.156:6080/arcgis/rest/services/fzxzq/MapServer
|
}),
|
// }),
|
});
|
let doit = () => {
|
this.toMoveTime = setTimeout(() => {
|
console.log(window.ol2d);
|
|
// console.log(layer.getData());
|
// // let position = layer.values_.source.tmpExtent_;
|
// let position = layer.renderer_.renderedExtent_;
|
// let lonlat = [
|
// [position[0], position[1]],
|
// [position[2], position[3]],
|
// ];
|
// let pot = layer.getFeatures()[0];
|
// console.log(pot);
|
// // let zoomto = new ZoomToExtent({ extent: lonlat });
|
// // console.log(window.ol2d);
|
// // window.ol2d.zoomToExtent(position);
|
// this.view.setCenter(lonlat[0]);
|
}, 500);
|
};
|
if (this.toMoveTime) {
|
clearTimeout(this.toMoveTime);
|
doit();
|
} else {
|
doit();
|
}
|
|
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);
|
}
|
}
|
},
|
},
|
};
|
</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>
|
