项目引入船讯网海图插件

最新推荐文章于 2024-03-21 10:04:46 发布

爱睡D小猪

最新推荐文章于 2024-03-21 10:04:46 发布

阅读量2.5k

点赞数 3

分类专栏：前端插件文章标签： javascript vue.js html css

本文链接：https://blog.csdn.net/zhouloverbrother/article/details/118069612

版权

前端插件专栏收录该内容

2 篇文章

订阅专栏

项目引入船讯网海图插件

这个控件，我在百度谷歌知乎掘金思否都搜不到一篇相关的文章-- ，太稀有了，
链接：http://api.shipxy.com/
下面是一个demo，这个根据官网看入门使用介绍，可能像我这种小白就会踩坑，这个组件竟然要在web服务上才会加载渲染出来，不像echart那些，能直接用过cdn加载出来，原理不懂，我用html+node搞出来的，没尝试到vue项目，不知道需不要node服务，这个控件是基于JQ+layui

效果如何：
在这里插入图片描述
1、这是我设置的demo，通过node实现页面跳转，具体的api功能要去官网示例看，自己看下。
2、以下我给出我用的代码

html方面，很久没用jq，不习惯，我引入了vue.js ，elment-ui，当然也引入了JQ和控件相关链接，
尤其以下几条cdn，是我从官网示例network找到的，这个需要去注册，我没搞

<script src="http://api.shipxy.com/h5/api/plugins/jquery/jquery.min.js"></script>
<script src="http://api.shipxy.com/h5/api/?v=3.0&k=1F6D701272402D1E7D8D316CCE519123"></script>
<script src="http://api.shipxy.com/h5/api/3.0/ElaneMap.min.js"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="http://api.shipxy.com/favicon.ico" />
    <title>船舶航海</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="http://api.shipxy.com/h5/api/plugins/jquery/jquery.min.js"></script>
    <script src="http://api.shipxy.com/h5/api/?v=3.0&k=1F6D701272402D1E7D8D316CCE519123"></script>

    <script src="http://api.shipxy.com/h5/api/3.0/ElaneMap.min.js"></script>

    <!-- 引入样式 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
      .div {
        margin: 0;
      }
      body {
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
      }
      .container {
        position: relative;
      }
      .left {
        position: absolute;
        left: 0;
        top: 0;
        width: calc(30% - 1px);
        height: 100vh;
        display: inline-block;
        border: 1px solid red;
      }
      .right {
        position: absolute;
        left: calc(70% + 1px);
        top: 0;
        width: 30%;
        height: 100vh;
        display: inline-block;
        border: 1px solid red;
      }
      .my-map {
        position: absolute;
        left: calc(30% + 1px);
        top: 0px;
        width: 40%;
        height: 100vh;
        overflow: hidden;
        outline: none;
        background-color: #a3ccff;
      }

      .div_btn {
        position: relative;
        top: 10px;
        left: 80px;
        z-index: 888;
      }

      .div_btn input[type='button'] {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="container" id="app">
      <div class="left">
        <el-button type="primary" @click="goTo()">去另外测试页面</el-button>
        <el-button type="success">成功按钮</el-button>
      </div>

      <div class="my-map" id="map">
        <div class="div_btn">
          <input id="btn_draw_track" type="button" value="绘制" />
          <input id="btn_draw_track_edit" type="button" value="编辑" />
          <input id="btn_draw_track_finish" type="button" value="完成" />
          <input id="btn_draw_track_delete" type="button" value="删除" />
          <input id="btn_draw_track_view" type="button" value="显示" />
        </div>
      </div>

      <div class="right">
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
      </div>
    </div>
  </body>
  <!-- 先引入 Vue -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->

  <script>
    new Vue({
      el: '#app',
      data: {},
      mounted() {
        // 创建地图示例
        var _map = new ShipxyAPI.Map('map', { ak: '1F6D701272402D1E7D8D316CCE519123' })

        var _tds // 航线对象
        var _tds_data // 航线数据
        // 航线绘制
        $('#btn_draw_track').on('click', function () {
          if (!_tds) {
            var options = {
              callBack: function (item) {
                _tds_data = item
                console.log('====航线绘制 callBack===', item)
              },
              unit: 'nm',
              symbol: 'ABC_',
            }
            _tds = ShipxyAPI.trackDrawSymbol(_map, options)
          }
          _tds.drawTrack()
        })
        // 航线编辑
        $('#btn_draw_track_edit').on('click', function () {
          if (!!_tds) {
            _tds.editLine()
          }
        })
        // 航线绘制完成
        $('#btn_draw_track_finish').on('click', function () {
          if (!!_tds) {
            // 只读模态
            _tds.showTrack()
          }
        })
        // 删除航线
        $('#btn_draw_track_delete').on('click', function () {
          if (!!_tds) {
            // 删除航线
            _tds.removeTrack()
          }
        })
        // 显示航线
        $('#btn_draw_track_view').on('click', function () {
          if (!!_tds_data) {
            // 显示航线
            _tds.showTrack(_tds_data)
          }
        })
      },

      methods: {
        goTo(){
          window.location.href="./test";
           console.log('%c'+"color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");
        }
      },
    })
  </script>
</html>

这是node.js的代码，

var http=require('http');
var fs=require('fs');
var server =http.createServer();
server.listen(9090,function(){
	console.log("http://127.0.0.1:9090");
});
//请求回调函数
var handRequest=function (req,res){
	console.log('当前的请求是:'+req.url);
//	response.write('hello');
//	response.write('world');
	//response.writeHead(响应状态码，响应头对象)
	var url=req.url;
	if(url == "/index" || url == "/" ){
		res.writeHead(200,{
			'Content-Type':'text/html'
		});
		fs.readFile(__dirname + '/views/index.html','utf8',function(err,data){
			if(err){
				throw err;
			}
			res.end(data);
		});
	}else if(url == "/test"){
		res.writeHead(200,{
			'Content-Type':'text/html'
		});
		fs.readFile(__dirname + '/views/test.html','utf8',function(err,data){
			if(err){
				throw err;
			}
			res.end(data);
		});
	}
	//发送完数据后结束响应
	//res.end('404 NotFound');
};
//任何请求都会触发该事件
server.on('request',handRequest);