Browse Source

地图配置调整

jly/task002
dai 3 years ago
committed by tianq
parent
commit
089e5d2765
  1. 236
      src/views/modules/workSys/mapConfig.vue

236
src/views/modules/workSys/mapConfig.vue

@ -24,7 +24,9 @@
type="primary"
icon="el-icon-plus"
@click="handleAddPolygon"
>{{ method === "mAddPolygon" ? "取消绘制" : "绘制区域" }}</el-button
>{{
method === "mAddPolygon" ? "取消绘制" : "绘制区域"
}}</el-button
>
<el-button
v-if="showBtn && hasPolygon"
@ -112,7 +114,11 @@
<div class="div_tip">
<span>按住alt键单击标注可以进入下一级地图</span>
</div>
<div id="map" class="div_map" :style="{ height: mapHeight + 'px' }"></div>
<div
id="map"
class="div_map"
:style="{ height: mapHeight + 'px' }"
></div>
</div>
<el-dialog
title="手动录入"
@ -130,7 +136,11 @@
>
</el-input-number>
<span style="margin-left: 15px"> 中心点纬度</span>
<el-input-number size="small" style="width: 250px" v-model="latitude">
<el-input-number
size="small"
style="width: 250px"
v-model="latitude"
>
</el-input-number>
</div>
<div style="margin-top: 20px">
@ -171,7 +181,9 @@
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="handleManuallyOk"> </el-button>
<el-button type="primary" @click="handleManuallyOk"
> </el-button
>
</span>
</el-dialog>
</div>
@ -205,6 +217,7 @@ 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";
import tdtWpZw from "@/utils/tdt-wp-zw";
var centerPointGlobal = [120.664619, 36.504963];
let loading; //
@ -451,7 +464,10 @@ const vueGis = {
let oneData = {};
this.parentPolygon.forEach((agencyItem) => {
if (agencyItem.coordinates && agencyItem.coordinates !== "") {
if (
agencyItem.coordinates &&
agencyItem.coordinates !== ""
) {
//
oneData = {
type: "Feature",
@ -506,7 +522,10 @@ const vueGis = {
let oneData = {};
subAgencyArray.forEach((agencyItem) => {
if (agencyItem.coordinates && agencyItem.coordinates !== "") {
if (
agencyItem.coordinates &&
agencyItem.coordinates !== ""
) {
//
oneData = {
type: "Feature",
@ -653,6 +672,7 @@ const vueGis = {
// 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&ltype=7&scl=0&size=0&x={x}&y={y}&z={z}",
@ -703,91 +723,26 @@ const vueGis = {
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;
},
source: new XYZ({
//url
url: tdtWpZw.vec,
wrapX: true, //xfalse
}),
// zIndex: 20
});
(mapView = new View({
//
center: this.centerPoint,
projection: getProjection("EPSG:4490"),
// projection: 'EPSG:3857',
projection: "EPSG:4326",
zoom: this.zoom,
minZoom: this.minZoom,
})),
@ -795,6 +750,7 @@ const vueGis = {
//
(map = new Map({
layers: [gaodeMapLayer],
// layers: [gaodeMapLayer, tileMark],
//
view: mapView,
target: "map",
@ -816,6 +772,119 @@ const vueGis = {
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({
@ -874,7 +943,9 @@ const vueGis = {
selectAltClick = new Select({
condition: function (mapBrowserEvent) {
return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent);
return (
click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent)
);
},
});
@ -1092,7 +1163,8 @@ const vueGis = {
map.addInteraction(draw);
draw.on("drawend", (feature) => {
this.polygonCoor = feature.feature.values_.geometry.flatCoordinates;
this.polygonCoor =
feature.feature.values_.geometry.flatCoordinates;
let coorString = "";
for (let i = 0; i < this.polygonCoor.length; i++) {

Loading…
Cancel
Save