supermap节点MapboxGl绘制多条线,添加地标鼠标提示监听
1.页面中引入需要的js文件(js文件中又引入其他js文件,需要的所有js文件见之前的博客:https://mp.csdn.net/postedit/87778048)
<script type="text/javascript" include="bootstrap,jquery,widgets.alert" src="../../dist/js/include-web.js"></script>
<script type="text/javascript" include="draw,compare" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
2.引入底图,创建map对象,其中container: 'arcgisDiv'为页面中定义的div
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
var mapUrl = host+"/iserver/services/map-china400/rest/maps/China_4326/zxyTileImage.png?z={z}&x={x}&y={y}";//加载底图的url
var map = new mapboxgl.Map({
container: 'arcgisDiv',
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": [mapUrl],
"tileSize": 256,
},
},
"layers": [{
"id": "before",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}],
},
center: [105.85, 36.79],
zoom: 3.8
});
3.添加比例尺、导航、绘画工具
var navigationControl = new mapboxgl.NavigationControl();
var scaleControl = new mapboxgl.ScaleControl();
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
line_string: true,
polygon: true,
trash: true
}
});
map.addControl(navigationControl, 'top-left'); //导航条
map.addControl(scaleControl);
map.addControl(draw, "top-right");
4.画多条线,添加鼠标提示监听
(1)定义鼠标放上去出现的提示对象、自定义地标对象
var popup= new mapboxgl.Popup({
anchor: 'bottom',
closeButton: true
});
(2)组织多条线集合(data每条记录包含起点和终点坐标,每条线路包含提示)
var optimalData = new Array();
for(var i = 0;i < data.length;i++){
var capital = getIndicatorsPointTip(data[i].startStake); //得到提示
var pointList = getPointListByGps(data[i].gps) //通过gps值组织成画线需要的起始点坐标
optimalData.push({
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": pointList
},
"properties": {POP: 1, CAPITAL: capital,STACK:data[i].startStake}
});
}
function getIndicatorsPointTip(startStake){
return "<ul><li>桩号:"+startStake+"</li></ul>";
}
//通过gps值组织成画线需要的起始点坐标
function getPointListByGps(gps){
var gpsArr = gps.split(",");
var pointList = new Array();
if(gpsArr.length == 4){
pointList[0] = new Array(0); //在声明二维
pointList[0][0] = gpsArr[0];
pointList[0][1] = gpsArr[1];
pointList[1] = new Array(1); //在声明二维
pointList[1][0] = gpsArr[2];
pointList[1][1] = gpsArr[3];
}
return pointList;
}
(3)把路线数据添加到地图上展示
map.addSource("sourceId", { //添加source
"type": "geojson",
"data": {
"type": "FeatureCollection", //申明是一个数据集合
"features": optimalData
}
});
map.addLayer({
"id": "layerId",
"type": "line",
"source":"sourceId",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": color,
"line-width": 6
},
});
(4)添加路线鼠标监听提示
map.on('mouseenter',"layerId", function (e) { //根据id绑定鼠标进入事件
popup.remove();
map.getCanvas().style.cursor = 'pointer';
var htmlContent = e.features[0].properties.CAPITAL+"<ul><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center' onclick='intoBeforePictureFromIndicators(\""+1+"\")'>查看前方图像</span></li></ul>";
popup.setLngLat(e.lngLat).setHTML(htmlContent).addTo(map);
});
map.on('mousemove', "layerId", function (e) {
popup.remove();
map.getCanvas().style.cursor = 'pointer';
var htmlContent = e.features[0].properties.CAPITAL+"<ul><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center' onclick='intoBeforePictureFromIndicators(\""+1+"\")'>查看前方图像</span></li></ul>";
popup.setLngLat(e.lngLat).setHTML(htmlContent).addTo(map);
});
/*
map.on('mouseout', "layerId", function () {
map.getCanvas().style.cursor = '';
popup.remove();
})
*/
map.on('click', "layerId", function (e) { //根据id绑定鼠标点击事件
popup.remove();
map.getCanvas().style.cursor = 'pointer';
var htmlContent = e.features[0].properties.CAPITAL+"<ul><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center' onclick='intoBeforePictureFromIndicators(\""+1+"\")'>查看前方图像</span></li></ul>";
popup.setLngLat(e.lngLat).setHTML(htmlContent).addTo(map);
});
- 分布式消息队列 RocketMQ 源码分析 —— Message 拉取与消费(上)
- 分布式消息队列 RocketMQ 源码分析 —— Message 拉取与消费(下)
- Spring Boot中使用RabbitMQ
- Spring Cloud构建微服务架构:消息驱动的微服务(入门)【Dalston版】
- 哪类人适合当产品经理?
- 产品经理·杂谈
- Python机器学习中的特征选择
- Android学习第八弹之改变状态栏的颜色使其与APP风格一体化
- 手把手教你 MongoDB 的安装与详细使用(二)
- 搭建 MongoDB分片(sharding) / 分区 / 集群环境
- Android调用手机中的应用市场,去评分的功能实现
- ANR 原理与实战技巧
- Android将应用程序的崩溃信息如何保存到本地文件,并上传至服务器
- android native内存检测方案(二)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法