未来

未来 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

未来 发布了文章 · 6月22日

2.arcGis底图切换

arcGis底图切换

html代码:

<div class="allMap-wrap" id="basemapchangeMap"></div>
                <div class="BasemapToggle-wrap">
                    <div>
                        <ul>
                            <li base-map-name="dark-gray"><img data-original="./static/imgs/baseMap/drak-gray.png" alt=""></li>
                            <li base-map-name="dark-gray-vector"><img data-original="./static/imgs/baseMap/drak-gray-vector.png" alt=""></li>
                            <li base-map-name="gray"><img data-original="./static/imgs/baseMap/gray.png" alt=""></li>
                            <li base-map-name="gray-vector"><img data-original="./static/imgs/baseMap/gray-vector.png" alt=""></li>
                            <li base-map-name="hybrid"><img data-original="./static/imgs/baseMap/hybrid.png" alt=""></li>
                            <li base-map-name="national-geographic"><img data-original="./static/imgs/baseMap/national-geographic.png" alt=""></li>
                            <li base-map-name="osm"><img data-original="./static/imgs/baseMap/osm.png" alt=""></li>
                            <li base-map-name="satellite"><img data-original="./static/imgs/baseMap/satellite.png" alt=""></li>
                            <li base-map-name="streets"><img data-original="./static/imgs/baseMap/streets.png" alt=""></li>
                            <li base-map-name="topo"><img data-original="./static/imgs/baseMap/topo.png" alt=""></li>
                        </ul>
                    </div>
                </div>

JS代码:

var map;
require([
    "esri/map",
    "esri/layers/ArcGISTiledMapServiceLayer"
],function(Map, ArcGISTiledMapServiceLayer){
    /*初始加载地图*/
    map = new Map("basemapchangeMap", {
        basemap: "satellite",
        center: [87.430157,43.899799],
        zoom: 10
    });
    $(".BasemapToggle-wrap>div>ul>li").click(function(){
        var toggleMap = $(this).attr("base-map-name");
        console.log(toggleMap);
        map.setBasemap(toggleMap);//该方法为主要方法
    });

    var layer = new ArcGISTiledMapServiceLayer("http://192.168.2.236:6080/arcgis/rest/services/JKQYXMapService/MapServer");
    map.addLayer(layer);
    var jwz=new ArcGISTiledMapServiceLayer('http://192.168.2.236:6080/arcgis/rest/services/jingwuzhan/MapServer');
    map.addLayer(jwz);
});
查看原文

赞 0 收藏 0 评论 0

未来 发布了文章 · 6月22日

地图引入

介绍:

因参与过有地图相关项目,所以研究了arcGis地图

下载:

因为arcgis的服务是在国外,国内是可以访问,但是访问的速度可能会慢一些,如果通过vpn访问,会快一下

arcGis地址(API):https://developers.arcgis.com/javascript/3/

arcGis下载地址(需要登陆注册):https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript

CDN引用:

<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<script data-original="https://js.arcgis.com/3.24/"></script>

离线包引用:

<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<script data-original="https://js.arcgis.com/3.24/"></script>

将下载包放到工程目录下,注意文件名尽量保持一致,否则会出现问题

需要将dojo文件及init文件进行配置,点击查看教程

html代码:

<div class="allMap-wrap" id="leafletMap"></div>

JS代码:

require(["esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/geometry/Point", 
"esri/SpatialReference",
"dojo/domReady!"],function(Map,ArcGISTiledMapServiceLayer,ArcGISDynamicMapServiceLayer) {

      var map = new Map("leafletMap", {
        center: [87.430157,43.899799],
        zoom: 10,
        maxZoom:17,
        basemap: "satellite",
        logo:false,
      });

      var jkq=new ArcGISTiledMapServiceLayer('http://192.168.2.236:6080/arcgis/rest/services/JKQYXMapService/MapServer');
      map.addLayer(jkq)
      // var jkq=new ArcGISDynamicMapServiceLayer('http://192.168.2.236:6080/arcgis/rest/services/JKQYXMapService/MapServer');
      // map.addLayer(jkq)
      var jwz=new ArcGISTiledMapServiceLayer('http://192.168.2.236:6080/arcgis/rest/services/jingwuzhan/MapServer');
      map.addLayer(jwz)
      console.log(map)
      console.log(map.spatialReference)
      console.log(map.height)
    });
查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 0 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-12-28
个人主页被 36 人浏览