Arcgis地图的简单应用

2017-01-13 19:20:15来源:CSDN作者:monster123321人点击

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>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台