Minemap 地图使用
今天咱们看另一个地图minedata,四维图新旗下的地图，与bat的地图相比缺少一些知名度，但是因为他是商用地图。文档会比较完善。
文章目录
一、地图使用
在外网开发时可以参考官方 API
在 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 = '<span>我是一个信息窗体</span>'
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> <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);
}
vue-minemap
1.特性
- 使用 vue 组件风格创建 minemap 图层
- 减少 minemap api 调用，专注于业务逻辑
- 使用简单，易上手
文档
vue-minemap
2.安装 和 基本使用
安装
npm install --save vue-minemap
1.首先，引入 minemap api
index.html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="//minedata.cn/minemapapi/v2.0.0/minemap.css" />
<title>vue-minemap-demo2</title>
</head>
<body>
<div id="app"></div>
<script src="//minedata.cn/minemapapi/v2.0.0/minemap.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
2.使用地图组件
<tempalte>
<div id="app">
<mine-map
:accessToken="'e919a6f32ce242f5aec22652d9dc1fdb'"
:solution="'7185'"
:options="{
container: 'map',
style: `http://minedata.cn/service/solu/style/id/7185`,
center: [116.1866179, 39.992559],
zoom: 9,
minZoom: 3,
maxZoom: 17,
}"
></mine-map>
</div>
</tempalte>
<script>
import { MineMap } from 'vue-minemap'
export default {
name: 'app',
}
</script>
<style>
html,
body {
height: 100%;
}
#app {
height: 100%;
}
</style>
3.添加 source 和 layer
<tempalte>
<mine-map
:accessToken="'xxxxxxxxxxxxxxxxxxxxxxxxx'"
:solution="'7185'"
:options="{
container: 'map',
style: `http://minedata.cn/service/solu/style/id/xxxx`,
center: [116.1866179, 39.992559],
zoom: 9,
minZoom: 3,
maxZoom: 17,
}"
>
<MMSource :id="sourceId" :options="sourceOption">
<MMLayer
:id="layerOption.id"
:type="layerOption.type"
:paint="layerOption.paint"
></MMLayer>
</MMSource>
</mine-map>
</tempalte>
<script>
import { MineMap, MMSource, MMLayer } from 'vue-minemap'
export default {
name: 'app',
data() {
return {
sourceId: 'test',
sourceOption: {
type: 'geojson',
data: { type: 'Point', coordinates: [116.1866179, 39.992559] },
},
layerOption: {
id: 'test',
type: 'circle',
paint: { 'circle-radius': 10, 'circle-color': '#ccc' },
},
}
},
}
</script>
3.参数
1.accessToken 地图 token 值
<mine-map :accessToken="'xxxxxxxxxxxxxxxxxx'" />
2.solution 地图 solution
<mine-map :solution="'xxxx'" />
3.地图初始化参数，格式和 minemap api 兼容通用
<mine-map
:options="{
container: 'map',
style: `http://minedata.cn/service/solu/style/id/xxxx`,
center: [116.1866179, 39.992559],
zoom: 9,
minZoom: 3,
maxZoom: 17,
}"
/>
4.marker 点标记的坐标点
<m-m-marker :lnglat="[116.34,39.45]"></m-m-marker>
5.marker 位置偏移
offset[0]: 相对于左上角向右偏移多少像素， offset[1]: 相对于左上角向下偏移多少像素
<m-m-marker :offset="[50,0]"></m-m-marker>
6.popup 窗体的坐标点
<m-m-popup :lnglat="[116.34,39.45]"></m-m-popup>
7.popup 位置偏移
offset[0]: 相对于锚点向右偏移多少像素， offset[1]: 相对于锚点向下偏移多少像素
<m-m-popup :offset="[50,0]"></m-m-popup>
8.closeButton:popup 是否显示关闭按钮
<m-m-popup :closeButton="false"></m-m-popup>
9.closeOnClick:点击地图是否可以关闭 popup
<m-m-popup :closeOnClick="false"></m-m-popup>
4.事件
map-load 当地图加载完时调用
<mine-map @map-load="onLoad" />
剩余可查看官方文档
如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨🔧 个人主页 : 前端初见
扫一扫
2969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
