WebGIS 地图示例源码下载

基本信息

源码名称：WebGIS 地图示例源码下载

源码大小：5.27KB

文件格式：.zip

开发语言：js

更新时间：2016-12-19

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <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>esri Deom</title>
            <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css"/>
        <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css"/>
		<style>
		
            html, body, #map {
                height: 100%;
                width: 100%;
            }

            body {
                background-color: #fff;
                overflow: hidden;
            }

            #BasemapToggle {
                position: absolute;
                right: 20px;
                top: 20px;
                z-index: 50;
            }

            #HomeButton {
                left: 25px;
                position: absolute;
                top: 93px;
                z-index: 50;
            }

            #LocateButton {
                left: 25px;
                position: absolute;
                top: 130px;
                z-index: 50;
            }
		</style>
        <script src="https://js.arcgis.com/3.16/init.js"></script>
        <script>
            var map;
            var featureLayer;
            //引入基础类包，具体看官方API
            require([
                 "esri/basemaps", "esri/map", "esri/dijit/Scalebar",
                "esri/layers/ArcGISTiledMapServiceLayer",
                "esri/dijit/HomeButton", "esri/dijit/LocateButton", "esri/dijit/BasemapToggle", "esri/dijit/OverviewMap", "dojo/domReady"
            ], function (esriBasemaps, Map, Scalebar, ArcGISTiledMapServiceLayer,
                HomeButton, LocateButton, BasemapToggle, OverviewMap) {
                esriBasemaps.delorme = {
                    baseMapLayers: [
                        //中国矢量地图服务
                        { url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer" }
                    ],
                    //缩略图
                    thumbnailUrl: "Imgs/shiliang.jpg",
                    title: "矢量图"
                };
                //初始化地图
                map = new Map("map", {
                    basemap: "delorme",
                    center: [114.93896484, 25.85428033],
                    zoom: 15
                });
                //卫星底图
                var toggle = new BasemapToggle({
                    map: map,
                    basemap: "satellite"
                }, "BasemapToggle");
                toggle.startup();
                //返回主视图
                var home = new HomeButton({
                    map: map
                }, "HomeButton");
                home.startup();
                //定位
                geoLocate = new LocateButton({
                    map: map
                }, "LocateButton");
                geoLocate.startup();
                //鹰眼
                var overviewMapDijit = new OverviewMap({
                    map: map,
                    expandFactor: 2,
                    attachTo: "bottom-left",
                    visible: true
                });
                overviewMapDijit.startup();
                //比例尺
                var scalebar = new Scalebar({ map: map, attachTo: "bottom-left" });
            });

		</script>

    </head>
    <body class="claro">
        <div id="map"  data-dojo-type="dijit/layout/ContentPane" 
             data-dojo-props="region:'center'" 
             style="padding:0">
          <!--  返回初始化地图按钮-->
            <div id="HomeButton"></div>
              <!--  Html5定位按钮-->
            <div id="LocateButton"></div>
            <!--  切换底图-->
            <div id="BasemapToggle"></div>
        </div>
    </body>
</html>