Niko
/
shuili_manager
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
429 Commits
4 Branches
0 Tags
192 MiB
 
 
 
 
 
Tree: 5a717eb835
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5a717eb835'
${ noResults }
shuili_manager/jwtech-admin-page/src/views/marketSupervision/map.vue

752 lines
22 KiB
Raw Blame History

<template>
<div class="app-container">
<div id="map"></div>
<div
id="coordsResult"
style="
position: absolute;
bottom: 5px;
right: 10px;
z-index: 2000;
text-align: right;
"
>
<p>
<input
id="coordsText"
type="text"
value=""
style="background: none; border: none"
readonly="true"
/>
</p>
</div>
<div
id="scaleResult"
style="
position: absolute;
bottom: 23px;
right: 10px;
z-index: 2000;
text-align: right;
"
>
<p>
<input
id="scaleText"
type="text"
value=""
style="background: none; border: none"
readonly="true"
/>
</p>
</div>
</div>
</template>
<script
type="text/javascript"
src="http://19.25.35.204:31190/iserver/services/map-GuangDongShengYiZhangTuFaBu/rest/static/js/updateURI.js"
></script>
<script>
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
var map,
layer,
options,
prjCoordSys,
epsgcode,
url =
"http://19.25.35.204:31190/iserver/services/map-GuangDongShengYiZhangTuFaBu/rest/maps/广东省一张图发布",
isSingleImage = false;
var lon = 0,
lat = 0,
zoomlevel = 2,
initZoomToScale;
var queryString = "";
var originResult = {
viewBounds: {
top: 23.795836840419135,
left: 112.45809863669047,
bottom: 21.947781263947,
leftBottom: { x: 112.45809863669047, y: 21.947781263947 },
right: 114.30615421316261,
rightTop: { x: 114.30615421316261, y: 23.795836840419135 },
},
viewer: {
leftTop: { x: 0, y: 0 },
top: 0,
left: 0,
bottom: 256,
rightBottom: { x: 256, y: 256 },
width: 256,
right: 256,
height: 256,
},
distanceUnit: "METER",
minVisibleTextSize: 0.1,
coordUnit: "DEGREE",
scale: 3.2924274222233053e-7,
description: "",
paintBackground: true,
maxVisibleTextSize: 1000,
maxVisibleVertex: 36000000,
clipRegionEnabled: false,
antialias: true,
textOrientationFixed: false,
angle: 0,
prjCoordSys: {
distanceUnit: "METER",
projectionParam: null,
epsgCode: 4490,
coordUnit: "DEGREE",
name: "GCS_China_2000",
projection: null,
type: "PCS_EARTH_LONGITUDE_LATITUDE",
coordSystem: {
datum: {
name: "D_China_2000",
type: "DATUM_CHINA_2000",
spheroid: {
flatten: 0.003352810681182319,
name: "CGCS2000",
axis: 6378137,
type: "SPHEROID_CHINA_2000",
},
},
unit: "DEGREE",
spatialRefType: "SPATIALREF_EARTH_LONGITUDE_LATITUDE",
name: "GCS_China_2000",
type: "GCS_CHINA_2000",
primeMeridian: {
longitudeValue: 0,
name: "Greenwich",
type: "PRIMEMERIDIAN_GREENWICH",
},
},
},
minScale: 0,
markerAngleFixed: false,
overlapDisplayedOptions: {
allowPointWithTextDisplay: true,
horizontalOverlappedSpaceSize: 0,
allowPointOverlap: true,
allowThemeGraduatedSymbolOverlap: false,
verticalOverlappedSpaceSize: 0,
allowTextOverlap: false,
allowThemeGraphOverlap: false,
allowTextAndPointOverlap: true,
},
visibleScales: [],
dpi: 96,
visibleScalesEnabled: false,
customEntireBoundsEnabled: false,
clipRegion: {
center: null,
parts: null,
style: null,
prjCoordSys: null,
id: 0,
type: "REGION",
partTopo: null,
points: null,
},
maxScale: 1.0e12,
customParams: "",
center: { x: 113.38212642492654, y: 22.871809052183067 },
dynamicPrjCoordSyses: [
{
distanceUnit: null,
projectionParam: null,
epsgCode: 0,
coordUnit: null,
name: null,
projection: null,
type: "PCS_ALL",
coordSystem: null,
},
],
colorMode: "DEFAULT",
textAngleFixed: false,
overlapDisplayed: false,
userToken: { userID: "" },
cacheEnabled: true,
dynamicProjection: true,
autoAvoidEffectEnabled: true,
customEntireBounds: null,
name: "广东省一张图发布",
bounds: {
top: 25.5196230540001,
left: 109.663765536,
bottom: 20.223995049,
leftBottom: { x: 109.663765536, y: 20.223995049 },
right: 117.187114919,
rightTop: { x: 117.187114919, y: 25.5196230540001 },
},
backgroundStyle: {
fillGradientOffsetRatioX: 0,
markerSize: 2.4,
fillForeColor: { red: 255, green: 255, blue: 255, alpha: 255 },
fillGradientOffsetRatioY: 0,
markerWidth: 0,
markerAngle: 0,
fillSymbolID: 0,
lineColor: { red: 0, green: 0, blue: 0, alpha: 255 },
markerSymbolID: 0,
lineWidth: 0.1,
markerHeight: 0,
fillOpaqueRate: 100,
fillBackOpaque: true,
fillBackColor: { red: 255, green: 255, blue: 255, alpha: 255 },
fillGradientMode: "NONE",
lineSymbolID: 0,
fillGradientAngle: 0,
},
};
export default {
data() {
return {};
},
created() {
this.init();
// 中继服务发送的请求，queryString字段是类似“token=&isSingleImage=true"这种情况，和普通请求做一下兼容处理
var parms = queryString.split("&");
for (var i = 0; i < parms.length; i++) {
if (parms[i] == "isSingleImage=true") {
isSingleImage = true;
break;
}
}
},
methods: {
init() {
// 修改页面标题
var mapName = url;
this.setPrjCoordSys(); // 初始化动态投影参数
mapName = mapName.substring(mapName.lastIndexOf("/") + 1);
mapName = decodeURI(mapName);
// document.title = mapName + "资源leaflet表述";
this.loadMap();
},
initedLayer() {
map.addLayer(layer);
map.setView(L.latLng(lat, lon), zoomlevel);
map.on("move", showScale);
this.showScale();
this.showCoords();
},
loadMap(getMapStatusEventArgs) {
var visableResolution = [];
var mapcrs = L.CRS.EPSG3857;
options = {};
// 初始化时修改成22级，和计算scales数组时保持一致
options.maxZoom = 22;
options.minZoom = 0;
var maxZoom = 22;
var zoom = 0;
if (originResult.overlapDisplayed) {
options.overlapDisplayed = originResult.overlapDisplayed;
}
var envelope;
if (originResult.prjCoordSys) {
var resolution;
if (originResult.prjCoordSys.coordUnit) {
resolution = this.scaleToResolution(
originResult.scale,
originResult.dpi,
originResult.prjCoordSys.coordUnit
);
}
if (visableResolution.length == 0) {
envelope = this.getProjectionExtent();
if (!envelope) {
envelope = originResult.bounds;
}
visableResolution = getStyleResolutions(envelope);
var scales = getScales(envelope, originResult.prjCoordSys.coordUnit);
if (originResult.scale) {
var temp;
for (var j = 0; j < scales.length; j++) {
if (j == 0) {
temp = Math.abs(originResult.scale - scales[j]);
}
if (temp > Math.abs(originResult.scale - scales[j])) {
temp = Math.abs(originResult.scale - scales[j]);
zoom = j;
}
}
}
} else {
if (resolution) {
var temp;
for (var j = 0; j < visableResolution.length; j++) {
if (j == 0) {
temp = Math.abs(resolution - visableResolution[j]);
}
if (temp > Math.abs(resolution - visableResolution[j])) {
temp = Math.abs(resolution - visableResolution[j]);
zoom = j;
}
}
}
}
if (isSingleImage) {
if (epsgcode && originResult.prjCoordSys.type != "PCS_NON_EARTH") {
//有设置动态投影而且不是平面坐标的地图
if (epsgcode == "4326") {
options.projection = 4326;
if (visableResolution.length > 0) {
mapcrs = L.Proj.CRS("EPSG:4326", {
resolutions: visableResolution,
bounds: L.bounds(
[originResult.bounds.left, originResult.bounds.bottom],
[originResult.bounds.right, originResult.bounds.top]
),
});
} else {
mapcrs = L.Proj.EPSG4326;
}
} else if (epsgcode == "3857") {
options.projection = 3857;
if (visableResolution.length > 0) {
mapcrs = L.Proj.CRS("EPSG:3857", {
resolutions: visableResolution,
bounds: L.bounds(
[originResult.bounds.left, originResult.bounds.bottom],
[originResult.bounds.right, originResult.bounds.top]
),
});
} else {
mapcrs = L.Proj.EPSG3857;
}
}
} else {
//没有设置动态投影
if (
originResult.prjCoordSys.epsgCode == "4326" ||
originResult.prjCoordSys.type == "PCS_EARTH_LONGITUDE_LATITUDE"
) {
if (visableResolution.length > 0) {
mapcrs = L.Proj.CRS("EPSG:4326", {
resolutions: visableResolution,
bounds: L.bounds(
[originResult.bounds.left, originResult.bounds.bottom],
[originResult.bounds.right, originResult.bounds.top]
),
});
} else {
mapcrs = L.Proj.EPSG4326;
}
} else if (originResult.prjCoordSys.epsgCode == "3857") {
if (visableResolution.length > 0) {
mapcrs = L.Proj.CRS("EPSG:3857", {
resolutions: visableResolution,
bounds: L.bounds(
[originResult.bounds.left, originResult.bounds.bottom],
[originResult.bounds.right, originResult.bounds.top]
),
});
} else {
mapcrs = L.Proj.EPSG3857;
}
} else {
if (visableResolution.length > 0) {
mapcrs = L.CRS.NonEarthCRS({
bounds: L.bounds(
[originResult.bounds.left, originResult.bounds.bottom],
[originResult.bounds.right, originResult.bounds.top]
),
resolutions: visableResolution,
origin: L.point(
originResult.bounds.left,
originResult.bounds.top
),
});
} else {
mapcrs = L.CRS.NonEarthCRS({
bounds: L.bounds(
[originResult.bounds.left, originResult.bounds.bottom],
[originResult.bounds.right, originResult.bounds.top]
),
origin: L.point(
originResult.bounds.left,
originResult.bounds.top
),
});
}
}
}
} else {
if (epsgcode && originResult.prjCoordSys.type != "PCS_NON_EARTH") {
//有设置动态投影而且不是平面坐标的地图
if (epsgcode == "4326") {
options.projection = 4326;
if (visableResolution.length > 0) {
mapcrs = this.getCRS(
"EPSG:4326",
originResult.bounds,
visableResolution
);
} else {
mapcrs = this.getCRS("EPSG:4326", originResult.bounds);
}
} else if (epsgcode == "3857") {
options.projection = 3857;
if (visableResolution.length > 0) {
mapcrs = this.getCRS(
"EPSG:3857",
originResult.bounds,
visableResolution
);
} else {
mapcrs = this.getCRS("EPSG:3857", originResult.bounds);
}
}
} else {
//没有设置动态投影
if (
originResult.prjCoordSys.epsgCode == "4326" ||
originResult.prjCoordSys.type == "PCS_EARTH_LONGITUDE_LATITUDE"
) {
lon = (originResult.bounds.left + originResult.bounds.right) / 2;
lat = (originResult.bounds.bottom + originResult.bounds.top) / 2;
var epsgStr = "EPSG:4326";
if (visableResolution.length > 0) {
mapcrs = this.getCRS(
epsgStr,
originResult.bounds,
visableResolution
);
} else {
mapcrs = this.getCRS(epsgStr, originResult.bounds);
}
} else if (originResult.prjCoordSys.epsgCode == "3857") {
if (visableResolution.length > 0) {
mapcrs = this.getCRS(
"EPSG:3857",
originResult.bounds,
visableResolution
);
} else {
mapcrs = this.getCRS("EPSG:3857", originResult.bounds);
}
} else {
if (visableResolution.length > 0) {
mapcrs = L.CRS.NonEarthCRS({
bounds: L.bounds(
[originResult.bounds.left, originResult.bounds.bottom],
[originResult.bounds.right, originResult.bounds.top]
),
resolutions: visableResolution,
origin: L.point(
originResult.bounds.left,
originResult.bounds.top
),
});
} else {
mapcrs = L.CRS.NonEarthCRS({
bounds: L.bounds(
[originResult.bounds.left, originResult.bounds.bottom],
[originResult.bounds.right, originResult.bounds.top]
),
origin: L.point(
originResult.bounds.left,
originResult.bounds.top
),
});
}
}
}
}
}
if (visableResolution.length > 0) {
maxZoom = visableResolution.length - 1;
options.maxZoom = visableResolution.length - 1;
}
let center;
if (originResult.center.x && originResult.center.y) {
center = mapcrs.unproject(
L.point(originResult.center.x, originResult.center.y)
);
} else {
center = mapcrs.unproject(
L.point(
(originResult.bounds.left + originResult.bounds.right) / 2,
(originResult.bounds.bottom + originResult.bounds.top) / 2
)
);
}
map = L.map("map", {
//crs: L.CRS.EPSG3857
center: center,
maxZoom: maxZoom,
zoom: zoom,
crs: mapcrs,
});
// var layerUrl = window.location.protocol + "//"+document.location.host+url;
var layerUrl = document.location.host + url;
if (isSingleImage) {
layer = L.supermap.imageMapLayer(layerUrl, options);
console.log(4444, layer);
} else {
layer = L.supermap.tiledMapLayer(layerUrl, options);
// console.log(4444,layer,layerUrl,document.location.host);
}
layer.addTo(map);
},
getCRS(epsgCodeStr, bounds, resolutions) {
return L.Proj.CRS(epsgCodeStr, {
bounds: L.bounds(
[bounds.left, bounds.bottom],
[bounds.right, bounds.top]
),
resolutions: resolutions,
origin: [bounds.left, bounds.top],
dpi: originResult.dpi,
});
},
zoomIn() {
map.zoomIn();
},
zoomOut() {
map.zoomOut();
},
viewEntire() {
var mapDiv = document.getElementById("map");
var minSize = Math.min(
parseInt(mapDiv.clientWidth),
parseInt(mapDiv.clientHeight)
);
var zoomLevel = Math.floor(Math.log(minSize / 256) / Math.LN2);
map.setView(L.latLng(lat, lon), zoomLevel);
},
showScale() {
var scale = layer.getScale();
scale = parseInt((1 / scale) * 10) / 10;
var scaleText = document.getElementById("scaleText");
scaleText.value = "比例尺： 1/" + scale;
},
showCoords() {
var mapdiv = document.getElementById("map");
var coordsText = document.getElementById("coordsText");
mapdiv.onmousemove = (e) => {
e = e || window.event;
var point = map.mouseEventToLatLng(e);
coordsText.value =
parseFloat(point.lat).toFixed(4) +
"," +
parseFloat(point.lng).toFixed(4);
};
},
getProjectionExtent() {
var requestUrl =
"http://19.25.35.204:31190/iserver/services/map-GuangDongShengYiZhangTuFaBu/rest/maps/广东省一张图发布";
requestUrl = requestUrl + "/" + "prjCoordSys/projection/extent.json";
var commit = new this.Requester();
extent = commit.sendRequestWithResponse(requestUrl, "GET", null);
if (extent) {
var result = eval("(" + extent + ")");
if (
result &&
result.left &&
result.right &&
result.top &&
result.bottom
) {
return result;
}
}
return null;
},
setPrjCoordSys() {
// 支持动态投影，解析url相应参数
},
scaleToResolution(scale, dpi, mapUnit) {
var inchPerMeter = 1 / 0.0254;
var meterPerMapUnitValue = this.getMeterPerMapUnit(mapUnit);
var resolution = scale * dpi * inchPerMeter * meterPerMapUnitValue;
resolution = 1 / resolution;
return resolution;
},
resolutionToScale(resolution, dpi, mapUnit) {
var inchPerMeter = 1 / 0.0254;
// 地球半径。
var meterPerMapUnit = getMeterPerMapUnit(mapUnit);
var scale = resolution * dpi * inchPerMeter * meterPerMapUnit;
scale = 1 / scale;
return scale;
},
getMeterPerMapUnit(mapUnit) {
var earchRadiusInMeters = 6378137; // 6371000;
var meterPerMapUnit;
if (mapUnit == "METER") {
meterPerMapUnit = 1;
} else if (mapUnit == "DEGREE") {
// 每度表示多少米。
meterPerMapUnit = (Math.PI * 2 * earchRadiusInMeters) / 360;
} else if (mapUnit == "KILOMETER") {
meterPerMapUnit = 1.0e-3;
} else if (mapUnit == "INCH") {
meterPerMapUnit = 1 / 2.5399999918e-2;
} else if (mapUnit == "FOOT") {
meterPerMapUnit = 0.3048;
}
return meterPerMapUnit;
},
//由于mvt的style渲染必须要传一个完整的分辨率数组，这里计算出一个从0开始的分辨率数组
getStyleResolutions(bounds) {
var styleResolutions = [];
var temp = Math.abs(bounds.left - bounds.right) / 256;
for (var i = 0; i < 22; i++) {
if (i == 0) {
styleResolutions[i] = temp;
continue;
}
temp = temp / 2;
styleResolutions[i] = temp;
}
return styleResolutions;
},
getScales(bounds, coordUnit) {
var resolution0 = Math.abs(bounds.left - bounds.right) / 256;
var temp = this.resolutionToScale(
resolution0,
originResult.dpi,
coordUnit
);
var scales = [];
for (var i = 0; i < 22; i++) {
if (i == 0) {
scales[i] = temp;
continue;
}
temp = temp * 2;
scales[i] = temp;
}
return scales;
},
Requester() {
this.commit = null;
try {
this.commit = new ActiveXObject("Msxml2.XMLHTTP");
} catch (ex) {
try {
this.commit = new ActiveXObject("Microsoft.XMLHTTP");
} catch (ex) {
this.commit = null;
}
}
if (!this.commit && typeof XMLHttpRequest != "undefined") {
this.commit = new XMLHttpRequest();
}
/**
* 发送异步请求。
*/
this.sendRequest = function (url, method, entry, onComplete) {
var xhr = this.commit;
xhr.open(method, url, true);
xhr.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8"
);
xhr.onreadystatechange = function () {
var readyState = xhr.readyState;
if (readyState == 4) {
var status = xhr.status;
var responseText = xhr.responseText;
onComplete(responseText);
xhr.onreadystatechange = function () {};
xhr = null;
}
};
xhr.send(entry);
};
/**
* 发送一个同步请求。
*/
this.sendRequestWithResponse = function (url, method, entry) {
var xhr = this.commit;
xhr.open(method, encodeURI(url), false);
xhr.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8"
);
xhr.send(entry);
return xhr.responseText;
};
/**
* 发送一个json请求& 将结果返回。
*/
this.getHttpResponse = function (url, method, entry) {
var xhr = this.commit;
xhr.open(method, encodeURI(url), false);
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.send(entry);
return xhr.responseText;
};
},
},
};
</script>
<style lang="scss" scoped>
#map {
margin: 0;
width: 100%;
height: 100%;
background: white;
}
#viewEntire {
background-image: url(http://19.25.35.204:31190/iserver/services/map-GuangDongShengYiZhangTuFaBu/rest/static/javascriptForMaps/img/viewEntire.png);
position: absolute;
top: 14px;
left: 20px;
z-index: 2000;
width: 32px;
height: 32px;
}
#zoomIn {
background-image: url(http://19.25.35.204:31190/iserver/services/map-GuangDongShengYiZhangTuFaBu/rest/static/javascriptForMaps/img/zoomIn.png);
position: absolute;
top: 50px;
left: 20px;
z-index: 2000;
width: 32px;
height: 32px;
}
#zoomOut {
background-image: url(http://19.25.35.204:31190/iserver/services/map-GuangDongShengYiZhangTuFaBu/rest/static/javascriptForMaps/img/zoomOut.png);
position: absolute;
top: 86px;
left: 20px;
z-index: 2000;
width: 32px;
height: 32px;
}
</style>