arcgis api 3.x for js 地图加载多个气泡窗口展示（附源码下载）
前言
关于本篇功能实现用到的 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 目前没有 GeojsonLayer， arcgis api 4.x 最新版本目前是支持了的，并且 arcgis api 3.x 提供的 Popup默认只可以弹出一个，某些情况下，用户想加载弹出多个窗口，我一直看看能不能有什么途径，比如 arcgis api 3.x 拓展之类的，对其进行改造达到绘制 Geojson 并同时弹出多个 Popup 的目的。
最终实现效果图：
实现思路
- 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之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波
arcgis api 3.x for js 地图加载多个气泡窗口展示（附源码下载）的更多相关文章
- arcgis api 4.x for js 地图加载多个气泡窗口展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- arcgis api 4.x for js 结合 react 入门开发系列初探篇（附源码下载）
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
- arcgis api 3.x for js 热力图优化篇-不依赖地图服务（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十三地图最短路径分析（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十叠加 SHP 图层（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- arcgis api 4.x for js 结合 react 入门开发系列"esri-loader"篇（附源码下载）
基于上篇的介绍,虽然有比较esri-loader.@arcgis/webpack-plugin,还是觉得有必要需要讲述一下“esri-loader”的开发模式,待大家体验后也会有更直观的感受.本篇文章 ...
- arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列二十一气泡窗口信息动态配置模板
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- [转]为什么group by后面不能使用别名（除MySQL）
同事工作中遇到一个问题: select count(billingdate),to_char(billingdate,'YYYYmm') month from tu_trade where to_ ...
- 关于HACLON程序导出C#程序，运行报错解决方法
摘要:一些环境配置异常的解决方法. 一,打不开相机: 1.打开系统高级设置--环境变量中是否有 HALCONROOT+安装目录名,若无进行添加. 2.关闭计算机其他连接相机的软件,例如海康的MVS,H ...
- ASP.NET Core 2.2 WebApi 系列【五】MiniProfiler与Swagger集成
MiniProfiler 是一款性能分析的轻量级程序,可以基于action(request)记录每个阶段的耗时时长,还是可以显示访问数据库时的SQL(支持EF.EF Code First)等 一.安装 ...
- PostgreSQL 表字段起别名
使用Postgreq Sql 表字段起别名时注意要用双引号,使用单引号会出现语法错误,执行结果如图
- flutter 打包apk
打包的具体操作,可以参照官网,只是官网没有那么细 1.修改AndroidManifest.xml 2.构建配置 可以跳过 3.构建签名 4.创建 key.properties 5.配置混淆 6.修改 ...
- SQL实用技巧：如何将表中某一列的部分数据合并到一行中
select *,stuff(select ‘,’ + fieldname from table1 for xml path(”)),1,1,”) as field from table2 for ...
- Java-环境搭建（Mac版）
对于开发人员来说,电脑的性能很重要,所以换了Mac后需要重新配置开发环境,网上对Windows系统的Java环境配置有很多,所以,这里就不多介绍.现在记录一下在Mac电脑上的Java环境配置. 众所周 ...
- LiveData使用
### Andorid LiveData 使用 [[_TOC_]] #### Lifycycle 使用1.继承FragmentActivity 实现LifecycleOwner接口2.声明一个Life ...
- window2012安装oracle报INS-13001 环境不满足最低要求
在windows server 2012R2安装Oracle客户端或者服务端时,会弹窗报错INS-13001 环境不满足最低要求此时可以进行以下操作进行解决 在解压后的Oracle安装文件目录中,找到 ...
- JAVA实现二维码生成加背景图
pom.xml依赖 <!-- 二维码生成 --> <!-- https://mvnrepository.com/artifact/com.google.zxing/c ...