Skip to content

G
gassafety
Commit 33280f5b authored by 耿迪迪's avatar 耿迪迪
Browse files
Options

地图工具 gengdidi

parent e9117445
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 159 deletions
gassafety-web/public/index.html
View file @ 33280f5b
......@@ -8,7 +8,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
<style>
html,
body,
......
gassafety-web/src/utils/gaodeMap.js 0 → 100644
View file @ 33280f5b
let defaultCenter = "石家庄";
export let map;
class gaodeMap {
//构造函数中设置中央点默认值
constructor(center) {
this.center = center?center:defaultCenter;
map = new AMap.Map('container', {
//mask: addMask(result.districtList[0].boundaries),
center: [114.72995, 38.37417],
// resizeEnable: true,
disableSocket: true,
viewMode: '3D',
showLabel: true,
// labelzIndex: 110,
pitch: 8,
zoom: 9,
//mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
});
this.districtBoundaries();
}
/**
* 获取map
* @returns {AMap.Map}
*/
get getMap(){
return this.map;
}
/**
* 重新设置中央点
* @param value
*/
set setCenter(value){
this.center = value;
this.districtBoundaries();
}
/**
* 设置城市边界
*/
districtBoundaries(){
let that = this;
let opts = {
subdistrict: 0,
extensions: 'all',
level: 'city'
};
let district = new AMap.DistrictSearch(opts);
district.search(that.center, function (status, result) {
if(status == "complete"){
let defaultCenter = [];
defaultCenter.push(result.districtList[0].center.lng);
defaultCenter.push(result.districtList[0].center.lat);
map.setCenter(defaultCenter);
let bounds =result.districtList[0].boundaries;
for (let i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: '#0088ff',
strokeWeight: 5,
strokeOpacity: 7,
map: map,
});
}
}
})
}
/**
* 添加Market
* @param lnglats
*/
addMarker(lnglats){
let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)});
for (let i = 0, marker; i < lnglats.length; i++) {
let marker = new AMap.Marker({
position: lnglats[i],
map: map,
offset: new AMap.Pixel(-13, -30),
// 设置是否可以拖拽
draggable: true,
cursor: 'move',
// 设置拖拽效果
raiseOnDrag: true
});
marker.content = '<h4>我是第' + (i + 1) + '个XXX</h4>';
marker.content += '<h6>经度：'+lnglats[i][0]+'</h6>';
marker.content += '<h6>纬度：'+lnglats[i][1]+'</h6>';
marker.content += '<button class="btn btn-success btn-xs">历史轨迹</button>';
marker.content += '<button class="btn btn-warning btn-xs">实时跟踪 </button>';
marker.content += '<button class="btn btn-danger btn-xs">设置</button>';
marker.on('mouseover', infoOpen);
//注释后打开地图时默认关闭信息窗体
//marker.emit('mouseover', {target: marker});
marker.on('mouseout', infoClose);
marker.on('click', newMAp);
}
map.setFitView();
//鼠标点击事件,设置地图中心点及放大显示级别
function newMAp(e) {
//map.setCenter(e.target.getPosition());
map.setZoomAndCenter(13, e.target.getPosition());
let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)});
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
function infoClose(e) {
infoWindow.close(map, e.target.getPosition());
}
function infoOpen(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
}
/**
* 添加折线
* @param path
*/
addPolyline(path){
let polylines = [];
for(let i = 0;i< path.length; i++){
let polyline = new AMap.Polyline({
path: path[i],
strokeColor: "green",
strokeWeight: 8,
strokeOpacity: 0.9,
zIndex: 50,
bubble: true,
})
polylines.push(polyline);
let polyEditor = new AMap.PolyEditor(map, polyline);
//创建右键菜单
let contextMenu = new AMap.ContextMenu();
//右键放大
contextMenu.addItem("编辑Polyline", function () {
polyEditor.setTarget(polyline);
polyEditor.open();
}, 0);
contextMenu.addItem("结束编辑", function () {
polyEditor.close();
}, 0);
//添加事件
polyline.on("rightclick",function (e) {
contextMenu.open(map, e.lnglat);
})
}
map.add(polylines);
// 缩放地图到合适的视野级别
map.setFitView();
}
}
export default gaodeMap;
gassafety-web/src/utils/map.js deleted 100644 → 0
View file @ e9117445
let map;
/**
* 初始化地图
*/
export function initMap() {
let opts = {
subdistrict: 0,
extensions: 'all',
level: 'city'
};
let district = new AMap.DistrictSearch(opts);
district.search('石家庄', function (status, result) {
if(status == "complete"){
let defaultCenter = [];
defaultCenter.push(result.districtList[0].center.lng);
defaultCenter.push(result.districtList[0].center.lat);
map = new AMap.Map('container', {
//mask: addMask(result.districtList[0].boundaries),
center: defaultCenter,
// resizeEnable: true,
disableSocket: true,
viewMode: '3D',
showLabel: true,
// labelzIndex: 110,
pitch: 8,
zoom: 9,
//mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
});
//添加边界线
addPolyline(result.districtList[0].boundaries);
//自定义右键菜单
new ContextMenu(map);
}
})
}
/**
* 添加地图mask 显示特定区域地图
* @returns {Array}
*/
export function addMask(bounds) {
let mask = [];
for (let i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]]);
}
return mask;
}
/**
* 添加边界线
* @param bounds
*
*/
export function addPolyline(bounds) {
for (let i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: '#0088ff',
strokeWeight: 5,
strokeOpacity: 7,
map: map,
});
}
}
/**
* 自定义菜单类
* @param map
* @constructor
*/
export function ContextMenu(map) {
var me = this;
//地图中添加鼠标工具MouseTool插件
this.mouseTool = new AMap.MouseTool(map);
this.contextMenuPositon = null;
var content = [];
content.push('<div class="layui-card" style="width: 560px;">');
content.push('<div class="form-header">资源搜索</div>');
content.push('<div class="layui-card-body">');
content.push(' <form class="layui-form">');
content.push(' <div class="layui-form-item">');
content.push(
' <div class="layui-input-inline" style="width: 120px;"><input type="text" name="distance" autocomplete="off" placeholder="范围半径" class="layui-input" onkeyup="this.value=this.value.replace(/[^0-9-]+/,\'\')" /></div>',
);
content.push(' <div class="layui-form-mid layui-word-aux">米</div>');
content.push(
' <div class="layui-input-inline"><input type="text" name="keywords" autocomplete="off" placeholder="请输入关键字" class="layui-input" /></div>',
);
content.push(
' <div class="layui-input-inline" style="width:auto;"><button type="button" onclick="menu.viewResources(this)" class="blue-btn">立即搜索</button><button class="blue-btn" type="button" onclick="menu.clearMap()">清屏</button></div>',
);
content.push(' </div>');
content.push(' </form>');
content.push('</div>');
content.push('</div>');
//通过content自定义右键菜单内容
this.contextMenu = new AMap.ContextMenu({ isCustom: true, content: content.join('') });
//地图绑定鼠标右击事件——弹出右键菜单
map.on('rightclick', function (e) {
me.contextMenu.open(map, e.lnglat);
me.contextMenuPositon = e.lnglat;
});
}
ContextMenu.prototype.clearMap = function () {
map.clearMap();
};
ContextMenu.prototype.viewResources = function (self) {
this.mouseTool.close();
map.setCenter(this.contextMenuPositon);
var distance = $(self).closest('form').find('input[name="distance"]').val();
var keywords = $(self).closest('form').find('input[name="keywords"]').val();
if (distance >= 1) {
buildRadar(this.contextMenuPositon, distance);
scan();
}
map.clearMap();
mapSearch(
{
distance: distance / 1000,
keywords: keywords,
latitude: this.contextMenuPositon.lat,
longitude: this.contextMenuPositon.lng,
},
() => {
var searchTimer = setTimeout(() => {
clearTimeout(searchTimer);
object3Dlayer.remove(radar);
renderCircle(this.contextMenuPositon, distance);
}, 3000);
},
);
this.contextMenu.close();
};
gassafety-web/src/views/enterprise/map/index.vue
View file @ 33280f5b
......@@ -4,13 +4,40 @@
</div>
</template>
<script>
import { initMap } from "utils/map.js";
import gaodeMap from "utils/gaodeMap.js"
import {map} from "utils/gaodeMap.js"
export default {
data() {
return {};
return {
map : null
};
},
mounted() {
initMap();
let gaoMap = new gaodeMap("石家庄");
let lnglats = [
[114.497949,38.121129],
[114.595972,38.114511],
[114.443193,37.990963],
[114.588419,37.969449],
[114.522668,38.042962],
[114.383966,38.091548]
];
gaoMap.addMarker(lnglats)
let path = [
[
[114.534792,38.022417],
[114.544748,38.073245],
[114.58114,38.066218],
[114.593843,38.040265]
],
[
[114.508699,38.082434],
[114.559167,38.087298],
[114.628175,38.049457],
[114.543718,38.021605]
]
]
gaoMap.addPolyline(path);
}
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment