由于 arcgis api 3.x for js 目前沒有 GeojsonLayer， arcgis api 4.x 最新版本目前是支援了的，并且 arcgis api 3.x 提供的 Popup預設隻可以彈出一個，某些情況下，使用者想加載彈出多個視窗，我一直看看能不能有什麼途徑，比如 arcgis api 3.x 拓展之類的，對其進行改造達到繪制 Geojson 并同時彈出多個 Popup 的目的。

前言

關于本篇功能實作用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 3.x for js：esri 官網 api，裡面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是線上例子：esri 官網線上例子，這個也是學習 arcgis api 3.x 的好素材。

最終實作效果圖：

arcgis api 3.x for js 地圖加載多個氣泡視窗展示（附源碼下載下傳）

實作思路

html 頁面以及引用 js 以及 css

<head>
<title>地圖展示多氣泡視窗例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<!-- ArcGIS API for JavaScript CSS-->
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<!-- PopExtendCss -->
<link href="./vendor/ncam/PopupExtended.css" rel="stylesheet" />
 
<style>
html, body, #mapDiv {
height: 100%;
width: 100%;
box-sizing: content-box;
}
.buttonRight{
position: absolute;
z-index: 999;
}
.hzLine{
border: none;
border-top: 1px solid #333333;
margin-top: 6px;
margin-bottom: 6px;
}
.popupTitle{
font-size: 18px;
}
.popupContent{
font-size: 15px;
}
.esriPopup.light .titleButton.close, .esriPopup.dark .titleButton.close {
margin-top: -5px;
}
.esriPopup.light .titleButton.maximize, .esriPopup.dark .titleButton.maximize {
display:none;
}
</style>
<!-- ArcGIS API for JavaScript library references -->
<script>
var dojoConfig = {
parseOnLoad: false,
async: true,
tlmSiblingOfDojo: false,
packages: [{
name: "ncam",
location: location.pathname.replace(/\/[^/]+$/, '') + "ncam"
}]
};
</script>
<!-- ArcGIS API for JavaScript library references -->
<script src="https://js.arcgis.com/3.28/"></script>
 
<!-- Terraformer reference -->
<script src="./vendor/terraformer/terraformer.min.js"></script>
<script src="./vendor/jquery.js"></script>
<script src="./vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"></script>
</head>
<body>
<div id="mapDiv"></div>
<button id="shanghaiPoint" class="btn btn-default buttonRight" style="top:20px;right:20px">餐飲店</button>
</body>
</html>

geojson 模拟資料

{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"Id": 0,
"name": "滿口香粥店",
"address": "(0411)82812888-3806",
"phone": "遼甯省大連市xx路"
},
"geometry": {
"type": "Point",
"coordinates": [122.96626809999999, 39.693737519999999]
}
}, {
"type": "Feature",
"properties": {
"Id": 1,
"name": "源惠居酒屋",
"address": "(0411)82812888-3806",
"phone": "遼甯省大連市xx路"
},
"geometry": { "type": "Point", "coordinates": [122.9597131, 39.698272490000001] }
}, {
"type": "Feature",
"properties": {
"Id": 2 ,
"name": "鳴記碳火烤全魚",
"address": "(0411)82812888-3806",
"phone": "遼甯省大連市xx路"
},
"geometry": { "type": "Point", "coordinates": [122.9597627, 39.699162139999999] }
}, {
"type": "Feature",
"properties": {
"Id": 3,
"name": "華陽酒店",
"address": "(0411)82812888-3806",
"phone": "遼甯省大連市xx路"
},
"geometry": { "type": "Point", "coordinates": [122.9597626, 39.699911970000002]}
}, {
"type": "Feature",
"properties": {
"Id": 4,
"name": "翔宇餡餅粥吧莊河店",
"address": "(0411)82812888-3806",
"phone": "遼甯省大連市xx路"
},
"geometry": { "type": "Point", "coordinates": [122.9576213, 39.698847499999999] }
}, {
"type": "Feature",
"properties": {
"Id": 5,
"name": "鑫來閣川菜館",
"address": "(0411)82812888-3806",
"phone": "遼甯省大連市xx路"
},
"geometry": { "type": "Point", "coordinates": [122.96235280000001, 39.698096040000003] }
}]
}

核心 geojsonlayer.js 并且內建 Popupextended 拓展代碼

自定義一個類，繼承 GraphicsLayer：

define([
"dojo/_base/declare",
"esri/dijit/PopupTemplate",
"./vendor/ncam/PopupExtended.js",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/InfoTemplate",
"esri/graphicsUtils",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/SimpleRenderer",
"esri/SpatialReference",
"esri/geometry/webMercatorUtils",
"esri/request",
"esri/config",
"dojo/_base/url",
"dojo/_base/lang"
], function (declare,PopupTemplate, PopupExtended, Graphic, GraphicsLayer, InfoTemplate, graphicsUtils, Color, SimpleMarkerSymbol,
SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, SpatialReference, webMercatorUtils, esriRequest, esriConfig, Url, lang
) {
return declare([GraphicsLayer], {
});
});

構造函數自定義 Popup 視窗拓展進來

constructor: function (options) {
if (options.infoTemplate !== false) {
//create a PopupTemplate
var template = new PopupTemplate({
title: "{name}",
//fieldInfos: [
// { fieldName: "name", visible: true },
// { fieldName: "address", visible: true},
// { fieldName: "phone", visible: true}
//],
extended: {
//actions: [
// { text: " IconText", className: "iconText", title: "Custom action with an icon and Text", click: function (feature) { alert("Icon Text clicked on " + "id: " + feature.attributes.id + " " + feature.attributes.name); } },
// { text: "", className: "iconOnly", title: "Custom action only using an icon", click: function (feature) { alert("Icon action clicked on " + "id: " + feature.attributes.id + " " + feature.attributes.name); } }
//],
//uses a pretty bad custom theme defined in PopupExtended.css.
scaleSelected: 1.6
}
});
……

完整demo源碼見小專欄文章尾部：GIS之家小專欄

文章尾部提供源代碼下載下傳，對本專欄感興趣的話，可以關注一波

GIS之家作品店鋪：GIS之家作品店鋪

GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢

arcgis api 3.x for js 地圖加載多個氣泡視窗展示（附源碼下載下傳）

前言

繼續閱讀

openlayers 6【二】Map地圖詳解，初始化一個map地圖官方文檔：https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html

openlayer4入門系列一(地圖描繪經緯度點)

WebGIS第六課：地圖點選事件的引入和點标記

Cesium：繪圖工具v1.0

PostGIS開發手冊

Cesium-Entity：Polyline線條繪制與編輯效果圖示例代碼

openlayers螢火圖實作

OpenLayers 3 之添加地圖網格前言示例使用實作總結

OpenLayers 3 之繪制圖形（ol.interaction.Draw）原了解析

OpenLayers 3 之使用 AJAX 通信0. 摘要1. 什麼是AJAX ，什麼作用2. 添加查詢元件3. 整合 AJAX 和查詢元件4. 總結5. 附錄代碼下載下傳

OpenLayers 3 之事件體系詳解

Cesium面積測量之思路解析加源碼

OpenLayers通路WMS服務并擷取要素的屬性OpenLayers 跨域通路WMS服務并擷取要素的屬性

arcgis for js動态加載圖層方法

天地圖調用服務

arcgis api for js 地圖分屏實時關聯