當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
ArcGIS API For JavaScript - 地图常用函数方法
生活随笔
收集整理的這篇文章主要介紹了
ArcGIS API For JavaScript - 地图常用函数方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
常用函數方法
- 一. 地圖放縮小按鈕
- 二. 底圖樣式
- 三. 創建加載ArcGISDynamicMapServiceLayer圖層、FeatureLayer圖層
- 四. 跳轉地圖中心點至指定坐標位置
- 五. 縮放地圖至指定等級
- 六. 清空加載至地圖的要素類
- 七. 加載、清除指定圖層
- 八. 創建及使用客戶端圖層（GraphicsLayer）
- 九. Demo實例
一. 地圖放縮小按鈕
二. 底圖樣式
更多底圖請進入arcgis api for javascrilpt官網查看：https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#
三. 創建加載ArcGISDynamicMapServiceLayer圖層、FeatureLayer圖層
四. 跳轉地圖中心點至指定坐標位置
map.centerAt([118.675403, 32.067296])五. 縮放地圖至指定等級
map.setZoom(18)六. 清空加載至地圖的要素類
map.graphics.clear();七. 加載、清除指定圖層
//清除serverLayer圖層 map.removeLayer(serverLayer); //加載stationLayer圖層 map.addLayer(stationLayer);八. 創建及使用客戶端圖層（GraphicsLayer）
//創建客戶端圖層 var graphicsLayer = new esri.layers.GraphicsLayer(); //將客戶端圖層添加到地圖中 map.addLayer(graphicsLayer); //將點要素放入客戶端圖層 graphicsLayer.add(marker); //清空graphicsLayer圖層 graphicsLayer.clear();九. Demo實例
@{Layout = null; }<!DOCTYPE html><html> <head><meta name="viewport" content="width=device-width" /><title>Index</title>@*加載高德地圖*@<script type="text/javascript">var dojoConfig = {async: true,parseOnLoad: true,packages: [{name: "js",location: location.pathname.replace(/\/[^/]*$/, '') + '/js'}]};</script><script src="~/Scripts/jquery-3.3.1.js"></script><link href="~/Content/esri.css" rel="stylesheet" /><link href="~/Content/tundra.css" rel="stylesheet" /><script src="~/Scripts/init.js"></script><style>* {margin: 0;padding: 0;}#map {width: 100%;height: 100%;position: absolute}.list {width: 12%;background-color: rgba(22, 59, 90, 0.8);color: #fff;position: absolute;}input, select, button {width: 90%;margin: 10px 5%;border-radius: 5px;height: 26px;}</style><script>var urlMap = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer'var stationUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/0'var lineUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/1'var map;var serverLayer;//總圖層var stationLayer;//站點圖層var lineLayer;//線路圖層require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/geometry/Circle", "esri/layers/GraphicsLayer","dojo/domReady!"],function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, FeatureLayer, Circle,GraphicsLayer,) {/* code goes here */map = new Map("map", {center: [118.724, 32.186],zoom: 12,logo: false,slider: false,//放大、縮小按鈕//basemap:"streets-vector",//設置底圖樣式});//創建ArcGISDynamicMapServiceLayer圖層（opacity：圖層透明度）serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });//創建FeatureLayer圖層，ArcGISDynamicMapServiceLayer子圖層stationLayer = new FeatureLayer(stationUrl, { "opacity": 0.6 });lineLayer = new FeatureLayer(lineUrl, { "opacity": 0.6 });var baselayer = new gaodeLayer();//默認加載矢量 new gaodeLayer({layertype:"road"});也可以 //加載高德地圖map.addLayer(baselayer);//添加高德地圖到map容器//加載ArcGISDynamicMapServiceLayer圖層或FeatureLayer圖層至地圖map.addLayer(serverLayer);});function center() {map.centerAt([118.675403, 32.067296])}function zoom() {map.setZoom(18)}function clear() {map.graphics.clear()}function clearLayer() {map.removeLayer(serverLayer);}function addLayer() {map.addLayer(stationLayer);}</script> </head> <body><div id="map"></div><div class="list"><button onclick="center()">跳轉中心點</button><button onclick="zoom()">縮放地圖</button><button onclick="clear()">清空圖層</button><button onclick="clearLayer()">清除指定圖層</button><button onclick="addLayer()">加載指定圖層</button></div> </body> </html>總結
以上是生活随笔為你收集整理的ArcGIS API For JavaScript - 地图常用函数方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： did双重差分法_Stata中双重差分操
- 下一篇： java restful接口测试_详解S