山海鲸可视化自学2

最新推荐文章于 2024-09-11 15:33:18 发布

只会cv的小前端

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量391

点赞数 8

分类专栏：数据可视化大屏文章标签： javascript

本文链接：https://blog.csdn.net/wancc123/article/details/139862964

版权

数据可视化大屏专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如何使用iframe导入地图组件，并且与山海鲸内元素进行交互

以天地图为例

下面是个index.html文件，一定是index.html

在这里插入代码片
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>天地图－地图API－范例－地图加载单图层</title>
    <script
      type="text/javascript"
      src="http://api.tianditu.gov.cn/api?v=4.0&tk=天地图的key"></script>
    <script
      type="text/javascript"
      src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.js"></script>
    <style>
      body,
      html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "Microsoft YaHei";
      }

      #mapDiv {
        width: 100%;
        height: 100%;
      }
	//  样式区域  其他样式
      function onLoad() {
      var imageURL =
          "http://t0.tianditu.gov.cn/img_w/wmts?" +
          "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
          "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c7b7b2cf071dfba1e0f52f4116065c83";
        //创建自定义图层对象
        lay = new T.TileLayer(imageURL, {
          minZoom: 11,
          maxZoom: 18,
        });
         var config = {
          layers: [lay],
        };
        //初始化地图对象
        map = new T.Map("mapDiv", config);
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(经度, 维度), 14);

		//  .........其他配置


	   var labelwd = new T.Label({
          text: "地图文本标注",
          position: new T.LngLat(102.82947, 24.95206),
          offset: new T.Point(-60, -30),
        });
        labelwd.setFontSize(10); // 字体大小
        labelwd.setFontColor("#37ff00");// 字体颜色
        labelwd.setBackgroundColor("#282923"); // 文本框背景颜色
        labelwd.setBorderLine(0); //边框
        labelwd.setOpacity(0.5);// 透明度

 		labelwd.addEventListener("click", hsClick);  //  监听点击事件
 		function hsClick() {
          msg = "hs";
          window.parent.postMessage(msg, "*"); // 给iframe父元素传递事件消息  内容为  hs
        }
		 // 向地图上添加标注
        map.addOverLay(labelwd);
	  }
    </style>
    <script>
      var map;
      var zoom = 13;
      var lay;
      var msg;
    </script>
  </head>
  <body onLoad="onLoad()">
    <div id="mapDiv"></div>
  </body>
</html>

然后我们倒入到山海鲸

打开山海鲸，ctrl+F搜索iframe

右边看到数据源选择选择本地的这个index.html文件

如果你发现选择文件那里，看不到index.html文件，那么你把index.html文件放入一个空文件夹
然后，数据源选择这个文件夹打开上传就行，看不到没有关系，然后重新加载刷新这个iframe组件就行了

然后地图出现后，还得绑定一个js文件

点击这个iframe元素，右边选择代码，然后上传一个脚本，js文件

文件内容是：

class map{
  onMessageRecieved(data,origin,source){
	  if (data && data === "hs") {
		  console.log(data);
		  this.element.emit("hsClick");
  	}
}
export default map

这是山海鲸地图自己的方法配置

然后我们点击iframe，右边选择交互，这时候添加交互

名称随意
事件选择接收到二次开发中的事件
事件名称 hsClick 就是上面js文件emit的出来的名称

其他要操作的东西自己设置

这时候，锁定iframe,你点开山海鲸右下角的控制台 ,然后点击地图上的文本标注，控制台就是会打印 hs 也是上面js文件里面的 console.log(data) 就会触发后续的配置操作

加油继续卷-------------------

只会cv的小前端

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
山海鲸可视化自学2

这时候，锁定iframe,你点开山海鲸右下角的控制台 ,然后点击地图上的文本标注，控制台就是会打印 hs 也是上面js文件里面的 console.log(data) 就会触发后续的配置操作。如果你发现选择文件那里，看不到index.html文件，那么你把index.html文件放入一个空文件夹。然后，数据源选择这个文件夹打开上传就行，看不到没有关系，然后重新加载刷新这个iframe组件就行了。点击这个iframe元素，右边选择代码，然后上传一个脚本，js文件。然后地图出现后，还得绑定一个js文件。
复制链接

扫一扫

专栏目录