<!--
|
功能描述：二维地图
|
开发公司：广东蓝图
|
开发人员：蔡工
|
开发时间：2019-07-25 ~ 2019-09
|
-->
|
<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
|
<title>专题数据库</title>
|
<script type="text/javascript" src="scripts/js/config.js"></script>
|
<script type="text/javascript">
|
remoteToLoadCss(arcgis_lib_css);
|
</script>
|
|
<!-- <script src="./js/echarts.min.js"></script> -->
|
|
<!-- <link rel="stylesheet" href="./js/colorpicker/css/colorpicker.css"> -->
|
<link rel="stylesheet" href="./js/layui-v2.6.7/layui/css/layui.css" />
|
<link rel="stylesheet" href="styles/map.css">
|
<link rel="stylesheet" href="styles/public.css">
|
<link rel="stylesheet" href="styles/MyPaging.css">
|
<link rel="stylesheet" href="styles/ColorPicker.css">
|
<script type="text/javascript" src="scripts/libs/jquery-1.8.3.min.js"></script>
|
<script type="text/javascript" src="scripts/libs/MyPaging.js"></script>
|
<script type="text/javascript" src="scripts/js/ui.js"></script>
|
<script type="text/javascript" src="scripts/js/services.js"></script>
|
<!-- <script type="text/javascript" src="scripts/widget/echarts.min.js"></script> -->
|
<script type="text/javascript" src="../../js/echarts5/dist/echarts.min.js"></script>
|
|
<script src="./js/lodash.min.js"></script>
|
<link rel="stylesheet" href="./css/index1.css">
|
<link rel="stylesheet" href="./js/ztreev3/css/bootstrapStyle/bootstrapStyle.css">
|
<link rel="stylesheet" href="./css/layui-table.css">
|
<link rel="stylesheet" href="./js/Animate/animate.min.css">
|
|
<!-- 泰瑞 start -->
|
<style>
|
.scalebar_bottom-left {
|
bottom: 50px !important;
|
}
|
|
#map_zoom_slider {
|
display: none;
|
}
|
|
.ztsjms {
|
padding: 20px;
|
width: 100%;
|
height: 300px;
|
height: 100%;
|
/* background-color: rgba(45, 95, 139, 0.9); */
|
/* background-color: rgba(71, 120, 255, 0.328); */
|
background-color: rgba(74, 91, 139, 0.9);
|
position: absolute;
|
left: 0;
|
right: 0;
|
z-index: 9999;
|
font-size: 16px;
|
letter-spacing: 4px;
|
/* font-weight: bold; */
|
color: #fff;
|
}
|
|
.slider {
|
width: 100%;
|
height: 1px;
|
border-top: 1px solid rgb(45, 95, 139);
|
margin-top: 20px;
|
margin-bottom: 20px;
|
}
|
|
strong {
|
border: 1px solid #fb424250;
|
border-radius: 5px;
|
padding-left: 2px;
|
padding-right: 2px;
|
margin-left: 2px;
|
margin-right: 2px;
|
font-weight: normal;
|
font-size: 16px;
|
background-color: rgba(235, 183, 183, 0.6);
|
color: rgb(92, 33, 33);
|
}
|
</style>
|
<!-- 泰瑞 end -->
|
<script type="text/javascript">
|
var color = window.localStorage.getItem('--bgcolor');
|
|
document.documentElement.style.setProperty('--bgcolor', color);
|
|
//下面这段代码必须放到下面几个脚本文件的上面，否则会错误
|
var dojoConfig = {
|
api_url: config_ip + "/libs/arcgis/3.21",
|
async: false,
|
isDebug: false,
|
parseOnLoad: true,
|
mblHideAddressBar: false,
|
packages: [{
|
name: "scripts",
|
location: location.pathname.replace(/\/[^/]+$/, '') + '/scripts'
|
}]
|
};
|
function showOrHideZtms(css) {
|
$("#ztsjms").removeClass('fadeInDown').removeClass('fadeOutUp').removeClass('animated').addClass(css + ' animated ');
|
}
|
</script>
|
<script type="text/javascript">
|
remoteToLoadJs(arcgis_lib_js);
|
</script>
|
<script type="text/javascript">
|
var myechart = echarts; //统计图对象
|
var map; //地图对象
|
var measurementObject; //测量工具对象
|
var bookmarksObject; //地图书签对象
|
var basemapGalleryObject; //底图选择对象
|
var isTools = false; //工具操作标识（区分地图点击事件）
|
|
//暂时放这
|
var drawRegionUrl = ""; //拉框查询地址
|
|
var colorSign = "";
|
var sizeSign = "";
|
var plotPointColor = [255, 255, 0]; //点颜色
|
var plotLineColor = [255, 0, 0]; //线颜色
|
var plotPolygonColor = [255, 255, 0]; //面颜色
|
var plotPointSize = 10; //点大小
|
var plotLineSize = 1; //线粗细
|
var plotOperate; //撤销（0），清除全部（-1）
|
var showPlotLayer; //显示绘画图层
|
var glitterGraphic;
|
var tempGraphic;
|
var layerDefaultHighLightColor = "[71, 169, 5, 0]";
|
var plotGraphicLayer;
|
|
var navigation;
|
var navigationPAN;
|
|
var loadJJMap = null;
|
var removeJJMap = null;
|
var JJFeatureLayer = null;
|
require([
|
"dojo/dom",
|
"dojo/dom-construct",
|
"esri/map",
|
"esri/config",
|
"esri/geometry/webMercatorUtils", //坐标转换
|
"esri/toolbars/navigation", //地图操作
|
"esri/dijit/HomeButton",
|
"esri/dijit/Scalebar",
|
"esri/layers/GraphicsLayer",
|
"esri/layers/FeatureLayer",
|
"esri/layers/WMSLayer",
|
"esri/layers/WMTSLayer",
|
"esri/layers/WMTSLayerInfo",
|
'esri/layers/WebTiledLayer',
|
'esri/layers/TileInfo',
|
"esri/InfoTemplate",
|
"esri/symbols/SimpleFillSymbol",
|
"esri/symbols/SimpleLineSymbol",
|
"esri/renderers/SimpleRenderer",
|
"esri/renderers/UniqueValueRenderer",
|
"esri/renderers/ClassBreaksRenderer",
|
"esri/Color",
|
|
|
"scripts/widget/bookmark",
|
"scripts/widget/measurement",
|
"scripts/widget/daluanxian",
|
"scripts/widget/heatmap",
|
"scripts/widget/basemapGallery",
|
"scripts/widget/cluster",
|
"scripts/js/utils",
|
"scripts/js/mylayer",
|
"scripts/js/draw",
|
"scripts/js/plot",
|
"scripts/js/print",
|
"scripts/js/buffer",
|
"scripts/js/mapcharts",
|
"scripts/js/zzxst",
|
"scripts/js/grid",
|
|
"dojox/widget/ColorPicker",
|
"dojo/_base/fx", //泰瑞
|
"dojo/dom", //泰瑞
|
"dojo/dom-construct", //泰瑞
|
"dojo/dom-attr", //泰瑞
|
"dojo/dom-style", //泰瑞
|
|
"dijit/layout/BorderContainer",
|
"dijit/layout/ContentPane",
|
"dijit/TitlePane",
|
"dijit/form/CheckBox",
|
"dojo/domReady!"
|
], function (dom, domConstruct, Map, esriConfig, webMercatorUtils, Navigation, HomeButton, Scalebar, GraphicsLayer,
|
FeatureLayer, WMSLayer, WMTSLayer, WMTSLayerInfo, WebTiledLayer, TileInfo, InfoTemplate, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, UniqueValueRenderer, ClassBreaksRenderer, Color,
|
Bookmark, Measurement, DaLuAnXian, Heatmap, BasemapGallery, Cluster, Utils, MyLayer, Draw, Plot, Print, Buffer, MapCharts, ZZXST, Grid, ColorPicker
|
, mbasefx, dom, domConstruct, domAttr, domStyle
|
) {
|
|
//esriConfig.defaults.io.proxyUrl = "/proxy/";
|
//esriConfig.defaults.io.alwaysUseProxy = false;
|
|
basefx = mbasefx; //泰瑞
|
//window.parent.$('.nav_menu_area li').eq(0).click();
|
//var zttcIframe = parent.document.getElementById("zttcIframe").contentWindow;
|
//zttcIframe.HYDP.windowOnloadLayer();
|
|
var utils = new Utils();
|
|
//创建GeometryService
|
esriConfig.defaults.geometryService = utils.createGeometryService(config_services.geometryService);
|
|
//创建Map
|
map = new Map("map", {
|
center: [config_map.center.longitude, config_map.center.latitude], // longitude, latitude
|
zoom: config_map.zoom,
|
logo: config_map.logo,
|
maxZoom: 16, //限制底图放大级别,
|
spatialReference: { wkid: 4326 }
|
});
|
|
//创建基础底图
|
|
var basemap = utils.createBaseMapLayer(config_basemap.layerId, config_basemap.layerURL, config_basemap.isVisible); //默认基础底图配置（config.js）
|
|
|
map.addLayer(basemap);
|
|
map.graphics = new esri.layers.GraphicsLayer();
|
|
// var legend = new ltLegend();
|
// legend.show()
|
//featureLayer.on("update-end", function () {
|
// console.log(featureLayer.graphics.length);
|
// for (var i = 0; i < featureLayer.graphics.length;i++)
|
// {
|
// featureLayer.graphics[i].attributes["jcount"] = i;
|
// }
|
// featureLayer.setRenderer(renderer);
|
// featureLayer.redraw();
|
//});
|
|
|
|
//地图点击事件
|
map.on("click", mapClick);
|
|
//地图点击方法
|
function mapClick(e) {
|
if (!isTools) {
|
//点选查询
|
myLayers = getMyLayer();
|
myLayers.mapClick(e);
|
}
|
}
|
|
//地图加载完成，调用初始化方法
|
map.on("load", init);
|
|
// map.on("extent-change", function() {
|
// console.log("当前比例尺:" + map.getScale());
|
// });
|
|
//地图初化
|
function init() {
|
//创建比例尺工具
|
var scalebar = new Scalebar({
|
map: map,
|
scalebarUnit: "dual"
|
});
|
scalebar.show();
|
|
//创建默认范围按钮
|
addHomeButton();
|
|
//创建地图工具栏
|
addMapToolBar();
|
|
initLayers();
|
|
//地图工具
|
navigation = new Navigation(map);
|
navigationPAN = Navigation.PAN;
|
dojo.query(".btnTool").forEach(function (node, index) {
|
dojo.connect(node, "onclick", function (evt) {
|
switch (node.title) {
|
case "平移":
|
navigation.activate(Navigation.PAN);
|
break;
|
case "拉框放大":
|
navigation.activate(Navigation.ZOOM_IN);
|
break;
|
case "拉框缩小":
|
navigation.activate(Navigation.ZOOM_OUT);
|
break;
|
case "测量工具":
|
if (!measurementObject) {
|
measurementObject = new Measurement();
|
}
|
measurementObject.show();
|
break;
|
case "打印工具":
|
showPrintTools();
|
break;
|
case "地图书签":
|
if (!bookmarksObject) {
|
bookmarksObject = new Bookmark();
|
}
|
bookmarksObject.show();
|
break;
|
case "绘图工具":
|
showPlotTools();
|
break;
|
case "清除标记":
|
myLayers = getMyLayer();
|
myLayers.clearGraphics();
|
break;
|
case "底图选择":
|
if (!basemapGalleryObject) {
|
basemapGalleryObject = new BasemapGallery();
|
}
|
basemapGalleryObject.show();
|
break;
|
}
|
});
|
});
|
|
//绘图工具
|
dojo.query(".plottool").forEach(function (node, index) {
|
dojo.connect(node, "onclick", function (evt) {
|
switch (node.value) {
|
case "点":
|
plottools("point");
|
break;
|
case "多点":
|
plottools("multipoint");
|
break;
|
case "线":
|
plottools("line");
|
break;
|
case "折线":
|
plottools("polyline");
|
break;
|
case "面":
|
plottools("polygon");
|
break;
|
case "矩形":
|
plottools("rectangle");
|
break;
|
case "手绘折线":
|
plottools("freehandpolyline");
|
break;
|
case "手绘面":
|
plottools("freehandpolygon");
|
break;
|
case "箭头":
|
plottools("arrow");
|
break;
|
case "三角形":
|
plottools("triangle");
|
break;
|
case "圆形":
|
plottools("circle");
|
break;
|
case "椭圆":
|
plottools("ellipse");
|
break;
|
}
|
});
|
});
|
|
//创建默认范围按钮
|
function addHomeButton() {
|
// var home = new HomeButton({
|
// map: map
|
// },"HomeButton");
|
// home.startup();
|
var a = dom.byId("map_zoom_slider");
|
domConstruct.create("div", {
|
id: "homeButtonDiv"
|
}, a, 1);
|
// domConstruct.place(e, a, "after");
|
var homeButton = new HomeButton({
|
map: map
|
}, "homeButtonDiv");
|
homeButton.startup();
|
}
|
|
//默认显示12海里岸线和
|
function initLayers() {
|
|
}
|
//========================= init() end =========================
|
}
|
|
plotGraphicLayer = new GraphicsLayer({
|
id: "plotLayer"
|
})
|
map.addLayer(plotGraphicLayer);
|
|
//=================== 二维和三维地图联动 ======================
|
|
dojo.connect(map, "onClick", extChange);
|
function extChange(evt) {
|
// var xMax = evt.xmax;
|
// var yMax = evt.ymax;
|
// var xMin = evt.xmin;
|
// var yMin = evt.ymin;
|
|
// var pointLB = webMercatorUtils.xyToLngLat(xMin, yMin); //左下
|
// var pointRT = webMercatorUtils.xyToLngLat(xMax, yMax); //右上
|
|
// var xMax = pointRT[0];
|
// var yMax = pointRT[1];
|
// var xMin = pointLB[0];
|
// var yMin = pointLB[1];
|
|
// parent.iLeft.Move3DMapTo(xMax, yMax, xMin, yMin);
|
|
try {
|
window.parent.D2D3();
|
}
|
catch (ex) { }
|
}
|
|
});
|
//====================================== domReady end =========================================
|
|
//获取图层操作对象
|
var myLayer;
|
function getMyLayer() {
|
if (!myLayer) {
|
myLayer = new MyLayer();
|
map.addLayer(myLayer);
|
}
|
return myLayer;
|
}
|
|
var myDraw;
|
function getMyDraw() {
|
if (!myDraw) {
|
myDraw = new Draw();
|
}
|
return myDraw;
|
}
|
var myBuffer;
|
function getMyBuffer() {
|
if (!myBuffer) {
|
myBuffer = new Buffer();
|
}
|
return myBuffer;
|
}
|
|
//打印
|
function printtools() {
|
var print = new Print();
|
print.printtools();
|
}
|
|
/*===========绘图模块Begin===========*/
|
//绘图
|
function plottools(tool) {
|
var plot = new Plot();
|
plot.plottools(tool);
|
}
|
|
//创建绘画图层
|
function createLayer() {
|
var plot = new Plot();
|
plot.createLayer();
|
}
|
|
//清除所有绘画图层
|
function removeAllLayer() {
|
var plot = new Plot();
|
plot.removeAllLayer();
|
}
|
|
//绘画后退
|
function revocationLayer() {
|
var plot = new Plot();
|
plot.revocationLayer();
|
}
|
|
//绘图保存
|
function savePlotPayer() {
|
var plot = new Plot();
|
plot.savePlotPayer();
|
}
|
|
//展示绘图
|
function getPlotPayer(datalist) {
|
var plot = new Plot();
|
plot.getPlotPayer(datalist);
|
}
|
|
//获取绘图数据
|
function getPlotData() {
|
var plot = new Plot();
|
return plot.getPlotData();
|
}
|
|
//删除绘图数据
|
function deletePlotData(index) {
|
var plot = new Plot();
|
plot.deletePlotData(index);
|
}
|
|
function changeColor(id) {
|
$('.colorpicker').show();
|
colorSign = id;
|
}
|
|
function comfirmColor() {
|
if (colorSign == "pointcolor") {
|
plotPointColor = [parseInt($("#picker2_0_r").val()), parseInt($("#picker2_0_g").val()), parseInt($("#picker2_0_b").val())]
|
} else if (colorSign == "linecolor") {
|
plotLineColor = [parseInt($("#picker2_0_r").val()), parseInt($("#picker2_0_g").val()), parseInt($("#picker2_0_b").val())]
|
} else if (colorSign == "polygoncolor") {
|
plotPolygonColor = [parseInt($("#picker2_0_r").val()), parseInt($("#picker2_0_g").val()), parseInt($("#picker2_0_b").val())]
|
}
|
$('.colorpicker').hide();
|
}
|
|
function changeSize(id) {
|
if (colorSign == "pointsize") {
|
$("#plsize").val(10);
|
} else if (colorSign == "linesize") {
|
$("#plsize").val(1);
|
}
|
$('.sizepicker').show();
|
sizeSign = id;
|
}
|
|
function comfirmSize() {
|
if (sizeSign == "pointsize") {
|
plotPointSize = $("#plsize").val();
|
} else if (sizeSign == "linesize") {
|
plotLineSize = $("#plsize").val();
|
}
|
$('.sizepicker').hide();
|
}
|
/*================绘图模块End============*/
|
|
/**
|
* @Description: 显示隐藏绘画工具面板
|
* @author ykm
|
* @function
|
* @date 2019-8-19 9:46
|
*/
|
function showPlotTools() {
|
createLayer();
|
var tools = dojo.byId("plotToolContainer");
|
if (dojo.style(tools, "display") == "none") {
|
dojo.style(tools, "display", "block");
|
}
|
else {
|
dojo.style(tools, "display", "none");
|
}
|
}
|
|
function showPrintTools() {
|
var tools = dojo.byId("printToolContainer");
|
if (dojo.style(tools, "display") == "none") {
|
dojo.style(tools, "display", "block");
|
}
|
else {
|
dojo.style(tools, "display", "none");
|
}
|
}
|
|
function closePlotTool() {
|
$("#plotToolContainer").hide();
|
createLayer();
|
|
};
|
|
function closePrintTool() {
|
$("#printToolContainer").hide();
|
};
|
|
function togglePanel() {
|
if ($('#legendDiv').css('display') == 'none') {
|
$('#legendDiv').show();
|
}
|
else {
|
$('#legendDiv').hide();
|
}
|
}
|
|
//地图工具（通过传参调用）
|
var currentMapTool = "";
|
function chooseMapTool(type) {
|
closeAllMapTool(type);
|
switch (type) {
|
case "平移":
|
navigation.activate(navigationPAN);
|
break;
|
case "拉框放大":
|
navigation.activate(Navigation.ZOOM_IN);
|
break;
|
case "拉框缩小":
|
navigation.activate(Navigation.ZOOM_OUT);
|
break;
|
case "测量工具":
|
if (!measurementObject) {
|
measurementObject = new Measurement();
|
}
|
measurementObject.show();
|
break;
|
case "打印工具":
|
showPrintTools();
|
break;
|
case "地图书签":
|
if (!bookmarksObject) {
|
bookmarksObject = new Bookmark();
|
}
|
bookmarksObject.show();
|
break;
|
case "绘图工具":
|
showPlotTools();
|
break;
|
case "清除标记":
|
myLayers = getMyLayer();
|
myLayers.clearGraphics();
|
break;
|
case "底图选择":
|
if (!basemapGalleryObject) {
|
basemapGalleryObject = new BasemapGallery();
|
}
|
basemapGalleryObject.show();
|
break;
|
}
|
currentMapTool = type; //记录当前操作工具
|
}
|
|
//关闭地图工具所有面板
|
function closeAllMapTool(type) {
|
if (type != "测量工具" && type != "打印工具" && type != "地图书签" && type != "绘图工具" && type != "底图选择") {
|
return;
|
}
|
if (type == currentMapTool) {
|
return;
|
}
|
//测量工具
|
if (dojo.style("measurementContainer", "display") == "block") {
|
if (!measurementObject) {
|
measurementObject = new Measurement();
|
}
|
measurementObject.show();
|
}
|
//打印工具
|
dojo.style(dojo.byId("printToolContainer"), "display", "none");
|
//地图书签
|
if (dojo.style("bookmarksContainer", "display") == "block") {
|
if (!bookmarksObject) {
|
bookmarksObject = new Bookmark();
|
}
|
bookmarksObject.show();
|
}
|
|
//绘图工具
|
dojo.style(dojo.byId("plotToolContainer"), "display", "none");
|
//底图选择
|
if (dojo.style(dojo.byId("basemapGalleryContainer"), "display") == "block") {
|
if (!basemapGalleryObject) {
|
basemapGalleryObject = new BasemapGallery();
|
}
|
basemapGalleryObject.show();
|
}
|
}
|
|
|
|
var wmslayer = null;
|
var resourceInfo = null;
|
function testSkylineWms() {
|
|
var layerInfo = new esri.layers.WMSLayerInfo({
|
name: "sgwms",
|
title: "sgwms",
|
spatialReferences: [4326]
|
});
|
var extent = new esri.geometry.Extent(-180, -90, 180, 90, new esri.SpatialReference({ wkid: 4326 }));
|
resourceInfo = {
|
copyright: "sgWms",
|
description: "sg",
|
extent: extent,
|
layerInfos: [layerInfo],
|
version: '1.1.1',
|
customLayerParameters: {
|
SRS: "EPSG:4326",
|
WIDTH: 256,
|
HEIGHT: 256
|
}
|
};
|
var wmsUrl = "http://71.3.110.200/sg/Imagery";
|
wmslayer = new esri.layers.WMSLayer(wmsUrl, {
|
resourceInfo: resourceInfo,
|
visibleLayers: ["QJGPT2Q20210112.412893.mpt"],
|
spatialReferences: [4326]
|
});
|
map.addLayer(wmslayer);
|
|
}
|
|
|
function testWMTS2() {
|
var url = "http://71.3.110.202:6080/arcgis/rest/services/HYQY/QP_ZGDL12HLX/MapServer/WMTS";
|
var wmtslayer = new esri.layers.WMTSLayer(url);
|
map.addLayer(wmtslayer);
|
}
|
function testChaoTuWMTS() {
|
var url = "http://18.1.2.15:8090/iserver/services/map-agscachev2-TuCeng2/wmts100";
|
var wmtslayer = new esri.layers.WMTSLayer(url);
|
map.addLayer(wmtslayer);
|
}
|
|
function testSHJJServer() {
|
;
|
var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://71.3.110.202:6080/arcgis/rest/services/YBJZ/FBC/MapServer", {
|
id: "TC_JJTEST",
|
visible: true
|
});
|
dynamicLayer.setVisibleLayers([12]);
|
map.addLayer(dynamicLayer);
|
}
|
</script>
|
</head>
|
|
<body>
|
<div id="ztsjms" class="ztsjms">
|
<div style="margin-left: 226px;
|
margin-top: 44px;
|
font-size: 18px;
|
font-weight: bold;
|
color: white;
|
position: absolute;">专题数据</div>
|
<div class="ztsjms-content" style="
|
margin-top: 155px;
|
width: 800px;
|
height: 250px;
|
position: absolute;">
|
|
</div>
|
|
<!-- <div class="slider"></div> -->
|
|
<div id="chartLeft" style="margin-left: 800px;
|
width: 50%;
|
height: 300px;
|
-webkit-tap-highlight-color: transparent;
|
user-select: none;">
|
</div>
|
<div id="chartRight" style="margin-left: 710px;
|
width: 50%;
|
height: 300px;
|
float: left;
|
-webkit-tap-highlight-color: transparent;
|
user-select: none;
|
position: relative;">
|
</div>
|
</div>
|
<!-- 数据表格 -->
|
<div class="tab">
|
<div class="close"><span>×</span></div>
|
<div class="tabbox">
|
<table data-treeid="" id="metadata">
|
<thead></thead>
|
<tbody></tbody>
|
</table>
|
</div>
|
<div class="subbox">
|
<button onclick="submitfunc()">提交</button>
|
<button onclick="openInResource()">在资源池打开</button>
|
<button onclick="addtabtr()">+</button>
|
</div>
|
</div>
|
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"
|
style="width:100%; height:100%;">
|
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
|
|
<!-- 测量工具面板 -->
|
<div id="measurementContainer"
|
style="position:absolute; right:66px; top:110px; z-Index:999; display: none;">
|
<!-- alert ykm -->
|
<span style="font-size: 20px;margin: 10px; line-height: 35px;">测量工具</span>
|
<span id="measurementClose"
|
style="float: right;margin-right: 10px;font-size: 18px;cursor: pointer;">x</span>
|
<hr />
|
<div id="measurementTool"></div>
|
</div>
|
<!-- 底图选择面板 -->
|
<!-- alert ykm -->
|
<div id="basemapGalleryContainer"
|
style="background-color:white;border: 1px solid rgb(226, 227, 227); border-image: none; top: 110px; width: 385px; min-height: 100px; right: 66px; position: absolute; z-index: 9999; max-height: 600px;display: none;">
|
<span style="font-size: 20px;margin: 10px; line-height: 35px;">选择底图</span>
|
<span id="basemapClose"
|
style="float: right;margin-right: 10px;font-size: 18px;cursor: pointer;">x</span>
|
<hr />
|
<div id="basemapGalleryDiv" style="font-size: 13px;"></div>
|
</div>
|
<!-- 地图书签面板 -->
|
<div id="bookmarksContainer"
|
style="background-color:white;border: 1px solid rgb(226, 227, 227); border-image: none; top: 110px; width: 300px; min-height: 100px; right: 66px; position: absolute; z-index: 9999; max-height: 600px;display: none;">
|
<span style="font-size: 20px;margin: 10px; line-height: 35px;">地图书签</span>
|
<span id="bookmarksClose"
|
style="float: right;margin-right: 10px;font-size: 18px;cursor: pointer;">x</span>
|
<hr />
|
<div id="bookmarksTool">
|
</div>
|
</div>
|
<!-- 绘图工具面板 -->
|
<div id="plotToolContainer" style="position:absolute; right:66px; top:110px; z-Index:999; display: none;">
|
<span style="font-size: 20px;margin: 10px; line-height: 35px;">绘图工具</span>
|
<span id="plotToolClose" onclick="closePlotTool()"
|
style="float: right;margin-right: 10px;font-size: 18px;cursor: pointer;">x</span>
|
<hr />
|
<div id="plottools" style="display: block;padding: 10px;">
|
<input type="button" class="plottool" value="点" title="点"
|
style="background: url(images/printIcon/point.png)" />
|
<input type="button" class="plottool" value="多点" title="多点"
|
style="background: url(images/printIcon/multiPoint.png)" />
|
<input type="button" class="plottool" value="线" title="线"
|
style="background: url(images/printIcon/line.png)" />
|
<input type="button" class="plottool" value="折线" title="折线"
|
style="background: url(images/printIcon/poly-line.png)" />
|
<input type="button" class="plottool" value="矩形" title="矩形"
|
style="background: url(images/printIcon/rectangle.png)" />
|
<input type="button" class="plottool" value="面" title="面"
|
style="background: url(images/printIcon/polygon.png)" />
|
<input type="button" class="plottool" value="手绘折线" title="手绘折线"
|
style="background: url(images/printIcon/freehandpolyline.png)" />
|
<input type="button" class="plottool" value="手绘面" title="手绘面"
|
style="background: url(images/printIcon/freehandpolygon.png)" />
|
<input type="button" class="plottool" value="箭头" title="箭头"
|
style="background: url(images/printIcon/arrow.png)" />
|
<input type="button" class="plottool" value="三角形" title="三角形"
|
style="background: url(images/printIcon/triangle.png)" />
|
<input type="button" class="plottool" value="圆形" title="圆形"
|
style="background: url(images/printIcon/circle.png)" />
|
<input type="button" class="plottool" value="椭圆" title="椭圆"
|
style="background: url(images/printIcon/ellipse.png)" />
|
<div>
|
<input type="button" id="pointcolor" class="plotButton" value="清除全部"
|
onclick="removeAllLayer();" />
|
<input type="button" id="pointcolor" class="plotButton" value="后退"
|
onclick="revocationLayer();" />
|
<input type="button" id="pointcolor" class="plotButton" value="点颜色"
|
onclick="changeColor(this.id);" />
|
<input type="button" id="linecolor" class="plotButton" value="线颜色"
|
onclick="changeColor(this.id);" />
|
<input type="button" id="polygoncolor" class="plotButton" value="面颜色"
|
onclick="changeColor(this.id);" />
|
<input type="button" id="pointsize" class="plotButton" value="点大小"
|
onclick="changeSize(this.id);" />
|
<input type="button" id="linesize" class="plotButton" value="线粗细"
|
onclick="changeSize(this.id);" />
|
<hr />
|
<div style="margin: 6px 0px 0 7px;font-size: 14px;">
|
图层名称：<input type="text" id="plotLayerName" />
|
<div style="float: right;clear: right;">
|
<input type="button" id="savePlotLayer" class="plotLayer" value="保存图层"
|
onclick="savePlotPayer();" />
|
<input type="button" id="pointcolor" class="plotLayer" value="绘画列表"
|
onclick="showPlotList();" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="colorpicker" style="display: none;font-size: 13px;padding: 2px;">
|
<div data-dojo-type="dojox.widget.ColorPicker" id="picker2"></div>
|
<div style="height: 50px;">
|
<button style="position: absolute;right: 91px;" class="plotLayer"
|
onclick="comfirmColor()">确定</button>
|
<button style="position: absolute;right: 13px;" class="plotLayer"
|
onclick="$('.colorpicker').hide();">取消</button>
|
</div>
|
</div>
|
<div class="sizepicker"
|
style="height: 50px;background-color: #ffffff;display: none;padding: 0 13px;margin-top: 7px;">
|
<input type="range" id="plsize" min="1" max="40" step="1" value="1.0" />
|
<div style="float: right;clear: right;">
|
<button class="plotLayer" onclick="comfirmSize()">确定</button>
|
<button class="plotLayer" onclick="$('.sizepicker').hide();">取消</button>
|
</div>
|
</div>
|
<div id="PlotsList" style="display: none;">
|
<div class="pagemain">
|
<table border="1">
|
<thead>
|
<tr>
|
<th style="width: 85%;">名称</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
<tbody class="pagetbody">
|
<tr></tr>
|
</tbody>
|
</table>
|
<div class="PagingBox" style="width: 46%;margin: 0 auto;"></div>
|
</div>
|
</div>
|
</div>
|
<!-- 打印工具面板 -->
|
<div id="printToolContainer"
|
style="background-color:white;border: 1px solid rgb(226, 227, 227); border-image: none; top: 110px; width: 300px; min-height: 100px; right: 66px; position: absolute; z-index: 9999; max-height: 600px;display: none;">
|
<span style="font-size: 20px;margin: 10px; line-height: 35px;">地图打印</span>
|
<span id="printToolClose" onclick="closePrintTool()"
|
style="float: right;margin-right: 10px;font-size: 18px;cursor: pointer;">x</span>
|
<hr />
|
<div id="printTool" style="display: block;padding: 10px;">
|
<div style="margin: 7px auto;width: 94%;">
|
页面设置：<select id="pageSetting"
|
style="width: 66%;text-align: center;height: 30px;margin-bottom: 10px;">
|
<option value="Letter ANSI A Landscape">字母Ansi A横向</option>
|
<option value="A3 Landscape">A3横向</option>
|
<option value="A3 Portrait">A3纵向</option>
|
<option value="A4 Landscape">A4横向</option>
|
<option value="A4 Portrait">A4纵向</option>
|
<option value="Letter ANSI A Portrait">字母Ansi A纵向</option>
|
<option value="Tabloid ANSI B Landscape">Tabloid ANSI B横向</option>
|
<option value="Tabloid ANSI B Portrait">Tabloid ANSI B纵向</option>
|
</select><br>
|
打印格式：<select id="printType" style="width: 66%;text-align: center;height: 30px;">
|
<option value="PDF">PDF</option>
|
<option value="PNG32">PNG32</option>
|
<option value="PNG8">PNG8</option>
|
<option value="JPG">JPG</option>
|
<option value="GIF">GIF</option>
|
<option value="EPS">EPS</option>
|
<option value="SVG">SVG</option>
|
<option value="SVGZ">SVGZ</option>
|
</select>
|
<div style="border: 1px solid #adacac;width: 54%;margin: 10px auto;text-align: center;line-height: 30px;cursor:pointer;"
|
onclick="printtools();">打印</div>
|
</div>
|
</div>
|
</div>
|
<!-- 通用图例 -->
|
<div id="lengedBox" style="bottom: 30px;position: absolute;right: 105px;z-index: 1;">
|
<div id="legend_lr" style="display: inline-block;float:left;position: relative;margin-right: 1px;">
|
<span class="esri-icon-media" id="Legned_icon" title="隐藏图例"
|
style="float: left;cursor: pointer;padding: 6px;background-color: white;line-height: 1.35rem;;font-size: 18px;border: 1px solid #bbb;border-radius: 11px 0px 0px 11px;cursor: pointer;"
|
onclick="showLD()" aria-label="toggle icon"></span>
|
</div>
|
<div id="lengedContent"
|
style="width:274px; max-height:290px; border:solid 1px #D5E3F0; z-index: 999; background-color: white; overflow: auto;padding: 6px;">
|
<div>
|
<label style="font-weight: bold;">图例</label>
|
<span class="esri-icon-up-down-arrows"
|
style="float: right; cursor: pointer; padding:5px;margin: -3px 0px;font-size: 18px;cursor: pointer;"
|
onclick="togglePanel();" aria-label="toggle icon"></span>
|
</div>
|
<div id="legendDiv" style="display: none;"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
|
</html>
|
<script type="text/javascript">
|
//=================== 二维和三维地图联动 ======================
|
|
//设置地图位置
|
function setMapPosition(xMax, yMax, xMin, yMin) {
|
var extent = new esri.geometry.Extent({ "xmax": xMax, "ymax": yMax, "xmin": xMin, "ymin": yMin });
|
map.setExtent(extent);
|
}
|
|
|
|
function showPlotList() {
|
|
if ($("#PlotsList").css("display") == "none") {
|
$("#PlotsList").show();
|
initLoadPage();
|
}
|
else {
|
$("#PlotsList").hide();
|
}
|
}
|
|
function initLoadPage() {
|
// 初始化分页
|
$('.PagingBox').MyPaging({
|
size: 3,
|
total: 0,
|
current: 1,
|
linkNum: 1,
|
prevHtml: '上一页',
|
nextHtml: '下一页',
|
//layout: 'total, totalPage, prev, pager, next, jumper',
|
layout: 'prev, next',
|
jump: function () {
|
var _this = this;
|
setTimeout(function () {
|
var res = getPageData({
|
size: _this.size,
|
current: _this.current
|
})
|
|
setTbody(res.list);
|
_this.setTotal(res.total);
|
}, 100);
|
}
|
});
|
}
|
|
var nowPage;
|
function getPageData(params) {
|
var data = eval(getPlotData());
|
var start = (params.current - 1) * params.size;
|
var end = params.current * params.size;
|
nowPage = params.current;
|
return {
|
total: data.length,
|
list: data.splice((params.current - 1) * params.size, params.size)
|
}
|
}
|
|
// 设置tbody的html
|
function setTbody(arr) {
|
var html = "";
|
for (var i = 0; i < arr.length; i++) {
|
var item = arr[i];
|
//显示
|
html += '<tr><td><span style=\"cursor:pointer;text-decoration:underline;\" onclick=\'getPlotPayer(' + JSON.stringify(item) + ')\'>' + item.layername + '</span></td><td><span style=\"cursor:pointer;\" onclick=\"deletePlotData(' + (nowPage * 3 - 3 + parseInt(i)) + ')\"><img style=\"width: 16px;\" src="images/maptoolbar/delete.png"/></span></td></tr>';
|
}
|
$('.pagetbody').html(html);
|
}
|
|
///二维是否加载完成
|
var isOnLoad = false;
|
window.onload = function () {
|
isOnLoad = true;
|
}
|
</script>
|
|
|
<script src="./js/ztreev3/js/jquery.ztree.all.min.js"></script>
|
<script src="./js/layui-v2.6.7/layui/layui.js"></script>
|
<script src="./js/jquery-ui.min.js"></script>
|
<!-- -->
|
<script src="./js/tanchaung.js"></script>
|
<script src="./js/index1.js"></script>
|
<!--
|
<script src="./js/Charts.js"></script> -->
|
<!-- <script src="./js/colorpicker/js/colorpicker.js"></script> -->
|
<script src="./js/layui-v2.6.7/layui/layui.js"></script>
|
<script src="./js/url.js"></script>
|
<script src="./js/Charts1.js"></script>
|
