Minemap 地图使用

Minemap 地图使用

今天咱们看另一个地图minedata,四维图新旗下的地图，与bat的地图相比缺少一些知名度，但是因为他是商用地图。文档会比较完善。

一、地图使用

在外网开发时可以参考官方 API

MineMap 官网

在 index.html 引入 MineMap

注意:开发中可以使用外网 cdn 的方式引入，打包完一定要在内网下载内网的这俩个文件
这个是内网的示例中心地址
http://148.144.31.239/support/api/demo/js-api/zh/map/base/map-show
把里面引入的地图的文件保存本地即可

<link
  rel="stylesheet"
  href="https://minedata.cn/minemapapi/v2.1.0/minemap.css"
/>
<script src="https://minedata.cn/minemapapi/v2.1.0/minemap.js">script>

二、地图对象管理和地图创建

创建地图容器

地图需要一个 HTML 元素作为容器，这样才能展现到页面上。创建一个 div

<div id="map">div>

指定地图容器大小,这里根据实际大小设置即可

#map {
  width: 100%;
  height: 100%;
}

地图全局参数配置

下面的配置可以在外面使用，

minemap.domainUrl = 'https://minemap.minedata.cn' /* MineMap根域名地址 */
minemap.dataDomainUrl =
  "'https://minemap.minedata.cn'" /* MineMap矢量数据服务根域名地址 */
minemap.serverDomainUrl =
  "'https://sd-data.minedata.cn'" /* MineMap矢量数据服务新规范根域名地址 */
minemap.spriteUrl =
  'https://minemap.minedata.cn/minemapapi/v2.1.1/sprite/sprite' /* MineMap底图雪碧图地址 */
minemap.serviceUrl =
  'https://service.minedata.cn/service' /* MineMap后台服务根地址 */

MineMap 支持本地部署，所以在地图应用开发需要支持本地环境时，需要更改设置一下全局参数
改成内网地址即可

//地址换成内网即可
minemap.domainUrl = ''
minemap.dataDomainUrl = ''
minemap.serverDomainUrl = ''
minemap.spriteUrl = ''
minemap.serviceUrl = ''

地图的初始化

地图方案的 key 与 solution 根据提供的配置

minemap.key = '您的key'
minemap.solution = 12877
var map = new minemap.Map({
  container: 'map', //把容器id填这里
  style: 'https://service.minedata.cn/map/solu/style/11001' /* 底图样式 */,
  center: [116.46, 39.92] /* 地图中心点 */,
  zoom: 10 /* 地图默认缩放等级 */,
  pitch: 0 /* 地图俯仰角度 */,
  maxZoom: 17 /* 地图最大缩放等级 */,
  minZoom: 3 /* 地图最小缩放等级 */,
})

地图加载完成=>load事件

创建地图对象后，开始加载地图资源，地图资源加载完成后触发 load 事件。

map.on("load", function() {
  // 地图资源加载完成后触发
  // 增加自定义数据源、自定义图层
});

销毁地图对象

调用 remove 方法来销毁地图，该方法执行后，地图对象被注销，内存释放，地图容器被清空。

// 销毁地图，并清空地图容器
map.remove();

三、地图状态

地图状态包括地图中心点、缩放级别、倾斜角度、旋转角度等内容。本章介绍地图状态的常用方法以及根据几何边界调整视野范围方法。

//1.设置、获取地图中心点：
var position = minemap.LngLat(116.46, 39.92); // 对象形式
map.setCenter(position);//设置地图中心点
var center = map.getCenter();// 获取地图中心点

//2.设置、获取地图缩放级别：
map.setZoom(12); //设置地图缩放级别，值为整数或小数，值域范围为[0,20]。
var zoom = map.getZoom(); // 获取地图缩放级别

//3.同时设置地图中心点和缩放级别：
map.setZoomAndCenter(12, [116.46, 39.92]);// 同时传入缩放级别和中心点经纬度=>map.setZoomAndCenter('级别','中心店')
// 3.1限制地图缩放级别
// map.setZoom(zoom); 设置地图缩放级别
// map.setMaxZoom(zoom); 设置地图最大缩放级别
// map.setMinZoom(zoom); 设置地图最小缩放级别

// 4.设置地图整级缩放或非整级缩放：
// 4.1设置地图整级缩放
map.scrollZoom.setWheelZoomRate(1); //设置鼠标滚轮滚动一下的缩放比例
map.scrollZoom.setZoomRate(1); //设置触摸屏的缩放比例，最大值为1
// 4.2设置地图非整级缩放
map.scrollZoom.setWheelZoomRate(1 / 600); //速率值越小，地图的缩放越细腻

// 5. 设置地图拖动惯性
// 5.1设置地图拖动无惯性拖动
map.dragPan.enable({
    linearity: 0.1, //拖拽平移速度比例因子，注意：此参数不能为0
    maxSpeed: 0, //拖拽平移速度的最大值。
    deceleration: 2500, //拖拽动作结束后，地图惯性平移速度的速度衰减速率
});
// 5.2设置地图拖动有惯性平移
map.dragPan.enable({
    linearity: 0.3,
    maxSpeed: 1400,
    deceleration: 2500,
});
// 5.3 禁用地图拖动
map.dragPan.disable();

四、点标记和窗体

标注–点标记

可以通过原生 dom 的方式去创建

var el = document.createElement('div')
el.id = 'marker'
el.style['background-image'] = "url('../images/marker.png')"
el.style['background-size'] = 'cover'
el.style.width = '50px'
el.style.height = '50px'
el.style['border-radius'] = '50%'

需要注意的地方
点标记背景图问题
可以通过 className 给标记添加类名，然后在 css 设置背景图和点标记的 css 即可，如果获取不到可以通过以下方式

// 点标记
var el = document.createElement('div')
el.classList.add('myma')
el.className = 'qkbg'
//给标记设置类名
el.id = 'marker'
el.style['background-size'] = (59, 101)
el.style.width = '50px'
el.style.height = '50px'
el.style.backgroundSize = '100%'
el.style['background-size'] = (59, 101)
el.style.backgroundSize = '100%'

/deep/ .qkbg {
  写css样式即可
}

添加到地图上
一个简单的 Marker 标注，需要设置 DOM 元素、Marker 坐标、偏移量等参数，并将其添加到地图上。

// Marker构造函数接收两个参数，一个为自定义的DOM元素，一个是Object参数，其中包括偏移量等
// offset参数为标注点相对于其左上角偏移像素大小
// 调用setLngLat方法指定Marker的坐标位置
var marker = new minemap.Marker(el, { offset: [-25, -25] })
  .setLngLat([116.46, 39.92])
  .addTo(map)

添加事件

el.addEventListener('click', function (e) {
    console.log(e)
}

删除标注

marker.remove()
//或者
marker = null

var el = document.createElement('div')
el.className = 'custom-popup-class' //custom-popup-class为自定义的css类名
var d1 = document.createElement('div')
d1.innerHTML = '我是一个信息窗体'
d1.style.color = 'black'
el.appendChild(d1)

var popup = new minemap.Popup({
  closeOnClick: true,
  closeButton: true,
  offset: [0, 0],
})
  .setLngLat([116.46, 39.92])
  .setDOMContent(el)
  .addTo(map)

样式

/deep/ .custom-popup-class{
  样式名
}

添加事件

function _onTitleClick(e) {
  alert('点击事件')
}
p1.addEventListener('click', _onTitleClick)
//p1 dom元素

删除信息窗体

popup.remove()
//或者
popup = null

五、地图状态=>飞行

从当前位置飞行到某个经纬度，飞行有三种方法

jumpTo方法

采用立即变换的形式进行中心点、缩放级别、旋转角、倾角的改变

function jumpAction() {
        /**
         * jumpTo方法，采用立即变换的形式进行中心点、缩放级别、旋转角、倾角的改变
         *
         * 参数项说明：
         * center：表示飞行结束后的地图中心坐标值；
         * zoom：表示飞行结束后的地图缩放等级；
         * bearing：表示飞行结束后的地图旋转等级；
         * pitch：表示飞行结束后的地图倾斜等级；
         * duration：表示飞行时长，单位为毫秒；
         */

        var center = map.getCenter();
        map.jumpTo({
            center: [center.lng + (Math.random() - 0.5) * 0.2,
                center.lat + (Math.random() - 0.5) * 0.2],
            pitch: 0,
        });
    }

效果

flyTo方法

在一个弧线上采用动画的形式进行中心点、缩放级别、旋转角、倾角的改变

   function flyAction() {
        /**
         * flyTo方法，在一个弧线上采用动画的形式进行中心点、缩放级别、旋转角、倾角的改变
         *
         * 参数项说明：
         * center：表示飞行结束后的地图中心坐标值；
         * zoom：表示飞行结束后的地图缩放等级；
         * bearing：表示飞行结束后的地图旋转等级；
         * pitch：表示飞行结束后的地图倾斜等级；
         * duration：表示飞行时长，单位为毫秒；
         */
        var center = map.getCenter();
        map.flyTo({
            center: [center.lng + (Math.random() - 0.5) * 0.2,
                center.lat + (Math.random() - 0.5) * 0.2],
            zoom: 14,
            bearing: 10,
            pitch: 30,
            duration: 2000
        });
    }

效果

easeTo方法

以bezier曲线的方式采用动画的形式进行中心点、缩放级别、旋转角、倾角的改变

  function easeAction() {
        /**
         * easeTo方法，以bezier曲线的方式采用动画的形式进行中心点、缩放级别、旋转角、倾角的改变
         *
         * 参数项说明：
         * center：表示飞行结束后的地图中心坐标值；
         * zoom：表示飞行结束后的地图缩放等级；
         * bearing：表示飞行结束后的地图旋转等级；
         * pitch：表示飞行结束后的地图倾斜等级；
         * duration：表示飞行时长，单位为毫秒；
         */
        var center = map.getCenter();
        map.easeTo({
            center: [center.lng + (Math.random() - 0.5) * 0.3,
                center.lat + (Math.random() - 0.5) * 0.3],
            zoom: 14,
            bearing: 0,
            pitch: 60,
            duration: 2000
        });
    }

效果

作者项目中使用

1、飞行点标记函数封装和使用

    // 飞往点标记函数封装
    toMarker(jd, wd) {
      let map = this.mapObj;
      // LngLat 设置 / 获取地图中心点和缩放级别 或使用var center = map.getCenter()
      var center = { lng: jd, lat: wd };
      console.log("中心", center);
      map.flyTo({
        // flyTo在一个弧线上采用动画的形式进行中心点、缩放级别、旋转角、倾角的改变
        center: [jd, wd],//center：表示飞行结束后的地图中心坐标值；
        zoom: 14,  // zoom：表示飞行结束后的地图缩放等级；
        // bearing: 10,  //earing：表示飞行结束后的地图旋转等级；
        // pitch: 30,  // pitch：表示飞行结束后的地图倾斜等级；
        duration: 2000, // duration：表示飞行时长，单位为毫秒；
      });
    },

调用

  <div @click="toajMarker(item.jd,item.wd,item.id,index)" :class="`ajbanner ${item.class}`"  v-for="(item,index) in ajMapListData" :key='item.id'>
            <p><span>名称span> <span style="margin-left:10px"> {{item.ajmc}}span> p>
               <p>span> <span style="margin-left:10px" >{{item.ajbh}}span> p>
            <p><span>时间span> <span style="margin-left:10px" >{{item.fasjcz}}span> p>
          div>

   toajMarker(ajjd, ajwd, id, index) {
     this.toMarker(ajjd, ajwd);
   }

效果

如果这篇【文章】有帮助到你，希望可以给我点个赞，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注，咱们一起探讨和努力！！！
‍ 个人主页 : 前端初见