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 各个类 ...
随机推荐
- mysql中concat函数的使用相关总结
concat(str1,str2) 返回结果为连接参数产生的字符串.如有任何一个参数为NULL ,则返回值为 NULL. mysql> select concat('11','22','33') ...
- 分布式应用监控: SkyWalking 快速接入实践
分布式应用,会存在各种问题.而要解决这些难题,除了要应用自己做一些监控埋点外,还应该有一些外围的系统进行主动探测,主动发现. APM工具就是干这活的,SkyWalking 是国人开源的一款优秀的APM ...
- Java分布式系统---消息中间件
简介 消息中间件也可以称消息队列,是指用高效可靠的消息传递机制进行与平台无关的数据交流,并基于数据通信来进行分布式系统的集成.通过提供消息传递和消息队列模型,可以在分布式环境下扩展进程的通信.当下主流 ...
- Java - 运算符 方法
本位是复习笔记,不适合零基础 赋值运算符 变量 名称 = 值/表达式 ; 需要注意的是,赋值运算符的计算是按照从右往左的; 注意: 1.在使用赋值符号时,必须保证左侧的类型范围大于等于右侧产生的类型 ...
- CAD编辑器哪个好用？如何使用CAD编辑器
说起CAD图纸很多的朋友都很熟悉,因为CAD图纸在很多领域都有广泛的应用.那CAD图纸都是使用CAD编辑器制图软件来进行绘制的,图纸的格式都是为dxf格式或者是dwg格式的.对于才接触CAD的伙伴们来 ...
- Java工程师学习指南
java学习指南-四个部分:分别是入门篇,初级篇,中级篇,高级篇 第一步是打好Java基础,掌握Java核心技术, ...
- Python Web（一）
Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.Web框架 1.socket网络编程 架构:C/S 协议:TCP/UDP 传输层 2.Web应用 架构:B/S ...
- SQLi-LABS Page-1(Basic Challenges) Less5-Less10
Less5 GET - Double Injection - Single Quotes http://10.10.202.112/sqli/Less-5?id=1 http://10.10.202. ...
- SQL,case ziduan when ziduan_value then 'result'
case a.sex when 0 then '女' when 1 then '男' else '其他' end as sex 当a表的性别字段的value为0时将查询的value转换成 '女',当字 ...
- 解决vue修改路由的查询字符串（query）url不改变，页面不刷新问题
我个人猜测可能是对路由的数据检测深度不够吧,单纯修改query里面的属性是不能触发数据驱动的,因此要直接给query赋值新的对象才能驱动数据更新,做法如下 第一种 var query=JSON.par ...