SuperMap 超图 安装和使用
- vue项目安装
安装依赖
npm install @supermap/iclient-leaflet
npm install @supermap/babel-plugin-import -D
然后，在 .babelrc中添加如下配置：
{
"plugins": [
[
"@supermap/babel-plugin-import",
{
"libraryName": "@supermap/iclient-leaflet"
}
]
]
}
main.js映入
import L from "leaflet"; // leaflet地图
//超图现在不支持全局映入 所以单个页面还是需要映入对应方法
import '@supermap/iclient-leaflet'; // 超图
template中创建一个div容器 methods 中执行 下面的方法 如果能显示如下图地图就说明安装成功
<div id="map"></div>
// 获取地图
getMap() {
map = L.map("map", {
center: [32.53, 119.98],
zoom: 8,
zoomControl: false, // 是否显示缩放控件
attributionControl: false, // 移除右下角leaflet标识
// crs: L.CRS.EPSG4326,//这个是投影转换 需要根据所提供发布的地图地址来选择
});
this.map = map;
var url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
new TiledMapLayer(url).addTo(map);
},
},
- SuperMap超图 点的创建和删除,以及点的弹窗信息
// 超图创建画点
getmarker(e) {
var myIcon = L.icon({
iconUrl: e.imgs,//点的图片 如果显示不出来需要用require()方法包裹一下
iconSize: [40, 40],
iconAnchor: [40, 40],
popupAnchor: [-3, -46],
});
myLayerGroup = L.layerGroup();
// 将图层组添加到地图中
myLayerGroup.addTo(map);
for (let i = 0; i < e.infolist.length; i++) {
let transitmarkercontentOne = `
<div class="busmaeker" >
<div class="busmaeker_text" >车辆信息</div>
<div class="busmaeker_left" >
<div>车牌:</div>
<div>营运性质:</div>
<div>当前状态:</div>
<div>车型全名:</div>
<div>视频:</div>
<div>轨迹:</div>
</div>
<div class="busmaeker_right" >
<div></div>
<div></div>
<div></div>
<div></div>
<div style="color:#18e7f4;cursor: pointer;" οnclick="getdian" >视频回放 </div>
<div style="color:#18e7f4;cursor: pointer;" > <span >轨迹回放</span></div>
</div>
</div>
`;
let marker = L.marker(e.infolist[i].loatng).bindPopup(
//添加弹窗模板到点上
transitmarkercontentOne
);
e.markersall.push(marker);
}
markersall = e.markersall;
for (let i = 0; i < markersall.length; i++) {
//向图层中添加点
//!!!注意一下Leaflet是纬经度如[32.97,119.64]
myLayerGroup.addLayer(markersall[i]);
}
},
删除点方法我解释一下要先执行添加在执行删除，直接执行删除在多次添加多个数组的点之后不行，所以我执行添加之后再进行删除
//删除点
removermarker(e) {
this.getmarker(e, map);
let layersToRemove = e.markersall;
console.log(e)
// 删除多个图层
for (var j = 0; j < e.markersall.length; j++) {
myLayerGroup.removeLayer(e.markersall[j]);
}
},
- 点聚合方法 以及点聚合样式更改，有专门的插件来渲染聚合点的样式，但是一般项目都需要自定义点样式，在单个组件中只有一种点样式时可以使用样式穿透 直接更改，在一个组件有多个点聚合样式需要分别添加点，和分别定义点
//超图地图聚合
getallmaeker(map) {
resultLayergjc = L.markerClusterGroup({
spiderfyOnMaxZoom: true,// 当地图放大到最大级别时，此选项会使聚类“展开”（spiderfy）以显示其包含的标记。默认值是false。
//设置为true时显示聚类所占据的范围
showCoverageOnHover: true,
//设置为true时会向低一级聚类缩放
zoomToBoundsOnClick: true,
maxClusterRadius: 120,
//自定义聚合点样式
iconCreateFunction: function (cluster) {
var markers = cluster.getAllChildMarkers();
var n = 0;
for (let i = 0; i < markers.length; i++) {
n += markers[i].__parent.childcount;
}
return L.divIcon({ html: markers.length, className: 'mycluster', iconSize: L.point(40,40) });
}
});
let that = this;
this.pushmarkerlist.forEach((element) => {
var lat = Number(element.latgcj02);
var lon = Number(element.lnggcj02);
var myIcon = L.icon({
iconUrl: require("../../assets/imgnew/公交车点.png"),
iconSize: [40, 40],
});
var marker = L.marker([lat, lon], {
icon: myIcon,
});
marker.productid = element.productid;
let productidOne = element.productid;
//点击事件弹出弹窗 方法return一个模板字符就行
marker.on("click", function (e, productid) {
var popup = L.popup().setLatLng(e.latlng);
var content = "";
that.getmap(e).then((contentOne) => {
content = contentOne;
popup.setContent(content); // 设置弹窗内容
popup.openOn(map); // 在地图上打开弹窗
}); // 调用方法获取弹窗内容
});
// marker.bindPopup(markpoint);
// markers.push(marker);
resultLayergjc.addLayer(marker);
//当resultLayer是聚合图层的时候，我们循环产生的marker要一一加入到图层里
// 而不能将marker放到数组里，最后才把数组加到图层里
});
map.addLayer(resultLayergjc);
return;
},
- SuperMap超图中使用mav 做出一些效果
加载mpv
npm install mapv --save
组件中映入
import * as mapv from "mapv";
//超图公交所有绘制线路249, 113, 55
getsurperMaplinepath(e) {
this.$axios
.post("接口地址", {
lineName: "",
lineId: "",
})
.then((res) => {
// return
let data = [];//红色繁忙线
let dataOne = [];//黄色拥挤线
let dataTwo = [];//绿色通畅线
let coordinateslist=[]
let timeData=[]
let datamsg = res.data.data;
for (let i = 0; i < datamsg.length; i++) {
datamsg[i].busline = JSON.parse(datamsg[i].lngLat);
coordinateslist=datamsg[i].busline.map(v=>{
return [v.lng,v.lat]
})
if(0<=i && i<(datamsg.length/3).toFixed(0)){
data.push({
geometry: {
type: "LineString",
coordinates: coordinateslist,
},
tepy:i
});
}else if((datamsg.length/3)<=i && i<(datamsg.length/1.3)){
dataOne.push({
geometry: {
type: "LineString",
coordinates: coordinateslist,
},
tepy:i
});
}else if((datamsg.length/1.3)<=i && i<(datamsg.length)){
dataTwo.push({
geometry: {
type: "LineString",
coordinates: coordinateslist,
},
tepy:i
});
}
for(let j=0; j<coordinateslist.length; j++){
timeData.push({
geometry: {
type: "Point",
coordinates: coordinateslist[j],
},
count: 1,
time: j
})
}
}
let options1 = {
strokeStyle: '#e13523',
shadowColor: '#e13523',
shadowBlur: 3,
lineWidth: 0.8,
draw: 'simple'
}
let options1One = {
strokeStyle: '#d39500',
shadowColor: '#d39500',
shadowBlur: 3,
lineWidth: 0.8,
draw: 'simple'
}
let options1TWo = {
strokeStyle: '#00ae66',
shadowColor: '#00ae66',
shadowBlur: 3,
lineWidth: 0.8,
draw: 'simple'
}
var dataSet1 = new mapv.DataSet(data);
var dataSet1One = new mapv.DataSet(dataOne);
var dataSet1Two = new mapv.DataSet(dataTwo);
lineall= new MapVLayer(dataSet1, options1)
lineall.addTo(map);
lineallOne= new MapVLayer(dataSet1One, options1One)
lineallOne.addTo(map);
lineallTwo= new MapVLayer(dataSet1Two, options1TWo)
lineallTwo.addTo(map);
// map.removeLayer(lineall)
console.log(8888,timeData)
var dataSet2 = new mapv.DataSet(timeData);
// 创建 Mapv 地图实例
var options2 = {
fillStyle: "rgba(255, 250, 250, 0.2)",
globalCompositeOperation: "lighter",
size: 1.5,
animation: {
stepsRange: {
start: 0,
end: 500,
},
trails: 3,
duration: 7,
},
draw: "simple",
};
//动态轨迹图层
markerall= new MapVLayer(dataSet2, options2)
markerall.addTo(map);
// return
//线图层
});
},
特别介绍一个方法，下面方法是mapv自带的一个方法，传入两个经纬度坐标返回的是一个贝塞尔曲线的经纬度坐标集合
let curve = mapv.utilCurve.getPoints([
{
lng: Number(startpon.split(",")[0]),
lat: Number(startpon.split(",")[1]),
},
{
lng: Number(endpon.split(",")[0]),
lat: Number(endpon.split(",")[1]),
},
]);
- 画圆 画矩形的方法就不介绍了没什么东讲 官网拿来就能用 上面有 leaflet.js中文官网链接
623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
