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 各个类 ...
随机推荐
- maven将xml文件一起打包
pom文件配置 <build> <!-- 将mapper.xml一起打包 --> <resources> <resource> <director ...
- SpringCloud的入门学习之深入理解Eureka注册中心
1.Eureka 注册中心三种角色. 答:a.Eureka Server,注册中心,通过 Register.Get.Renew 等接口提供服务的注册和发现. b.Application Service ...
- 关于HACLON程序导出C#程序，运行报错解决方法
摘要:一些环境配置异常的解决方法. 一,打不开相机: 1.打开系统高级设置--环境变量中是否有 HALCONROOT+安装目录名,若无进行添加. 2.关闭计算机其他连接相机的软件,例如海康的MVS,H ...
- 在Windows下配置多个git账号
1.生成并部署SSH key 安装好Git客户端后,打开git bash,输入以下命令生成user1的SSH Key: ssh-keygen -t rsa -C "user1@email.c ...
- PHP中RBAC权限管理
1.RBAC概念和原理 RBAC:全称叫做Role-Based Access Control,中文翻译叫做基于角色的访问控制.其主要的作用是实现项目的权限控制. ...
- Linux方案级ROM/RAM优化记录
关键词:readelf.bloat-o-meter.graph-size.totalram_pages.reserved.meminfo.PSS.procrank.maps等等. 根据项目的需求,进行 ...
- 迁移到MAC
周末折腾了2天环境,主要是从windows迁移到mac上,提升逼格告别山寨,迈向专业化.首先,终于把pomelo的c客户端在xcode上跑起来了,至此已基本解决了网络连接问题.由于是第一次用mac开发 ...
- jango rest-framework page_size更新
老项目是三年前写的, 这周的新项目要用上DRF的分页功能时,发现老的写法无效了. 于是看了一些文档,原来写法变了. https://blog.csdn.net/dqchouyang/article/d ...
- vue-cil3 运行报错
warnings potentially fixable with the `--fix` option. 将一下部分:"lint": "vue-cli-service ...
- 基于mysqld_multi实现MySQL 5.7.24多实例多进程配置
学习环境: 操作系统 IP地址 主机名 软件包 备注 CentOS7.5 192.168.200.111 localhost 实验初始配置:所有主机关闭防火墙与selinux [root@ ...