import forOwn from 'lodash/forOwn'; import isEqual from 'lodash/isEqual'; import isNil from 'lodash/isNil'; //import loadjscssfile from './loadScript'; import APILoader from './APILoader'; export var loadApi = function loadApi() { var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '0325e3d6d69cd56de4980b4f28906fd8'; return new APILoader({ key: key, useAMapUI: false, version: '1.4.7', protocol: 'https' }).load(); }; export var loadMap = function loadMap(key) { return new Promise(function (resolve, reject) { if (window.AMap) { resolve(window.AMap); } loadApi(key).then(function (ret) { if (window.AMap) { resolve(window.AMap); } else { reject(new Error('window.AMap不存在!')); } }).catch(function (error) { reject(new Error('加载地图错误!' + error.message)); }); }); }; // export const loadApiV1 = async (key = '0325e3d6d69cd56de4980b4f28906fd8') => { // return await loadjscssfile( // 'https://webapi.amap.com/maps?v=1.4.7&key=' + key, // 'js' // ); // }; // export const loadMapV1 = key => { // return new Promise((resolve, reject) => { // if (window.AMap) { // resolve(window.AMap); // } // loadApi(key) // .then(ret => { // if (window.AMap) { // resolve(window.AMap); // } else { // reject(new Error('window.AMap不存在!')); // } // }) // .catch(error => { // reject(new Error('加载地图错误!' + error.message)); // }); // }); // }; /** * [加载插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) * 加载完成后,可以调用: * var toolbar = new AMap.ToolBar(); * map.addControl(toolbar); * @param {string} name 插件名或插件数组,如:AMap.ToolBar,['AMap.ToolBar','AMap.Driving'] */ export var loadPlugin = function loadPlugin(name) { return new Promise(function (resolve, reject) { if (window.AMap) { window.AMap.plugin(name, function () { resolve(true); }); //是否有加载失败的情况,如果加载失败,怎么reject? } else { reject(new Error('地图还未加载!')); } }); }; //////////////////////////////////////////////////////////// // Map //////////////////////////////////////////////////////////// export var createMap = function createMap(AMap, dom, options, events) { var __func__ = 'createMap'; if (!AMap) { console.log(__func__, 'fail! no AMap!'); return null; } if (!dom) { console.log(__func__, 'fail! no dom!'); return null; } var map = new AMap.Map(dom, babelHelpers.extends({}, options || {})); forOwn(events, function (value, key) { console.log(__func__, 'event on ' + key); map.on(key, value); }); console.log(__func__, 'ok!'); return map; }; export var commonUpdate = function commonUpdate(entity, newOptions, newEvents, oldOptions, oldEvents, operators) { var __func__ = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'commonUpdate'; // const __func__ = 'commonUpdate'; if (!entity) { console.log(__func__, 'fail! no entity!'); return false; } // 找到改变的属性集合,包含添加,删除及修改的属性,删除的置为null var props = {}; if (newOptions != oldOptions) { oldOptions && forOwn(oldOptions, function (value, key) { // 找到改变的旧属性,用新属性取代 var newValue = newOptions && newOptions[key]; if (!isEqual(newValue, value)) { if (!(isNil(newValue) && isNil(value))) props[key] = newValue; } }); newOptions && forOwn(newOptions, function (value, key) { // 找到新加的属性,添加进去 var oldValue = oldOptions && oldOptions[key]; if (isNil(oldValue) && !isNil(value)) { props[key] = value; } }); } // 找到改变的事件集合,包含添加,删除及修改的事件处理函数,删除的置为null var events = {}; if (newEvents != oldEvents) { oldEvents && forOwn(oldEvents, function (value, key) { // 找到改变的旧属性,用新属性取代 var newValue = newEvents && newEvents[key]; if (!isEqual(newValue, value)) { if (!(isNil(newValue) && isNil(value))) events[key] = newValue; } }); newEvents && forOwn(newEvents, function (value, key) { // 找到新加的属性,添加进去 var oldValue = oldEvents && oldEvents[key]; if (isNil(oldValue) && !isNil(value)) { events[key] = value; } }); } // let operators = { // map: v => entity.setMap(v), // position: v => entity.setPosition(v), // offset: v => entity.setOffset(v), // icon: v => entity.setIcon(v), // content: v => entity.setContent(v), // topWhenClick: null, // bubble: null, // draggable: v => entity.setDraggable(v), // raiseOnDrag: null, // cursor: v => entity.setCursor(v), // visible: null, // zIndex: v => entity.setzIndex(v), // angle: v => entity.setAngle(v), // autoRotation: null, // animation: v => entity.setAnimation(v), // shadow: v => entity.setShadow(v), // title: v => entity.setTitle(v), // clickable: v => entity.setClickable(v), // shape: v => entity.setShape(v), // extData: v => entity.setExtData(v), // label: v => entity.setLabel(v) // }; forOwn(props, function (value, key) { if (value) { var func = operators[key]; if (func) { func(value); } else { // ignore properties can not set. console.log(__func__, 'warning! no setter! can not update ' + key); } } else { // key removed, not support! console.log(__func__, 'warning! remove prop not support! key=' + key); } }); forOwn(events, function (value, key) { var oldFunc = oldEvents && oldEvents[key]; if (oldFunc) { entity.off(key, oldFunc); } if (value) { entity.on(key, value); } }); console.log(__func__, 'update:', props, events // newOptions, // newEvents, // oldOptions, // oldEvents ); return true; }; export var updateMap = function updateMap(map, newOptions, newEvents, oldOptions, oldEvents) { var operators = { view: null, layers: function layers(v) { return map.setLayers(v); }, zoom: function zoom(v) { return map.setZoom(v); }, center: function center(v) { return map.setCenter(v); }, labelzIndex: function labelzIndex(v) { return map.setlabelzIndex(v); }, zooms: null, lang: function lang(v) { return map.setLang(v); }, defaultCursor: function defaultCursor(v) { return map.setDefaultCursor(v); }, crs: null, animateEnable: null, isHotspot: function isHotspot(v) { return map.setStatus({ isHotspot: v }); }, defaultLayer: function defaultLayer(v) { return map.setDefaultLayer(v); }, rotateEnable: null, resizeEnable: null, showIndoorMap: null, indoorMap: null, expandZoomRange: null, dragEnable: function dragEnable(v) { return map.setStatus({ dragEnable: v }); }, zoomEnable: null, doubleClickZoom: function doubleClickZoom(v) { return map.setStatus({ doubleClickZoom: v }); }, keyboardEnable: function keyboardEnable(v) { return map.setStatus({ keyboardEnable: v }); }, jogEnable: null, scrollWheel: null, touchZoom: null, touchZoomCenter: null, mapStyle: function mapStyle(v) { return map.setMapStyle(v); }, features: function features(v) { return map.setFeatures(v); }, showBuildingBlock: null, viewMode: null, pitch: function pitch(v) { return map.setPitch(v); }, pitchEnable: null, buildAnimation: null, skyColor: null, preloadMode: null }; return commonUpdate(map, newOptions, newEvents, oldOptions, oldEvents, operators, 'updateMap'); }; //////////////////////////////////////////////////////////// // Marker //////////////////////////////////////////////////////////// /** * * @param {*} AMap * @param {*} map * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom * @param {*} events */ export var createMarker = function createMarker(AMap, options, events) { var __func__ = 'createMarker'; if (!AMap) { console.log(__func__, 'fail! no AMap!'); return null; } if (!options) { console.log(__func__, 'fail! no options!'); return null; } if (!options.map) { console.log(__func__, 'fail! no options.map!'); return null; } // let marker = new AMap.Marker({ // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // position: [116.405467, 39.907761] // }); // marker.setMap(map); var entity = new AMap.Marker(options); forOwn(events, function (value, key) { entity.on(key, value); }); console.log(__func__, 'ok!'); return entity; }; export var updateMarker = function updateMarker(entity, newOptions, newEvents, oldOptions, oldEvents) { var operators = { map: function map(v) { return entity.setMap(v); }, position: function position(v) { return entity.setPosition(v); }, offset: function offset(v) { return entity.setOffset(v); }, icon: function icon(v) { return entity.setIcon(v); }, content: function content(v) { return entity.setContent(v); }, topWhenClick: null, bubble: null, draggable: function draggable(v) { return entity.setDraggable(v); }, raiseOnDrag: null, cursor: function cursor(v) { return entity.setCursor(v); }, visible: null, zIndex: function zIndex(v) { return entity.setzIndex(v); }, angle: function angle(v) { return entity.setAngle(v); }, autoRotation: null, animation: function animation(v) { return entity.setAnimation(v); }, shadow: function shadow(v) { return entity.setShadow(v); }, title: function title(v) { return entity.setTitle(v); }, clickable: function clickable(v) { return entity.setClickable(v); }, shape: function shape(v) { return entity.setShape(v); }, extData: function extData(v) { return entity.setExtData(v); }, label: function label(v) { return entity.setLabel(v); } }; return commonUpdate(entity, newOptions, newEvents, oldOptions, oldEvents, operators, 'updateMarker'); }; //////////////////////////////////////////////////////////// // MassMarks, warning! is a layer! //////////////////////////////////////////////////////////// /** * * @param {*} AMap * @param {*} map * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom * @param {*} events */ var createMassMarks = function createMassMarks(AMap, options, events) { var __func__ = 'createMassMarks'; if (!AMap) { console.log(__func__, 'fail! no AMap!'); return null; } if (!options) { console.log(__func__, 'fail! no options!'); return null; } var map = options.map, data = options.data, restOpts = babelHelpers.objectWithoutProperties(options, ['map', 'data']); var entity = new AMap.MassMarks(data, restOpts); forOwn(events, function (value, key) { entity.on(key, value); }); if (map) { entity.setMap(map); } console.log(__func__, 'ok!'); return entity; }; export { createMassMarks }; export var updateMassMarks = function updateMassMarks(entity, newOptions, newEvents, oldOptions, oldEvents) { var operators = { zIndex: function zIndex(v) { return entity.setzIndex(v); }, opacity: null, zooms: null, cursor: function cursor(v) { return entity.setCursor(v); }, alwaysRender: null, style: function style(v) { return entity.setStyle(v); }, map: function map(v) { return entity.setMap(v); }, data: function data(v) { return entity.setData(v); } }; return commonUpdate(entity, newOptions, newEvents, oldOptions, oldEvents, operators, 'updateMassMarks'); }; //////////////////////////////////////////////////////////// // Polygon //////////////////////////////////////////////////////////// /** * * @param {*} AMap * @param {*} map * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom * @param {*} events */ export var createPolygon = function createPolygon(AMap, options, events) { var __func__ = 'createPolygon'; if (!AMap) { console.log(__func__, 'fail! no AMap!'); return null; } if (!options) { console.log(__func__, 'fail! no options!'); return null; } if (!options.map) { console.log(__func__, 'fail! no options.map!'); return null; } var entity = new AMap.Polygon(options); forOwn(events, function (value, key) { entity.on(key, value); }); console.log(__func__, 'ok!'); return entity; }; export var updatePolygon = function updatePolygon(entity, newOptions, newEvents, oldOptions, oldEvents) { var operators = { map: function map(v) { return entity.setMap(v); }, zIndex: function zIndex(v) { return entity.setzIndex(v); }, path: function path(v) { return entity.setPath(v); }, bubble: null, cursor: null, strokeColor: null, strokeOpacity: null, strokeWeight: null, fillColor: null, fillOpacity: null, draggable: null, extData: function extData(v) { return entity.setExtData(v); }, strokeStyle: null, strokeDasharray: null, options: function options(v) { return entity.setOptions(v); } }; return commonUpdate(entity, newOptions, newEvents, oldOptions, oldEvents, operators, 'updatePolygon'); }; //////////////////////////////////////////////////////////// // Polyline //////////////////////////////////////////////////////////// /** * * @param {*} AMap * @param {*} map * @param {*} options 如果有dom用来显示,则其中的content字段即被填充为dom,不再用独立参数表示dom * @param {*} events */ export var createPolyline = function createPolyline(AMap, options, events) { var __func__ = 'createPolyline'; if (!AMap) { console.log(__func__, 'fail! no AMap!'); return null; } if (!options) { console.log(__func__, 'fail! no options!'); return null; } if (!options.map) { console.log(__func__, 'fail! no options.map!'); return null; } var entity = new AMap.Polyline(options); forOwn(events, function (value, key) { entity.on(key, value); }); console.log(__func__, 'ok!'); return entity; }; export var updatePolyline = function updatePolyline(entity, newOptions, newEvents, oldOptions, oldEvents) { var operators = { map: function map(v) { return entity.setMap(v); }, zIndex: function zIndex(v) { return entity.setzIndex(v); }, bubble: null, cursor: null, gedodesic: null, isOutline: null, borderWeight: null, outlineColor: null, path: function path(v) { return entity.setPath(v); }, strokeColor: null, strokeOpacity: null, strokeWeight: null, strokeStyle: null, strokeDasharray: null, lineJoin: null, lineCap: null, draggable: null, extData: function extData(v) { return entity.setExtData(v); }, showDir: null, options: function options(v) { return entity.setOptions(v); } }; return commonUpdate(entity, newOptions, newEvents, oldOptions, oldEvents, operators, 'updatePolyline'); };