ArcGIS Server 开发之鹰眼地图的实现
生活随笔
收集整理的這篇文章主要介紹了
ArcGIS Server 开发之鹰眼地图的实现
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
鷹眼簡(jiǎn)單點(diǎn)說就是地圖的聯(lián)動(dòng)，鷹眼的全稱是OverviewMap，在ERSI提供的API包中，在dijit中進(jìn)行類的調(diào)用。查了很多的資料，總結(jié)一下：
具體的代碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>鷹眼和比例尺</title> <!-- <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <script src="http://js.arcgis.com/3.7/"></script>--><!--<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.11/3.11/dijit/themes/tundra/tundra.css"/>--><link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.11/3.11/esri/css/esri.css" /><script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.11/3.11/init.js"></script><script src="dojo/jsapi_vsdoc12_v38.js"></script><style> html, body, #map {height: 100%;width: 100%;margin: 0;padding: 0;overflow-x: hidden; } #BasemapToggle {position: absolute;top: 20px;right: 20px;z-index: 50; } #HomeButton {position: absolute;top: 95px;left: 20px;z-index: 50; } </style><script>//引入需要的類 dojo.require("esri.map");dojo.require("esri.dijit.BasemapToggle");dojo.require("esri.dijit.HomeButton");dojo.require("esri.dijit.OverviewMap");dojo.require("esri.dijit.Scalebar");//定義全局變量var map;//準(zhǔn)備初始化 dojo.ready(init);//初始化方法function init() {//創(chuàng)建地圖 map = new esri.Map("map", {center: [121.48, 31.25],zoom: 8,basemap: "streets"});//衛(wèi)星圖切換 var toggle = new esri.dijit.BasemapToggle({map: map,basemap: "satellite"}, "BasemapToggle");toggle.startup();//HOME按鈕var home = new esri.dijit.HomeButton({map: map}, "HomeButton");home.startup();//比例尺var scalebar = new esri.dijit.Scalebar({map: map,attachTo: "bottom-right",width:10,// "dual" displays both miles and kilmometers// "english" is the default, which displays miles// use "metric" for kilometers scalebarUnit: "dual"});//鷹眼小地圖var overviewMap = new esri.dijit.OverviewMap({map: map,visible: true, // 初始化可見，默認(rèn)為false attachTo: "bottom-left", // 默認(rèn)右上角 width: 250, // 默認(rèn)值是地圖高度的 1/4th height: 150, // 默認(rèn)值是地圖高度的 1/4th opacity: 0.5, // 透明度 默認(rèn)0.5 maximizeButton: true, // 最大化,最小化按鈕，默認(rèn)false expandFactor: 2, //概覽地圖和總覽圖上顯示的程度矩形的大小之間的比例。默認(rèn)值是2，這意味著概覽地圖將至少是兩倍的大小的程度矩形。 color: "#000000" // 默認(rèn)顏色為#000000 });overviewMap.startup();}</script> </head> <body><div id="map"><div id="BasemapToggle"></div><div id="HomeButton"></div></div> </body> </html>運(yùn)行截圖：
?
轉(zhuǎn)載于:https://my.oschina.net/dongteng/blog/684435
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的ArcGIS Server 开发之鹰眼地图的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS使图片变灰
- 下一篇： nginx-tomcat负载均衡redi