首页 » 技术分享 » arcgis3天地图

arcgis3天地图

 
var map
require(["esri/map", 
        "esri/layers/ArcGISTiledMapServiceLayer", 
        "esri/geometry/Point",
        "esri/SpatialReference",        
        "esri/symbols/PictureMarkerSymbol",
        "esri/graphic",
        "esri/layers/GraphicsLayer",
        "esri/symbols/TextSymbol",
        "esri/symbols/Font",
        "esri/dijit/Popup",
        "esri/dijit/PopupTemplate", 
        "esri/InfoTemplate",
        "js/geojsonlayer","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","esri/Color","esri/renderers/SimpleRenderer", 
         "dojo/dom-class", "dojo/dom-construct", "dojo/on",
        "dojo/domReady!"
        ],

        function(Map, ArcGISTiledMapServiceLayer, Point, SpatialReference,PictureMarkerSymbol,Graphic,GraphicsLayer,TextSymbol,Font,Popup,PopupTemplate,InfoTemplate,GeoJsonLayer,SimpleFillSymbol,SimpleLineSymbol, Color,SimpleRenderer, domClass, domConstruct, on,) {
          //点击标签
          var popup = new Popup({
            offsetX: 10,
            offsetY: 10,
            zoomFactor: 2
          }, domConstruct.create("div"));
           domClass.add(popup);
           //非84坐标,必须设置空间参考
           map = new Map("map", {
            //basemap:"streets",
            center: new Point(119.742281,31.77234, new SpatialReference({ wkid: 4490 })),
            zoom:18,
            infoWindow: popup
          });
           //ArcGISTiledMapServiceLayer加载天地图效果最好
          var Dynamiclayer0 = new ArcGISTiledMapServiceLayer("http://58.216.48.11:6080/arcgis/rest/services/CZ_Vector/MapServer");
         
          map.addLayer(Dynamiclayer0);
         
          //arcgis一般以服务形式加载矢量,不可直接加载geojson,这里需要geojsonlayer.js,需要在html中设置js文件夹,然后require调用,通过geojsonlayer函数渲染,
          //GeoJsonLayer和GraphicsLayer类似,可以设置symbol,可以进行渲染


          //设置线要素1形状和颜色、宽度
          var sls0 = new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASH,
            new Color([255,0,0]),
            1
          );
          //SimpleRenderer方式渲染线要素1
          var renderer0 = new SimpleRenderer(sls0);
          var sls1 = new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASH,
            new Color([65,105,225]),
            1
          );
          var renderer1 = new SimpleRenderer(sls1);
          var sls2 = new SimpleFillSymbol(
              SimpleFillSymbol.STYLE_SOLID,
              new Color([65,105,225]),
              
            );
          var renderer2 = new SimpleRenderer(sls2);
          //添加矢量线要素
          var yc = new GeoJsonLayer({
            url: "yc.geojson"
          });
          //设置其渲染器
          yc.setRenderer(renderer0)
          //添加到图层
          map.addLayer(yc);    
          var school = new GeoJsonLayer({
            url:'xuexiao.geojson'
          })
          school.setRenderer(renderer1)
         
         
          map.addLayer(school);
          
          $("#map0").click(function(){
            $("#map").show();
            $("#cesiumContainer").hide();
             $(".map1").show();
            $(".map2").hide();
            $(".sat2").show();
            $(".sat1").hide();
            $(".3dmap1").hide();
            $(".3dmap2").show();
            Dynamiclayer0.show();
            Dynamiclayer2.hide();
          })
          $("#sat").click(function(){
            $("#map").show();
          $("#cesiumContainer").hide();
             $(".map1").hide();
            $(".map2").show();
            $(".sat2").hide();
            $(".sat1").show();
            $(".3dmap1").hide();
            $(".3dmap2").show();
             Dynamiclayer0.hide();
            Dynamiclayer2.show();
           
          })
          //h5定位
          $("#pos").click(function(){
              if (navigator.geolocation) {
                  navigator.geolocation.getCurrentPosition(
                      function (position) {
                          latitude = position.coords.latitude; //获取纬度
                          longitude = position.coords.longitude; //获取经度
                          var point = new Point(longitude,latitude, new SpatialReference({ wkid: 4490 }))
                          map.centerAt(point)
                          var pictureMarkerSymbol = new PictureMarkerSymbol('./image1/career.png', 51, 51);
                          var gl = new GraphicsLayer({ id: "circ" });
                          var icon = new Graphic(points,pictureMarkerSymbol)
                          gl.add(icon) 
                          map.addLayer(gl);
                      });
              } else {
              alert("不支持定位功能");
              }
        })
     var sr  = new SpatialReference({ wkid: 4490 })
          var font = new Font("15pt");
          font.setFamily("sans-serif")
          //设置图片标签格式
          var pictureMarkerSymbol = new PictureMarkerSymbol('./image1/career.png', 51, 51);
          var gl = new GraphicsLayer({ id: "circles" });
          gl.hide()
          function ziyuan(x,y,name,info){  //此函数用于设置点击标签,以及点击弹出的窗体内容
            var points = new Point(x,y,sr)
            var textSym = new TextSymbol(name).setOffset(3,25);
            textSym.setFont(font)
            var infoTemplate = new InfoTemplate(name,info);

            var icon = new Graphic(points,pictureMarkerSymbol);
            icon.setInfoTemplate(infoTemplate);
            var text = new Graphic(points,textSym);
            
            gl.add(icon)
            gl.add(text)
            map.addLayer(gl);

          }
          var z0=ziyuan(119.73955856951238,31.77328947914064,"常州交通技师学院","<p align='left'>地址:常州钟楼区殷村路5号(殷村职教园内)</p>" +
  "<p align='left'>学院是一所融技师、高级工、中级工等技能教育和本科、大专等高等学历教育于一体的全日制公办职业学校。学院是“国家级重点技工学校”和“交通部规范化学校”,先后荣获“全国汽车职教示范基地”、“江苏省文明单位”、“江苏省高技能人才摇篮奖”等荣誉。</p>")
         
      $("#big").click(function () {
            map.setZoom(map.getZoom()+1)  //zoom+1
      });
      $("#small").click(function () {
           map.setZoom(map.getZoom()-1)
      })
      $("#edu").click(function(){
        if(gl.visible){
          gl.hide()
        }else{
          gl.show();
          var point = new Point(119.74024,31.77461, new SpatialReference({ wkid: 4490 }))  
          map.centerAt(point)//二维中设置视野移动
        }
     })
      })

 

转载自原文链接, 如需删除请联系管理员。

原文链接:arcgis3天地图,转载请注明来源!

0