模型切换修改
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"companyName": "DefaultCompany",
|
||||
"productName": "ShengDaPing",
|
||||
"productVersion": "0.1",
|
||||
"dataUrl": "cgs.data.unityweb",
|
||||
"wasmCodeUrl": "cgs.wasm.code.unityweb",
|
||||
"wasmFrameworkUrl": "cgs.wasm.framework.unityweb",
|
||||
"graphicsAPI": ["WebGL 2.0"],
|
||||
"webglContextAttributes": {"preserveDrawingBuffer": false},
|
||||
"splashScreenStyle": "Dark",
|
||||
"backgroundColor": "#231F20",
|
||||
"cacheControl": {"default": "must-revalidate"},
|
||||
"developmentBuild": false,
|
||||
"multithreading": false,
|
||||
"unityVersion": "2019.4.36f1c1"
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"companyName": "DefaultCompany",
|
||||
"productName": "ShengDaPing",
|
||||
"productVersion": "0.1",
|
||||
"dataUrl": "sgs.data.unityweb",
|
||||
"wasmCodeUrl": "sgs.wasm.code.unityweb",
|
||||
"wasmFrameworkUrl": "sgs.wasm.framework.unityweb",
|
||||
"graphicsAPI": ["WebGL 2.0"],
|
||||
"webglContextAttributes": {"preserveDrawingBuffer": false},
|
||||
"splashScreenStyle": "Dark",
|
||||
"backgroundColor": "#231F20",
|
||||
"cacheControl": {"default": "must-revalidate"},
|
||||
"developmentBuild": false,
|
||||
"multithreading": false,
|
||||
"unityVersion": "2019.4.36f1c1"
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"companyName": "DefaultCompany",
|
||||
"productName": "ShengDaPing",
|
||||
"productVersion": "0.1",
|
||||
"dataUrl": "tgs.data.unityweb",
|
||||
"wasmCodeUrl": "tgs.wasm.code.unityweb",
|
||||
"wasmFrameworkUrl": "tgs.wasm.framework.unityweb",
|
||||
"graphicsAPI": ["WebGL 2.0"],
|
||||
"webglContextAttributes": {"preserveDrawingBuffer": false},
|
||||
"splashScreenStyle": "Dark",
|
||||
"backgroundColor": "#231F20",
|
||||
"cacheControl": {"default": "must-revalidate"},
|
||||
"developmentBuild": false,
|
||||
"multithreading": false,
|
||||
"unityVersion": "2019.4.36f1c1"
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
https://web-1300932214.cos.ap-nanjing.myqcloud.com/sgs/index.html
|
|
@ -0,0 +1 @@
|
|||
https://web-1300932214.cos.ap-nanjing.myqcloud.com/sgs/Map/sgmap出行安全/sgmap.html
|
|
@ -0,0 +1 @@
|
|||
https://web-1300932214.cos.ap-nanjing.myqcloud.com/sgs/Map/sgmap房地资源/sgmap.html
|
|
@ -0,0 +1 @@
|
|||
https://web-1300932214.cos.ap-nanjing.myqcloud.com/sgs/Map/sgmap智慧工地/sgmap.html
|
|
@ -0,0 +1 @@
|
|||
https://web-1300932214.cos.ap-nanjing.myqcloud.com/sgs/Map/sgmap绿色双碳/sgmap.html
|
|
@ -0,0 +1 @@
|
|||
https://web-1300932214.cos.ap-nanjing.myqcloud.com/sgs/Map/sgmap食品安全/sgmap.html
|
|
@ -0,0 +1,24 @@
|
|||
function UnityProgress(unityInstance, progress) {
|
||||
if (!unityInstance.Module)
|
||||
return;
|
||||
if (!unityInstance.logo) {
|
||||
unityInstance.logo = document.createElement("div");
|
||||
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
|
||||
unityInstance.container.appendChild(unityInstance.logo);
|
||||
}
|
||||
if (!unityInstance.progress) {
|
||||
unityInstance.progress = document.createElement("div");
|
||||
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
|
||||
unityInstance.progress.empty = document.createElement("div");
|
||||
unityInstance.progress.empty.className = "empty";
|
||||
unityInstance.progress.appendChild(unityInstance.progress.empty);
|
||||
unityInstance.progress.full = document.createElement("div");
|
||||
unityInstance.progress.full.className = "full";
|
||||
unityInstance.progress.appendChild(unityInstance.progress.full);
|
||||
unityInstance.container.appendChild(unityInstance.progress);
|
||||
}
|
||||
unityInstance.progress.full.style.width = (100 * progress) + "%";
|
||||
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
|
||||
if (progress == 1)
|
||||
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
|
||||
}
|
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 345 B |
After Width: | Height: | Size: 155 B |
After Width: | Height: | Size: 159 B |
After Width: | Height: | Size: 137 B |
After Width: | Height: | Size: 142 B |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 933 B |
|
@ -0,0 +1,31 @@
|
|||
html,body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#unityContainer{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.webgl-content * {border: 0; margin: 0; padding: 0;width: 100%; height: 100%;}
|
||||
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
|
||||
|
||||
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
|
||||
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
|
||||
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
|
||||
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
|
||||
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
|
||||
|
||||
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
|
||||
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
|
||||
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
|
||||
|
||||
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;display: none;}
|
||||
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
|
||||
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
|
||||
.webgl-content .footer .title {margin-right: 10px; float: right;}
|
||||
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
|
After Width: | Height: | Size: 3.5 KiB |
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>市公司</title>
|
||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
<script src="TemplateData/UnityProgress.js"></script>
|
||||
<script src="Build/UnityLoader.js"></script>
|
||||
<script>
|
||||
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/cgs.json", {onProgress: UnityProgress});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="webgl-content" style="width:100%;height: 100%;">
|
||||
<div id="unityContainer"></div>
|
||||
<div class="footer">
|
||||
<div class="webgl-logo"></div>
|
||||
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
|
||||
<div class="title">ShengDaPing</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>省公司</title>
|
||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
<script src="TemplateData/UnityProgress.js"></script>
|
||||
<script src="Build/UnityLoader.js"></script>
|
||||
<script>
|
||||
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/sgs.json", {onProgress: UnityProgress});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="webgl-content" style="width:100%;height: 100%;">
|
||||
<div id="unityContainer"></div>
|
||||
<div class="footer">
|
||||
<div class="webgl-logo"></div>
|
||||
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
|
||||
<div class="title">ShengDaPing</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>腾飞大厦</title>
|
||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
<script src="TemplateData/UnityProgress.js"></script>
|
||||
<script src="Build/UnityLoader.js"></script>
|
||||
<script>
|
||||
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/tgs.json", {onProgress: UnityProgress});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="webgl-content" style="width:100%;height: 100%;">
|
||||
<div id="unityContainer"></div>
|
||||
<div class="footer">
|
||||
<div class="webgl-logo"></div>
|
||||
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
|
||||
<div class="title">ShengDaPing</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,203 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
|
||||
<title>思极地图</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map" style="width: 100%; height: 100%;"></div>
|
||||
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
||||
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
||||
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
||||
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
||||
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
||||
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
||||
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
||||
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
||||
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
||||
</div> -->
|
||||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||||
<script id="mapScript">
|
||||
var map = null;
|
||||
var defaultLevel = 16;//默认层级
|
||||
var defaultArea = "nj";
|
||||
|
||||
var positions = {
|
||||
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "images/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "images/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
|
||||
// "nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "images/shengfloor.png",w:330,h:230, lng:118.82276, lat:32.095614, data: "省公司大楼" },{ icon: "images/1.png",w:300,h:200, lng: 118.816436, lat: 32.038332, data: "供应商1" },{ icon: "images/2.png",w:300,h:200, lng: 118.730198, lat: 32.022659, data: "供应商2" },{ icon: "images/3.png",w:300,h:200, lng: 118.895199, lat: 32.13427, data: "供应商3" }] },
|
||||
"nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "images/shengfloor.png", lng: 118.773886, lat:32.058391, data: "省公司大楼" },{ icon: "images/1.png",lng: 118.816436, lat: 32.038332, data: "供应商1" },{ icon: "images/2.png",lng: 118.730198, lat: 32.022659, data: "供应商2" },{ icon: "images/3.png",lng: 118.895199, lat: 32.13427, data: "供应商3" }] },
|
||||
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
|
||||
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
||||
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
||||
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
||||
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
||||
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
||||
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
||||
}
|
||||
|
||||
// 申请的key和sn
|
||||
SGMap.tokenTask
|
||||
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
||||
.then(function () {
|
||||
initMap();
|
||||
});
|
||||
|
||||
function initMap() {
|
||||
var area = GetQueryString("area");
|
||||
var lng = positions[defaultArea].lng;
|
||||
var lat = positions[defaultArea].lat;
|
||||
if (area != null) {
|
||||
defaultArea = area;
|
||||
lng = positions[defaultArea].lng;
|
||||
lat = positions[defaultArea].lat;
|
||||
}
|
||||
|
||||
map = new SGMap.Map({
|
||||
// 地图绑定的DOM元素ID
|
||||
container: "map",
|
||||
// 地图样式
|
||||
// style: "aegis://styles/aegis/Satellite512",
|
||||
style: "aegis://styles/aegis/Streets",
|
||||
// 默认缩放层级
|
||||
zoom: 11,
|
||||
|
||||
// 地图中心点
|
||||
center: [lng, lat],
|
||||
//倾斜角度
|
||||
pitch: 45,
|
||||
// 地图默认字体
|
||||
localIdeographFontFamily: "Microsoft YoHei"
|
||||
});
|
||||
|
||||
loadMarkers(defaultArea);
|
||||
reportLocation();
|
||||
}
|
||||
|
||||
//获取地图层级
|
||||
function getMapZoom() {
|
||||
return map.getZoom();
|
||||
}
|
||||
|
||||
//设置地图层级
|
||||
function setMapZoom(n) {
|
||||
if (!isNaN(n) && n >= 0 && n <= 20)
|
||||
map.setZoom(n);
|
||||
}
|
||||
|
||||
//设置地图中心
|
||||
function setMapCenter(lat, lng) {
|
||||
map.setCenter([lng, lat]);
|
||||
}
|
||||
|
||||
//获取地图当前中心点坐标
|
||||
function getMapCenter() {
|
||||
return map.getCenter();
|
||||
}
|
||||
|
||||
//每秒汇报当前中心点坐标
|
||||
function reportLocation() {
|
||||
var centerPoint = getMapCenter();
|
||||
console.log(centerPoint);
|
||||
window.setTimeout("reportLocation()", 1000);
|
||||
}
|
||||
|
||||
//地点跳转
|
||||
function gotoPosition(posName) {
|
||||
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
||||
loadMarkers(posName);
|
||||
}
|
||||
|
||||
//画marker点
|
||||
function addMarker(markerData) {
|
||||
var el = document.createElement("img");
|
||||
el.cusData = markerData;
|
||||
el.className = "marker";
|
||||
// 自定义图标
|
||||
el.src = markerData.icon;
|
||||
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
||||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||||
// el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
|
||||
// el.style.height = markerData.height == undefined ? "200px" : markerData.height + "px";
|
||||
// 如果不传el,会默认给一个蓝色水滴图标
|
||||
var mk = new SGMap.Marker(el, {
|
||||
// marker相对经纬度点坐标点的位置
|
||||
anchor: "bottom",
|
||||
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
|
||||
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
||||
});
|
||||
mk.setLngLat([markerData.lng, markerData.lat]);
|
||||
mk.addTo(map);
|
||||
el.addEventListener("click", function (e) {
|
||||
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
||||
console.log("跳转" + e.target.cusData.data);
|
||||
});
|
||||
|
||||
return mk;
|
||||
}
|
||||
|
||||
//加载图标
|
||||
var markerArray = new Array();
|
||||
function loadMarkers(posName) {
|
||||
for (var i in markerArray) {
|
||||
markerArray[i].remove();
|
||||
}
|
||||
markerArray = new Array();
|
||||
|
||||
var markers = positions[posName].markers;
|
||||
if (markers != undefined && markers != null) {
|
||||
for (var i in markers) {
|
||||
var markerData = markers[i];
|
||||
markerArray.push(addMarker(markerData));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
1.获取2个经纬度之间的距离
|
||||
2.lng1 lat1 经纬度1
|
||||
3.lng2 lat2 经纬度2
|
||||
*/
|
||||
function getDisance(lng1, lat1, lng2, lat2) {
|
||||
var dis = 0;
|
||||
var radius = 6378137;//地球的半径
|
||||
var radLat1 = toRad(lat1);
|
||||
var radLat2 = toRad(lat2);
|
||||
var deltaLat = radLat1 - radLat2;
|
||||
var deltaLng = toRad(lng1) - toRad(lng2);
|
||||
var dis =
|
||||
2 *
|
||||
Math.asin(
|
||||
Math.sqrt(
|
||||
Math.pow(Math.sin(deltaLat / 2), 2) +
|
||||
Math.cos(radLat1) *
|
||||
Math.cos(radLat2) *
|
||||
Math.pow(Math.sin(deltaLng / 2), 2)
|
||||
)
|
||||
);
|
||||
|
||||
return dis * radius;
|
||||
}
|
||||
|
||||
//获取URL参数
|
||||
function GetQueryString(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) return unescape(r[2]); return null;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 71 KiB |
After Width: | Height: | Size: 71 KiB |
After Width: | Height: | Size: 67 KiB |
After Width: | Height: | Size: 67 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 71 KiB |
|
@ -0,0 +1,203 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
|
||||
<title>思极地图</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map" style="width: 100%; height: 100%;"></div>
|
||||
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
||||
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
||||
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
||||
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
||||
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
||||
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
||||
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
||||
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
||||
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
||||
</div> -->
|
||||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||||
<script id="mapScript">
|
||||
var map = null;
|
||||
var defaultLevel = 5;//默认层级
|
||||
var defaultArea = "nj";
|
||||
|
||||
var positions = {
|
||||
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "greenImages/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "greenImages/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
|
||||
// "nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "greenImages/shengfloor.png",w:330,h:230, lng: 118.85244, lat:32.11629, data: "江苏省公司大楼" },{ icon: "greenImages/floor2.png",w:330,h:230, lng: 118.647195, lat: 32.039924, data: "南京市公司大楼" },{ icon: "greenImages/floor3.png",w:330,h:230, lng: 119.02204, lat: 32.10846, data: "客服中心公司大楼" },] },
|
||||
"nj": { "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "greenImages/shengfloor.png",w:330,h:230, lng: 118.773886, lat:32.058391, data: "江苏省公司大楼" },] },
|
||||
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
|
||||
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
||||
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
||||
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
||||
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
||||
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
||||
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
||||
}
|
||||
|
||||
// 申请的key和sn
|
||||
SGMap.tokenTask
|
||||
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
||||
.then(function () {
|
||||
initMap();
|
||||
});
|
||||
|
||||
function initMap() {
|
||||
var area = GetQueryString("area");
|
||||
var lng = positions[defaultArea].lng;
|
||||
var lat = positions[defaultArea].lat;
|
||||
if (area != null) {
|
||||
defaultArea = area;
|
||||
lng = positions[defaultArea].lng;
|
||||
lat = positions[defaultArea].lat;
|
||||
}
|
||||
|
||||
map = new SGMap.Map({
|
||||
// 地图绑定的DOM元素ID
|
||||
container: "map",
|
||||
// 地图样式
|
||||
style: "aegis://styles/aegis/Streets",
|
||||
// style: "aegis://styles/aegis/Satellite512",
|
||||
// 默认缩放层级
|
||||
zoom: 11,
|
||||
// 地图中心点
|
||||
center: [lng, lat],
|
||||
//倾斜角度
|
||||
pitch: 45,
|
||||
// 地图默认字体
|
||||
localIdeographFontFamily: "Microsoft YoHei"
|
||||
});
|
||||
|
||||
loadMarkers(defaultArea);
|
||||
reportLocation();
|
||||
}
|
||||
|
||||
//获取地图层级
|
||||
function getMapZoom() {
|
||||
return map.getZoom();
|
||||
}
|
||||
|
||||
//设置地图层级
|
||||
function setMapZoom(n) {
|
||||
if (!isNaN(n) && n >= 0 && n <= 20)
|
||||
map.setZoom(n);
|
||||
}
|
||||
|
||||
//设置地图中心
|
||||
function setMapCenter(lat, lng) {
|
||||
map.setCenter([lng, lat]);
|
||||
}
|
||||
|
||||
//获取地图当前中心点坐标
|
||||
function getMapCenter() {
|
||||
return map.getCenter();
|
||||
}
|
||||
|
||||
//每秒汇报当前中心点坐标
|
||||
function reportLocation() {
|
||||
var centerPoint = getMapCenter();
|
||||
console.log(centerPoint);
|
||||
window.setTimeout("reportLocation()", 1000);
|
||||
}
|
||||
|
||||
//地点跳转
|
||||
function gotoPosition(posName) {
|
||||
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
||||
loadMarkers(posName);
|
||||
}
|
||||
|
||||
//画marker点
|
||||
function addMarker(markerData) {
|
||||
var el = document.createElement("img");
|
||||
el.cusData = markerData;
|
||||
el.className = "marker";
|
||||
// 自定义图标
|
||||
el.src = markerData.icon;
|
||||
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
||||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||||
el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
|
||||
el.style.height = markerData.height == undefined ? "150px" : markerData.height + "px";
|
||||
// 如果不传el,会默认给一个蓝色水滴图标
|
||||
var mk = new SGMap.Marker(el, {
|
||||
// marker相对经纬度点坐标点的位置
|
||||
anchor: "bottom",
|
||||
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
|
||||
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
||||
});
|
||||
mk.setLngLat([markerData.lng, markerData.lat]);
|
||||
mk.addTo(map);
|
||||
el.addEventListener("click", function (e) {
|
||||
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
||||
console.log("跳转" + e.target.cusData.data);
|
||||
window.parent['vueDefinedMyProp']('nanjing')
|
||||
});
|
||||
|
||||
return mk;
|
||||
}
|
||||
|
||||
//加载图标
|
||||
var markerArray = new Array();
|
||||
function loadMarkers(posName) {
|
||||
for (var i in markerArray) {
|
||||
markerArray[i].remove();
|
||||
}
|
||||
markerArray = new Array();
|
||||
|
||||
var markers = positions[posName].markers;
|
||||
if (markers != undefined && markers != null) {
|
||||
for (var i in markers) {
|
||||
var markerData = markers[i];
|
||||
markerArray.push(addMarker(markerData));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
1.获取2个经纬度之间的距离
|
||||
2.lng1 lat1 经纬度1
|
||||
3.lng2 lat2 经纬度2
|
||||
*/
|
||||
function getDisance(lng1, lat1, lng2, lat2) {
|
||||
var dis = 0;
|
||||
var radius = 6378137;//地球的半径
|
||||
var radLat1 = toRad(lat1);
|
||||
var radLat2 = toRad(lat2);
|
||||
var deltaLat = radLat1 - radLat2;
|
||||
var deltaLng = toRad(lng1) - toRad(lng2);
|
||||
var dis =
|
||||
2 *
|
||||
Math.asin(
|
||||
Math.sqrt(
|
||||
Math.pow(Math.sin(deltaLat / 2), 2) +
|
||||
Math.cos(radLat1) *
|
||||
Math.cos(radLat2) *
|
||||
Math.pow(Math.sin(deltaLng / 2), 2)
|
||||
)
|
||||
);
|
||||
|
||||
return dis * radius;
|
||||
}
|
||||
|
||||
//获取URL参数
|
||||
function GetQueryString(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) return unescape(r[2]); return null;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,23 @@
|
|||
[
|
||||
{"tudi":"南京市鼓楼区和燕路2号","jd":"栖霞基地","zongbu":"江苏电力公司","fenzhi":"南京供电公司","fangchan":"沿河四村5幢9、10、11、12号","province":"江苏省","city":"南京市","area":"建邺区","position":"118.785821,32.095862"},
|
||||
{"tudi":"南京市鼓楼区定淮门石头城115号","jd":"城北基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"裕顺雅苑6号401室","province":"江苏省","city":"南京市","area":"鼓楼区","position":"118.747813,32.066839"},
|
||||
{"tudi":"南京市秦淮区火瓦巷51号","jd":"城南基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元704室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.789691,32.032739"},
|
||||
{"tudi":"南京市雨花台区雨花南路32号","zongbu":"雨花基地","fenzhi":"","fangchan":"宁夏路1号101室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"宁夏路1号","position":"118.769801,31.994273"},
|
||||
{"tudi":"南京市建邺区奥体大街1号","jd":"公司大楼(市公司)","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号(枫亚苑05幢701室)","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.744015,31.990507"},
|
||||
{"tudi":"南京市鼓楼区中山北路217号","jd":"龙吟广场","fenzhi":"","fangchan":"龙池阉64号602室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙池阉64号","position":"118.76956,32.070685"},
|
||||
{"tudi":"南京市鼓楼区峨嵋路21号","jd":"健康中心(安仁街变)","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元1701室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.770386,32.044743"},
|
||||
{"tudi":"南京市鼓楼区龙池庵66号","jd":"苏电宾馆","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元402室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.750561,32.084403"},
|
||||
{"tudi":"南京市玄武区中山路251号","jd":"新纪元宾馆","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号地下车库17号","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.784701,32.049814"},
|
||||
{"tudi":"南京市江宁区天元中路19号","jd":"峰电大厦","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号地下车库21号","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.843786,31.93144"},
|
||||
{"tudi":"南京市玄武区中山路250号","jd":"老卫生所","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元1103室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.784696,32.049813"},
|
||||
{"tudi":"南京市浦口区龙华路19号","jd":"龙华路19号基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"乐山路207号12栋一单元1302","province":"江苏省","city":"南京市","area":"建邺区","street":"乐山路207号","position":"118.640574,32.069147"},
|
||||
{"tudi":"南京市六合区雄州镇园林西路8巷13号","jd":"六合园林路基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"宁夏路1号102室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"宁夏路1号","position":"118.845591,32.352524"},
|
||||
{"tudi":"南京市六合区雄州镇方州路北侧","jd":"六合方州路基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"太平门街10号6幢508室","province":"江苏省","city":"南京市","area":"玄武区","street":"太平门街10号","position":"118.836226,32.364984"},
|
||||
{"tudi":"南京市浦口区泰西路8号","jd":"泰西路基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"中山路268号1幢2101-2112室","province":"江苏省","city":"南京市","area":"玄武区","street":"中山路268号","position":"118.708405,32.149725"},
|
||||
{"tudi":"南京市江宁区天印大道1398号","jd":"江宁新办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"龙园西路113号(枫亚苑05幢1801室)","province":"江苏省","city":"南京市","area":"鼓楼区","street":"龙园西路113号","position":"118.864288,31.942295"},
|
||||
{"tudi":"南京市江宁区上元大街598号","jd":"江宁老办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"港龙园15幢101室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"港龙园小区","position":"118.849567,31.954672"},
|
||||
{"tudi":"南京市高淳区北岭路23号","jd":"高淳新办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"清凉门大街8号03幢1单元1204室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"清凉门大街8号","position":"118.874337,31.332819"},
|
||||
{"tudi":"南京市高淳区镇兴路1号","jd":"高淳老办公楼基地","zongbu":"江苏电力公司","fenzhi":"","fangchan":"太平门街10号7幢605室","province":"江苏省","city":"南京市","area":"玄武区","street":"太平门街10号","position":"118.865921,31.325835"},
|
||||
{"tudi":"江苏省南京市溧水县永阳镇交通路99号","jd":"溧水培训办公楼","zongbu":"江苏电力公司","fenzhi":"","fangchan":"传达室","province":"江苏省","city":"南京市","area":"鼓楼区","street":"北京西路20号","position":"119.035663,31.660993"},
|
||||
{"tudi":"江苏省南京市溧水县永阳镇珍珠北路16号","jd":"溧水综合办公楼","zongbu":"江苏电力公司","fenzhi":"","fangchan":"锁金四村31幢2单元503室","province":"江苏省","city":"南京市","area":"玄武区","street":"锁金四村","position":"119.03119,31.654953"}
|
||||
]
|
After Width: | Height: | Size: 566 B |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 67 KiB |
After Width: | Height: | Size: 70 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 65 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 468 B |
After Width: | Height: | Size: 71 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1008 B |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 7.2 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 1.8 KiB |
|
@ -0,0 +1,268 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
|
||||
<title>思极地图</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#car01{
|
||||
width: 650px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 70%;
|
||||
background: #789cd1;
|
||||
opacity: 0.9;
|
||||
color: #fff;
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
#car02{
|
||||
width: 553px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 65%;
|
||||
position: absolute;
|
||||
background: #789cd1;
|
||||
opacity: 0.9;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
display:none
|
||||
}
|
||||
#car03{
|
||||
width: 553px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
left: 14%;
|
||||
top: 36%;
|
||||
background: #789cd1;
|
||||
opacity: 0.9;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
display:none
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map" style="width: 100%; height: 100%;"></div>
|
||||
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
||||
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
||||
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
||||
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
||||
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
||||
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
||||
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
||||
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
||||
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
||||
</div> -->
|
||||
<div id="car01">
|
||||
南京邮电大学三牌楼校区→东南大学丁家桥校区→江苏华侨大厦→星汉城市花园→江苏省应急服务中心
|
||||
</div>
|
||||
<div id="car02">
|
||||
南京市民防局→环亚凯瑟琳广场→东南大学附属中学→鼓楼医院(北院)→江苏议事园酒店
|
||||
</div>
|
||||
<div id="car03">
|
||||
天目大厦→中英文化协会旧址→苏州路18号院→江苏省高级人民法院→江苏省司法厅
|
||||
</div>
|
||||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||||
<script id="mapScript">
|
||||
var map = null;
|
||||
var defaultLevel = 16;//默认层级
|
||||
var defaultArea = "nj";
|
||||
|
||||
var positions = {
|
||||
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "travelImages/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "travelImages/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
|
||||
// "nj":{ "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.863004, lat: 31.970233, data: "车辆1" },{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.766418, lat: 31.980525, data: "车辆2" },{ icon: "travelImages/icon.png",w:300,h:200, lng: 118.665233, lat: 32.082888, data: "车辆3" }] },
|
||||
"nj":{ "lng": 118.802997, "lat": 32.066366, markers: [{ icon: "travelImages/icon.png", lng: 118.863004, lat: 31.970233, data: "车辆1" },{ icon: "travelImages/icon.png",lng: 118.766418, lat: 31.980525, data: "车辆2" },{ icon: "travelImages/icon.png", lng: 118.665233, lat: 32.082888, data: "车辆3" }] },
|
||||
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
|
||||
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
||||
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
||||
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
||||
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
||||
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
||||
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
||||
}
|
||||
|
||||
// 申请的key和sn
|
||||
SGMap.tokenTask
|
||||
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
||||
.then(function () {
|
||||
initMap();
|
||||
});
|
||||
|
||||
function initMap() {
|
||||
var area = GetQueryString("area");
|
||||
var lng = positions[defaultArea].lng;
|
||||
var lat = positions[defaultArea].lat;
|
||||
if (area != null) {
|
||||
defaultArea = area;
|
||||
lng = positions[defaultArea].lng;
|
||||
lat = positions[defaultArea].lat;
|
||||
}
|
||||
|
||||
map = new SGMap.Map({
|
||||
// 地图绑定的DOM元素ID
|
||||
container: "map",
|
||||
// 地图样式
|
||||
style: "aegis://styles/aegis/Streets",
|
||||
// style: "aegis://styles/aegis/Satellite512",
|
||||
// 默认缩放层级
|
||||
zoom: 11,
|
||||
// 地图中心点
|
||||
center: [lng, lat],
|
||||
//倾斜角度
|
||||
pitch: 45,
|
||||
// 地图默认字体
|
||||
localIdeographFontFamily: "Microsoft YoHei"
|
||||
});
|
||||
|
||||
loadMarkers(defaultArea);
|
||||
reportLocation();
|
||||
}
|
||||
|
||||
//获取地图层级
|
||||
function getMapZoom() {
|
||||
return map.getZoom();
|
||||
}
|
||||
|
||||
//设置地图层级
|
||||
function setMapZoom(n) {
|
||||
if (!isNaN(n) && n >= 0 && n <= 20)
|
||||
map.setZoom(n);
|
||||
}
|
||||
|
||||
//设置地图中心
|
||||
function setMapCenter(lat, lng) {
|
||||
map.setCenter([lng, lat]);
|
||||
}
|
||||
|
||||
//获取地图当前中心点坐标
|
||||
function getMapCenter() {
|
||||
return map.getCenter();
|
||||
}
|
||||
|
||||
//每秒汇报当前中心点坐标
|
||||
function reportLocation() {
|
||||
var centerPoint = getMapCenter();
|
||||
console.log(centerPoint);
|
||||
window.setTimeout("reportLocation()", 1000);
|
||||
}
|
||||
|
||||
//地点跳转
|
||||
function gotoPosition(posName) {
|
||||
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
||||
loadMarkers(posName);
|
||||
}
|
||||
|
||||
//画marker点
|
||||
function addMarker(markerData) {
|
||||
var el = document.createElement("img");
|
||||
el.cusData = markerData;
|
||||
el.className = "marker";
|
||||
// 自定义图标
|
||||
el.src = markerData.icon;
|
||||
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
||||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||||
// el.style.width = markerData.width == undefined ? "120px" : markerData.width + "px";
|
||||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||||
// 如果不传el,会默认给一个蓝色水滴图标
|
||||
var mk = new SGMap.Marker(el, {
|
||||
// marker相对经纬度点坐标点的位置
|
||||
anchor: "bottom",
|
||||
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
|
||||
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
||||
});
|
||||
mk.setLngLat([markerData.lng, markerData.lat]);
|
||||
mk.addTo(map);
|
||||
el.addEventListener("click", function (e) {
|
||||
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
||||
console.log("跳转" + e.target.cusData.data);
|
||||
if(e.currentTarget.cusData.data=='车辆1'){
|
||||
document.querySelector('#car01').style.display = 'block';
|
||||
document.querySelector('#car02').style.display = 'none';
|
||||
document.querySelector('#car03').style.display = 'none';
|
||||
}else if(e.currentTarget.cusData.data=='车辆2'){
|
||||
document.querySelector('#car01').style.display = 'none';
|
||||
document.querySelector('#car02').style.display = 'block';
|
||||
document.querySelector('#car03').style.display = 'none';
|
||||
}else if(e.currentTarget.cusData.data=='车辆3'){
|
||||
document.querySelector('#car01').style.display = 'none';
|
||||
document.querySelector('#car02').style.display = 'none';
|
||||
document.querySelector('#car03').style.display = 'block';
|
||||
}
|
||||
});
|
||||
|
||||
return mk;
|
||||
}
|
||||
|
||||
//加载图标
|
||||
var markerArray = new Array();
|
||||
function loadMarkers(posName) {
|
||||
for (var i in markerArray) {
|
||||
markerArray[i].remove();
|
||||
}
|
||||
markerArray = new Array();
|
||||
|
||||
var markers = positions[posName].markers;
|
||||
if (markers != undefined && markers != null) {
|
||||
for (var i in markers) {
|
||||
var markerData = markers[i];
|
||||
markerArray.push(addMarker(markerData));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
1.获取2个经纬度之间的距离
|
||||
2.lng1 lat1 经纬度1
|
||||
3.lng2 lat2 经纬度2
|
||||
*/
|
||||
function getDisance(lng1, lat1, lng2, lat2) {
|
||||
var dis = 0;
|
||||
var radius = 6378137;//地球的半径
|
||||
var radLat1 = toRad(lat1);
|
||||
var radLat2 = toRad(lat2);
|
||||
var deltaLat = radLat1 - radLat2;
|
||||
var deltaLng = toRad(lng1) - toRad(lng2);
|
||||
var dis =
|
||||
2 *
|
||||
Math.asin(
|
||||
Math.sqrt(
|
||||
Math.pow(Math.sin(deltaLat / 2), 2) +
|
||||
Math.cos(radLat1) *
|
||||
Math.cos(radLat2) *
|
||||
Math.pow(Math.sin(deltaLng / 2), 2)
|
||||
)
|
||||
);
|
||||
|
||||
return dis * radius;
|
||||
}
|
||||
|
||||
//获取URL参数
|
||||
function GetQueryString(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) return unescape(r[2]); return null;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
After Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 36 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 40 KiB |
|
@ -0,0 +1,202 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
|
||||
<title>思极地图</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map" style="width: 100%; height: 100%;"></div>
|
||||
<!-- <div style="position:absolute;top:2rem;left:2rem;">
|
||||
<input type="button" value="浦口区" onclick="gotoPosition('pk')" />
|
||||
<input type="button" value="建邺区" onclick="gotoPosition('jy')" />
|
||||
<input type="button" value="鼓楼区" onclick="gotoPosition('gl')" />
|
||||
<input type="button" value="雨花区" onclick="gotoPosition('yh')" />
|
||||
<input type="button" value="秦淮区" onclick="gotoPosition('qh')" />
|
||||
<input type="button" value="江宁区" onclick="gotoPosition('jn')" />
|
||||
<input type="button" value="溧水区" onclick="gotoPosition('ls')" />
|
||||
<input type="button" value="高淳区" onclick="gotoPosition('gc')" />
|
||||
</div> -->
|
||||
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
|
||||
<script id="mapScript">
|
||||
var map = null;
|
||||
var defaultLevel = 5;//默认层级
|
||||
var defaultArea = "nj";
|
||||
|
||||
var positions = {
|
||||
// "pk": { name: "浦口区", lng: 118.592631, lat: 32.049500, markers: [{ icon: "images/marker.png", width: 128, height: 128, lng: 118.589631, lat: 32.049500, data: "12345" }, { icon: "images/marker.png", width: 32, height: 32, lng: 118.592832, lat: 32.059502, data: "12345" }] },
|
||||
// "nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",w:300,h:200, lng: 118.77256, lat:32.060982, data: "北阴阳营小区" },{ icon: "images/sads.png",w:300,h:200, lng: 118.77327, lat: 32.05902, data: "苏安大厦" }] },
|
||||
// "nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",lng: 118.77256, lat:32.060982, data: "北阴阳营小区" },{ icon: "images/sads.png", lng: 118.77327, lat: 32.05902, data: "苏安大厦" }] },
|
||||
"nj": { "lng": 118.77455, "lat": 32.060982, markers: [{ icon: "images/byyyxq.png",lng: 118.77256, lat:32.060982, data: "北阴阳营小区" }] },
|
||||
"jy": { name: "建邺区", lng: 118.729156, lat: 32.005818 },
|
||||
"gl": { name: "鼓楼区", lng: 118.774862, lat: 32.086006 },
|
||||
"yh": { name: "雨花区", lng: 118.683091, lat: 31.941923 },
|
||||
"qh": { name: "秦淮区", lng: 118.819167, lat: 32.02163 },
|
||||
"jn": { name: "江宁区", lng: 118.924179, lat: 31.862158 },
|
||||
"ls": { name: "溧水区", lng: 119.057397, lat: 31.574872 },
|
||||
"gc": { name: "高淳区", lng: 118.976972, lat: 31.322781 }
|
||||
}
|
||||
|
||||
// 申请的key和sn
|
||||
SGMap.tokenTask
|
||||
.login("1a6fc765e72b36819428016bed30ff48", "5916636e73f03e5dbdf275f810fc7d62")
|
||||
.then(function () {
|
||||
initMap();
|
||||
});
|
||||
|
||||
function initMap() {
|
||||
var area = GetQueryString("area");
|
||||
var lng = positions[defaultArea].lng;
|
||||
var lat = positions[defaultArea].lat;
|
||||
if (area != null) {
|
||||
defaultArea = area;
|
||||
lng = positions[defaultArea].lng;
|
||||
lat = positions[defaultArea].lat;
|
||||
}
|
||||
|
||||
map = new SGMap.Map({
|
||||
// 地图绑定的DOM元素ID
|
||||
container: "map",
|
||||
// 地图样式
|
||||
style: "aegis://styles/aegis/Streets",
|
||||
// 默认缩放层级
|
||||
zoom: 16,
|
||||
// 地图中心点
|
||||
center: [lng, lat],
|
||||
//倾斜角度
|
||||
pitch: 45,
|
||||
// 地图默认字体
|
||||
localIdeographFontFamily: "Microsoft YoHei"
|
||||
});
|
||||
|
||||
loadMarkers(defaultArea);
|
||||
reportLocation();
|
||||
}
|
||||
|
||||
//获取地图层级
|
||||
function getMapZoom() {
|
||||
return map.getZoom();
|
||||
}
|
||||
|
||||
//设置地图层级
|
||||
function setMapZoom(n) {
|
||||
if (!isNaN(n) && n >= 0 && n <= 20)
|
||||
map.setZoom(n);
|
||||
}
|
||||
|
||||
//设置地图中心
|
||||
function setMapCenter(lat, lng) {
|
||||
map.setCenter([lng, lat]);
|
||||
}
|
||||
|
||||
//获取地图当前中心点坐标
|
||||
function getMapCenter() {
|
||||
return map.getCenter();
|
||||
}
|
||||
|
||||
//每秒汇报当前中心点坐标
|
||||
function reportLocation() {
|
||||
var centerPoint = getMapCenter();
|
||||
console.log(centerPoint);
|
||||
window.setTimeout("reportLocation()", 1000);
|
||||
}
|
||||
|
||||
//地点跳转
|
||||
function gotoPosition(posName) {
|
||||
map.easeTo({ center: [positions[posName].lng, positions[posName].lat], zoom: getMapZoom() });
|
||||
loadMarkers(posName);
|
||||
}
|
||||
|
||||
//画marker点
|
||||
function addMarker(markerData) {
|
||||
var el = document.createElement("img");
|
||||
el.cusData = markerData;
|
||||
el.className = "marker";
|
||||
// 自定义图标
|
||||
el.src = markerData.icon;
|
||||
// el.style.width = markerData.width == undefined ? "64px" : markerData.width + "px";
|
||||
// el.style.height = markerData.height == undefined ? "64px" : markerData.height + "px";
|
||||
// el.style.width = markerData.width == undefined ? "260px" : markerData.width + "px";
|
||||
// el.style.height = markerData.height == undefined ? "150px" : markerData.height + "px";
|
||||
// 如果不传el,会默认给一个蓝色水滴图标
|
||||
var mk = new SGMap.Marker(el, {
|
||||
// marker相对经纬度点坐标点的位置
|
||||
anchor: "bottom",
|
||||
// 相对于元素中心点,偏移的像素距离,负数代表向左和向上
|
||||
offset: [markerData.xOffset == undefined ? 0 : markerData.xOffset, markerData.yOffset == undefined ? 0 : markerData.yOffset]
|
||||
});
|
||||
mk.setLngLat([markerData.lng, markerData.lat]);
|
||||
mk.addTo(map);
|
||||
el.addEventListener("click", function (e) {
|
||||
/////////////////////////////////自定义输出内容//////////////////////////////////////
|
||||
console.log("跳转" + e.target.cusData.data);
|
||||
});
|
||||
|
||||
return mk;
|
||||
}
|
||||
|
||||
//加载图标
|
||||
var markerArray = new Array();
|
||||
function loadMarkers(posName) {
|
||||
for (var i in markerArray) {
|
||||
markerArray[i].remove();
|
||||
}
|
||||
markerArray = new Array();
|
||||
|
||||
var markers = positions[posName].markers;
|
||||
if (markers != undefined && markers != null) {
|
||||
for (var i in markers) {
|
||||
var markerData = markers[i];
|
||||
markerArray.push(addMarker(markerData));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
1.获取2个经纬度之间的距离
|
||||
2.lng1 lat1 经纬度1
|
||||
3.lng2 lat2 经纬度2
|
||||
*/
|
||||
function getDisance(lng1, lat1, lng2, lat2) {
|
||||
var dis = 0;
|
||||
var radius = 6378137;//地球的半径
|
||||
var radLat1 = toRad(lat1);
|
||||
var radLat2 = toRad(lat2);
|
||||
var deltaLat = radLat1 - radLat2;
|
||||
var deltaLng = toRad(lng1) - toRad(lng2);
|
||||
var dis =
|
||||
2 *
|
||||
Math.asin(
|
||||
Math.sqrt(
|
||||
Math.pow(Math.sin(deltaLat / 2), 2) +
|
||||
Math.cos(radLat1) *
|
||||
Math.cos(radLat2) *
|
||||
Math.pow(Math.sin(deltaLng / 2), 2)
|
||||
)
|
||||
);
|
||||
|
||||
return dis * radius;
|
||||
}
|
||||
|
||||
//获取URL参数
|
||||
function GetQueryString(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) return unescape(r[2]); return null;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
15
src/main.js
|
@ -34,7 +34,20 @@ router.beforeEach((to, from, next) => {
|
|||
window.document.title = to.meta.title
|
||||
next()
|
||||
})
|
||||
|
||||
function receiveMessageFromIframePage (event) {
|
||||
console.log(event.data,event)
|
||||
console.log(event.data.params,'event.data.params')
|
||||
console.log(event.data.url,'event.data.url')
|
||||
if (event.data.data.includes('办公用地')) {
|
||||
var id = event.data.params
|
||||
var url = event.data.url
|
||||
// router.push({name: 'landChild',params:{id}})
|
||||
router.push({name:'landChild',params: {id,url}})
|
||||
} else if (event.data.data.includes('noparams')) {
|
||||
router.push({name: 'landChild'})
|
||||
}
|
||||
}
|
||||
window.addEventListener("message", receiveMessageFromIframePage, false);
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
|
|
|
@ -267,7 +267,7 @@ const routes = [{
|
|||
component: () =>
|
||||
import ('../views/green/index.vue'),
|
||||
}],
|
||||
}
|
||||
},
|
||||
]
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
|
|
|
@ -102,7 +102,7 @@ export default {
|
|||
type: 'line',
|
||||
// smooth: true, //是否平滑
|
||||
showAllSymbol: true,
|
||||
// symbol: 'image://./static/images/guang-circle.png',
|
||||
// symbol: 'image://./static/travelImages/guang-circle.png',
|
||||
symbol: 'circle',
|
||||
symbolSize: 25,
|
||||
lineStyle: {
|
||||
|
@ -155,7 +155,7 @@ export default {
|
|||
type: 'line',
|
||||
// smooth: true, //是否平滑
|
||||
showAllSymbol: true,
|
||||
// symbol: 'image://./static/images/guang-circle.png',
|
||||
// symbol: 'image://./static/travelImages/guang-circle.png',
|
||||
symbol: 'circle',
|
||||
symbolSize: 25,
|
||||
lineStyle: {
|
||||
|
@ -209,7 +209,7 @@ export default {
|
|||
type: 'line',
|
||||
// smooth: true, //是否平滑
|
||||
showAllSymbol: true,
|
||||
// symbol: 'image://./static/images/guang-circle.png',
|
||||
// symbol: 'image://./static/travelImages/guang-circle.png',
|
||||
symbol: 'circle',
|
||||
symbolSize: 25,
|
||||
lineStyle: {
|
||||
|
|
|
@ -1253,6 +1253,7 @@ $box-width: 300px;
|
|||
}
|
||||
.click_Style{
|
||||
color: #0e8bff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.xiaoFang-number1{
|
||||
span{
|
||||
|
|
|
@ -3,17 +3,17 @@
|
|||
<div
|
||||
class="bg"
|
||||
>
|
||||
<iframe src="/food/foodMap.html" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||||
<div class="body-left"></div>
|
||||
<div class="body-right"></div>
|
||||
<div class="body-bottom"></div>
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="host-body">
|
||||
<headerIndex :cdata="{ title: '食品安全', margin: '26px auto' }" />
|
||||
|
||||
<headerIndex :cdata="{ title: '食品安全', margin: '26px auto' }" style="position: relative"/>
|
||||
<div class="body-box">
|
||||
<!-- 第三行数据 -->
|
||||
<div class="food-content-box">
|
||||
<div style="width:400px">
|
||||
<div style="width:400px" class="left">
|
||||
<div class="data-block-bk">
|
||||
<div class="data-tit-bg">基地及供应商基本情况</div>
|
||||
<div class="data-flex" style="height: 278px;">
|
||||
|
@ -56,98 +56,98 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative;">
|
||||
<!-- 删除 -->
|
||||
<!-- <div
|
||||
class="center_block c_posi"
|
||||
style="top: 47px; left: 100px;"
|
||||
@click="doGoLink()"
|
||||
>
|
||||
<div class="cen_block">
|
||||
<div class="cen_tit">南京厨鲜宝食品基地</div>
|
||||
<div
|
||||
class="cen_bg"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' + require(`../assets/foodSafe/pic1.png`) + ')',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="cen_map"></div>
|
||||
</div>
|
||||
<div
|
||||
class="center_block c_posi"
|
||||
style="top: 77px; right: 0px;"
|
||||
@click="doGoLink()"
|
||||
>
|
||||
<div class="cen_block">
|
||||
<div class="cen_tit">南京怀来正大食品</div>
|
||||
<div
|
||||
class="cen_bg"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' + require(`../assets/foodSafe/pic2.png`) + ')',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="cen_map"></div>
|
||||
</div>
|
||||
<div
|
||||
class="center_block c_posi"
|
||||
style="bottom: 249px; right: 230px;"
|
||||
@click="doGoLink()"
|
||||
>
|
||||
<div class="cen_block">
|
||||
<div class="cen_tit">南京牧龙食品烘焙基地</div>
|
||||
<div
|
||||
class="cen_bg"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' + require(`../assets/foodSafe/pic3.png`) + ')',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="cen_map"></div>
|
||||
</div>
|
||||
<div
|
||||
class="center_block c_posi"
|
||||
style="bottom: 50px; left: 12px;"
|
||||
@click="doGoLink()"
|
||||
>
|
||||
<div class="cen_block">
|
||||
<div class="cen_tit">江苏润丰股份有限公司</div>
|
||||
<div
|
||||
class="cen_bg"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' + require(`../assets/foodSafe/pic4.png`) + ')',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="cen_map"></div>
|
||||
</div>
|
||||
<div
|
||||
class="center_block c_posi"
|
||||
style="bottom: -76px; right: 65px;"
|
||||
@click="doGoLink()"
|
||||
>
|
||||
<div class="cen_block">
|
||||
<div class="cen_tit">南京丰浩华食品供应链</div>
|
||||
<div
|
||||
class="cen_bg"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' + require(`../assets/foodSafe/pic5.png`) + ')',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="cen_map"></div>
|
||||
</div> -->
|
||||
<!-- 删除 -->
|
||||
</div>
|
||||
<!-- <div style="position: relative;">-->
|
||||
<!-- <!– 删除 –>-->
|
||||
<!-- <!– <div-->
|
||||
<!-- class="center_block c_posi"-->
|
||||
<!-- style="top: 47px; left: 100px;"-->
|
||||
<!-- @click="doGoLink()"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="cen_block">-->
|
||||
<!-- <div class="cen_tit">南京厨鲜宝食品基地</div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="cen_bg"-->
|
||||
<!-- :style="{-->
|
||||
<!-- backgroundImage:-->
|
||||
<!-- 'url(' + require(`../assets/foodSafe/pic1.png`) + ')',-->
|
||||
<!-- }"-->
|
||||
<!-- ></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="cen_map"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="center_block c_posi"-->
|
||||
<!-- style="top: 77px; right: 0px;"-->
|
||||
<!-- @click="doGoLink()"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="cen_block">-->
|
||||
<!-- <div class="cen_tit">南京怀来正大食品</div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="cen_bg"-->
|
||||
<!-- :style="{-->
|
||||
<!-- backgroundImage:-->
|
||||
<!-- 'url(' + require(`../assets/foodSafe/pic2.png`) + ')',-->
|
||||
<!-- }"-->
|
||||
<!-- ></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="cen_map"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="center_block c_posi"-->
|
||||
<!-- style="bottom: 249px; right: 230px;"-->
|
||||
<!-- @click="doGoLink()"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="cen_block">-->
|
||||
<!-- <div class="cen_tit">南京牧龙食品烘焙基地</div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="cen_bg"-->
|
||||
<!-- :style="{-->
|
||||
<!-- backgroundImage:-->
|
||||
<!-- 'url(' + require(`../assets/foodSafe/pic3.png`) + ')',-->
|
||||
<!-- }"-->
|
||||
<!-- ></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="cen_map"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="center_block c_posi"-->
|
||||
<!-- style="bottom: 50px; left: 12px;"-->
|
||||
<!-- @click="doGoLink()"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="cen_block">-->
|
||||
<!-- <div class="cen_tit">江苏润丰股份有限公司</div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="cen_bg"-->
|
||||
<!-- :style="{-->
|
||||
<!-- backgroundImage:-->
|
||||
<!-- 'url(' + require(`../assets/foodSafe/pic4.png`) + ')',-->
|
||||
<!-- }"-->
|
||||
<!-- ></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="cen_map"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="center_block c_posi"-->
|
||||
<!-- style="bottom: -76px; right: 65px;"-->
|
||||
<!-- @click="doGoLink()"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="cen_block">-->
|
||||
<!-- <div class="cen_tit">南京丰浩华食品供应链</div>-->
|
||||
<!-- <div-->
|
||||
<!-- class="cen_bg"-->
|
||||
<!-- :style="{-->
|
||||
<!-- backgroundImage:-->
|
||||
<!-- 'url(' + require(`../assets/foodSafe/pic5.png`) + ')',-->
|
||||
<!-- }"-->
|
||||
<!-- ></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="cen_map"></div>-->
|
||||
<!-- </div> –>-->
|
||||
<!-- <!– 删除 –>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div style="width:400px"> -->
|
||||
<div>
|
||||
<div class="right">
|
||||
<div class="data-block-bk">
|
||||
<div class="data-tit-bg">关联食堂基本信息</div>
|
||||
<div class="data-flex">
|
||||
|
@ -774,13 +774,13 @@ export default {
|
|||
.body-box{
|
||||
margin-top: 0px!important;
|
||||
}
|
||||
.food-content-box {
|
||||
display: grid;
|
||||
grid-template-columns: 2.3fr 5fr 1.8fr;
|
||||
margin: 0 50px;
|
||||
position: absolute;
|
||||
top:140px
|
||||
}
|
||||
//.food-content-box {
|
||||
// display: grid;
|
||||
// grid-template-columns: 2.3fr 5fr 1.8fr;
|
||||
// margin: 0 50px;
|
||||
// position: absolute;
|
||||
// top:140px
|
||||
//}
|
||||
.data-block-bk {
|
||||
border: 2px solid #29a3d3a1;
|
||||
// background: #11223289;
|
||||
|
@ -963,4 +963,14 @@ $box-width: 300px;
|
|||
.c_posi {
|
||||
position: absolute;
|
||||
}
|
||||
.left {
|
||||
width: 24%;
|
||||
left: 2%;
|
||||
position: absolute;
|
||||
}
|
||||
.right {
|
||||
width: 21.5%;
|
||||
right: 2%;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -3,12 +3,13 @@
|
|||
<div
|
||||
class="bg"
|
||||
>
|
||||
<iframe src="/green/greenMap.html" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||||
<div class="body-left"></div>
|
||||
<div class="body-right"></div>
|
||||
<div class="body-bottom"></div>
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="host-body">
|
||||
<headerIndex :cdata="{ title: '绿色双碳', margin: '26px auto' }" />
|
||||
<headerIndex :cdata="{ title: '绿色双碳', margin: '26px auto' }" style="position:relative"/>
|
||||
|
||||
<div class="body-box" style="margin-top: -100px;">
|
||||
<!-- 第四行数据 -->
|
||||
|
@ -172,6 +173,14 @@ export default {
|
|||
{index: 4, city: '南通', building_name: '徐州大沙河', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
{index: 5, city: '扬州', building_name: '省公司大楼', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
],
|
||||
// 测试切换用能数据
|
||||
datalist_usage1: [
|
||||
{index: 1, city: '南京', building_name: '客服大厦1', water: 31449.7, electricity: 7466093.4, gas: '0', heat: '0'},
|
||||
{index: 2, city: '南京', building_name: '盐城零碳1', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
{index: 3, city: '苏州', building_name: '淮安楼宇1', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
{index: 4, city: '南通', building_name: '徐州大沙河1', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
{index: 5, city: '扬州', building_name: '省公司大楼1', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
],
|
||||
|
||||
// 节能数据
|
||||
datalist_save: [
|
||||
|
@ -181,6 +190,14 @@ export default {
|
|||
{index: 4, city: '南通', building_name: '徐州大沙河', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
{index: 5, city: '扬州', building_name: '省公司大楼', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
],
|
||||
// 测试切换节能数据
|
||||
datalist_save1: [
|
||||
{index: 1, city: '南京', building_name: '客服大厦1', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
{index: 2, city: '南京', building_name: '盐城零碳1', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
{index: 3, city: '苏州', building_name: '淮安楼宇1', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
{index: 4, city: '南通', building_name: '徐州大沙河1', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
{index: 5, city: '扬州', building_name: '省公司大楼1', water: '0', electricity: '0', gas: '0', heat: '0'},
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
|
@ -222,7 +239,16 @@ export default {
|
|||
// // }
|
||||
// // document.getElementById('temp-float-window').style.display = 'block'
|
||||
// }
|
||||
qiehuan(){
|
||||
this.datalist_save = this.datalist_save1
|
||||
this.datalist_usage = this.datalist_usage1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
window['vueDefinedMyProp'] = nanjing =>{
|
||||
this.qiehuan()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div id="index" ref="appRef">
|
||||
<!-- <div
|
||||
<!-- <div
|
||||
class="bg"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' + require(`../assets/${backgroundPic.index}.png`) + ')',
|
||||
}"
|
||||
> -->
|
||||
>-->
|
||||
<div
|
||||
class="bg"
|
||||
>
|
||||
|
@ -177,6 +177,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -3,11 +3,12 @@
|
|||
<div
|
||||
class="bg"
|
||||
>
|
||||
<iframe src="/land/landMap.html" frameborder="0" width="100%" height="100%"></iframe>
|
||||
<div class="body-left"></div>
|
||||
<div class="body-right"></div>
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="host-body">
|
||||
<headerIndex :cdata="{ title: '房地资源', margin: '26px auto' }" />
|
||||
<headerIndex :cdata="{ title: '房地资源', margin: '26px auto' }" style="position: relative" />
|
||||
|
||||
<div class="body-box">
|
||||
<!-- 第三行数据 -->
|
||||
|
|
|
@ -5,12 +5,13 @@
|
|||
'url(' + require(`@/assets/${backgroundPic.index}.png`) + ')',
|
||||
}"> -->
|
||||
<div class="bg">
|
||||
<iframe :src="buildUrl" ref="iframe" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||||
<div class="body-left"></div>
|
||||
<div class="body-right"></div>
|
||||
<div class="body-bottom"></div>
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="host-body">
|
||||
<HeaderIndex :cdata="{ title: '房地资源', margin: '26px auto' }" />
|
||||
<HeaderIndex :cdata="{ title: '房地资源', margin: '26px auto' }" style="position: relative"/>
|
||||
<div class="main" style="margin-top:-80px">
|
||||
<div class="left">
|
||||
<h1>基础数据展示</h1>
|
||||
|
@ -61,10 +62,12 @@ import * as mockData from "./mock"
|
|||
import drawMixin from "@/utils/drawMixin";
|
||||
import headerIndex from "@/components/layout/header.vue";
|
||||
import BasicBox1 from "@/components/BasicBox1"
|
||||
import router from "@/router";
|
||||
export default {
|
||||
mixins: [drawMixin],
|
||||
data() {
|
||||
return {
|
||||
buildUrl:this.$route.params.url,
|
||||
backgroundPic: {
|
||||
index: "landRes2/bg",
|
||||
},
|
||||
|
|