jsapi有提供popup功能,但缺点很多,例如地图上只能同时显示一个popup,popup内容有限制等

本文提供另一个方法,原理不用jsapi,在地图外用一个普通的div放在地图上面,再监听地图的鼠标移动等时间控制这div跟着地图联动

本文代码可能存在跟框架的css等绑定,不一定能直接运行,在此只提供实现思路

本文代码用到vue的绑定

初始化,写入popup的数据也在此

        popupInit: function () {
//popup初始化 //填入popup的数据
this.popupInfos = []; this.popupInfos.push({
//地图坐标
x: 113.566806,
y: 22.22445,
//popup内容的文字,只是个示范,当然格式不限
text: "我是第一个",
//是否显示,不是必须的
show: true,
//样式
style: {
//div的位置,单位是屏幕坐标
top: "-1000px",
left: "-1000px",
},
}); this.popupInfos.push({
x: 113.57418,
y: 22.2234205,
text: "我是第2222个",
show: true,
style: {
top: "-1000px",
left: "-1000px",
},
}); this.popupInfos.push({
x: 113.5928,
y: 22.226853,
text: "我不显示的",
show: false,
style: {
top: "-1000px",
left: "-1000px",
},
});
},

移动popup位置的方法

        //移动popup位置
relocatePopup: function () {
for (let i = 0; i < this.popupInfos.length; i++) {
let popupInfo = this.popupInfos[i]; //把popup所在的地图坐标转为屏幕坐标
let point = mapUtil.geometry.xyToPoint(this.apiInstance, popupInfo.x, popupInfo.y, this.mapView.spatialReference);
let screenPoint = this.mapView.toScreen(point); let x = screenPoint.x;
let y = screenPoint.y;
//重新设置popup的div的位置
popupInfo.style.top = y - 114 + 'px';
popupInfo.style.left = x - 100 + 'px';
}
},

监听地图事件以实现popup和地图位置联动,这段代码通常在map加载完成时执行

                    //地图弹窗移动的实现
//由于popup只是一个在jsapi外部的一般的div,因此这div的移动要自行编码实现
//原理是监听地图所有的会改变地图显示范围的事件(也就是popup需要移动的事件),然后根据地图坐标转换为屏幕坐标,最终重新设置div的位置
//地图拖动事件
this.mapView.on('drag', function (e) {
this.relocatePopup();
}.bind(this));
//滚轮事件
this.mapView.on('mouse-wheel', function (e) {
this.relocatePopup();
}.bind(this));

html部分,地图和popup的代码截取,用了vue和element-ui实现绑定

<div style="height: 100%;">
<el-row style="height: 100%;">
<el-col :span="20" style="height: 100%;">
<el-row style="height: 100%;overflow: hidden;">
<!--地图的div-->
<div class="mapContainer" id="mapDemo1"></div>
<!--地图弹窗的html部分-->
<!--popupInfos是弹窗的数据源,其他跟一般的div没区别-->
<!--PS:注意,要使popup不会超出地图以外是通过父级div的overflow: hidden来实现-->
<div class="infoWindowItem" v-for="(popupInfo,index) in popupInfos" :style="popupInfo.style"
v-show="popupInfo.show">
<div class="item">
<span class="content">{{popupInfo.text}}</span>
</div>
</div>
</el-row>
</el-col>

实现效果,底图是天地图

arcgis jsapi接口入门系列(9):可以同时显示多个的地图popup的更多相关文章

  1. arcgis jsapi接口入门系列(0):总览

    开发环境: arcgis jsapi版本4.9 由于我们这套代码是基于vue,webpack开发的,会有少数vue代码,但总体不影响 里面还有些我们公司的js库和html css,给出的代码不能百分百 ...

  2. arcgis jsapi接口入门系列(5):几何(点线面)基本操作

    点 point: function () { //通过wkt生成点 //wkt,代表点的坐标 let wkt = "POINT(113.566806 22.22445)"; //w ...

  3. arcgis jsapi接口入门系列(2):图层基础操作

    //图层相关demo layerFun: function () { //获取地图的所有图层(不包括的图层类型:底图图层(basemaps)) let layers = this.map.layers ...

  4. arcgis jsapi接口入门系列(10):图形高亮

    jsapi也有提供高亮的实现接口,但这里没用,而用的是一种改变图形(graphic)样式的思路 本文实现效果是:地图有多个面图形,当鼠标移动到面的上方,面高亮显示,鼠标移出后高亮解除 初始化 //高亮 ...

  5. arcgis jsapi接口入门系列(3):各种类型的图层添加

    这里说的tomcat切片,是指arcgis server切片后,把切片图片文件用tomcat发布(其他任意web服务器发布都行) //添加tomcat切片图层 addTomcatTileLayer: ...

  6. arcgis jsapi接口入门系列(6):样式

    symbol: function () { //线样式 //样式详情请看官方文档 let style = { //线颜色,支持多种格式: //CSS color string:例如"dodg ...

  7. arcgis jsapi接口入门系列(4):用代码在地图画点线面

    PS:用代码画点这样写是为了跟后面的用鼠标画点线面区分出来 画点 drawPointGraphic: function () { //点有多种样式:一般的点,显示文字,显示图片 //一般的点 let ...

  8. arcgis jsapi接口入门系列(8):鼠标在地图画面

    初始化,每个map执行一次 PS:画点也差不多,都是用SketchViewModel,因此本demo没有专门写画点的 drawPolygonInit: function () { //画几何对象初始化 ...

  9. arcgis jsapi接口入门系列(7):鼠标在地图画线

    初始化,每个map执行一次就行 drawPolylineInit: function () { //画几何对象初始化 //新建一个图形图层用于存放画图过程中的图形 let layer = new th ...

随机推荐

  1. cat的用法总结

    1 查看文件在LINUX下一切皆文件,光看见文件名和目录名对我们来说,还远远不够.今天,就来介绍一下可以打开文件的命令cat.当然,二进制的可执行文件,不能用cat. 在CentOS7下,以/etc/ ...

  2. java递归demo---

    递归思想: 递归就是方法里调用自身 在使用递归策略时,必须有一个明确的递归结束条件,称为递归出口 递归算法代码显得很简洁,但递归算法解题的运行效率较低.所以不提倡用递归设计程序. 在递归调用的过程中系 ...

  3. object类型转换为Array类型

    var obj = {a: 1, b: 2, c: 3}; // .... var arr = []; for(var key in obj){ if(!obj.hasOwnProperty(key) ...

  4. SQL一次性插入大量数据【转载】

    在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量 ...

  5. 【243】◀▶IEW-Unit08

    Unit 8 Environment I. 不定式(to do)在雅思写作中的运用 1)名词 • 主语(句首) To protect the environment is everyone's dut ...

  6. matlab下的caffe接口配置(Windows)

    本文基于大部分网上方法 http://blog.csdn.net/d5224/article/details/51916178,外加一点自己的个人实际配置经历,环境变量在配置后尽管显示正确并且重启多次 ...

  7. CodeForces 467D(267Div2-D)Fedor and Essay (排序+dfs)

    D. Fedor and Essay time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  8. UVaLive 4094 WonderTeam (贪心)

    题意:有n支队伍,每两支队伍打两场比赛(主客场各一次),胜得3分,平得1分,输不得分,比赛结束之后会评选出一个梦之队, 梦之队满足以下条件:进球总数最多,胜利场数最多,丢求总数最少,三个都不能并列,求 ...

  9. C++读取XML,tinyXml的使用

    前言: 最近在开发的过程中,有个需求是对xml进行格式转化,从一种格式转化到另外一种格式.因此,就需要读取xml进行处理.原本打算写成工具在linux下运行,不过后来考虑到和系统结合,最后也就使用了前 ...

  10. OVN学习(三)

    部署OVN实验环境 同OVN学习(一) 网关 在L3网络基础上部署网关 添加L3网关 ### Central节点 # ovn-sbctl show Chassis "8bd09faf-5ba ...