arcgis api for js学习-底图切换BasemapToggle

底图切换BasemapToggle

使用arcgis api提供的小部件实现底图切换
使用步骤:1.创建小部件 2.启用小部件

示例代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basemap Toggletitle>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js">script>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/>
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js">script>
    <style>
        html, body, #map {
      
            padding:0;
            margin:0;
            height:100%;
        }
        #basemapToggle {
      
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 50;
        }
        .BasemapToggle .basemapTitle {
      
            color: red;
        }
    style>
head>
<body>
<div id="map" class="map">
    <div id="basemapToggle">div>
div>
<div class="test">testdiv>
<script>
    var map;
    require(["esri/map","esri/dijit/BasemapToggle", "dojo/on", "dojo/query",
        "dojo/domReady!"], function (Map, BasemapToggle,on, query) {
      
        map = new Map("map",{
      
            center: [104.07, 30.65],//经纬度
            zoom: 12,//初始放大倍数
            basemap: "topo"
        });
        //创建一个地图切换的小部件
        var toggle = new BasemapToggle({
      
            map: map,
            basemap: "satellite",
            title: "sss",
            visible: true,
            // theme: "BasemapToggle"
        }, "basemapToggle");
        toggle.startup();
        on(map, "click", function (e) {
      
            console.log(e.mapPoint.getLatitude());
            console.log(e.mapPoint.getLongitude());
        });
        /*
        这里遗留的问题:
        1.如何修改图片下面的文字内容
        2.如何修改成自己的地图
         */

        // console.log(query(".basemapImageContainer"));
        // query(".basemapTitle").innerText = "地图";
        // var ele = document.getElementById("basemapToggle");

    });
script>
body>
html>

遗留的问题

  1. 如何修改图片下面的文字内容
  2. 如何修改成自己的地图

更新遗留的问题:

如果想要修改底图可以使用"esri/basemaps"来自己定义一个basemap继承在esriBasemaps下面作为它的属性。例如(这我直接使用了esri的地图服务和图片,修改了一个标题,在使用BasemapToggle的时候就可以添加我们自己的底图了)

esriBasemaps.mybasemap = {
     
          baseMapLayers: [{
     url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"}
          ],
          thumbnailUrl: "https://js.arcgis.com/3.15/esri/images/basemap/satellite.jpg",
          title: "我的影像图标题"
      };

定义了自己的底图之后,将上面的全部代码中的创建BasemapToggle小部件的代码中的basemap改成我们自己的就行了,如下:

//创建BasemapToggle小部件切换底图
        var toggle = new BasemapToggle({
     
            map: map,
            basemap: "mybasemap",
            // basemaps: {
     
            //     streets:{
     
            //         title:"Streets",
            //         thumbnailUrl:"https://js.arcgis.com/3.15/esri/images/basemap/streets.jpg"
            //     },
            //     satellite:{
     
            //         title:"sss",
            //         thumbnailUrl:"https://js.arcgis.com/3.15/esri/images/basemap/satellite.jpg"
            //     }
            // },
            visible: true,
            // theme: "BasemapToggle"
        }, "basemapToggle");

这里又遗留一个问题:参数中的basemaps的使用暂未成功。

你可能感兴趣的:(arcgis,for,js,3.x学习笔记,arcgisJS)