You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1278 lines
36 KiB
1278 lines
36 KiB
<template>
|
|
<div>
|
|
<div style="position: relative">
|
|
<div class="div_search">
|
|
<el-select
|
|
v-model="selAgencyId"
|
|
size="small"
|
|
placeholder="请选择或点击区域选择"
|
|
>
|
|
<el-option
|
|
@click.native="orgChange(index)"
|
|
v-for="(item, index) in subAgencyArray"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<div v-if="selAgencyId && subAgencyArray.length > 0">
|
|
<el-button
|
|
v-if="showBtn && !hasPolygon"
|
|
size="small"
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click="handleAddPolygon"
|
|
>{{ method === "mAddPolygon" ? "取消绘制" : "绘制区域" }}</el-button
|
|
>
|
|
<el-button
|
|
v-if="showBtn && hasPolygon"
|
|
size="small"
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
@click="handleEditPolygon"
|
|
>{{
|
|
method === "mEditPolygon" ? "取消绘制" : "重新绘制"
|
|
}}</el-button
|
|
>
|
|
<!-- <el-button v-if="showBtn&&hasPolygon"
|
|
size="small"
|
|
style="margin-left:10px"
|
|
type="primary"
|
|
icon="el-icon-delete"
|
|
@click="handleDelPolygon">删除区域</el-button> -->
|
|
<el-button
|
|
v-if="showBtn"
|
|
size="small"
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
icon="el-icon-upload2"
|
|
@click="handleManually"
|
|
>手动录入</el-button
|
|
>
|
|
<!-- <el-button v-if="showBtn"
|
|
style="margin-left:10px"
|
|
type="primary"
|
|
icon="el-icon-delete"
|
|
@click="handleSetOffset">设置偏差</el-button> -->
|
|
<span v-if="showBtn && hasPolygon"> 经度偏差：</span>
|
|
<el-input-number
|
|
v-if="showBtn && hasPolygon"
|
|
resize="none"
|
|
size="small"
|
|
style="width: 200px"
|
|
:precision="5"
|
|
:step="0.0001"
|
|
placeholder="请输入经度偏差"
|
|
v-model="xOffset"
|
|
>
|
|
</el-input-number>
|
|
<span v-if="showBtn && hasPolygon"> 纬度偏差：</span>
|
|
<el-input-number
|
|
v-if="showBtn && hasPolygon"
|
|
resize="none"
|
|
size="small"
|
|
:precision="5"
|
|
:step="0.0001"
|
|
style="width: 200px"
|
|
placeholder="请输入维度偏差"
|
|
v-model="yOffset"
|
|
>
|
|
</el-input-number>
|
|
|
|
<el-button
|
|
v-if="showBtn && hasPolygon"
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-folder-add"
|
|
@click="handleOffsetOk"
|
|
>保存</el-button
|
|
>
|
|
<!-- <el-button v-if="showBtn"
|
|
style="margin-left:10px"
|
|
type="primary"
|
|
size="mini"
|
|
icon="el-icon-delete"
|
|
@click="handleOffsetCancel">预览</el-button> -->
|
|
</div>
|
|
</div>
|
|
<div class="div_back">
|
|
<el-button
|
|
v-if="runNum > 0"
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
icon="el-icon-back"
|
|
@click="handleBack"
|
|
>返回上一级</el-button
|
|
>
|
|
</div>
|
|
<div class="div_tip">
|
|
<span>按住alt键单击标注，可以进入下一级地图</span>
|
|
</div>
|
|
<div id="map" class="div_map" :style="{ height: mapHeight + 'px' }"></div>
|
|
</div>
|
|
<el-dialog
|
|
title="手动录入"
|
|
:visible.sync="dialogVisible"
|
|
width="50%"
|
|
:before-close="handleClose"
|
|
>
|
|
<div class="div_textarea">
|
|
<div style="margin-top: 10px">
|
|
<span> 中心点经度：</span>
|
|
<el-input-number
|
|
size="small"
|
|
style="width: 250px"
|
|
v-model="longitude"
|
|
>
|
|
</el-input-number>
|
|
<span style="margin-left: 15px"> 中心点纬度：</span>
|
|
<el-input-number size="small" style="width: 250px" v-model="latitude">
|
|
</el-input-number>
|
|
</div>
|
|
<div style="margin-top: 20px">
|
|
<el-input
|
|
type="textarea"
|
|
:rows="15"
|
|
style="width: 600px; max-height: 500px"
|
|
placeholder="请复制坐标数据"
|
|
v-model="polygonManullyString"
|
|
>
|
|
</el-input>
|
|
</div>
|
|
<div style="margin-top: 20px">
|
|
<span> 经度偏差：</span>
|
|
<el-input-number
|
|
resize="none"
|
|
size="small"
|
|
style="width: 200px"
|
|
:precision="5"
|
|
:step="0.0001"
|
|
placeholder="请输入经度偏差"
|
|
v-model="xOffset_customize"
|
|
>
|
|
</el-input-number>
|
|
<span style="margin-left: 15px"> 纬度偏差：</span>
|
|
<el-input-number
|
|
resize="none"
|
|
size="small"
|
|
:precision="5"
|
|
:step="0.0001"
|
|
style="width: 200px"
|
|
placeholder="请输入维度偏差"
|
|
v-model="yOffset_customize"
|
|
>
|
|
</el-input-number>
|
|
</div>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="handleManuallyOk">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import "ol/ol.css";
|
|
import { Map, View } from "ol";
|
|
import TileLayer from "ol/layer/Tile.js";
|
|
import XYZ from "ol/source/XYZ.js";
|
|
import VectorLayer from "ol/layer/Vector.js";
|
|
import VectorSource from "ol/source/Vector.js";
|
|
import GeoJSON from "ol/format/GeoJSON.js";
|
|
import { defaults as defaultControls, ZoomToExtent } from "ol/control.js";
|
|
import {
|
|
defaults as defaultInteractions,
|
|
Modify,
|
|
Select,
|
|
DoubleClickZoom,
|
|
} from "ol/interaction.js";
|
|
import { getCenter, getWidth } from "ol/extent.js";
|
|
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from "ol/style.js";
|
|
import Draw from "ol/interaction/Draw.js";
|
|
import { mapGetters } from "vuex";
|
|
import { Loading } from "element-ui"; //引入Loading服务
|
|
import { requestPost } from "@/js/dai/request";
|
|
import { altKeyOnly, click, pointerMove } from "ol/events/condition";
|
|
import WMTS from "ol/source/WMTS.js";
|
|
import WMTSTileGrid from "ol/tilegrid/WMTS.js";
|
|
import { mapType } from "@/utils/dai-map";
|
|
import { get as getProjection, Projection, addProjection } from "ol/proj.js";
|
|
import proj4 from "proj4";
|
|
import { register as registerProj4 } from "ol/proj/proj4";
|
|
|
|
var centerPointGlobal = [120.664619, 36.504963];
|
|
let loading; //加载动画
|
|
|
|
let x = 1500;
|
|
let y = 700;
|
|
let size = [x, y];
|
|
let extent = [-x, -y, x, y];
|
|
let projection = new Projection({
|
|
code: "xkcd-image",
|
|
units: "pixels",
|
|
extent: extent,
|
|
});
|
|
|
|
let map;
|
|
let mapView;
|
|
let gaodeMapLayer; //背景地图图层
|
|
let parentLayer; //上级组织图层
|
|
let parentSource; //上级组织多边形
|
|
let polygonLayer; //标注图层
|
|
let polygonSource; //标注多边形
|
|
|
|
let draw; //绘制handle
|
|
let select; //选中标注
|
|
let selectAltClick;
|
|
let selectedFeatures;
|
|
|
|
//标注的文字样式
|
|
var createTextStyle = function (feature) {
|
|
return new Text({
|
|
textAlign: undefined,
|
|
font: "bold 18px Arial",
|
|
//fontFamily: "Courier New, monospace",
|
|
fontWeight: "bold",
|
|
text: feature.values_.name,
|
|
//text: "名称",
|
|
fill: new Fill({ color: "#007ab9" }),
|
|
stroke: new Stroke({ color: "#ffffff", width: 3 }),
|
|
offsetY: 0,
|
|
overflow: true,
|
|
});
|
|
};
|
|
//上级组织标注样式
|
|
var parentStyleFunction = (function () {
|
|
return function (feature) {
|
|
return new Style({
|
|
// fill: new Fill({
|
|
// color: [255, 255, 255, 0.3]
|
|
// }),
|
|
stroke: new Stroke({
|
|
color: [0, 103, 182, 1],
|
|
width: 2,
|
|
}),
|
|
|
|
// text: createTextStyle(feature)
|
|
});
|
|
};
|
|
})();
|
|
|
|
var polygonStyleFunction = (function () {
|
|
return function (feature) {
|
|
return new Style({
|
|
fill: new Fill({
|
|
color: [255, 255, 255, 0.3],
|
|
}),
|
|
stroke: new Stroke({
|
|
color: [0, 153, 255, 1],
|
|
width: 3,
|
|
}),
|
|
|
|
text: createTextStyle(feature),
|
|
});
|
|
};
|
|
})();
|
|
|
|
const vueGis = {
|
|
name: "HomeMap",
|
|
data() {
|
|
return {
|
|
method: "", //绘制方法
|
|
centerPoint: [], //中心点位置
|
|
zoom: 14, //缩放范围：区14
|
|
minZoom: 1, //最小缩放
|
|
isMapLoaded: false, //地图是否加载完毕
|
|
|
|
orgData: {}, //当前组织对象
|
|
orgId: "",
|
|
orgLevel: "",
|
|
|
|
subAgencyArray: [], //下拉框数据
|
|
selAgencyIndex: 0,
|
|
selAgencyId: "", //下拉框选中的组织id
|
|
selAgency: {}, //下拉框选中的组织对象
|
|
hasPolygon: false, //下拉框选中的组织是否有标注
|
|
showBtn: false,
|
|
|
|
selPolygonId: "", //选择的多边形id
|
|
selPolygon: {},
|
|
|
|
//下钻层级记录
|
|
runNum: 0,
|
|
runAgency: [],
|
|
center: [],
|
|
zoom: null,
|
|
parentPolygon: [],
|
|
|
|
//手动录入弹出框
|
|
dialogVisible: false,
|
|
showOffset: false,
|
|
// polygonManullyString: "POLYGON (( 120.33902844 36.10290786, 120.33928218 36.10292997, 120.33956336 36.10316381, 120.34016675 36.10367715, 120.34044913 36.10391476, 120.34045707 36.10392145, 120.34068696 36.10411489, 120.34103181 36.10436285, 120.34117309 36.10441824, 120.34134613 36.10447927, 120.34164715 36.10465122, 120.34124679 36.10507284, 120.34088128 36.10538902, 120.34076198 36.10549222, 120.34053890 36.10520966, 120.34044967 36.10507284, 120.34030632 36.10494761, 120.34019091 36.10484679, 120.33976558 36.10448095, 120.33966658 36.10439980, 120.33947147 36.10425822, 120.33932037 36.10417613, 120.33913002 36.10411307, 120.33895751 36.10406073, 120.33879451 36.10403693, 120.33864104 36.10403158, 120.33864031 36.10395235, 120.33863211 36.10305897, 120.33902175 36.10290728, 120.33902844 36.10290786))",
|
|
polygonManullyString: "",
|
|
|
|
xOffset: 0,
|
|
yOffset: 0,
|
|
xOffset_customize: 0,
|
|
yOffset_customize: 0,
|
|
// xOffset_customize: 0.0051,//市北默认偏移
|
|
// yOffset_customize: 0.0002,//市北默认偏移
|
|
|
|
longitude: undefined,
|
|
latitude: undefined,
|
|
};
|
|
},
|
|
async mounted() {
|
|
//加载组织数据
|
|
await this.loadOrgData();
|
|
// this.runAgency.push(this.orgData)
|
|
|
|
//
|
|
if (mapType == "tdzw") {
|
|
this.initMap2();
|
|
} else {
|
|
this.initMap();
|
|
}
|
|
|
|
//上级组织多边形图层
|
|
this.addParentLayer();
|
|
this.loadParentPolygon();
|
|
|
|
//添加标注图层
|
|
this.addPolygonLayer();
|
|
|
|
//加载当前园区的标注
|
|
this.loadPolygon(this.subAgencyArray);
|
|
},
|
|
methods: {
|
|
//切换下级组织
|
|
orgChange(index) {
|
|
this.selAgencyIndex = index;
|
|
|
|
selectedFeatures.clear();
|
|
|
|
if (this.subAgencyArray.length > 0 && (index || index === 0)) {
|
|
this.showBtn = true;
|
|
this.selAgency = this.subAgencyArray[index];
|
|
if (this.selAgency.coordinates) {
|
|
this.hasPolygon = true;
|
|
this.highlightPolygon();
|
|
} else {
|
|
this.hasPolygon = false;
|
|
}
|
|
} else {
|
|
this.showBtn = false;
|
|
}
|
|
},
|
|
|
|
//刷新地图 isRefreshView:是否需要重置中心点，如果是绘制、删除区域，不需要，如果是下钻或返回需要
|
|
async refreshMap(isRefreshView) {
|
|
//加载组织数据
|
|
await this.loadOrgData();
|
|
this.loadParentPolygon();
|
|
//加载当前园区的标注
|
|
this.loadPolygon(this.subAgencyArray);
|
|
|
|
//重置地图中心点
|
|
// if (isRefreshView) {
|
|
// this.setMapLocation()
|
|
// mapView.setCenter(this.centerPoint);
|
|
// mapView.setZoom(this.zoom);
|
|
// }
|
|
},
|
|
|
|
//返回上一级组织
|
|
handleBack() {
|
|
this.center = this.runAgency[this.runNum - 1].center;
|
|
this.zoom = this.runAgency[this.runNum - 1].zoom;
|
|
this.selAgencyId = "";
|
|
this.runNum--;
|
|
this.runAgency.pop();
|
|
|
|
if (this.runNum === 0) {
|
|
this.orgId = "";
|
|
this.orgLevel = "";
|
|
} else {
|
|
this.orgId = this.runAgency[this.runAgency.length - 1].id;
|
|
this.orgLevel = this.runAgency[this.runAgency.length - 1].level;
|
|
}
|
|
|
|
this.refreshMap(true);
|
|
},
|
|
|
|
//加载组织数据
|
|
async loadOrgData() {
|
|
const url = "/gov/org/agency/maporg";
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
|
|
let params = {
|
|
orgId: this.orgId,
|
|
level: this.orgLevel,
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
this.orgData = data;
|
|
this.subAgencyArray = [];
|
|
if (this.runNum === 0) {
|
|
//第一次进入，绘制本级
|
|
this.subAgencyArray.push(data);
|
|
// this.selAgencyId = data.id
|
|
} else {
|
|
this.parentPolygon = [];
|
|
this.parentPolygon.push(data);
|
|
|
|
if (data.children && data.children.length > 0) {
|
|
this.subAgencyArray = data.children;
|
|
// this.selAgencyId = this.subAgencyArray[0].id
|
|
} else {
|
|
this.subAgencyArray = [];
|
|
// this.selAgencyId = ''
|
|
}
|
|
}
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载父级组织多边形
|
|
loadParentPolygon() {
|
|
parentSource.clear(); //清空标注
|
|
|
|
let featureData = []; //标注数据
|
|
if (this.parentPolygon && this.parentPolygon.length > 0) {
|
|
//判断是否存在下级标注
|
|
let oneData = {};
|
|
|
|
this.parentPolygon.forEach((agencyItem) => {
|
|
if (agencyItem.coordinates && agencyItem.coordinates !== "") {
|
|
//如果有坐标
|
|
oneData = {
|
|
type: "Feature",
|
|
id: agencyItem.id,
|
|
properties: {
|
|
id: agencyItem.id,
|
|
level: agencyItem.level,
|
|
name: agencyItem.name,
|
|
},
|
|
geometry: {
|
|
type: "Polygon",
|
|
coordinates: [],
|
|
},
|
|
};
|
|
let coorArray = agencyItem.coordinates.split(","); //坐标数组
|
|
|
|
let itemArray = []; //单个点位的[lon,lat]，数组
|
|
let polygonArray = []; //整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
|
|
|
|
coorArray.forEach((item, index) => {
|
|
itemArray.push(item);
|
|
if (index % 2 == 0) {
|
|
//偶
|
|
} else {
|
|
//奇
|
|
polygonArray.push(itemArray);
|
|
itemArray = [];
|
|
}
|
|
});
|
|
oneData.geometry.coordinates.push(polygonArray);
|
|
featureData.push(oneData);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (featureData && featureData.length > 0) {
|
|
var geojsonObject = {
|
|
type: "FeatureCollection",
|
|
features: featureData,
|
|
};
|
|
let feature = new GeoJSON().readFeatures(geojsonObject);
|
|
parentSource.addFeatures(feature);
|
|
}
|
|
},
|
|
//加载当前园区的标注
|
|
loadPolygon(subAgencyArray) {
|
|
polygonSource.clear(); //清空标注
|
|
|
|
let featureData = []; //标注数据
|
|
if (subAgencyArray && subAgencyArray.length > 0) {
|
|
//判断是否存在下级标注
|
|
let oneData = {};
|
|
|
|
subAgencyArray.forEach((agencyItem) => {
|
|
if (agencyItem.coordinates && agencyItem.coordinates !== "") {
|
|
//如果有坐标
|
|
oneData = {
|
|
type: "Feature",
|
|
id: agencyItem.id,
|
|
properties: {
|
|
id: agencyItem.id,
|
|
level: agencyItem.level,
|
|
name: agencyItem.name,
|
|
},
|
|
geometry: {
|
|
type: "Polygon",
|
|
coordinates: [],
|
|
},
|
|
};
|
|
let coorArray = agencyItem.coordinates.split(","); //坐标数组
|
|
|
|
let itemArray = []; //单个点位的[lon,lat]，数组
|
|
let polygonArray = []; //整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
|
|
|
|
coorArray.forEach((item, index) => {
|
|
itemArray.push(item);
|
|
if (index % 2 == 0) {
|
|
//偶
|
|
} else {
|
|
//奇
|
|
polygonArray.push(itemArray);
|
|
itemArray = [];
|
|
}
|
|
});
|
|
oneData.geometry.coordinates.push(polygonArray);
|
|
featureData.push(oneData);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (featureData && featureData.length > 0) {
|
|
var geojsonObject = {
|
|
type: "FeatureCollection",
|
|
features: featureData,
|
|
};
|
|
let feature = new GeoJSON().readFeatures(geojsonObject);
|
|
polygonSource.addFeatures(feature);
|
|
}
|
|
this.orgChange(this.selAgencyIndex);
|
|
},
|
|
|
|
//选择feature
|
|
selectFeature(e) {
|
|
if (e.selected.length > 0) {
|
|
console.log("selectFeature22222222222222222222222");
|
|
if (this.method === undefined || this.method === "") {
|
|
this.selAgencyId = e.selected[0].id_;
|
|
this.subAgencyArray.forEach((element, index) => {
|
|
if (element.id === e.selected[0].id_) {
|
|
this.selAgencyIndex = index;
|
|
this.orgChange(index);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
//下钻到下一级
|
|
toSubAgency(e) {
|
|
if (!e.selected[0]) {
|
|
return false;
|
|
}
|
|
|
|
if (this.method != "mAddPolygon" && this.level != "neighborHood") {
|
|
this.selAgencyId = "";
|
|
//下钻到下一级
|
|
this.subAgencyArray.forEach((item) => {
|
|
if (item.id === e.selected[0].id_) {
|
|
this.selPolygonId = item.id;
|
|
this.selPolygon = item;
|
|
this.orgId = item.id;
|
|
this.orgLevel = item.level;
|
|
}
|
|
});
|
|
|
|
this.runNum++;
|
|
this.selPolygon.center = map.getView().getCenter();
|
|
this.selPolygon.zoom = map.getView().getZoom();
|
|
console.log("center", map.getView().getCenter());
|
|
console.log("zoom", map.getView().getZoom());
|
|
|
|
this.runAgency.push(this.selPolygon);
|
|
this.selAgencyIndex = 0;
|
|
this.refreshMap(true);
|
|
}
|
|
},
|
|
|
|
//高亮某个标注
|
|
highlightPolygon() {
|
|
let features = polygonSource.getFeatures();
|
|
features.forEach((element) => {
|
|
if (element.id_ === this.selAgencyId) {
|
|
selectedFeatures.push(element);
|
|
let polygon = element.getGeometry();
|
|
map.getView().fit(polygon, map.getSize());
|
|
this.zoom = map.getView().getZoom() - 2;
|
|
mapView.setZoom(this.zoom);
|
|
}
|
|
});
|
|
},
|
|
//设置地图定位的中心点和缩放级别
|
|
setMapLocation() {
|
|
this.centerPoint = [];
|
|
|
|
if (this.center && this.center.length > 0) {
|
|
this.centerPoint = this.center;
|
|
} else if (this.orgData.longitude && this.orgData.latitude) {
|
|
this.centerPoint.push(this.orgData.longitude);
|
|
this.centerPoint.push(this.orgData.latitude);
|
|
} else {
|
|
this.centerPoint = centerPointGlobal;
|
|
}
|
|
|
|
if (!this.zoom) {
|
|
this.setZoom(this.orgData.agencyLevel);
|
|
}
|
|
},
|
|
|
|
//根据组织层级设置缩放级别
|
|
setZoom(agencyLevel) {
|
|
if (agencyLevel === "district") {
|
|
this.zoom = 12;
|
|
} else if (agencyLevel === "street") {
|
|
this.zoom = 13;
|
|
} else if (agencyLevel === "community") {
|
|
this.zoom = 14;
|
|
} else {
|
|
this.zoom = 11;
|
|
}
|
|
},
|
|
|
|
initMap() {
|
|
this.setMapLocation();
|
|
|
|
gaodeMapLayer = new TileLayer({
|
|
title: "地图",
|
|
// source: new XYZ({
|
|
// url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
|
|
// }),
|
|
// source: new XYZ({
|
|
// url: "http://api.tianditu.gov.cn/api?v=4.0&tk=c4dc987b442bd141a887d8d4a5d07926&x={x}&y={y}&l={z}"
|
|
// }),
|
|
source: new XYZ({
|
|
//指定url瓦片
|
|
url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&style=7<ype=7&scl=0&size=0&x={x}&y={y}&z={z}",
|
|
wrapX: true, //x方向平铺，也可以选择false
|
|
}),
|
|
// zIndex: 20
|
|
});
|
|
// var sourceMark = new XYZ({
|
|
// url: "http://t4.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
|
|
// // zIndex: 22
|
|
// });
|
|
// var tileMark = new TileLayer({
|
|
// title: "标注图层",
|
|
// source: sourceMark,
|
|
// });
|
|
|
|
(mapView = new View({
|
|
//中心点坐标
|
|
center: this.centerPoint,
|
|
// projection: 'EPSG:3857',
|
|
projection: "EPSG:4326",
|
|
zoom: this.zoom,
|
|
minZoom: this.minZoom,
|
|
})),
|
|
//初始化map和地图底图
|
|
//创建地图容器
|
|
(map = new Map({
|
|
layers: [gaodeMapLayer],
|
|
// layers: [gaodeMapLayer, tileMark],
|
|
//加载瓦片图层数据
|
|
view: mapView,
|
|
target: "map",
|
|
//目标加载到map中
|
|
}));
|
|
|
|
map.on("singleclick", function (e) {
|
|
// console.log(e.coordinate)
|
|
// console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
|
|
});
|
|
|
|
//去除双击放大效果
|
|
const dblClickInteraction = map
|
|
.getInteractions()
|
|
.getArray()
|
|
.find((interaction) => {
|
|
return interaction instanceof DoubleClickZoom;
|
|
});
|
|
map.removeInteraction(dblClickInteraction);
|
|
},
|
|
|
|
// 烟台专用
|
|
initMap2() {
|
|
this.setMapLocation();
|
|
|
|
proj4.defs(
|
|
"EPSG:4490",
|
|
'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]'
|
|
);
|
|
registerProj4(proj4);
|
|
//重写projection4490，
|
|
var projection = new Projection({
|
|
code: "EPSG:4490",
|
|
units: "degrees",
|
|
axisOrientation: "neu",
|
|
});
|
|
projection.setExtent([-180, -90, 180, 90]);
|
|
projection.setWorldExtent([-180, -90, 180, 90]);
|
|
addProjection(projection);
|
|
|
|
let projectionExtent = projection.getExtent();
|
|
let size = getWidth(projectionExtent) / 256; //size就是一个像素代表的经纬度
|
|
let matrixIds = [];
|
|
|
|
function getResolutions() {
|
|
let resolutions = [];
|
|
for (let z = 7; z < 19; ++z) {
|
|
resolutions[z] = size / Math.pow(2, z);
|
|
matrixIds[z] = z;
|
|
}
|
|
return resolutions;
|
|
}
|
|
|
|
const resolutions = getResolutions();
|
|
|
|
console.log("========= getProjection", getProjection("EPSG:4490"));
|
|
|
|
let url = "http://59.206.203.34/tileservice/SDPubMap";
|
|
if (window.SITE_CONFIG["nodeEnv"] == "dev_sdtdt") {
|
|
url =
|
|
"http://service.sdmap.gov.cn/tileservice/sdpubmap?tk=e758167d5b90c351b70a979c0820840c";
|
|
}
|
|
|
|
gaodeMapLayer = new TileLayer({
|
|
title: "地图",
|
|
source: new WMTS({
|
|
url,
|
|
layer: "sdvec",
|
|
matrixSet: "c",
|
|
format: "image/png",
|
|
projection: getProjection("EPSG:4490"),
|
|
tileGrid: new WMTSTileGrid({
|
|
origin: [-180, 90],
|
|
resolutions,
|
|
matrixIds,
|
|
}),
|
|
style: "default",
|
|
tilematrixset: "c",
|
|
// wrapX: true,
|
|
tileLoadFunction(imageTile, src) {
|
|
// 使用滤镜 将白色修改为深色
|
|
let img = new Image();
|
|
// img.crossOrigin = ''
|
|
// 设置图片不从缓存取，从缓存取可能会出现跨域，导致加载失败
|
|
img.setAttribute("crossOrigin", "anonymous");
|
|
img.onload = function () {
|
|
let canvas = document.createElement("canvas");
|
|
let w = img.width;
|
|
let h = img.height;
|
|
canvas.width = w;
|
|
canvas.height = h;
|
|
let context = canvas.getContext("2d");
|
|
context.filter =
|
|
"grayscale(92%) invert(100%) sepia(20%) hue-rotate(140deg) saturate(2000%) brightness(70%) contrast(80%)";
|
|
context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
|
|
imageTile.getImage().src = canvas.toDataURL("image/png");
|
|
};
|
|
img.src = src;
|
|
},
|
|
}),
|
|
});
|
|
|
|
(mapView = new View({
|
|
//中心点坐标
|
|
center: this.centerPoint,
|
|
projection: getProjection("EPSG:4490"),
|
|
zoom: this.zoom,
|
|
minZoom: this.minZoom,
|
|
})),
|
|
//初始化map和地图底图
|
|
//创建地图容器
|
|
(map = new Map({
|
|
layers: [gaodeMapLayer],
|
|
//加载瓦片图层数据
|
|
view: mapView,
|
|
target: "map",
|
|
//目标加载到map中
|
|
}));
|
|
|
|
map.on("singleclick", function (e) {
|
|
// console.log(e.coordinate)
|
|
// console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
|
|
});
|
|
|
|
//去除双击放大效果
|
|
const dblClickInteraction = map
|
|
.getInteractions()
|
|
.getArray()
|
|
.find((interaction) => {
|
|
return interaction instanceof DoubleClickZoom;
|
|
});
|
|
map.removeInteraction(dblClickInteraction);
|
|
},
|
|
|
|
//添加标注图层
|
|
addParentLayer() {
|
|
parentSource = new VectorSource({
|
|
//features: (new GeoJSON()).readFeatures(geojsonObject)
|
|
});
|
|
|
|
parentLayer = new VectorLayer({
|
|
source: parentSource,
|
|
style: parentStyleFunction,
|
|
zIndex: 50,
|
|
});
|
|
|
|
map.addLayer(parentLayer);
|
|
},
|
|
//添加标注图层
|
|
addPolygonLayer() {
|
|
polygonSource = new VectorSource({
|
|
//features: (new GeoJSON()).readFeatures(geojsonObject)
|
|
});
|
|
|
|
polygonLayer = new VectorLayer({
|
|
source: polygonSource,
|
|
style: polygonStyleFunction,
|
|
zIndex: 50,
|
|
});
|
|
|
|
//选中多边形后的样式
|
|
var overlayStyle = (function () {
|
|
return function (feature) {
|
|
var styles = {};
|
|
styles["Polygon"] = [
|
|
new Style({
|
|
stroke: new Stroke({
|
|
color: "#ec9000",
|
|
width: 2,
|
|
}),
|
|
}),
|
|
|
|
new Style({
|
|
fill: new Fill({
|
|
color: "rgba(0, 0, 255, 0.1)",
|
|
}),
|
|
}),
|
|
new Style({
|
|
text: createTextStyle(feature),
|
|
}),
|
|
];
|
|
styles["MultiPolygon"] = styles["Polygon"];
|
|
return styles[feature.getGeometry().getType()];
|
|
};
|
|
})();
|
|
|
|
select = new Select({
|
|
style: overlayStyle,
|
|
});
|
|
|
|
selectAltClick = new Select({
|
|
condition: function (mapBrowserEvent) {
|
|
return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent);
|
|
},
|
|
});
|
|
|
|
selectedFeatures = select.getFeatures();
|
|
|
|
map.addLayer(polygonLayer);
|
|
map.addInteraction(select);
|
|
map.addInteraction(selectAltClick);
|
|
|
|
select.on("select", (e) => {
|
|
this.selectFeature(e);
|
|
});
|
|
selectAltClick.on("select", (e) => {
|
|
this.toSubAgency(e);
|
|
});
|
|
},
|
|
//点击【手动录入】
|
|
handleManually() {
|
|
this.dialogVisible = true;
|
|
this.polygonManullyString = "";
|
|
this.longitude = undefined;
|
|
this.latitude = undefined;
|
|
if (this.selAgency) {
|
|
if (this.selAgency.longitude) {
|
|
this.longitude = this.selAgency.longitude;
|
|
}
|
|
if (this.selAgency.latitude) {
|
|
this.latitude = this.selAgency.latitude;
|
|
}
|
|
}
|
|
},
|
|
|
|
//点击【手动录入】
|
|
handleClose() {
|
|
this.dialogVisible = false;
|
|
},
|
|
|
|
handleManuallyOk() {
|
|
if (this.longitude || this.latitude) {
|
|
if (!(this.longitude && this.latitude)) {
|
|
this.$message({
|
|
type: "warning",
|
|
message: "请同时填写中心点经纬度，或不填写",
|
|
});
|
|
return false;
|
|
}
|
|
}
|
|
//转化成需要的格式
|
|
//120.54033616308595,36.53603370922851,120.69620469335939,36.5408402277832,120.63166001562502,36.46771248120117,120.52728989843752,36.458786089599606,120.54033616308595,36.53603370922851
|
|
//中国经纬度范围
|
|
// 经度范围：73°33′E至135°05′E 东经
|
|
// 纬度范围：3°51′N至53°33′N 北纬
|
|
let aaa = this.polygonManullyString.replace(/\[/g, ",");
|
|
aaa = aaa.replace(/\]/g, ",");
|
|
|
|
let array = aaa.split(/[, ()]/);
|
|
// const arrayString = this.polygonManullyString
|
|
// let array = arrayString.split(",|(|)|[|]")
|
|
console.log(array);
|
|
let polygonStringResult = "";
|
|
|
|
// const arrayString = this.polygonManullyString
|
|
// let array = arrayString.split(/[, ()]/)
|
|
// console.log(array)
|
|
// let polygonStringResult = ''
|
|
|
|
array.forEach((element) => {
|
|
let num = Number(element);
|
|
if (num) {
|
|
polygonStringResult = polygonStringResult + element + ",";
|
|
}
|
|
});
|
|
|
|
polygonStringResult = polygonStringResult.substring(
|
|
0,
|
|
polygonStringResult.length - 1
|
|
);
|
|
|
|
if (this.xOffset_customize !== 0 || this.yOffset_customize !== 0) {
|
|
this.saveOffset(
|
|
this.xOffset_customize,
|
|
this.yOffset_customize,
|
|
polygonStringResult
|
|
);
|
|
} else {
|
|
this.addPolygon(polygonStringResult);
|
|
}
|
|
},
|
|
|
|
handleSetOffset() {
|
|
this.showOffset = true;
|
|
},
|
|
handleOffsetOk() {
|
|
let selPolygonString = "";
|
|
|
|
this.subAgencyArray.forEach((element) => {
|
|
if (
|
|
element.id === this.selAgencyId &&
|
|
element.coordinates &&
|
|
element.coordinates.length > 0
|
|
) {
|
|
selPolygonString = element.coordinates;
|
|
}
|
|
});
|
|
|
|
if (selPolygonString) {
|
|
this.saveOffset(this.xOffset, this.yOffset, selPolygonString);
|
|
}
|
|
},
|
|
saveOffset(xOffset, yOffset, selPolygonString) {
|
|
let offsetPolygonString = ""; //偏移后的坐标字符串
|
|
let tempArray = selPolygonString.split(",");
|
|
|
|
tempArray.forEach((element, index) => {
|
|
let aaa = 0;
|
|
|
|
if (index % 2 === 0) {
|
|
//偶数
|
|
aaa = parseFloat(element) + parseFloat(xOffset);
|
|
} else {
|
|
aaa = parseFloat(element) + parseFloat(yOffset);
|
|
}
|
|
|
|
if (index % 2 !== 0) {
|
|
//奇数
|
|
}
|
|
offsetPolygonString = offsetPolygonString + aaa + ",";
|
|
});
|
|
|
|
offsetPolygonString = offsetPolygonString.substring(
|
|
0,
|
|
offsetPolygonString.length - 1
|
|
);
|
|
this.addPolygon(offsetPolygonString);
|
|
},
|
|
handleSetOffset() {
|
|
this.handleOffsetCancel = false;
|
|
},
|
|
|
|
//点击【绘制区域】
|
|
handleAddPolygon() {
|
|
if (this.method === "mAddPolygon") {
|
|
this.method = "";
|
|
map.removeInteraction(draw);
|
|
} else if (this.selAgency) {
|
|
this.method = "mAddPolygon";
|
|
//绘制
|
|
this.drawPolygon();
|
|
} else {
|
|
this.$message({
|
|
type: "warning",
|
|
message: "请先选择组织",
|
|
});
|
|
}
|
|
},
|
|
|
|
//点击【重新绘制】
|
|
handleEditPolygon() {
|
|
if (this.method === "mEditPolygon") {
|
|
this.method = "";
|
|
map.removeInteraction(draw);
|
|
this.loadPolygon(this.subAgencyArray);
|
|
} else {
|
|
this.method = "mEditPolygon";
|
|
//暂时隐藏要重新绘制的标注
|
|
this.hidePolygon();
|
|
|
|
//绘制
|
|
this.drawPolygon();
|
|
}
|
|
},
|
|
|
|
//点击【删除标注】
|
|
handleDelPolygon() {
|
|
map.removeInteraction(draw);
|
|
this.$confirm("确认删除" + this.selAgency.name + "?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
this.method = "delPolygon";
|
|
this.delPolygon();
|
|
})
|
|
.catch((err) => {
|
|
if (err == "cancel") {
|
|
// this.$message({
|
|
// type: "info",
|
|
// message: "已取消删除"
|
|
// });
|
|
}
|
|
this.method = "";
|
|
});
|
|
},
|
|
|
|
//隐藏Polygon（前端隐藏，非删除）
|
|
hidePolygon() {
|
|
let polygonTempArray = [];
|
|
|
|
this.subAgencyArray.forEach((element) => {
|
|
if (element.id !== this.selAgencyId) {
|
|
polygonTempArray.push(element);
|
|
}
|
|
});
|
|
|
|
this.loadPolygon(polygonTempArray);
|
|
},
|
|
|
|
//绘制Polygon
|
|
drawPolygon() {
|
|
draw = new Draw({
|
|
source: polygonSource,
|
|
type: "Polygon",
|
|
});
|
|
map.addInteraction(draw);
|
|
|
|
draw.on("drawend", (feature) => {
|
|
this.polygonCoor = feature.feature.values_.geometry.flatCoordinates;
|
|
|
|
let coorString = "";
|
|
for (let i = 0; i < this.polygonCoor.length; i++) {
|
|
coorString = coorString + this.polygonCoor[i] + ",";
|
|
}
|
|
if (this.polygonCoor.length > 0) {
|
|
coorString = coorString.substring(0, coorString.length - 1);
|
|
}
|
|
|
|
if (this.method === "mEditPolygon") {
|
|
this.$confirm("是否确认覆盖原有区域?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
this.addPolygon(coorString);
|
|
})
|
|
.catch((err) => {
|
|
this.loadPolygon(this.subAgencyArray);
|
|
});
|
|
} else {
|
|
this.addPolygon(coorString);
|
|
}
|
|
|
|
this.method = "";
|
|
map.removeInteraction(draw);
|
|
});
|
|
},
|
|
|
|
//新增标注
|
|
async addPolygon(coorString) {
|
|
console.log(coorString);
|
|
const url = "/gov/org/agency/mapaddarea";
|
|
|
|
let params = {
|
|
orgId: this.selAgency.id,
|
|
level: this.selAgency.level,
|
|
coordinates: coorString,
|
|
longitude: this.longitude,
|
|
latitude: this.latitude,
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "绘制成功",
|
|
});
|
|
if (this.dialogVisible) {
|
|
this.polygonManullyString = "";
|
|
this.dialogVisible = false;
|
|
}
|
|
this.refreshMap(false);
|
|
} else {
|
|
this.$message({
|
|
type: "error",
|
|
message: "绘制失败，请重试",
|
|
});
|
|
}
|
|
},
|
|
|
|
//删除标注
|
|
async delPolygon() {
|
|
const url = "/gov/org/agency/mapdelarea";
|
|
|
|
let params = {
|
|
orgId: this.selAgency.id,
|
|
level: this.selAgency.level,
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "删除成功",
|
|
});
|
|
this.method = "";
|
|
this.selAgencyIndex = 0;
|
|
this.refreshMap(false);
|
|
}
|
|
},
|
|
//开启加载动画
|
|
startLoading() {
|
|
loading = Loading.service({
|
|
lock: true, //是否锁定
|
|
text: "正在加载……", //加载中需要显示的文字
|
|
background: "rgba(0,0,0,.7)", //背景颜色
|
|
});
|
|
},
|
|
|
|
//结束加载动画
|
|
endLoading() {
|
|
//clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close();
|
|
}
|
|
},
|
|
},
|
|
props: {
|
|
vueFlag: {
|
|
type: String,
|
|
default: "alarm",
|
|
},
|
|
},
|
|
computed: {
|
|
extentXOffset() {
|
|
if (this.clientHeight < 900) {
|
|
return 0.88;
|
|
} else {
|
|
return 0.95;
|
|
}
|
|
},
|
|
extentYOffset() {
|
|
return 0.95;
|
|
},
|
|
imgExtent() {
|
|
return [
|
|
-x * this.extentXOffset,
|
|
-y * this.extentYOffset,
|
|
x * this.extentXOffset,
|
|
y * this.extentYOffset,
|
|
];
|
|
},
|
|
mapHeight() {
|
|
return this.clientHeight - 170;
|
|
},
|
|
// zoom: {
|
|
// get () {
|
|
// //根据不同屏幕分辨率，控制zoom大小
|
|
// if (this.clientHeight < 900) {
|
|
// return 2.3
|
|
// } else {
|
|
// return 2.8
|
|
// }
|
|
// },
|
|
// set (value) {
|
|
// }
|
|
// },
|
|
...mapGetters(["clientHeight"]),
|
|
},
|
|
components: {},
|
|
};
|
|
export default vueGis;
|
|
</script>
|
|
|
|
<style scoped>
|
|
.div_search {
|
|
z-index: 10;
|
|
|
|
display: flex;
|
|
}
|
|
.div_back {
|
|
z-index: 10;
|
|
right: 10px;
|
|
top: 1px;
|
|
position: absolute;
|
|
display: flex;
|
|
}
|
|
.div_tip {
|
|
z-index: 10;
|
|
position: absolute;
|
|
bottom: 1px;
|
|
right: 2px;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
padding: 3px 10px;
|
|
font-size: 15px;
|
|
}
|
|
.div_map {
|
|
margin-top: 15px;
|
|
width: 100%;
|
|
}
|
|
.div_textarea {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<style>
|
|
.ol-overlaycontainer-stopevent {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|