Commit d5fa099d authored by 郭铭瑶's avatar 郭铭瑶 🤘

地图网格功能暂存

parent d30cb1ef
......@@ -2,7 +2,7 @@
# Logs
logs
*.log
*.DS_Stores
*.DS_Store
npm-debug.log*
yarn-debug.log*
yarn-error.log*
......
......@@ -18,8 +18,11 @@
<!-- built files will be auto injected -->
</body>
<script src="./static/hls.js"></script>
<!-- 下面是开发用 -->
<script src="./static/SMap.min.js"></script>
<!-- 下面是生产用 -->
<!-- <script src="./static/esm/SMap.min.js"></script> -->
<script src="./static/Plugins.min.js"></script>
<script src="./static/GeoTask.min.js"></script>
</html>
......@@ -3,12 +3,13 @@
</template>
<script>
const {SMap, Plugins} = window
const {SMap, Plugins, GeoTask} = window
export default {
name: 'MonitorMap',
data() {
return {
map: null,
identifytask: null,
}
},
mounted() {
......@@ -31,6 +32,7 @@ export default {
// this.map.hideXQ_Poly()
this.map.hideXQ_Point()
this.map.hideMPZ()
this.addGridListener()
this.addListener()
this.$emit('complete')
})
......@@ -44,9 +46,66 @@ export default {
this.$emit('event', res.results[0].graphic.attributes)
}
})
const param = {
layerUniqueId: 'aaa',
url: 'http://10.81.71.243:23456/hmfmstest/gisshare/C/rest/services/YPZRWG/MapServer',
displayed: false, //查询接口是否在地图上显示
tolerance: 5,
geometry: eventParamter.mapPoint
}
this.identifytask.MapService(param).then(res => {
if (res.results && res.results.length > 0) {
this.$emit('grid', res.results[0].feature.attributes)
}
})
})
},
addGridListener() {
this.identifytask = new GeoTask.Identify(this.map.view)
// this.identifytask.on(SMap.MapEvent.pointermove, (result, geometry) => {
// console.log('----', result, geometry)
// if (geometry) {
// this.map.view.popup.defaultPopupTemplateEnabled = true
// this.map.view.popup.autoOpenEnabled = false
// this.map.view.popup.open({
// location: geometry,
// title: result.attributes.name,
// content: createContentpopup(result.attributes),
// })
// }
// })
},
addGrid(name) {
return SMap.load([
'esri/Map',
'esri/layers/FeatureLayer',
'esri/renderers/SimpleRenderer',
'esri/symbols/SimpleMarkerSymbol'
]).then(([, FeatureLayer]) => {
const gridLayer = new FeatureLayer({
url: 'http://10.81.71.243:23456/hmfmstest/gisshare/C/rest/services/YPZRWG/MapServer/0',
renderer: {
type: 'simple',
symbol: {
type: 'simple-fill',
color: 'rgba(255,235,59,.3)',
outline: {
// color: [128, 128, 128, 0.5],
color: [0, 0, 0, 1],
width: 2
}
}
},
definitionExpression: `所属街 = '${name}'`,
id: 'grid'
})
this.map.view.map.add(gridLayer)
return gridLayer
})
},
removeGrid() {
this.map.removeLayer('grid')
},
// 添加点
addPoint({key, data, labelKey = null, icon = 'test.png', size = 14, color}) {
if (!this.map) return
......
let BASE_URL = ''
let DATA_URL = ''
let VIDEO_URL = ''
switch (process.env.NODE_ENV) {
case 'production':
// BASE_URL = 'http://10.89.4.164:18080/api'
// VIDEO_URL = 'http://10.89.4.179:27343/api/v1/camera'
// VIDEO_URL = 'http://10.89.4.179:27343'
BASE_URL = 'http://yangpu.hm.omniview.pro/api'
VIDEO_URL = 'http://10.89.1.208:7000/hawkeye'
DATA_URL = 'http://10.89.1.208:10005'
break
default:
BASE_URL = 'http://yangpu.hm.omniview.pro/api'
VIDEO_URL = 'http://10.89.1.208:7000/hawkeye'
DATA_URL = 'http://10.89.1.208:10005'
}
export default {
......@@ -41,7 +43,7 @@ export default {
GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目
GET_TOILET_COUNT: '/dc/countToiletsByStreet', // 街道环卫公厕数目
GET_STREET_BASIC: '/dc/getStreetGridPowerByStreetGridId', // 街道基数
GET_VIDEO_URL: VIDEO_URL+'/api/v1/camera/', // 后面接id获取视频地址
GET_GRID_PERSON: '/dc/getStreetGridPowerByStreetGridId', // 网格人员信息
GET_VIDEO_URL: VIDEO_URL + '/api/v1/camera/', // 后面接id获取视频地址
GET_HEALTH_INFO: '/service-documents-ddd/public/property/health/degree', // 物业健康度
}
......@@ -26,7 +26,6 @@ export default {
dispatch('getDoneList')
dispatch('getHealthInfo')
// dispatch('getInspection')
// dispatch('getStreetBasic')
},
async getGreenInfo({commit}) {
const result = [
......@@ -187,10 +186,4 @@ export default {
// console.log('res --', res)
// })
// }
// getStreetBasic({commit}) { // 街道基数
// ajax.get({url: api.DATA_URL + api.GET_STREET_BASIC, params: {street: '五角场街道', gridId: 10027}}).then(res => {
// console.log('basic', com.confirm(res, 'data.content', {}))
// // commit('SET_STREET_BASIC', com.confirm(res, 'data.content', {}))
// })
// },
}
<template>
<div class="application">
<div v-for="item in list" :key="item.name" @click.prevent="handleClick(item.key)">
<div v-if="'all'==item.type">
<img :src="require(`@/assets/images/${item.icon}`)" />
<p>{{item.name}}</p>
</div>
<div v-if="$store.state.currentStreetInfo.id==item.type">
<template v-for="item in list">
<div
v-if="'all' == item.type || currentStreetInfo.name.indexOf(item.type) >= 0"
:key="item.name"
@click.prevent="handleClick(item.key, item.url)"
>
<img :src="require(`@/assets/images/${item.icon}`)" />
<p>{{item.name}}</p>
</div>
</div>
</template>
</div>
</template>
......@@ -23,20 +23,25 @@ export default {
{name: '派单系统', icon: 'app2.png', type: 'all'},
{name: '气象系统', icon: 'app3.png', type: 'all'},
{name: '网格系统', icon: 'app4.png', key: 'jumpGridPage', type: 'all'},
{name: '五角场商圈', icon: 'app5.png', type: '310110019000', key: 'jumpSpecicalPage'},
{name: '五角场商圈', icon: 'app5.png', type: '五角场', key: 'jumpSpecicalPage', url: 'https://test.chanchuang.jdcloud.com/shsq/index'},
{name: '一铺一档', icon: 'app5.png', type: '控江', key: 'jumpSpecicalPage', url: 'http://10.216.71.157/ypyd/#/MxbDataShow'},
]
}
},
computed: {
currentStreetInfo() {
return this.$store.state.currentStreetInfo
}
},
methods: {
handleClick(key) {
key && this[key]()
handleClick(key, url = '') {
key && this[key](url)
},
jumpSpecicalPage(){
const {specialUrl} = this.$store.state.currentStreetInfo
window.open(specialUrl)
jumpSpecicalPage(url){
url && window.open(url)
},
jumpGridPage() {
const {url} = this.$store.state.currentStreetInfo
const {url} = this.currentStreetInfo
window.open(url)
},
}
......@@ -47,11 +52,10 @@ export default {
.application
display flex
align-items center
justify-content space-around
>div
flex 1
text-align center
cursor pointer
padding 0 .05rem
&:hover
box-shadow 0 .3rem 0.1rem 0.05rem rgba(0,0,0,0.2)
img
......
......@@ -9,7 +9,7 @@
gap="0.05rem"
:complete="complete"
>
<m-map ref="map" @complete="mapComplete" @event="handleMapClick"/>
<m-map ref="map" @complete="mapComplete" @event="handleMapClick" @grid="handleGridClick" />
<m-title area="title" :bgImg="require('@/assets/images/title-bg.png')">{{currentStreetInfo.name}}城市运行平台</m-title>
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<LeftComponent v-show="!fullView" area="left"/>
......@@ -143,6 +143,7 @@ export default {
],
doneModal: false,
doneData: {},
gridLayer: null,
}
},
computed: {
......@@ -203,12 +204,14 @@ export default {
this.initMapFocus()
map.addPolygon({paths: this.$store.state.streetPaths[id], fillColor: 'rgba(51,145,255,.3)'})
map.addBoundary({name: name})
this.gridLayer = map.addGrid(this.currentStreetInfo.name)
},
initMapFocus() {
const {center} = this.currentStreetInfo
this.$refs.map.focus(...center, 5.5)
},
handleMapClick(data) {
if (!data) return
if (data.key === 'camera') {
const {deviceGbcode, deviceName} = data
this.$ajax.get({
......@@ -220,12 +223,23 @@ export default {
} else if (data.key === 'patrol') {
this.patrolData = data
this.patrolModal = true
} else {
} else if (data.key === 'smart') {
this.detailData = data
this.detailModal = true
}
// this.$refs.map.focus(data.x || data.gpsx, data.y || data.gpsy, 8)
},
handleGridClick(data) {
console.log('grid-click', data)
this.$refs.map.removeGrid()
// this.$ajax.get({
// url: this.$api.DATA_URL + this.$api.GET_GRID_PERSON,
// params: {street: this.currentStreetInfo.name, gridId: data['网格编']}
// }).then(res => {
// this.gridPersonList = this.$com.confirm(res, 'data.content', [])
// this.gridPersonModal = true
// })
},
handleListClick(data) {
if (this.handleCurTab === '处置中') {
this.detailData = data
......
!function (e, t) { "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : e.GeoTask = t() }(this, function () { "use strict"; var e = (t.prototype._addListener = function (e, t, i) { if (this.emit("newListener", e, t), this.events.has(e)) { var r = this.events.get(e); i ? r.unshift(t) : r.push(t) } else this.events.set(e, [t]); var n = this.getMaxListeners(); if (0 < n && this.listenerCount(e) > n) { var o = new Error("Possible EventEmitter memory leak detected.\n " + this.listenerCount(e) + " " + e.toString() + " listeners.\n Use emitter.setMaxListeners() to increase limit"); o.name = "MaxListenersExceededWarning", console.warn(o) } return this }, t.prototype.addListener = function (e, t) { return this._addListener(e, t, !1) }, t.prototype.emit = function (e) { for (var t = [], i = 1; i < arguments.length; i++)t[i - 1] = arguments[i]; if (this.events.has(e)) { for (var r = 0, n = this.events.get(e).slice(); r < n.length; r++) { var o = n[r]; try { o.apply(this, t) } catch (e) { this.emit("error", e) } } return !0 } if ("error" === e) throw 0 < t.length ? t[0] : Error("Unhandled error."); return !1 }, t.prototype.eventNames = function () { return Array.from(this.events.keys()) }, t.prototype.getMaxListeners = function () { return this.maxListeners || t.defaultMaxListeners }, t.prototype.listenerCount = function (e) { return this.events.has(e) ? this.events.get(e).length : 0 }, t.prototype._listeners = function (e, t, i) { if (!e.events.has(t)) return []; var r = e.events.get(t); return i ? this.unwrapListeners(r) : r.slice(0) }, t.prototype.unwrapListeners = function (e) { for (var t = new Array(e.length), i = 0; i < e.length; i++)t[i] = e[i].listener || e[i]; return t }, t.prototype.listeners = function (e) { return this._listeners(this, e, !0) }, t.prototype.rawListeners = function (e) { return this._listeners(this, e, !1) }, t.prototype.off = function (e, t) { return this.removeListener(e, t) }, t.prototype.on = function (e, t) { return this.addListener(e, t) }, t.prototype.once = function (e, t) { var i = this.onceWrap(e, t); return this.on(e, i), this }, t.prototype.onceWrap = function (e, t) { function i() { for (var e = [], t = 0; t < arguments.length; t++)e[t] = arguments[t]; this.context.removeListener(this.eventName, this.rawListener), this.listener.apply(this.context, e) } var r = { eventName: e, listener: t, rawListener: i, context: this }, n = i.bind(r); return (r.rawListener = n).listener = t, n }, t.prototype.prependListener = function (e, t) { return this._addListener(e, t, !0) }, t.prototype.prependOnceListener = function (e, t) { var i = this.onceWrap(e, t); return this.prependListener(e, i), this }, t.prototype.removeAllListeners = function (e) { var t = this; if (void 0 === this.events) return this; if (this.events.has(e)) { var i = this.events.get(e).slice(); this.events.delete(e); for (var r = 0, n = i; r < n.length; r++) { var o = n[r]; this.emit("removeListener", e, o) } } else this.eventNames().map(function (e) { t.removeAllListeners(e) }); return this }, t.prototype.removeListener = function (e, t) { if (this.events.has(e)) { var i = this.events.get(e); -1 !== i.indexOf(t) && (i.splice(i.indexOf(t), 1), this.emit("removeListener", e, t), 0 === i.length && this.events.delete(e)) } return this }, t.prototype.setMaxListeners = function (e) { return this.maxListeners = e, this }, t.defaultMaxListeners = 50, t); function t() { this.events = new Map } var d = (i.jsapi ="http://10.201.37.225:8080/smiapi/arcgis",i.jsapiversion4X="4.15",i);function i(){}var s=d.jsapiversion4X,n="next";function o(e){if(null===e&&(e=s),e.toString().toLowerCase()===n)return n;var t=e&&e.match(/^(\d)\.(\d+)/);return t&&{major:parseInt(t[1],10),minor:parseInt(t[2],10)}}function a(e){return void 0===e&&(e=s),d.jsapi+"/"+e+"/init.js"}function u(e){var t=document.createElement("link");return t.rel="stylesheet",t.href=e,t}function l(e,t){if(t){var i=document.querySelector(t);i.parentNode.insertBefore(e,i)}else document.head.appendChild(e)}function c(e){return document.querySelector('link[href*="'+e+'"]')}function p(e){return!e||o(e)?function(e){void 0===e&&(e=s),null===e&&(e=s);var t=a(e),i=t.substring(0,t.indexOf("init.js")),r=o(e);return r===n||3!==r.major?i+"esri/themes/light/main.css":i+(r.minor<=10?"js/":"")+"esri/css/esri.css"}(e):e}function h(e,t){var i=p(e),r=c(i);if(r||l(r=u(i),t),4===function(e){null===e&&(e=s);var t=e&&e.match(/^(\d)\.(\d+)/);return t&&{major:parseInt(t[1],10),minor:parseInt(t[2],10)}}(e).major){var n=i.substring(0,i.indexOf("esri/themes/"))+"esri/themes/gis/css/gis.css",o=c(n);o||l(o=u(n),t)}return r}var r={Promise:"undefined"!=typeof window?window.Promise:void 0},y={};function f(e,t,i){var r,n,o,s;i&&(o=i,s=function(e){o(e.error||new Error("There was an error attempting to load "+n.src)),n.removeEventListener("error",s,!1)},(n=e).addEventListener("error",s,!1),r=s);var a=function(){t(e),e.removeEventListener("load",a,!1),r&&e.removeEventListener("error",r,!1)};e.addEventListener("load",a,!1)}function v(){return document.querySelector("script[data-shsmi]")}function m(){var e=window.require;return e&&e.on}function w(e){void 0===e&&(e={});var u={};[y,e].forEach(function(e){for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(u[t]=e[t])});var l=u.version,c=u.url||a(l);return new r.Promise(function(e,t){var i,r,n=v();if(n){var o=n.getAttribute("src");o!==c?t(new Error("The ArcGIS API for JavaScript is already loaded ("+o+").")):m()?e(n):f(n,e,t)}else if(m())t(new Error("The ArcGIS API for JavaScript is already loaded."));else{var s=u.css;if(s)h(!0===s?l:s,u.insertCssBefore);else h(null,u.insertCssBefore);if(u.dojoConfig)window.dojoConfig=u.dojoConfig;else{var a={async:!0,packages:[{location:d.jsapi+"/extensions",name:"smiapi"},{location:d.jsapi+"/extensions/geolocation",name:"geolocate",main:"geolocate"}],deps:["@dojo/framework/shim/main"],has:{"esri-promise-compatibility":1,"esri-featurelayer-webgl":1}};window.dojoConfig=a}i=c,(r=document.createElement("script")).type="text/javascript",r.src=i,r.setAttribute("data-shsmi","loading"),f(n=r,function(){n.setAttribute("data-shsmi","loaded"),e(n)},t),document.head.appendChild(n)}})}function g(t){return new r.Promise(function(i,e){var r=window.require.on("error",e);window.require(t,function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];r.remove(),i(e)})})}function b(e,t){if(void 0===t&&(t={}),m())return g(e);var i=v(),r=i&&i.getAttribute("src");return!t.url&&r&&(t.url=r),w(t).then(function(){return g(e)})}var L=(x.prototype.S4=function(){return(65536*(1+Math.random())|0).toString(16).substring(1)},x.prototype.get_uuid=function(){return this.S4()+this.S4()+"-"+this.S4()+"-"+this.S4()+"-"+this.S4()+"-"+this.S4()+this.S4()+this.S4()},x);function x(){this.uuid=this.get_uuid()}var I=(k.maploaded="maploaded",k.zoomchanged="zoomchanged",k.extentchanged="extentchanged",k.centerchanged="centerchanged",k.blur="blur",k.click="click",k.doubleclick="doubleclick",k.drag="drag",k.focus="focus",k.hold="hold",k.keydown="key-down",k.keyup="key-up",k.mousewheel="mouse-wheel",k.pointerdown="pointer-down",k.pointerenter="pointer-enter",k.pointerleave="pointer-leave",k.pointermove="pointer-move",k.pointerup="pointer-up",k.resize="pointer-up",k.popupvisible="popup-visible",k);function k(){}var q,j,S=(q=function(e,t){return(q=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])})(e,t)},function(e,t){function i(){this.constructor=e}q(e,t),e.prototype=null===t?Object.create(t):(i.prototype=t.prototype,new i)}),_=function(e,s,a,u){return new(a=a||Promise)(function(i,t){function r(e){try{o(u.next(e))}catch(e){t(e)}}function n(e){try{o(u.throw(e))}catch(e){t(e)}}function o(e){var t;e.done?i(e.value):((t=e.value)instanceof a?t:new a(function(e){e(t)})).then(r,n)}o((u=u.apply(e,s||[])).next())})},P=function(i,r){var n,o,s,e,a={label:0,sent:function(){if(1&s[0])throw s[1];return s[1]},trys:[],ops:[]};return e={next:t(0),throw:t(1),return:t(2)},"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function t(t){return function(e){return function(t){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(s=2&t[0]?o.return:t[0]?o.throw||((s=o.return)&&s.call(o),0):o.next)&&!(s=s.call(o,t[1])).done)return s;switch(o=0,s&&(t=[2&t[0],s.value]),t[0]){case 0:case 1:s=t;break;case 4:return a.label++,{value:t[1],done:!1};case 5:a.label++,o=t[1],t=[0];continue;case 7:t=a.ops.pop(),a.trys.pop();continue;default:if(!(s=0<(s=a.trys).length&&s[s.length-1])&&(6===t[0]||2===t[0])){a=0;continue}if(3===t[0]&&(!s||t[1]>s[0]&&t[1]<s[3])){a.label=t[1];break}if(6===t[0]&&a.label<s[1]){a.label=s[1],s=t;break}if(s&&a.label<s[2]){a.label=s[2],a.ops.push(t);break}s[2]&&a.ops.pop(),a.trys.pop();continue}t=r.call(i,a)}catch(e){t=[6,e],o=0}finally{n=s=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}([t,e])}}},M=(S(E,j=e),E.prototype.MapService=function(d){return _(this,void 0,void 0,function(){var c,t=this;return P(this,function(e){switch(e.label){case 0:return c=null,[4,b(["esri/layers/GraphicsLayer","esri/Graphic","esri/tasks/IdentifyTask","esri/tasks/support/IdentifyParameters"]).then(function(e){var s=e[0],a=e[1],u=e[2],l=e[3];return _(t,void 0,void 0,function(){var t,i,r,n,o=this;return P(this,function(e){switch(e.label){case 0:return this.view?(t=null,d.layerUniqueId&&(i=this.view.map.findLayerById(d.layerUniqueId))&&(t=i.url),(t=t||d.url)?(r=new u(t),(n=new l).tolerance=void 0===d.tolerance?20:d.tolerance,n.layerIds=void 0===d.layerIds?["*"]:d.layerIds,n.geometry=d.geometry,n.mapExtent=this.view.extent,n.returnGeometry=!0,[4,r.execute(n).then(function(e){if(0<e.results.length&&d.displayed){var r=o.view.map.findLayerById(o.displayedLayerid);void 0===r&&(r=new s({title:o.displayedLayerid+"查询结果",id:o.displayedLayerid,listMode:"hide"}),o.view.map.add(r)),e.results.map(function(e){var t=null;t="point"===e.feature.geometry.type?d.marksymbol?d.marksymbol:{type:"simple-marker",style:"square",color:[255,0,0,.2],size:"8px",outline:{color:[255,0,0,1],width:1}}:"polyline"===e.feature.geometry.type?d.marksymbol?d.linesymbol:{type:"simple-line",color:[255,0,0,1],width:"2px",style:"short-dot"}:d.polygonsymbol?d.polygonsymbol:{type:"simple-fill",color:[255,255,255,.2],outline:{color:[255,0,0,1],width:"5px"}},e.feature.geometry.spatialReference=o.view.spatialReference;var i=new a({geometry:e.feature.geometry,attributes:e.feature.attributes,symbol:t});r.add(i)})}c=e})]):[2]):[2];case 1:return e.sent(),[2]}})})})];case 1:return e.sent(),[2,new r.Promise(function(e,t){e(c)})]}})})},E.prototype.FeatureService=function(u){return _(this,void 0,void 0,function(){var a,t=this;return P(this,function(e){switch(e.label){case 0:return a=null,[4,b(["esri/layers/GraphicsLayer","esri/Graphic","esri/layers/FeatureLayer"]).then(function(e){var o=e[0],s=e[1],r=e[2];return _(t,void 0,void 0,function(){var t,i,n=this;return P(this,function(e){switch(e.label){case 0:return this.view?(u.layerUniqueId&&(t=this.view.map.findLayerById(u.layerUniqueId)),t||u.url&&(t=new r({url:u.url,id:u.layerUniqueId,title:u.layerUniqueId,visible:!1}),this.view.map.add(t)),t?((i=t.createQuery()).geometry=u.geometry,[4,t.queryFeatures(i).then(function(e){if(0<e.features.length){if(u.displayed){var r=n.view.map.findLayerById(n.displayedLayerid);void 0===r&&(r=new o({title:n.displayedLayerid+"查询结果",id:n.displayedLayerid,listMode:"hide"}),n.view.map.add(r)),e.features.map(function(e){var t=null;t="point"===e.geometry.type?u.marksymbol?u.marksymbol:{type:"simple-marker",style:"square",color:[255,0,0,.2],size:"8px",outline:{color:[255,0,0,1],width:1}}:"polyline"===e.geometry.type?u.marksymbol?u.linesymbol:{type:"simple-line",color:[255,0,0,1],width:"2px",style:"short-dot"}:u.polygonsymbol?u.polygonsymbol:{type:"simple-fill",color:[255,255,255,.2],outline:{color:[255,0,0,1],width:"5px"}},e.geometry.spatialReference=n.view.spatialReference;var i=new s({geometry:e.geometry,attributes:e.attributes,symbol:t});r.add(i)})}a=e}})]):[2]):[2];case 1:return e.sent(),[2]}})})})];case 1:return e.sent(),[2,new r.Promise(function(e,t){e(a)})]}})})},E.prototype.SceneService=function(o){return _(this,void 0,void 0,function(){var n,t=this;return P(this,function(e){switch(e.label){case 0:return n=null,[4,b(["esri/layers/GraphicsLayer","esri/Graphic","esri/layers/SceneLayer"]).then(function(e){e[0],e[1];var r=e[2];return _(t,void 0,void 0,function(){var t,i;return P(this,function(e){switch(e.label){case 0:return this.view?(o.layerUniqueId&&(t=this.view.map.findLayerById(o.layerUniqueId)),t||o.url&&(t=new r({url:o.url,id:o.layerUniqueId,title:o.layerUniqueId,visible:!1}),this.view.map.add(t)),t?((i=t.createQuery()).geometry=o.geometry,[4,t.queryFeatures(i).then(function(e){0<e.features.length&&(console.log(e.features),n=e)})]):[2]):[2];case 1:return e.sent(),[2]}})})})];case 1:return e.sent(),[2,new r.Promise(function(e,t){e(n)})]}})})},E.prototype.remove=function(){var e=this.view.map.findLayerById(this.displayedLayerid);e&&this.view.map.remove(e)},E.prototype.show=function(){var e=this.view.map.findLayerById(this.displayedLayerid);e&&(e.visible=!0)},E.prototype.hide=function(){var e=this.view.map.findLayerById(this.displayedLayerid);e&&(e.visible=!1)},E.prototype.init=function(t){return _(this,void 0,void 0,function(){var r=this;return P(this,function(e){return this.displayedLayerid=(new L).uuid,this.view=t,this.view.on(I.click,function(i){r.view.hitTest(i).then(function(t){return _(r,void 0,void 0,function(){return P(this,function(e){return 0<t.results.length&&t.results[0].graphic.layer.id===this.displayedLayerid&&this.emit(I.click,t.results[0].graphic,i.mapPoint),[2]})})})}),this.view.on(I.pointermove,function(i){r.view.hitTest(i).then(function(t){return _(r,void 0,void 0,function(){return P(this,function(e){return 0<t.results.length&&t.results[0].graphic.layer.id===this.displayedLayerid&&this.emit(I.pointermove,t.results[0].graphic,this.view.toMap({x:i.x,y:i.y})),[2]})})})}),this.view.on(I.pointerenter,function(i){r.view.hitTest(i).then(function(t){return _(r,void 0,void 0,function(){return P(this,function(e){return 0<t.results.length&&t.results[0].graphic.layer.id===this.displayedLayerid&&this.emit(I.pointerenter,t.results[0].graphic,this.view.toMap({x:i.x,y:i.y})),[2]})})})}),this.view.on(I.pointerleave,function(i){r.view.hitTest(i).then(function(t){return _(r,void 0,void 0,function(){return P(this,function(e){return 0<t.results.length&&t.results[0].graphic.layer.id===this.displayedLayerid&&this.emit(I.pointerleave,t.results[0].graphic,this.view.toMap({x:i.x,y:i.y})),[2]})})})}),this.view.on(I.doubleclick,function(i){r.view.hitTest(i).then(function(t){return _(r,void 0,void 0,function(){return P(this,function(e){return 0<t.results.length&&t.results[0].graphic.layer.id===this.displayedLayerid&&this.emit(I.doubleclick,t.results[0].graphic,i.mapPoint),[2]})})})}),[2]})})},E);function E(e){var t=j.call(this)||this;return t.view=null,t.displayedLayerid="",t.init(e),t}var B=(T.shqxboundary="qx_boundary",T.shjdboundary="jd_boundary",T.shjwhboundary="jwh_boundary",T);function T(){}var U,G,O=(U=function(e,t){return(U=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])})(e,t)},function(e,t){function i(){this.constructor=e}U(e,t),e.prototype=null===t?Object.create(t):(i.prototype=t.prototype,new i)}),A=function(e,s,a,u){return new(a=a||Promise)(function(i,t){function r(e){try{o(u.next(e))}catch(e){t(e)}}function n(e){try{o(u.throw(e))}catch(e){t(e)}}function o(e){var t;e.done?i(e.value):((t=e.value)instanceof a?t:new a(function(e){e(t)})).then(r,n)}o((u=u.apply(e,s||[])).next())})},C=function(i,r){var n,o,s,e,a={label:0,sent:function(){if(1&s[0])throw s[1];return s[1]},trys:[],ops:[]};return e={next:t(0),throw:t(1),return:t(2)},"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function t(t){return function(e){return function(t){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(s=2&t[0]?o.return:t[0]?o.throw||((s=o.return)&&s.call(o),0):o.next)&&!(s=s.call(o,t[1])).done)return s;switch(o=0,s&&(t=[2&t[0],s.value]),t[0]){case 0:case 1:s=t;break;case 4:return a.label++,{value:t[1],done:!1};case 5:a.label++,o=t[1],t=[0];continue;case 7:t=a.ops.pop(),a.trys.pop();continue;default:if(!(s=0<(s=a.trys).length&&s[s.length-1])&&(6===t[0]||2===t[0])){a=0;continue}if(3===t[0]&&(!s||t[1]>s[0]&&t[1]<s[3])){a.label=t[1];break}if(6===t[0]&&a.label<s[1]){a.label=s[1],s=t;break}if(s&&a.label<s[2]){a.label=s[2],a.ops.push(t);break}s[2]&&a.ops.pop(),a.trys.pop();continue}t=r.call(i,a)}catch(e){t=[6,e],o=0}finally{n=s=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}([t,e])}}},F=(O(R,G=e),R.prototype.featureLayer=function(u){return A(this,void 0,void 0,function(){var a,t=this;return C(this,function(e){switch(e.label){case 0:return a=null,[4,b(["esri/layers/GraphicsLayer","esri/Graphic","esri/layers/FeatureLayer"]).then(function(e){var o=e[0],s=e[1],r=e[2];return A(t,void 0,void 0,function(){var t,i,n=this;return C(this,function(e){switch(e.label){case 0:return this.view?(u.layerUniqueId&&(t=this.view.map.findLayerById(u.layerUniqueId)),t||u.url&&(t=new r({url:u.url,id:u.layerUniqueId,title:u.layerUniqueId,visible:!1}),this.view.map.add(t)),t?(i=t.createQuery(),u.geometry&&(i.geometry=u.geometry),u.queryDefinition&&(i.where=u.queryDefinition),i.outFields=void 0===u.outFields?["*"]:u.outFields,[4,t.queryFeatures(i).then(function(e){if(0<e.features.length){var i,r=n.view.map.findLayerById(n.displayedLayerid);void 0===r&&(r=new o({title:n.displayedLayerid+"查询结果",id:n.displayedLayerid,listMode:"hide"}),n.view.map.add(r)),u.displayed&&(u.symbol?i=u.symbol:"polygon"===u.type?i={type:"simple-fill",color:[255,255,255,0],outline:{color:[255,0,0,1],width:"5px"}}:"polyline"===u.type?i={type:"simple-line",color:[255,0,0,0],width:"2px",style:"short-dot"}:"point"===u.type&&(i={type:"simple-marker",style:"square",color:[255,0,0,0],size:"8px",outline:{color:[255,0,0,0],width:1}}),e.features.map(function(e){e.geometry.spatialReference=n.view.spatialReference;var t=new s({geometry:e.geometry,attributes:e.attributes,symbol:i});r.add(t)})),a=e}})]):[2]):[2];case 1:return e.sent(),[2]}})})})];case 1:return e.sent(),[2,new r.Promise(function(e,t){e(a)})]}})})},R.prototype.mapImageLayer=function(p){return A(this,void 0,void 0,function(){var d,t=this;return C(this,function(e){switch(e.label){case 0:return d=null,[4,b(["esri/layers/GraphicsLayer","esri/Graphic","esri/tasks/QueryTask","esri/tasks/support/Query"]).then(function(e){var a=e[0],u=e[1],l=e[2],c=e[3];return A(t,void 0,void 0,function(){var t,i,r,n,o,s=this;return C(this,function(e){switch(e.label){case 0:return p.layerUniqueId&&(i=this.view.map.findLayerById(p.layerUniqueId))&&(t=i.url),(t=t||p.url)?(r=void 0===p.layerId?0:p.layerId,n=new l({url:t+"/"+r}),(o=new c).returnGeometry=!0,p.queryDefinition&&(o.where=p.queryDefinition),o.outFields=void 0===p.outFields?["*"]:p.outFields,p.geometry&&(o.geometry=p.geometry),[4,n.execute(o).then(function(e){if(0<e.features.length){var i,r=s.view.map.findLayerById(s.displayedLayerid);void 0===r&&(r=new a({title:s.displayedLayerid+"查询结果",id:s.displayedLayerid,listMode:"hide"}),s.view.map.add(r)),p.displayed&&(p.symbol?i=p.symbol:"polygon"===p.type?i={type:"simple-fill",color:[255,255,255,0],outline:{color:[255,0,0,1],width:"5px"}}:"polyline"===p.type?i={type:"simple-line",color:[255,0,0,0],width:"2px",style:"short-dot"}:"point"===p.type&&(i={type:"simple-marker",style:"square",color:[255,0,0,0],size:"8px",outline:{color:[255,0,0,0],width:1}}),e.features.map(function(e){e.geometry.spatialReference=s.view.spatialReference;var t=new u({geometry:e.geometry,attributes:e.attributes,symbol:i});r.add(t)})),d=e}})]):[2];case 1:return e.sent(),[2]}})})})];case 1:return e.sent(),[2,new r.Promise(function(e,t){e(d)})]}})})},R.prototype.remove=function(){var e=this.view.map.findLayerById(this.displayedLayerid);e&&this.view.map.remove(e)},R.prototype.show=function(){var e=this.view.map.findLayerById(this.displayedLayerid);e&&(e.visible=!0)},R.prototype.hide=function(){var e=this.view.map.findLayerById(this.displayedLayerid);e&&(e.visible=!1)},R.prototype.init=function(t){return A(this,void 0,void 0,function(){var r=this;return C(this,function(e){return this.displayedLayerid=(new L).uuid,this.view=t,this.view.on(I.click,function(i){r.view.hitTest(i).then(function(t){return A(r,void 0,void 0,function(){return C(this,function(e){return 0<t.results.length&&t.results[0].graphic.layer.id===this.displayedLayerid&&this.emit(I.click,t.results[0].graphic,i.mapPoint),[2]})})})}),this.view.on(I.pointermove,function(i){r.view.hitTest(i).then(function(t){return A(r,void 0,void 0,function(){return C(this,function(e){return 0<t.results.length&&t.results[0].graphic.layer.id===this.displayedLayerid&&this.emit(I.pointermove,t.results[0].graphic,this.view.toMap({x:i.x,y:i.y})),[2]})})})}),this.view.on(I.pointerenter,function(i){r.view.hitTest(i).then(function(t){return A(r,void 0,void 0,function(){return C(this,function(e){return 0<t.results.length&&t.results[0].graphic.layer.id===this.displayedLayerid&&this.emit(I.pointerenter,t.results[0].graphic,this.view.toMap({x:i.x,y:i.y})),[2]})})})}),this.view.on(I.pointerleave,function(i){r.view.hitTest(i).then(function(t){return A(r,void 0,void 0,function(){return C(this,function(e){return 0<t.results.length&&t.results[0].graphic.layer.id===this.displayedLayerid&&this.emit(I.pointerleave,t.results[0].graphic,this.view.toMap({x:i.x,y:i.y})),[2]})})})}),this.view.on(I.doubleclick,function(i){r.view.hitTest(i).then(function(t){return A(r,void 0,void 0,function(){return C(this,function(e){return 0<t.results.length&&t.results[0].graphic.layer.id===this.displayedLayerid&&this.emit(I.doubleclick,t.results[0].graphic,i.mapPoint),[2]})})})}),[2]})})},R);function R(e){var t=G.call(this)||this;return t.view=null,t.displayedLayerid="",t.init(e),t}return{load:b,Layers:B,Identify:M,Query:F}});
//# sourceMappingURL=GeoTask.min.js.map
# smap-xh
上海市测绘院地图API加载库,通过该API库实现上海测绘院地图数据加载显示(仅限上海市徐汇行政服务中心政务网可用)
## 注意事项
由于smap-xh 属于新版本api,同时支持二三维一体化,目前功能还不完善,内容同步更新中。
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/xh/map3d.png)
## 目录
- [安装](#安装)
- [使用](#使用)
- [以NPM包方式使用](#以NPM包方式使用)
- [以普通JS方式使用](#以普通JS方式使用)
- [示例](#示例)
- [地图](#地图)
- [生命周期](#生命周期)
- [创建二维地图](#创建二维地图)
- [创建三维地图](#创建三维地图)
- [地图样式](#地图样式)
- [地图样式-默认样式](#地图样式-默认样式)
- [地图样式-暗色样式](#地图样式-暗色样式)
- [地图样式-实景样式](#地图样式-实景样式)
- [业务图层开关](#业务图层开关)
- [业务数据名称(不断更新)](#业务数据名称(不断更新))
- [显示业务数据](#显示业务数据)
- [隐藏业务数据](#隐藏业务数据)
- [设置图层筛选条件](#设置图层筛选条件)
- [地图属性](#地图属性)
- [地图缩放级别控制](#地图缩放级别zooms控制)
- [地图是否可旋转](#地图是否可旋转)
- [三维建筑地块是否可见](#三维建筑地块是否可见)
[获取三维地图俯仰角](#[获取三维地图俯仰角)
- [设置三维地图俯仰角](#设置三维地图俯仰角)
- [获取地图中心点](#获取地图中心点)
- [获取地图级别](#获取地图级别)
- [设置地图中心点](#设置地图中心点)
- [设置地图级别](#设置地图级别)
- [设置地图级别和中心点](#设置地图级别和中心点)
- [获取地图比例尺](#获取地图比例尺)
- [设置地图旋转角度](#设置地图旋转角度)
- [获取地图显示范围](#获取地图显示范围)
- [设置地图显示范围](#设置地图显示范围)
- [地图平移-像素平移](#地图平移-像素平移)
- [地图平移-中心点平移](#地图平移-中心点平移)
- [地图放大](#地图放大)
- [地图放大](#地图缩小)
- [设置地图样式](#设置地图样式)
- [获取地图样式](#获取地图样式)
- [开启穿透地表](#开启穿透地表)
- [恢复地表模式](#恢复地表模式)
- [添加地图缩放范围限制](#添加地图缩放范围限制)
- [移除地图缩放范围限制](#移除地图缩放范围限制)
- [鼠标禁用](#鼠标禁用)
- [3d模式下二三维视角切换](#3d模式下二三维视角切换)
- [添加图层](#添加图层)
- [根据服务url添加图层](#根据服务url添加图层)
- [根据图层id获取图层](#根据图层id获取图层)
- [设置图层属性](#设置图层属性)
- [根据图层id删除图层](#根据图层id删除图层)
- [自定义地图控件主题](#自定义地图控件主题)
- [自定义地图控件主题-暗色主题](#自定义地图控件主题-暗色主题)
- [自定义地图控件主题-亮色主题](#自定义地图控件主题-亮色主题)
- [地图控件](#地图控件)
- [地图控件-Home](#地图控件-Home)
- [地图控件-Zoom](#地图控件-Zoom)
- [地图控件-Compass](#地图控件-Compass)
- [地图控件-Fullscreen](#地图控件-Fullscreen)
- [地图控件-LayerListControl](#地图控件-LayerListControl)
- [地图控件-MeasureLine](#地图控件-MeasureLine)
- [地图控件-MeasureArea](#地图控件-MeasureArea)
- [地图控件-BasemapToggle](#地图控件-BasemapToggle)
- [地图控件-UndergroundSwitch](#地图控件-UndergroundSwitch)
- [地图控件-BMapGallery](#地图控件-BMapGallery)
- [地图控件-BMapGalleryExpand](#地图控件-BMapGalleryExpand)
- [删除地图控件](#删除地图控件)
- [地图覆盖物](#地图覆盖物)
- [添加点状覆盖物](#添加点状覆盖物)
- [更新点状覆盖物](#更新点状覆盖物)
- [删除点状覆盖物](#删除点状覆盖物)
- [添加点状覆盖物多个](#添加点状覆盖物多个)
- [更新点状覆盖物多个](#更新点状覆盖物多个)
- [删除点状覆盖物多个](#删除点状覆盖物多个)
- [添加点状覆盖物组](#添加点状覆盖物组)
- [更新点状覆盖物组](#更新点状覆盖物组)
- [删除点状覆盖物组](#删除点状覆盖物组)
- [添加线状覆盖物](#添加线状覆盖物)
- [更新线状覆盖物](#更新线状覆盖物)
- [删除线状覆盖物](#删除线状覆盖物)
- [添加线状覆盖物多个](#添加线状覆盖物多个)
- [更新线状覆盖物多个](#更新线状覆盖物多个)
- [删除线状覆盖物多个](#删除线状覆盖物多个)
- [添加线状覆盖物组](#添加线状覆盖物组)
- [更新线状覆盖物组](#更新线状覆盖物组)
- [删除线状覆盖物组](#删除线状覆盖物组)
- [添加面状覆盖物](#添加面状覆盖物)
- [更新面状覆盖物](#更新面状覆盖物)
- [删除面状覆盖物](#删除面状覆盖物)
- [添加面状覆盖物多个](#添加面状覆盖物多个)
- [更新面状覆盖物多个](#更新面状覆盖物多个)
- [删除面状覆盖物多个](#删除面状覆盖物多个)
- [添加面状覆盖物组](#添加面状覆盖物组)
- [更新面状覆盖物组](#更新面状覆盖物组)
- [删除面状覆盖物组](#删除面状覆盖物组)
- [地图覆盖物More](#地图覆盖物More)
- [添加点状覆盖物](#添加点状覆盖物addfeature)
- [更新点状覆盖物](#更新点状覆盖物updatefeature)
- [删除点状覆盖物](#删除点状覆盖物removefeature)
- [添加点状覆盖物多个](#添加点状覆盖物多个addfeature)
- [更新点状覆盖物](#更新点状覆盖物多个updatefeature)
- [删除点状覆盖物多个](#删除点状覆盖物多个removefeature)
- [添加点状覆盖物组](#添加点状覆盖物组addfeature)
- [更新点状覆盖物组](#更新点状覆盖物组updatefeature)
- [删除点状覆盖物组](#删除点状覆盖物组removefeature)
- [地图事件](#地图事件)
- [地图事件列表](#地图事件列表)
- [地图zoom变化事件](#地图zoom变化事件)
- [地图加载完成事件](#地图加载完成事件)
- [地图范围变化事件](#地图范围变化事件)
- [地图中心点变化事件](#地图中心点变化事件)
- [地图失去焦点事件](#地图失去焦点事件)
- [地图单击事件](#地图单击事件)
- [地图双击事件](#地图双击事件)
- [地图拖拽事件](#地图拖拽事件)
- [地图聚焦事件](#地图聚焦事件)
- [地图按住事件](#地图按住事件)
- [地图键盘键按下事件](#地图键盘键按下事件)
- [地图键盘键弹起事件](#地图键盘键弹起事件)
- [地图鼠标和触摸滚动事件](#地图鼠标和触摸滚动事件)
- [地图鼠标或触摸按下事件](#地图鼠标或触摸按下事件)
- [地图鼠标进入或触摸开始事件](#地图鼠标进入或触摸开始事件)
- [地图鼠标离开和触摸结束事件](#地图鼠标离开和触摸结束事件)
- [地图鼠标移动和触摸操作事件](#地图鼠标移动和触摸操作事件)
- [地图鼠标释放和触摸结束事件](#地图鼠标释放和触摸结束事件)
- [地图控件大小变化事件](#地图控件大小变化事件)
## 安装
```bash
npm install smap-xh --save
```
## 使用
### [以NPM包方式使用]
```js
import SMap from 'smap-xh'
const map = new SMap.Map('container', {
viewMode: '3D',
center: [0, 0],
zoom: 5,
zooms: [1, 12],
pitch: 60,
mapStyle: 'smap://styles/dark', // 'smap://styles/normal' 'smap://styles/image'
showBuildingBlock: true,
appKey: '**********' // appkey
})
```
### [以普通JS方式使用]
```js
<script src="http://10.201.37.225:8080/smiapi/smap/SMap.min.js">
const smap = new SMap.Map('mapcontainer', {
viewMode: '2D',
center: [0, 0],
zoom: 5,
zooms: [1, 12],
mapStyle: 'smap://styles/dark', // 'smap://styles/normal' 'smap://styles/image'
})
```
## 示例
### [地图]
#### [生命周期]
##### [创建二维地图]
```js
import SMap from 'smap-xh'
const map = new SMap.Map('container', {
center: [0, 0],
zoom: 5
})
```
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/smiapi/ts/4x/2d/%E5%9C%B0%E5%9B%BE/%E5%9C%B0%E5%9B%BE%E5%88%9B%E5%BB%BA/mapcreate.png)
##### [创建三维地图]
```js
import SMap from 'smap-xh'
const map = new SMap.Map('container', {
viewMode: '3D',
center: [0, 0],
zoom: 4,
pitch:60
})
```
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/smiapi/ts/4x/3d/%E5%9C%B0%E5%9B%BE/%E5%9C%B0%E5%9B%BE%E5%88%9B%E5%BB%BA/mapcreate.png)
#### [地图样式]
##### [地图样式-默认样式]
```js
const map = new SMap.Map('container', {
viewMode: '2D',
center: [0, 0],
zoom: 4,
mapStyle: 'smap://styles/normal' //为赋值时候,默认为smap://styles/normal
})
```
##### [地图样式-暗色样式]
```js
const map = new SMap.Map('container', {
viewMode: '2D',
center: [0, 0],
zoom: 4,
mapStyle: 'smap://styles/dark'
})
```
##### [地图样式-实景样式]
```js
const map = new SMap.Map('container', {
viewMode: '2D',
center: [0, 0],
zoom: 4,
mapStyle: 'smap://styles/image'
})
```
#### [业务图层开关]
##### [业务数据名称(不断更新)]
```js
//"wg_gis_xq_point"为小区点,
//"wg_gis_xq_poly"为小区面,
//"wg_gis_mpz"为门牌幢点,
//"wg_gis_elevator"为电梯点,
//"wg_gis_sensor"为传感器
```
##### [显示业务数据]
```js
map.getLayer("wg_gis_xq_point").visible = true;//参数为业务数据名称
```
##### [隐藏业务数据]
```js
map.getLayer("wg_gis_xq_point").visible = false;//参数为业务数据名称
```
##### [设置图层筛选条件]
```js
//第一个参数为业务数据名称:
//第二个参数为筛选条件,与属性表对应正确的条件即可
this.map.setFilter("wg_gis_xq_point", "HPB_NAME = '黄浦区' or HPB_NAME = '虹口区' or HPB_NAME = '普陀区'");
this.map.setFilter("wg_gis_mpz", "HPB_NAME = '黄浦区' or HPB_NAME = '虹口区'");
this.map.setFilter("wg_gis_xq_poly", "HPB_NAME = '黄浦区'");
this.map.setFilter("wg_gis_elevator", "HPB_NAME = '黄浦区'");
this.map.setFilter("wg_gis_sensor", "SENSOR_TYPE_NAME = '智能水表'");
```
#### [地图属性]
##### [地图缩放级别zooms控制]
```js
const map = new SMap.Map('container', {
center: [0, 0],
zoom: 5,
zooms: [1, 9] //二三维都支持,默认最新小0,最大10 建议二维默认设置最小1,最大9
})
```
##### [地图是否可旋转]
```js
const map = new SMap.Map('container', {
center: [0, 0],
zoom: 5,
zooms: [1, 9]
rotateEnable: false //暂二维支持
})
```
##### [三维建筑地块是否可见]
```js
const map = new SMap.Map('container', {
center: [0, 0],
zoom: 5,
zooms: [1, 9]
showBuildingBlock: false, //三维地图可用,未赋值时候默认为true
})
```
##### [获取三维地图俯仰角]
```js
const pitch= map.getPitch()
```
##### [设置三维地图俯仰角]
```js
map.setPitch(30)
```
##### [获取地图中心点]
```js
const mapcenter = map.getCenter()
```
##### [获取地图级别]
```js
const zoom = map.getZoom()
```
##### [设置地图中心点]
```js
//2D
map.setCenter(00)
//3D
map.setCenter(00, 0)
```
##### [设置地图级别]
```js
map.setZoom(10)
```
##### [设置地图级别和中心点]
```js
//2D
map.setZoomAndCenter(10[0, 0])
//3D
map.setZoomAndCenter(10[0, 0, 0])
```
##### [获取地图比例尺]
```js
map.getScale()
```
##### [设置地图旋转角度]
```js
map.setRotation(90)
```
##### [获取地图显示范围]
```js
const bounds = map.getBounds()
```
##### [设置地图显示范围]
```js
//2D
const mybounds = new SMap.Bounds([-12244.941157, -6531.252646], [13155.109644,5811.584540]);
map.setBounds(mybounds);
//3D
const mybounds = new SMap.Bounds([-12244.941157, -6531.252646], [13155.109644,5811.584540]);
OR
const mybounds = new SMap.Bounds([-12244.941157, -6531.252646, 0], [13155.109644,5811.584540, 0]);
map.setBounds(mybounds);
```
##### [地图平移-像素平移]
```js
map.panBy(50, 100)
```
##### [地图平移-中心点平移]
```js
//2D
map.panTo(0, 0)
//3D
map.panTo(0, 0, 0) OR map.panTo(0, 0)
```
##### [地图放大]
```js
map.zoomIn()
```
##### [地图缩小]
```js
map.zoomOut()
```
##### [设置地图样式]
```js
map.setMapStyle('smap://styles/normal')
```
##### [获取地图样式]
```js
map.getMapStyle()
```
##### [开启穿透地表]
```js
map.enableThroughGround(true)
```
##### [恢复地表模式]
```js
map.enableThroughGround(false)
```
##### [添加地图缩放范围限制]
```js
this.map.setExtentConstrain([0, 0], [1000, 1000])
```
##### [移除地图缩放范围限制]
```js
map.removeExtentConstrain()
```
##### [鼠标禁用]
```js
map.enableMouseEvent(fasle)
```
##### [3d模式下二三维切换]
```js
map.switchMode('2d') //map.switchMode('3d')
```
#### [添加图层]
##### [根据服务url添加图层]
```js
layerType // 图层类型 MapImageLayer SceneLayer FeatureLayer TileLayer GraphicsLayer SHCTiledMapServiceLayer
layerUrl // 服务URl
isToken // 服务isToken
layerTitle // 服务title
layerId // 服务layerId
layerOpacity // 服务opacity
layerVisible // 服务visible
layerLabelsVisible // 服务labelsVisible 支持FeatureLayer
layerLabelingInfo // 服务labelingInfo 支持FeatureLayer
layerMaxScale // 服务maxScale
layerMinScale // 服务minScale
layerdefinitionExpression //服务过滤条件
layerelevationInfo // elevationInfo 支持FeatureLayer SceneLayer GraphicsLayer
layerPopupEnabled // 服务popupEnabled 支持FeatureLayer SceneLayer GraphicsLayer
layerPopupTemplate// 服务popupTemplate 支持FeatureLayer SceneLayer GraphicsLayer
layerRenderer // 服务renderer
layerSublayers // sublayers 支持支持MapImageLayer
```
```js
const SceneLayerparam = {
layerType: 'SceneLayer',
layerUrl: "http://10.201.37.220/server/rest/services/Hosted/LBJZ_ORIGIN/SceneServer",
layerTitle: "历保建筑原貌",
layerLayerId: "LBJZ_ORIGIN",
layerOpacity:1,
layerVisible:true,
layerMaxScale:1000,
layerMinScale:10000000,
layerPopupEnabled:true,
elevationInfo: {
mode: 'absolute-height',
offset: -2.5
}
}
this.map.addLayer(SceneLayerparam)
```
##### [根据图层id获取图层]
```js
smap.getLayer('LBJZ_ORIGIN')
```
##### [设置图层属性]
```js
layerId // 服务layerId
layerTitle // 服务title
layerOpacity // 服务opacity
layerVisible // 服务visible
layerLabelsVisible // 服务labelsVisible 支持FeatureLayer
layerLabelingInfo // 服务labelingInfo 支持FeatureLayer
layerMaxScale // 服务maxScale
layerMinScale // 服务minScale
layerdefinitionExpression //服务过滤条件
layerelevationInfo // elevationInfo 支持FeatureLayer SceneLayer GraphicsLayer
layerPopupEnabled // 服务popupEnabled 支持FeatureLayer SceneLayer GraphicsLayer
layerPopupTemplate// 服务popupTemplate 支持FeatureLayer SceneLayer GraphicsLayer
layerRenderer // 服务renderer
layerSublayers // sublayers 支持支持MapImageLayer
```
```js
const Layerpasrams = {
layerLayerId: "LBJZ_ORIGIN",
layerVisible:false
}
this.map.setLayerProperties(Layerpasrams) //修改图层LBJZ_ORIGIN的可见性为false
```
##### [根据图层id删除图层]
```js
smap.removeLayer('LBJZ_ORIGIN')
```
#### [自定义地图控件主题]
##### [自定义地图控件主题-暗色主题]
```js
<div id="container" class="calcite-map calcite-widgets-dark" />
```
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/smiapi/ts/4x/3d/%E5%9C%B0%E5%9B%BE%E4%B8%BB%E9%A2%98/maptheme_dark.png)
###### [自定义地图控件主题-亮色主题]
```js
<div id="container" class="calcite-map calcite-widgets-light" />
注意:开发者可以自定义
```
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/smiapi/ts/4x/3d/%E5%9C%B0%E5%9B%BE%E4%B8%BB%E9%A2%98/maptheme_light.png)
#### [地图控件]
##### [地图控件-Home]
```js
const home = new SMap.Home({
visible: true,
position: 'top-right'
})
map.addControl(home)
```
##### [地图控件-Zoom]
```js
const zoom = new SMap.Zoom({
visible: true,
position: 'top-right'
})
map.addControl(zoom)
```
##### [地图控件-Compass]
```js
const compass = new SMap.Compass({
visible: true,
position: 'top-right'
})
map.addControl(ccompass))
```
##### [地图控件-Fullscreen]
```js
const fullfscreen = new SMap.Fullscreen({
visible: true,
position: 'top-right'
})
map.addControl(fullfscreen))
```
##### [地图控件-LayerListControl]
```js
const layerListControl = new SMap.LayerListControl({
visible: true,
position: 'top-right'
})
map.addControl(lalyerListControl))
```
##### [地图控件-MeasureLine]
```js
const measureLine = new SMap.MeasureLine({
visible: true,
position: 'top-right'
})
map.addControl(measureLine))
```
##### [地图控件-MeasureLine]
```js
const measureArea = new SMap.MeasureArea({
visible: true,
position: 'top-right'
})
map.addControl(measureArea))
```
##### [地图控件-MeasureLine]
```js
const basemapToggle = new SMap.BasemapToggle({
visible: true,
position: 'top-right'
})
map.addControl(basemapToggle))
```
##### [地图控件-UndergroundSwitch]
```js
// 仅支持3D地图
const underguroundSwitch = new SMap.UndergroundSwitch({
visible: true,
position: 'top-right'
})
map.addControl(underguroundSwitch))
```
##### [地图控件-BMapGallery]
```js
// 支持2/3D地图
const bMapGallery = new SMap.BMapGallery({
visible: true,
position: 'top-right'
})
map.addControl(bMapGallery))
```
##### [地图控件-BMapGalleryExpand]
```js
// 支持2/3D地图
const bMapGalleryexpand = new SMap.BMapGalleryExpand({
visible: true,
position: 'top-right'
})
map.addControl(bMapGalleryexpand))
```
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/smiapi/ts/4x/2d/%E5%9C%B0%E5%9B%BE%E6%8E%A7%E4%BB%B6/mapcontrols.png)
##### [删除地图控件]
```js
map.removeControl(layerListControl)) //删除已经添加的layerListControl控件
```
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/smiapi/ts/4x/3d/%E5%9C%B0%E5%9B%BE%E6%8E%A7%E4%BB%B6/mapcontrol.png)
#### [地图覆盖物]
##### [添加点状覆盖物]
```js
const Pointmarker = new SMap.Marker({
icon: new SMap.Icon({
size: new SMap.Size(22, 22),
image: require('../assets/repaireorder_Accepted.gif') //或者用url
}),
attributes: {
'name': '点1',
'type': '点'
},
label: new SMap.Label({
text: '点1',
color: 'red',
visible: true,
size: 22,
weight: 'normal',
angle: 0,
backgroundColor: 'red',
borderLineColor: 'blue',
borderLineSize: 1,
haloColor: '[51, 204, 51, 0.2]',
haloSize: 0,
horizontalAlignment: 'left',
verticalAlignment: 'top',
kerning: true,
lineHeight: 25,
lineWidth: 200,
rotated: false,
xoffset: 10,
yoffset: 10
}),
position: [0, 0]
})
map.add(Pointmarker)
```
##### [更新点状覆盖物]
```js
Pointmarker.label.text = '点1更新'
Pointmarker.icon.image = require('../assets/blue.gif')
map.update(Pointmarker)
```
##### [删除点状覆盖物]
```js
map.remove(Pointmarker) //移除上面添加的点状覆盖物
```
##### [添加点状覆盖物多个]
```js
const Pointmarker1 = new SMap.Marker({
icon: new SMap.Icon({
size: new SMap.Size(22, 22),
image: require('../assets/repaireorder_Accepted.gif') //或者用url
}),
attributes: {
'name': '点1',
'type': '点'
},
label: new SMap.Label({
text: '点1',
}),
position: [1000, 1000]
})
const Pointmarker2 = new SMap.Marker({
icon: new SMap.Icon({
size: new SMap.Size(22, 22),
image: require('../assets/repaireorder_Accepted.gif') //或者用url
}),
attributes: {
'name': '点2',
'type': '点'
},
label: new SMap.Label({
text: '点2',
}),
position: [1100, 1100]
})
map.add([Pointmarker1,Pointmarker2])
```
##### [更新点状覆盖物多个]
```js
Pointmarker1.label.text = '点1更新'
Pointmarker1.icon.image = require('../assets/blue.gif')
Pointmarker2.label.text = '点2更新'
Pointmarker2.icon.image = require('../assets/blue.gif')
map.update([Pointmarker1, Pointmarker2])
```
##### [删除点状覆盖物多个]
```js
map.remove([Pointmarker1,Pointmarker2]) //移除上面添加的Pointmarker1,Pointmarker2点状覆盖物
```
##### [添加点状覆盖物组]
```js
const marker1 = new SMap.Marker({
icon: new SMap.Icon({
size: new SMap.Size(40, 40),
image: require('../assets/blue.gif')
}),
attributes: {
'name': '点1',
'type': '点'
},
label: new SMap.Label({
text: '点1',
size: 22,
color: 'yellow',
xoffset: 0.1,
yoffset: 0.1,
// zoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top'
}),
position: [500, 500, 100]
})
const marker2 = new SMap.Marker({
icon: new SMap.Icon({
size: new SMap.Size(40, 40),
image: require('../assets/blue.gif')
}),
attributes: {
'name': '点2',
'type': '点'
},
label: new SMap.Label({
text: '点2',
size: 22,
color: 'black',
xoffset: 0.1,
yoffset: 0.1,
// zoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top'
}),
position: [550, 550, 200]
})
const OverlayGroup = new SMap.OverlayGroup([marker1, marker2])
map.add(OverlayGroup)
```
##### [更新点状盖盖物组]
```js
OverlayGroup.overlayers[0].icon.image = require('../assets/repaireorder_Accepted.gif')
OverlayGroup.overlayers[0].label.text = '点5更新'
OverlayGroup.overlayers[1].icon.image = require('../assets/repaireorder_Accepted.gif')
OverlayGroup.overlayers[1].label.text = '点6更新'
map.update(OverlayGroup)
```
##### [删除点状覆盖物组]
```js
map.remove(OverlayGroup)
```
##### [添加线状覆盖物]
```js
onePolyline = new SMap.Polyline({
path: [
new SMap.LngLat(0, 0),
new SMap.LngLat(10, 10),
new SMap.LngLat(50, 50)
],
attributes: {
'name': '线1',
'type': '线'
},
cap: 'square',
strokeColor: 'red',
style: 'solid',
lineJoin: 'round',
label: new SMap.Label({
text: '线一',
color: 'red',
visible: true,
size: 22,
weight: 'normal',
angle: 0,
backgroundColor: 'red',
borderLineColor: 'blue',
borderLineSize: 10,
haloColor: '[51, 204, 51, 0.2]',
haloSize: 0,
horizontalAlignment: 'left',
verticalAlignment: 'top',
kerning: true,
lineHeight: 25,
lineWidth: 200,
rotated: false,
xoffset: 10,
yoffset: 10
})
})
map.add(onePolyline)
```
##### [更新线状覆盖物]
```js
onePolyline.label.text = '线一更新'
map.update(onePolyline)
```
##### [删除线状覆盖物]
```js
map.remove(onePolyline) //移除上面添加的线状覆盖物
```
##### [添加线状覆盖物多个]
```js
const Polyline1 = new SMap.Polyline({
path: [
new SMap.LngLat(400, 400),
new SMap.LngLat(420, 420),
new SMap.LngLat(450, 450)
],
attributes: {
'name': '线1',
'type': '线'
},
cap: 'square',
strokeColor: 'red',
style: 'solid',
lineJoin: 'round',
label: new SMap.Label({
text: '线一',
size: 22,
color: 'blue',
xoffset: 10,
yoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top'
})
})
const Polyline2 = new SMap.Polyline({
path: [
new SMap.LngLat(600, 600),
new SMap.LngLat(620, 620),
new SMap.LngLat(650, 650)
],
attributes: {
'name': '线1',
'type': '线'
},
cap: 'square',
strokeColor: 'red',
style: 'solid',
lineJoin: 'round',
label: new SMap.Label({
text: '线二',
size: 22,
color: 'blue',
xoffset: 10,
yoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top'
})
})
map.add([Polyline1, Polyline2])
```
##### [更新线状覆盖物多个]
```js
Polyline1.label.text = '线一更新'
Polyline2.label.text = '线二更新'
map.update([Polyline1, Polyline2])
```
##### [删除线状覆盖物多个]
```js
map.remove([Polyline1,Polyline1]) //移除上面添加的Pointmarker1fourPolyline点状覆盖物
```
##### [添加线状覆盖物组]
```js
const polyline1 = new SMap.Polyline({
path: [
new SMap.LngLat(400, 400),
new SMap.LngLat(420, 420),
new SMap.LngLat(450, 450)
],
attributes: {
'name': '线1',
'type': '线'
},
cap: 'square',
strokeColor: 'red',
style: 'solid',
lineJoin: 'round',
label: new SMap.Label({
text: '线1',
size: 22,
color: 'blue',
xoffset: 10,
yoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top'
})
})
const polyline2 = new SMap.Polyline({
path: [
new SMap.LngLat(300, 300),
new SMap.LngLat(320, 320),
new SMap.LngLat(350, 350)
],
attributes: {
'name': '线2',
'type': '线'
},
cap: 'square',
strokeColor: 'red',
style: 'solid',
lineJoin: 'round',
label: new SMap.Label({
text: '线2',
size: 22,
color: 'blue',
xoffset: 10,
yoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top'
})
})
OverlayGroup = new SMap.OverlayGroup([polyline1, polyline2])
map.add(OverlayGroup)
```
##### [更新线状覆盖物组]
```js
OverlayGroup.overlayers[0].label.text = '线1更新'
OverlayGroup.overlayers[1].label.text = '线2更新'
map.update(OverlayGroup)
```
##### [删除线状覆盖物组]
```js
map.remove(OverlayGroup)
```
##### [添加面状覆盖物]
```js
onePolygon = new SMap.Polygon({
paths: [
new SMap.LngLat(0, 0),
new SMap.LngLat(20, 0),
new SMap.LngLat(20, 30),
new SMap.LngLat(0, 30),
new SMap.LngLat(0, 0)
],
attributes: {
'name': '面1',
'type': '面'
},
fillColor: 'red',
style: 'solid',
strokeColor: 'yellow',
strokestyle: 'solid',
strokeWeight: 1,
label: new SMap.Label({
text: '面一',
color: 'red',
visible: true,
size: 22,
weight: 'normal',
angle: 0,
backgroundColor: 'red',
borderLineColor: 'blue',
borderLineSize: 10,
haloColor: '[51, 204, 51, 0.2]',
haloSize: 0,
horizontalAlignment: 'left',
verticalAlignment: 'top',
kerning: true,
lineHeight: 25,
lineWidth: 200,
rotated: false,
xoffset: 10,
yoffset: 10
})
})
map.add(onePolygon)
```
##### [更新面状覆盖物]
```js
onePolygon.label.text = '面一更新'
map.update(onePolygon)
```
##### [删除面状覆盖物]
```js
map.remove(onePolygon) //移除上面添加的面状覆盖物
```
##### [添加面状覆盖物多个]
```js
const Polygon1 = new SMap.Polygon({
paths: [
new SMap.LngLat(540, 540),
new SMap.LngLat(560, 540),
new SMap.LngLat(560, 560),
new SMap.LngLat(540, 560),
new SMap.LngLat(540, 540)
],
attributes: {
'name': '面1',
'type': '面'
},
fillColor: 'red',
style: 'solid',
strokeColor: 'yellow',
strokestyle: 'solid',
strokeWeight: 1,
label: new SMap.Label({
text: '面1',
size: 22,
color: 'blue',
xoffset: 10,
yoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top'
})
})
const Polygon2 = new SMap.Polygon({
paths: [
new SMap.LngLat(500, 500),
new SMap.LngLat(520, 500),
new SMap.LngLat(520, 550),
new SMap.LngLat(500, 550),
new SMap.LngLat(500, 500)
],
attributes: {
'name': '面2',
'type': '面'
},
fillColor: 'black',
style: 'solid',
strokeColor: 'yellow',
strokestyle: 'solid',
strokeWeight: 1,
label: new SMap.Label({
text: '面2',
size: 22,
color: 'blue',
xoffset: 10,
yoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top'
})
})
map.add([Polygon1, Polygon2])
```
##### [更新面状覆盖物多个]
```js
Polygon1.label.text = '面一更新'
Polygon2.label.text = '面二更新'
map.update([Polygon1, Polygon2])
```
##### [删除面状覆盖物多个]
```js
map.remove([Polygon1,Polygon2]) //移除上面添加的Polygon1 Polygon2 面状状覆盖物
```
##### [添加面状覆盖物组]
```js
const polygon1 = new SMap.Polygon({
paths: [
new SMap.LngLat(200, 200),
new SMap.LngLat(220, 200),
new SMap.LngLat(220, 250),
new SMap.LngLat(200, 250),
new SMap.LngLat(200, 200)
],
attributes: {
'name': '面1',
'type': '面'
},
cap: 'square',
strokeColor: 'red',
style: 'solid',
lineJoin: 'round',
label: new SMap.Label({
text: '面1',
size: 22,
color: 'blue',
xoffset: 10,
yoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top'
})
})
const polygon2 = new SMap.Polygon({
paths: [
new SMap.LngLat(240, 240),
new SMap.LngLat(260, 240),
new SMap.LngLat(260, 260),
new SMap.LngLat(240, 260),
new SMap.LngLat(240, 240)
],
attributes: {
'name': '面2',
'type': '面'
},
cap: 'square',
strokeColor: 'red',
style: 'solid',
lineJoin: 'round',
label: new SMap.Label({
text: '面2',
size: 22,
color: 'blue',
xoffset: 10,
yoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top'
})
})
OverlayGroup = new SMap.OverlayGroup([polygon1, polygon2])
map.add(OverlayGroup)
```
##### [更新面状覆盖物组]
```js
OverlayGroup.overlayers[0].label.text = '面1更新'
OverlayGroup.overlayers[1].label.text = '面2更新'
map.update( OverlayGroup)
```
##### [删除面状覆盖物组]
```js
map.remove(OverlayGroup)
```
#### [地图覆盖物More]
##### [添加点状覆盖物addfeature]
```js
const onemarker = new SMap.Marker({
icon: new SMap.Icon({
size: new SMap.Size(40, 40),
image: require('../assets/repaireorder_Accepted.gif')
}),
attributes: { //点状覆盖物的属性
'name': '点1', //如果需要标注 name 字段必须有,且其字段值为标注内容
'type': '点'
},
label: new SMap.Label({
color: 'red', //标注颜色
visible: true, //标注是否可见
size: 22, // 标注字体大小
weight: 'normal', //仅2d 支持
angle: 0, // 仅2d 支持
backgroundColor: 'red', // 仅2d 支持
borderLineColor: 'blue', // 仅2d 支持
borderLineSize: 1, // 仅2d 支持
haloColor: '[51, 204, 51, 0.2]', // 标注光圈颜色
haloSize: 0, // 标注光圈大小
horizontalAlignment: 'left', // 仅2d 支持
verticalAlignment: 'top', // 仅2d 支持
kerning: true, // 仅2d 支持
lineHeight: 0, // 仅2d 支持
lineWidth: 0, // 仅2d 支持
rotated: true, // 仅2d 支持
xoffset: 0, // 仅2d 支持
yoffset: 0, // 仅2d 支持
placement: 'above-right' //标注位置
maxScale: 500 // 最大可见比例尺
minScale: 100000 //最小可见比例尺
}),
position: [0, 0, 100]
})
map.addfeature(onemarker)
这种方式自定义性强,资源占用多,不宜多加
```
##### [更新点状覆盖物updatefeature]
```js
onemarker.attributes['name'] = '点一更新'
onemarker.icon.image = require('../assets/blue.gif')
map.updatefeature(onemarker)
```
##### [删除点状覆盖物removefeature]
```js
map.removefeature(onemarker)
```
##### [添加点状覆盖物多个addfeature]
```js
const markone = new SMap.Marker({
icon: new SMap.Icon({
size: new SMap.Size(40, 40),
image: require('../assets/repaireorder_Accepted.gif')
}),
attributes: {
'name': '点1',
'type': '点'
},
label: new SMap.Label({
text: '点1',
size: 22,
xoffset: 0,
yoffset: 0,
horizontalAlignment: 'left',
verticalAlignment: 'top'
}),
position: [1000, 1000, 10]
})
const marktwo = new SMap.Marker({
icon: new SMap.Icon({
size: new SMap.Size(40, 40),
image: require('../assets/repaireorder_Accepted.gif')
}),
attributes: {
'name': '点2',
'type': '点'
},
label: new SMap.Label({
text: '点2',
size: 22,
xoffset: 0,
yoffset: 0,
horizontalAlignment: 'left',
verticalAlignment: 'top'
}),
position: [1100, 1100, 20]
})
map.addfeature([markone, marktwo])
通上面方法一样,自定义性强,资源占用多,不宜多加
```
##### [更新点状覆盖物多个updatefeature]
```js
markone.icon.image = require('../assets/blue.gif')
markone.attributes['name'] = '点一更新'
marktwo.icon.image = require('../assets/blue.gif')
marktwo.attributes['name'] = '点二更新'
map.updatefeature([markone, marktwo])
```
##### [删除点状覆盖物多个removefeature]
```js
map.removefeature([markone, marktwo])
```
##### [添加点状覆盖物组addfeature]
```js
const marks = []
for (let i = 0; i <= 100000; i++) {
const x = Math.ceil(Math.random() * 1200)
const y = Math.ceil(Math.random() * 1200)
const onemarker = new SMap.Marker({
attributes: {
'name': '点' + i, //name 字段要标注的内容
'style': Math.ceil(Math.random()).toString() //style 对应样式,对应Style 中style 值
},
position: [x, y, 100]
})
marks.push(onemarker)
}
const label = new SMap.Label({
size: 22,
color: 'black',
xoffset: 0.1,
yoffset: 0.1,
horizontalAlignment: 'left',
verticalAlignment: 'top',
minScale: 5000,
maxScale: 1000
})
const datafiled = [{ // 覆盖组字段类型
name: 'name',
alias: 'name',
type: 'string'
}]
const style = [ // 样式定义,和marks 中mark属性字段style 对应,对应不上没有样式
{
style: '0', //mark 属性字段style 为0时候的样式
size: new SMap.Size(40, 40),
url: require('../assets/repaireorder_Accepted.gif')
}, {
style: '1', //mark 属性字段style 为1时候的样式,以此类推可以多加
size: new SMap.Size(40, 40),
url: require('../assets/blue.gif')
}
]
const featureReduction = new SMap.FeatureReduction({
type: 'cluster',
clusterRadius: 100
})
massmarksgroup = new SMap.OverlayGroup(marks, {
overlaytype: 'marker',
datafiled: datafiled,
style: style,
label: label,
frreduction: featureReduction //聚集样式
})
map.addfeature(massmarksgroup)
此方法适合加载大量数据点
```
二维10万个点展示
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/smiapi/ts/4x/2d/%E5%9C%B0%E5%9B%BE%E8%A6%86%E7%9B%96%E7%89%A9/massMarks.png)
二维10万个点聚合展示
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/smiapi/ts/4x/2d/%E5%9C%B0%E5%9B%BE%E8%A6%86%E7%9B%96%E7%89%A9/massMarkscluster.png)
三维10万个点展示
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/smiapi/ts/4x/3d/%E5%9C%B0%E5%9B%BE%E8%A6%86%E7%9B%96%E7%89%A9/massMarkers.png)
三维10万个优化显示
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/smiapi/ts/4x/3d/%E5%9C%B0%E5%9B%BE%E8%A6%86%E7%9B%96%E7%89%A9/massMarkersSelection.png)
##### [更新点状覆盖物组updatefeature]
```js
massmarksgroup.overlayers[0].attributes['name'] = '点5更新'
massmarksgroup.overlayers[0].attributes['style'] = '1'
massmarksgroup.overlayers[1].attributes['style'] = '0'
map.updatefeature(massmarksgroup)
```
##### [删除点状覆盖物组removefeature]
```js
map.removefeature(massmarksgroup)
```
#### [地图事件]
##### [地图事件列表]
```js
SMap.MapEvent.maploaded or 'maploaded';
SMap.MapEvent.extentchanged or'extentchanged';
SMap.MapEvent.centerchanged or 'centerchanged';
SMap.MapEvent.blur or 'blur';
SMap.MapEvent.click or 'click';
SMap.MapEvent.doubleclick or 'doubleclick';
SMap.MapEvent.drag or 'drag';
SMap.MapEvent.focus or 'focus';
SMap.MapEvent.hold or 'hold';
SMap.MapEvent.keydown or 'key-down';
SMap.MapEvent.keyup or 'key-up';
SMap.MapEvent.mousewheel or 'mouse-wheel';
SMap.MapEvent.pointerdown or 'pointer-down';
SMap.MapEvent.pointerenter or 'pointer-enter';
SMap.MapEvent.pointerleave or 'pointer-leave';
SMap.MapEvent.pointermove or 'pointer-move';
SMap.MapEvent.pointerup or 'pointer-up';
SMap.MapEvent.resize or ' pointer-up';
```
##### [地图zoom变化事件]
```js
map.on(SMap.MapEvent.zoomchanged, function(zoom) {
})
```
##### [地图加载完成事件]
```js
map.on(SMap.MapEvent.maploaded, function(view) {
})
```
##### [地图范围变化事件]
```js
map.on(SMap.MapEvent.extentchanged, function(excenter) {
})
```
##### [地图中心点变化事件]
```js
map.on(SMap.MapEvent.centerchanged, function(center) {
})
```
##### [地图失去焦点事件]
```js
map.on(SMap.MapEvent.blur, function(view,eventParamter) {
})
```
##### [地图单击事件]
```js
map.on(SMap.MapEvent.click, function(view,eventParamter) {
maview.hitTest(eventParamter).then(async function(response) {
console.log(response)
})
})
```
##### [地图双击事件]
```js
map.on(SMap.MapEvent.doubleclick, function(view,eventParamter) {
})
```
##### [地图拖拽事件]
```js
map.on(SMap.MapEvent.drag, function(view,eventParamter) {
})
```
##### [地图聚焦事件]
```js
map.on(SMap.MapEvent.focus, function(view,eventParamter) {
})
```
##### [地图按住事件]
```js
map.on(SMap.MapEvent.hold, function(view,eventParamter) {
})
```
##### [地图键盘键按下事件]
```js
map.on(SMap.MapEvent.keydown, function(view,eventParamter) {
})
```
##### [地图键盘键弹起事件]
```js
map.on(SMap.MapEvent.keydown, function(view,eventParamter) {
})
```
##### [地图键盘键弹起事件]
```js
map.on(SMap.MapEvent.hold, function(view,eventParamter) {
})
```
##### [地图鼠标和触摸滚动事件]
```js
map.on(SMap.MapEvent.mousewheel, function(view,eventParamter) {
})
```
##### [地图鼠标或触摸按下事件]
```js
map.on(SMap.MapEvent.pointerdown, function(view,eventParamter) {
})
```
##### [地图鼠标进入或触摸开始事件]
```js
map.on(SMap.MapEvent.pointerenter, function(view,eventParamter) {
})
```
##### [地图鼠标离开和触摸结束事件]
```js
map.on(SMap.MapEvent.pointerleave, function(view,eventParamter) {
})
```
##### [地图鼠标移动和触摸操作事件]
```js
map.on(SMap.MapEvent.pointermove, function(view,eventParamter) {
})
```
##### [地图鼠标释放和触摸结束事件]
```js
map.on(SMap.MapEvent.pointerup, function(view,eventParamter) {
})
```
##### [地图控件大小变化事件]
```js
map.on(SMap.MapEvent.resize, function(view,eventParamter) {
})
```
## 技术支持
QQ号: 314984468
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/contact/qq.jpg)
微信号:ioioya
![Image text](https://raw.githubusercontent.com/thiswildidea/images/master/contact/webchat.jpg)
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