Arcgis地图的简单应用
效果图：
代码如下：
<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>Simple Map</title>
<link rel="stylesheet" type="text/css" href="http://192.168.1.222:8888/arcgis_js_api_318/library/3.18/3.18/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" href="http://192.168.1.222:8888/arcgis_js_api_318/library/3.18/3.18/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" type="text/css" href="http://192.168.1.222:8888/arcgis_js_api_318/library/3.18/3.18/esri/css/esri.css" />
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
#BasemapToggle {
position: absolute;
top: 40px;
right: 25px;
z-index: 50;
}
#info {
top: 40px;
color: #444;
overflow: hidden;
font-family: arial;
right: 110px;
padding: 5px;
position: absolute;
z-index: 40;
}
#pointInfo {
bottom: 5px;
right: 20px;
margin: 5px;
padding: 2px 5px;
position: absolute;
z-index: 40;
border-radius: 4px;
background-color: #fff;
}
button {
display: block;
height: 36px;
margin-left: 10px;
float: left;
background: rgb(201,233,255);
}
#ui-esri-dijit-geocoder {
top: 20px;
left: 70px;
position: absolute;
z-index: 3;
}
</style>
<script type="text/javascript" src="http://192.168.1.222:8888/arcgis_js_api_318/library/3.18/3.18/init.js"></script>
<script src="camerainfo.js"></script>
<script>
//声明map
var map,graphicLayer;
var geometryService;
//标记数组
var allMarkers = [];
require(["esri/map",
"esri/dijit/BasemapToggle",
"esri/toolbars/draw",
"esri/dijit/Geocoder",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol",
"esri/symbols/CartographicLineSymbol",
"esri/InfoTemplate",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/SpatialReference",
"esri/tasks/LengthsParameters",
"esri/tasks/GeometryService",
"esri/Color", "dojo/dom", "dojo/on",
"dojo/domReady!"],
function(Map,
BasemapToggle,
Draw,Geocoder,
SimpleMarkerSymbol,
PictureMarkerSymbol,
SimpleLineSymbol,
PictureFillSymbol,
CartographicLineSymbol,
InfoTemplate,
Graphic,
GraphicsLayer,
Point,
SpatialReference,
LengthsParameters,
GeometryService,
Color,
dom,
on) {
//测量Service arcgis（官网）外网 GeometryService服务地址
geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
//new map对象
map = new Map("map", {
basemap: "osm",
center: [120.15, 30.26],
nav:true,//8个pan 箭头
slider:false,//左上的缩放 +/-;
logo:false,//右下的esri logo
showAttribution:false,//右下的gisNeu (logo左侧)
zoom: 10
});
//地图缩放响应事件: zoom大于9 显示camera 否则隐藏
map.on("zoom-end", function(e) {
var zoom = map.getZoom();
//console.info(map.graphics);
var cameraLayer = map.getLayer("cameralayer");
//console.info(cameraLayer.graphics);
if(zoom<9){ //zoom小于8时隐藏camare的显示
cameraLayer.setVisibility(false);
}else{
cameraLayer.setVisibility(true);
}
});
var geocoder = new Geocoder({
arcgisGeocoder: {
placeholder: "Search "
},
map: map
}, "ui-esri-dijit-geocoder");
geocoder.startup();
//鼠标样式
/* map.setMapCursor("help"); //
map.setMapCursor("default");//
map.setMapCursor("pointer");//
map.setMapCursor("wait");//
map.setMapCursor("progress");//
map.setMapCursor("cell");// 粗十字
map.setMapCursor("crosshair");// 细十字
map.setMapCursor("text");//文本I
map.setMapCursor("vertical-text");//放倒的I */
//创建图层
graphicLayer = new GraphicsLayer({"id":"cameralayer"});
//把图层添加到地图上
map.addLayer(graphicLayer);
map.on("load", initToolbar);
markerSymbol.setColor(new Color("#00FFFF"));
//标注图片
var p_symbol = new PictureMarkerSymbol({
"url":"qiangji.png",
"height":32,
"width":32
});
p_symbol.setOffset(18, 12);
var p_symbol1 = new PictureMarkerSymbol({
"url":"qiuji.png",
"height":32,
"width":32
});
var lineSymbol = new CartographicLineSymbol(
CartographicLineSymbol.STYLE_SOLID,
new Color([0,0,0]), 2,
CartographicLineSymbol.CAP_ROUND,
CartographicLineSymbol.JOIN_ROUND, 5
);
var fillSymbol = new PictureFillSymbol(
"qiangji.png",
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color('#000'),
1
), 42, 42);
function initToolbar() {
tb = new Draw(map);
tb.on("draw-end", addGraphic);
on(dom.byId("info"), "click", function(evt) {
$("#measure").css("display","none");//隐藏测距显示内容
if ( evt.target.id === "info" ) {
return;
}
//删除已有的图形
map.graphics.clear();
map.setMapCursor("crosshair");//鼠标形状为十字
//激活画图工具
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
});
}
//画图
function addGraphic(evt) {
tb.deactivate();
map.enableMapNavigation();
var symbol;
if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
symbol = p_symbol;//markerSymbol;
} else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
symbol = lineSymbol;//lineSymbol;
map.graphics.add(new Graphic(evt.geometry, symbol));
measuregeometry = evt.geometry;
MeasureGeometry(evt.geometry);//调用测量方法
map.setMapCursor("default");//
}
else {
symbol = lineSymbol;//fillSymbol;
map.graphics.add(new Graphic(evt.geometry, symbol));
map.setMapCursor("default");
showResults(evt);//播放框选点位
}
}
//播放框选出来的点位监控
function showResults(evt){
var graphics = map.getLayer("cameralayer").graphics;
var graphicCamera = [];
for(var i= 0, total=graphics.length;i<total;i++){
if(evt.geometry.contains(graphics[i].geometry)){
graphicCamera.push(graphics[i].attributes.indexCode);
}
}
if(graphicCamera.length > 0){
$('#videoDialog').dialog({
autoOpen : false,
modal : true,
maximizable:true,
width : 600,
height : 500,
draggable : true,
onBeforeOpen:function(){
for(var i = 0;i<graphicCamera.length;i++){
if(graphicCamera.length == 1){
ocx.setWindowsLayout(1);//设置播放插件窗口
}else if(graphicCamera.length < 5 && graphicCamera.length > 1){
ocx.setWindowsLayout(2);
}else if(graphicCamera.length < 10 && graphicCamera.length > 4){
ocx.setWindowsLayout(3);
}else{
ocx.setWindowsLayout(0);
}
playCameraVideo(graphicCamera[i]);
}
},
onMaximize : function(){
},
onBeforeClose : function(){
ocx.setSelectWindow(0);
stopAll();
map.graphics.clear();
map.setMapCursor("default");
}
});
}
}
function launchFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
//切换地图模式
var toggle = new BasemapToggle({
map: map,
basemap: "satellite"
}, "BasemapToggle");
toggle.startup();
//添加标注
addMarker(120.15, 30.26);
//鼠标移动 显示坐标
dojo.connect(map, "onMouseMove", showCoordinates);
map.on("load", function() {//图形鼠标点击响应事件
//map.getLayer("cameralayer") 获取放置camera的graphicLayer
map.getLayer("cameralayer").on("dbl-click",function(e){
var cameraInfo = e.graphic.attributes;
e.stopPropagation();
openDialogVideo(cameraInfo.indexCode);
});
});
function showCoordinates(evt) {
var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint);
dojo.byId("pointInfo").innerHTML = mp.x.toFixed(5) + ", " + mp.y.toFixed(5);
}
});
//打开dialog并播放视频
function openDialogVideo(indexCode){
var videoDialog = $('#videoDialog').dialog({
autoOpen : false,
modal : true,
maximizable:true,
width : 600,
height : 500,
draggable : true,
onBeforeOpen:function(){
ocx.setWindowsLayout(1);
playCameraVideo(indexCode);
},
onMaximize : function(){
},
onBeforeClose : function(){
stopAll();
}
});
}
//打开摄像头视频流
function playCameraVideo(indexcode){
//ocx.setWindowsLayout(WindowsLayout);
$.ajax({
url : "../../../video/ws/getStream",
type : "post",
data : {
indexCode : indexcode
},
dataType : "text",
success : function(xml) {
var winindex = ocx.getSelectWindow();
if(ocx.startPreview(winindex, xml)==0){
if(ocx.setSelectWindow(winindex+1)==-1){
ocx.setSelectWindow(0);
}
}
indexcodes[winindex] = indexcode;
}
});
}
//设置对中点
function setMapCenter(xx, yy , level) {
var point = new esri.geometry.Point(xx, yy, map.spatialReference);
map.centerAndZoom(point, level);
}
//获取点位信息,同时标注在页面中
function getPointInfo(){
$.post(path+'/arcgis/cameraInfo/getCamera',{"operaId":"ssjk"},function(json){
var result = eval("("+ json +")");
var cameraInfos = result.rows;
for(var i= 0;i<cameraInfos.length;i++){
//确定点位坐标
var pt = new esri.geometry.geographicToWebMercator(new esri.geometry.Point({
"x": cameraInfos[i].longitude,
"y": cameraInfos[i].latitude,
"spatialReference": { "wkid": 102113 }
}));
//确定camera类型
var cameratype = "qiangji.png";//枪机
if(cameraInfos[i].cameraType == "1"){
cameratype = "qiuji.png";//球机
}
//设置标注显示的图标
var symbolP = new esri.symbol.PictureMarkerSymbol(cameratype, 32, 32);
symbolP.setOffset(16, 16);
var attr = cameraInfos[i];
var content = "<b>名称</b>：" +cameraInfos[i].name
+ "<br><b>"+ channelNo +"</b>：" + cameraInfos[i].channelNo
+ "<br><br><a href='#' onclick='openDialogVideo(\""+ cameraInfos[i].indexCode +"\")'>播放</a>";
var infoTemplate = new esri.InfoTemplate("摄像头信息", content);
var graphic = new esri.Graphic(pt,symbolP);//,attr,infoTemplate
graphic.setAttributes(attr);
graphic.setInfoTemplate(infoTemplate);
graphicLayer.add(graphic);
}
});
}
//添加标注方法
function addMarker(xx, yy) {
getPointInfo();
//设置标注的经纬度
//var pt = new esri.geometry.Point(xx, yy, map.spatialReference);
//方法二
var pt = new esri.geometry.geographicToWebMercator(new esri.geometry.Point({
"x": xx,
"y": yy,
"spatialReference": { "wkid": 102113 }
}));
//设置标注显示的图标
var symbolP = new esri.symbol.PictureMarkerSymbol("qiangji.png", 32, 32);
symbolP.setOffset(16, 16);
var symbolP2 = new esri.symbol.PictureMarkerSymbol("qiuji.png", 32, 32);
symbolP.setOffset(0, 16);
//要在模版中显示的参数
var attr = {"add":"杭州市","status":"在线","attributes":{"indexCode":"001073"}};
//创建模版
var infoTemplate = new esri.InfoTemplate("标题", "地址: ${add} <br/> 状态: ${status}");
//创建图像
var graphic = new esri.Graphic(pt,symbolP,attr,infoTemplate);
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'center'">
<div id="info" style="display: block;">
<button id="Polyline">测距</button>
<button id="Extent">框选</button>
</div>
<div id="measure" style="display: none;">
<div id="result" style="float: left;" ></div>
<div id="infoclose" style="float: right;"><img alt="关闭" width="12" height="12" src="close.png"></div>
</div>
<div id="pointInfo"></div>
<div id="map">
<div id="BasemapToggle"></div>
</div>
<div style="display: none;">
<div id="videoDialog" class="dialog" title= "视频播放" >
<div class="win_container" data-index="1" id="preview_1" style="width: 100%; height: 100%;" name="ocx_1">
</div>
</div>
</div>
<script type="text/javascript" src="realtimeplay.js"></script>
</div>
</body>
</html>
912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
