xzt
1 year ago
9 changed files with 831 additions and 10 deletions
|
After Width: | Height: | Size: 6.6 MiB |
@ -0,0 +1,43 @@ |
|||
<template> |
|||
<div class="largeBox"> |
|||
<el-button class="btn" type="text" @click="goIndex" v-loading="status" |
|||
>首页</el-button |
|||
> |
|||
<img src="@/assets/image/largeScreen.png" class="large" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
status: false, |
|||
}; |
|||
}, |
|||
methods: { |
|||
goIndex() { |
|||
this.status = true; |
|||
this.$router.push("/"); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.largeBox { |
|||
position: relative; |
|||
.btn { |
|||
position: absolute; |
|||
top: 20px; |
|||
left: 20px; |
|||
width: 200px; |
|||
background: #101f48; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
border: 1px solid #fff; |
|||
// transform: skew(40deg); |
|||
} |
|||
.large { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,752 @@ |
|||
<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> |
|||
Loading…
Reference in new issue