ArcGIS JS 学习笔记4 实现地图联动
2016-08-18 17:20
411 查看
原文:ArcGIS JS 学习笔记4 实现地图联动
View Code
有图有真相:
![](https://images2015.cnblogs.com/blog/505874/201606/505874-20160620124450256-950249685.png)
![](https://images2015.cnblogs.com/blog/505874/201606/505874-20160620124453756-1417250073.png)
demo的布局就请不要吐槽了。。。求放过。。。。
欢迎转载 http://www.cnblogs.com/deliciousExtra/p/5600212.html
1.开篇
守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数。这次我的模仿目标是天地图的地图联动。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DExtra-HeatMap</title> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css"> <style> html, body, #map { padding: 0; margin: 0; height: 100%; } </style> <script> var dojoConfig = { parseOnLoad: true, packages: [{ name: 'custom', location: location.pathname.replace(/\/[^/]+$/, '') + '/custom'//从cdn加载自己定义的模块方法 }, { name: 'dextra', location: '/extra.arcgis.3.x/dist/'//从cdn加载自己定义的模块方法 }] }; console.log(location.pathname.replace(/\/[^/]+$/, '')); </script> <script src="https://js.arcgis.com/3.16/"></script> <script> require([ "dojo/_base/array", "dojo/on","dojo/dom", "esri/map", "esri/geometry/Point", "dextra/layers/GoogleVectorLayer", "dextra/layers/GoogleImageLayer", "dextra/layers/GoogleTerrienLayer", "dextra/modules/MapLinkager", "dojo/domReady!"], function (array,on,dom,Map, Point, GoogleVectorLayer, GoogleImageLayer,GoogleTerrienLayer,MapLinkager) { var map1 = new Map("map1", { center: [102.8, 25.1], zoom: 10, }); var googleVecLayer = new GoogleVectorLayer(); map1.addLayer(googleVecLayer); var map2 = new Map("map2", { center: [102.8, 25.1], zoom: 10, }); var googleimageLayer = new GoogleImageLayer(); map2.addLayer(googleimageLayer); var map3 = new Map("map3", { center: [102.8, 25.1], zoom: 10, }); var googleterrienLayer = new GoogleTerrienLayer(); map3.addLayer(googleterrienLayer); var mapLinker=new MapLinkager(); mapLinker.addMap(map1); mapLinker.addMap(map2); mapLinker.addMap(map3); on(dom.byId("btn1"),"click",function(evt){ mapLinker.removeMap(map1); }) on(dom.byId("btn2"),"click",function(evt){ mapLinker.removeMap(map2); }) on(dom.byId("btn3"),"click",function(evt){ mapLinker.removeMap(map3); }); on(dom.byId("btn4"),"click",function(evt){ mapLinker.addMap(map1); }); on(dom.byId("btn5"),"click",function(evt){ mapLinker.addMap(map2); }) on(dom.byId("btn6"),"click",function(evt){ mapLinker.addMap(map3); }) }); </script> </head> <body> <button id="btn1">Remove Map1</button> <button id="btn2">Remove Map2</button> <button id="btn3">Remove Map3</button> <button id="btn4">Add Map1</button> <button id="btn5">Add Map2</button> <button id="btn6">Add Map3</button> <div id="map1" style="width:49%;float:left"></div> <div id="map2" style="width:49%; float:right"></div> <div id="map3" style="width:49%; "></div> </body> </html>
View Code
有图有真相:
![](https://images2015.cnblogs.com/blog/505874/201606/505874-20160620124450256-950249685.png)
![](https://images2015.cnblogs.com/blog/505874/201606/505874-20160620124453756-1417250073.png)
demo的布局就请不要吐槽了。。。求放过。。。。
欢迎转载 http://www.cnblogs.com/deliciousExtra/p/5600212.html
相关文章推荐
- ArcGIS JS 学习笔记4 实现地图联动
- ArcGIS JS 学习笔记4 实现地图联动
- ArcGIS JS 学习笔记4 实现地图联动
- ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
- ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
- ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
- ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
- arcgis js 实现地图联动对比功能
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS for JavaScript实现地图联动
- 【JS】js学习笔记之用js实现定时器倒数跳转至指定网页或首页
- arcgis api for js之echarts开源js库实现地图统计图分析
- arcgis api for js之echarts开源js库实现地图统计图分析
- GIS地图学习笔记七之安装ArcGIS_Server、ArcGIS_Desktop和LicenseManager