399 lines
14 KiB
JavaScript
399 lines
14 KiB
JavaScript
(function () {
|
|
|
|
function SuperMap(mapContainerId, mapBox, options) {
|
|
this.mapBox = mapBox;
|
|
this.map = L.map(mapContainerId, {
|
|
crs: options.crs ? options.crs : L.CRS.EPSG3857,
|
|
center: options.center ? options.center : {lat: 0, lon: 0},
|
|
maxZoom: options.maxZoom ? options.maxZoom : 18,
|
|
zoom: options.zoom ? options.zoom : 6,
|
|
boxZoom: options.boxZoom ? options.boxZoom : false,
|
|
scrollWheelZoom: options.scrollWheelZoom ? options.scrollWheelZoom : true,
|
|
dragging: options.dragging ? options.dragging : true,
|
|
doubleClickZoom: options.doubleClickZoom ? options.doubleClickZoom : false,
|
|
zoomControl: options.zoomControl ? options.zoomControl : false
|
|
});
|
|
this.gridLayer = null;
|
|
this.gridBGLayer = null;
|
|
this.gridColor = '#000000';
|
|
this.colorOption = {
|
|
isEditColor: false,
|
|
edit: {r: 0, g: 0, b: 0},
|
|
const: {
|
|
COLOR_BOX_ID: 'B_COLOR_BOX',
|
|
COLOR_SHOW_BOX_ID: 'B_SHOW_COLOR_BOX',
|
|
COLOR_R: 'B_COLOR_R',
|
|
COLOR_G: 'B_COLOR_G',
|
|
COLOR_B: 'B_COLOR_B',
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* 初始化
|
|
* @param baseLayerUrl
|
|
*/
|
|
SuperMap.prototype.init = function (baseLayerUrl) {
|
|
var map = this.map;
|
|
L.control.zoom().addTo(map);
|
|
L.control.scale().addTo(map);
|
|
L.supermap.tiledMapLayer(baseLayerUrl, {noWrap: true}).addTo(map);
|
|
}
|
|
|
|
/**
|
|
* 初始化绘制面
|
|
*/
|
|
SuperMap.prototype.initDrawPolygon = function () {
|
|
var self = this;
|
|
self.gridLayer = L.featureGroup([]).addTo(self.map);
|
|
self.gridBGLayer = L.layerGroup([]).addTo(self.map);
|
|
self.map.pm.setLang('zh');
|
|
self.map.pm.addControls({
|
|
positions: {
|
|
draw: 'topleft',
|
|
edit: 'topleft',
|
|
custom: '',
|
|
options: ''
|
|
},
|
|
drawCircle: false,
|
|
drawMarker: false,
|
|
drawCircleMarker: false,
|
|
drawPolyline: false,
|
|
drawRectangle: false,
|
|
drawPolygon: true,
|
|
|
|
editMode: true,
|
|
dragMode: true,
|
|
cutPolygon: false,
|
|
removalMode: true,
|
|
rotateMode: true,
|
|
// 工具栏是否一个块
|
|
oneBlock: false,
|
|
drawControls: true,
|
|
editControls: false,
|
|
customControls: false,
|
|
optionsControls: false,
|
|
pinningOption: false,
|
|
snappingOption: false,
|
|
splitMode: true,
|
|
scaleMode: true
|
|
});
|
|
self.map.pm.Toolbar.createCustomControl({
|
|
name: '修改颜色',
|
|
block: 'custom',
|
|
title: '修改颜色',
|
|
className: '',
|
|
onClick: function (e) {
|
|
var colorBox = document.getElementById(self.colorOption.const.COLOR_BOX_ID);
|
|
colorBox.style.left = '50px';
|
|
colorBox.style.top = '225px';
|
|
if (!self.colorOption.isEditColor) {
|
|
colorBox.style.display = 'block';
|
|
} else {
|
|
colorBox.style.display = 'none';
|
|
}
|
|
self.colorOption.isEditColor = !self.colorOption.isEditColor;
|
|
},
|
|
toggle: true
|
|
});
|
|
self.map.pm.setPathOptions({
|
|
color: '#000000',
|
|
fillColor: '#000000',
|
|
fillOpacity: 0.4,
|
|
});
|
|
self.map.on('pm:create', function (e) {
|
|
self.map.pm.addControls({
|
|
drawControls: false,
|
|
editControls: true,
|
|
customControls: true
|
|
});
|
|
self.gridLayer.addLayer(e.layer);
|
|
e.layer.on('pm:edit', function (e) {
|
|
});
|
|
});
|
|
self.map.on('pm:remove', function (e) {
|
|
self.map.pm.addControls({
|
|
drawControls: true,
|
|
editControls: false,
|
|
customControls: false
|
|
});
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 初始化网格背景
|
|
* @param gridArray
|
|
*/
|
|
SuperMap.prototype.initGridBG = function (gridArray) {
|
|
for (var i = 0, item; item = gridArray[i++];) {
|
|
this.gridBGLayer.addLayer(this.drawPolygon(item.pointArray, item.fillColor, null));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 初始化网格
|
|
* @param polygonArray
|
|
* @param color
|
|
* @param popup
|
|
*/
|
|
SuperMap.prototype.initEditGrid = function (gridArray) {
|
|
for (var i = 0, item; item = gridArray[i++];) {
|
|
var pointArray = [];
|
|
for (var j = 0, jItem; jItem = item.pointArray[j++];) {
|
|
pointArray.push([jItem.lat, jItem.lng]);
|
|
}
|
|
this.gridLayer.addLayer(this.drawPolygon(pointArray, item.fillColor, null));
|
|
}
|
|
if (gridArray.length == 0) {
|
|
return;
|
|
}
|
|
// 标记编辑
|
|
this.map.pm.addControls({
|
|
drawControls: false,
|
|
editControls: true,
|
|
customControls: true
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 获取编辑网格层
|
|
* @returns 网格点数组
|
|
*/
|
|
SuperMap.prototype.getEditGridLayer = function () {
|
|
return this.gridLayer.getLayers();
|
|
}
|
|
|
|
/**
|
|
* 设置编辑网格颜色
|
|
* @param color
|
|
*/
|
|
SuperMap.prototype.setEditGridLayerColor = function (color) {
|
|
this.gridColor = color;
|
|
var layers = this.getEditGridLayer();
|
|
for (var i = 0, layer; layer = layers[i++];) {
|
|
layer.setStyle({
|
|
color: color,
|
|
fillColor: color,
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 获取编辑网格颜色
|
|
* @returns {string}
|
|
*/
|
|
SuperMap.prototype.getGridColor = function () {
|
|
return this.gridColor;
|
|
}
|
|
|
|
/**
|
|
* 清空网格背景
|
|
*/
|
|
SuperMap.prototype.removeGridBG = function () {
|
|
this.gridBGLayer.clearLayers();
|
|
}
|
|
|
|
/**
|
|
* 获取map
|
|
* @returns {*}
|
|
*/
|
|
SuperMap.prototype.getMap = function () {
|
|
return this.map;
|
|
}
|
|
|
|
/**
|
|
* 绘制面
|
|
* @param polygonArray [{lat, lng}]
|
|
* @param color 颜色
|
|
* @param popup 点击显示内容
|
|
* @returns polygonLayer
|
|
*/
|
|
SuperMap.prototype.drawPolygon = function (polygonArray, color, popup) {
|
|
if (!popup) {
|
|
return L.polygon([polygonArray], {color: color}).addTo(this.map);
|
|
}
|
|
return L.polygon([polygonArray], {color: color}).bindPopup(popup).addTo(this.map);
|
|
}
|
|
|
|
/**
|
|
* 绘制标记
|
|
* @param point {lat, lng}
|
|
* @param popup 点击显示内容
|
|
* @returns markerLayer
|
|
*/
|
|
SuperMap.prototype.drawMarker = function (point, popup) {
|
|
if (!popup) {
|
|
return L.marker([point]).addTo(this.map);
|
|
}
|
|
return L.marker([point]).bindPopup(popup).addTo(this.map);
|
|
}
|
|
|
|
/**
|
|
* 绘制图标标记
|
|
* @param point {lat, lng}
|
|
* @param icon {url, width, height}
|
|
* @param popup 点击显示内容
|
|
* @returns markerLayer
|
|
*/
|
|
SuperMap.prototype.drawIconMarker = function (point, icon, popup) {
|
|
var iconWidth = icon.width ? icon.width : 64;
|
|
var iconHeight = icon.height ? icon.height : 64;
|
|
var icon = L.icon({
|
|
iconUrl: icon.url,
|
|
iconSize: [iconWidth, iconHeight],
|
|
iconAnchor: [iconWidth / 2, iconHeight],
|
|
popupAnchor: [0, -iconHeight],
|
|
});
|
|
if (!popup) {
|
|
return L.marker([point], {icon: icon}).addTo(this.map);
|
|
}
|
|
return L.marker([point], {icon: icon}).bindPopup(popup).addTo(this.map);
|
|
}
|
|
|
|
/**
|
|
* 绘制线
|
|
* @param pointArray 轨迹数组
|
|
* @param color 颜色
|
|
* @returns polylineLayer
|
|
*/
|
|
SuperMap.prototype.drawPolyline = function (pointArray, color) {
|
|
return L.polyline(pointArray, {color: color}).addTo(this.map);
|
|
}
|
|
|
|
/**
|
|
* 颜色RGB转16进制
|
|
* @param r
|
|
* @param g
|
|
* @param b
|
|
* @returns {string}
|
|
*/
|
|
SuperMap.prototype.colorRGBToHex = function (r, g, b) {
|
|
var red = parseInt(r, 10).toString(16);
|
|
red = red.length < 2 ? '0' + red : red;
|
|
var green = parseInt(g, 10).toString(16);
|
|
green = green.length < 2 ? '0' + green : green;
|
|
var blue = parseInt(b, 10).toString(16);
|
|
blue = blue.length < 2 ? '0' + blue : blue;
|
|
return "#" + red + green + blue;
|
|
}
|
|
|
|
/**
|
|
* 颜色16进制转RGB
|
|
* @param hex
|
|
* @returns {{r: number, b: number, g: number}}
|
|
*/
|
|
SuperMap.prototype.colorHexToRGB = function (hex) {
|
|
if (!hex) {
|
|
return {r: 0, g: 0, b: 0};
|
|
}
|
|
if (hex.indexOf('#') == 0) {
|
|
hex = hex.substring(1);
|
|
}
|
|
return {
|
|
r: parseInt(hex.substring(0, 2), 16),
|
|
g: parseInt(hex.substring(2, 4), 16),
|
|
b: parseInt(hex.substring(4, 6), 16)
|
|
}
|
|
}
|
|
|
|
// 颜色选择器
|
|
SuperMap.prototype.setShowColor = function () {
|
|
var self = this;
|
|
var colorShowBox = document.getElementById(self.colorOption.const.COLOR_SHOW_BOX_ID);
|
|
var hexColor = self.colorRGBToHex(self.colorOption.edit.r, self.colorOption.edit.g, self.colorOption.edit.b);
|
|
colorShowBox.style.backgroundColor = hexColor;
|
|
self.setEditGridLayerColor(hexColor);
|
|
}
|
|
// 设置颜色Input值
|
|
SuperMap.prototype.setColorInputValue = function (color) {
|
|
var self = this;
|
|
self.colorOption.edit = self.colorHexToRGB(color);
|
|
document.getElementById(self.colorOption.const.COLOR_R).value = self.colorOption.edit.r;
|
|
document.getElementById(self.colorOption.const.COLOR_G).value = self.colorOption.edit.g;
|
|
document.getElementById(self.colorOption.const.COLOR_B).value = self.colorOption.edit.b;
|
|
var colorShowBox = document.getElementById(self.colorOption.const.COLOR_SHOW_BOX_ID);
|
|
colorShowBox.style.backgroundColor = color;
|
|
}
|
|
|
|
/**
|
|
* 初始化颜色选择
|
|
*/
|
|
SuperMap.prototype.initColorOption = function () {
|
|
var self = this;
|
|
|
|
// 获取颜色选择器
|
|
function getColorInput(inputId, title, value) {
|
|
var colorInput = document.createElement('div');
|
|
colorInput.style.width = '100%';
|
|
colorInput.style.textAlign = 'center';
|
|
|
|
var colorInputInput = document.createElement('input');
|
|
colorInputInput.setAttribute('id', inputId);
|
|
colorInputInput.setAttribute('type', 'range');
|
|
colorInputInput.setAttribute('min', 0);
|
|
colorInputInput.setAttribute('max', 255);
|
|
colorInputInput.setAttribute('value', value);
|
|
colorInputInput.style.width = '100px';
|
|
colorInputInput.addEventListener('mousemove', function (event) {
|
|
self.colorOption.edit = {
|
|
r: document.getElementById(self.colorOption.const.COLOR_R).value,
|
|
g: document.getElementById(self.colorOption.const.COLOR_G).value,
|
|
b: document.getElementById(self.colorOption.const.COLOR_B).value
|
|
}
|
|
// 修改区域颜色
|
|
self.setShowColor();
|
|
});
|
|
var titleSpan = document.createElement('span');
|
|
titleSpan.appendChild(document.createTextNode(title));
|
|
colorInput.appendChild(titleSpan);
|
|
colorInput.appendChild(colorInputInput);
|
|
return colorInput;
|
|
}
|
|
|
|
// 颜色选BOX
|
|
function getColorInputBox() {
|
|
var colorInputBox = document.createElement('div');
|
|
colorInputBox.style.display = 'inline-block';
|
|
colorInputBox.style.width = '124px';
|
|
colorInputBox.style.verticalAlign = 'top';
|
|
|
|
var firstColorInput = getColorInput(self.colorOption.const.COLOR_R, '红', self.colorOption.edit.r);
|
|
firstColorInput.style.marginTop = '2px';
|
|
colorInputBox.appendChild(firstColorInput);
|
|
colorInputBox.appendChild(getColorInput(self.colorOption.const.COLOR_G, '绿', self.colorOption.edit.g));
|
|
colorInputBox.appendChild(getColorInput(self.colorOption.const.COLOR_B, '蓝', self.colorOption.edit.b));
|
|
return colorInputBox;
|
|
}
|
|
|
|
// 颜色BOX
|
|
function getColorBox(colorOptionBox) {
|
|
var colorBox = document.createElement('div');
|
|
colorBox.setAttribute('id', self.colorOption.const.COLOR_SHOW_BOX_ID);
|
|
colorBox.style.display = 'inline-block';
|
|
colorBox.style.width = '70px';
|
|
colorBox.style.height = '100%';
|
|
colorBox.style.borderRight = '1px solid silver';
|
|
colorBox.style.backgroundColor = self.colorRGBToHex(self.colorOption.edit.r, self.colorOption.edit.g, self.colorOption.edit.b);
|
|
return colorBox;
|
|
}
|
|
|
|
var colorOptionBox = document.createElement('div');
|
|
colorOptionBox.setAttribute('id', self.colorOption.const.COLOR_BOX_ID);
|
|
colorOptionBox.style.backgroundColor = '#FFFFFF';
|
|
colorOptionBox.style.display = 'none';
|
|
colorOptionBox.style.width = '210px';
|
|
colorOptionBox.style.height = '70px';
|
|
colorOptionBox.style.border = '1px solid silver';
|
|
colorOptionBox.style.position = 'absolute';
|
|
colorOptionBox.style.top = '0';
|
|
colorOptionBox.style.left = '0';
|
|
colorOptionBox.style.zIndex = 1000;
|
|
colorOptionBox.appendChild(getColorBox());
|
|
colorOptionBox.appendChild(getColorInputBox());
|
|
var mapContainer = document.getElementById(this.mapBox);
|
|
mapContainer.appendChild(colorOptionBox);
|
|
}
|
|
|
|
window.SuperMap = SuperMap;
|
|
|
|
})(); |