2. 程式人生 > >ArcGIS API for js InfoWindow

ArcGIS API for js InfoWindow

阿新 • • 發佈：2019-01-23
led 示例 utf height rap charset padding 有關 ava

說明：有關該示例中怎麽引用部署在iis上的離線arcgis api請參考我前面的博文

1、運行效果

技術分享圖片

2、HTML代碼

<!DOCTYPE html>
<html>
  <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>Non graphic info window</title>
    
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/esri/css/esri.css" />
    <style>
      html, body, #map{
        height: 100%;
        margin: 0;
        padding: 0;
      }

        .esriPopup .titlePane
        
 
{
             background-color: rgba(64,64,64,0.8);
            
        }
        .esriPopup .contentPane
        {
             background-color: rgba(64,64,64,0.8);
             color: #FFFFFF;
        }
        .esriPopup .actionsPane
        {
          background-color: rgba(64,64,64,0.8)
 
;
        }
    </style>
    
    <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.3/jsapi/init.js"></script>
    <script>
        var map;
        require([
            "esri/map"
        
        ], function (
            Map
          ) {
            map = new esri.Map("map", {
                basemap: "satellite",
                center: [-116.96, 33.184],
                zoom: 7
            });

            map.on("load", function () {
                map.infoWindow.resize(250, 100);
            });

            map.on("click", addPoint);

            function addPoint(evt) {
                var latitude = evt.mapPoint.getLatitude();
                var longitude = evt.mapPoint.getLongitude();
                map.infoWindow.setTitle("Coordinates");
                map.infoWindow.setContent(
                    ‘<div style="background-color:lightblue;color:white;">‘ +
                  "lat/lon : " + latitude.toFixed(2) + ", " + longitude.toFixed(2) +
                  "<br>screen x/y : " + evt.screenPoint.x + ", " + evt.screenPoint.y+‘</div>‘
                );
                map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));
            }
        });
      
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

其中的代碼

   map = new esri.Map("map", {
                basemap: "satellite",
                center: [-116.96, 33.184],
                zoom: 7
            });
也可以替換為下面的形式：

map = new esri.Map("map", { center: [-116.96, 33.184], zoom: 4 });

MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer

("http://localhost/arcgis/rest/services/DZDT2012/MapServer");
map.addLayer(MyTiledMapServiceLayer);

ArcGIS API for js InfoWindow

相關推薦

ArcGIS API for js InfoWindow

led 示例 utf height rap charset padding 有關 ava 說明：有關該示例中怎麽引用部署在iis上的離線arcgis api請參考我前面的博文 1、運行效果 2、HTML代碼 <!DOCTYPE html> <

arcgis api for js入門開發系列十五臺風軌跡

demo 簡單 com span eat api alt 介紹 nbsp 上一篇實現了demo的地圖最近設施點路徑分析，本篇新增臺風軌跡，截圖如下： 下面簡單介紹相關知識點： 警戒線 警戒線坐標集合： var lineArr

arcgis api for js之echarts開源js庫實現地圖統計圖分析

不能 rgba data ron 創建 apc att load reat 前面寫過一篇關於arcgis api for js實現地圖統計圖的，具體見：http://www.cnblogs.com/giserhome/p/6727593.html 那是基於dojo組件來實

arcgis api for js入門開發系列二十一氣泡窗口信息動態配置模板

.get rim timeout 情況 不變 ali itl attr arcgis 前面地圖查詢篇實現圖層查詢query功能，但是查詢結果的氣泡窗口展示信息是在代碼寫死綁定圖層的字段來的，比如name屬性字段對應的值。但是這種實現方式很不靈活，對於圖層字段不變的情況下或者

arcgis api for js 之發布要素服務

ext http 客戶端 arc 連接數 mark publish bili 自己 1. 引言 如果我們要在網頁端實現要素的增刪改查操作，需要使用到要素服務(FeatureService)，本篇文章將介紹如何發布要素服務。 1.1 什麽是要素服務 在發布之前，我們先了解下要

arcgis api for js 之網絡分許服務發布

兩個 準備 conn 地圖 有一個 最短路 text 轉折點 and 1.引言 百度地圖上有這樣的功能：點擊兩個點，地圖上會顯示對兩個點的路徑規劃。這個功能能否利用 arcgis api 實現呢？答案是肯定的。不過在實現之前，我們需要將數據發布為網絡分析服務，接下來我將介紹

arcgis api for js - 圖上標繪及測量

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewp

arcgis api for js 3.25 離線部署

步驟： 1. 下載相應版本的api及sdk. 下載地址： https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript 2. 分別解壓。 3. 把arcgis_js_v325_api\arcgis_js_api\li

Arcgis API for JS——打印控件亂碼

打印 亂碼 bsp 進行 方法 col 圖文 png size 在通過Arcgis API for JS編寫打印控件進行地圖下載時，總發現地圖字體亂碼，如下圖: 解決方法: 在裝有ArcGIS Server，要調用服務的電腦或服務器上找到下圖文件夾

arcgis api for js入門開發系列二十二地圖模態層 openlayers入門開發系列之地圖模態層篇

前面實現一篇openlayers版本的地圖模態層效果：openlayers入門開發系列之地圖模態層篇 本文實現的是arcgis api 3.x版本的地圖模態層，效果圖如下： 實現的核心思路跟openlayers那裡是一致的，利用turf.js提供的difference相差函式，計算最大四至和裁剪區域的

Tomcat 本地配置Arcgis api for js 伺服器

版本說明 使用的是最新的V4.9版本Arcgis api for js. 解壓後目錄如下圖所示： Tomcat配置 1,拷貝arcgis_js_api到Tomcat的webapps目錄下 2, 把上述arcgis_js_api/library/4.9/dojo/dojs.js

ArcGIS API for js在webstorm上配置智慧提示

1：法一：工程內直接引入js檔案 缺點，每個工程都需要匯入js檔案   2：法二：webstorm配置 https://github.com/Esri/jsapi-resources 下載上圖所示ts檔案。webstorm中選擇：File-->Setting

arcgis api for js 屬性過濾顯示

var querysql=sqlTxt.val(); //圖層過濾 lyr.layer.setDefinitionExpression();   //屬性表顯示 var query = new esri.tasks.Query(); query.returnGeom

arcgis api for js：疊加.csv檔案，疊加成功，但是隻出現一個點

問題：疊加.csv檔案，疊加成功，但是隻出現一個點 原因：把欄位名為數字或者FID 解決方法： 方法一：data=data.replace('esriFieldTypeString', "esriFieldTypeOID")         &

arcgis api for js 設定圖層透明度

出於某些原因，需要知道之前設定的透明度值，發現可以通過向元素附加資料的方法來獲得資料，記錄一下 1.建立 objOpactiy = new esri.dijit.HorizontalSlider({             &nbs

ArcGIS API for JS實現要素的查詢與定位

1、實現多要素查詢與定位 a、線查詢與定位 線要素主要是那些到路線，在查詢下下拉選擇某種道路型別，便可以獲得該圖層的layerid，將該ID值傳遞給要查詢的URL，形成完整的查詢URL，通過Quer

arcgis api for js 3.26之Draw工具分析講解

1.僅僅對官網中Draw工具的一個例子進行分析 以上是實現的東西 2.全部程式碼 <!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" con

arcgis api for js 離線api 的部署

其實就是個離線包資源的載入問題 只是需要配置些路徑而已 首先明確一點這是一個跨域的傢伙 所以配置好nginx來進行訪問 1.首先下載arcgis -js -3.26-api版本 下載地址 api 和 sdk按需下載即可 下載後解壓完成後成如下結構

arcgis api for js之自定義範圍查詢

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定義範圍</title> <!-

關於arcgis api for js 聚合效果的進階

大多數能搜到的都是官方的版本，在此，我介紹一下關於聚合功能的進階。 主要是幾個配置。 對比官方的聚合效果： 這種是預設的效果 ，最底層的聚合是一個黑點，顯然運用到具體的專案中會不滿足一些需求 ，如果底層是圖片，然後根據資料的不同型別 ，顯示不同的圖片的話，就無法實現，鑑