#添加一层和二层
This commit is contained in:
parent
68e02ed924
commit
78a9648baa
|
|
@ -2,42 +2,30 @@
|
|||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="9cbc7ee8-e518-44ca-870c-9743cf0f1b98" name="Default Changelist" comment="">
|
||||
<change afterPath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房一层楼梯.json" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房一层门窗.json" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房二层大型设备.json" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房二层建筑物.json" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房二层楼梯.json" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房二层门.json" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/.gitignore" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/README.md" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/bower.json" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/addlayer.html" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/addlayer.js" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/browserify/README.md" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/browserify/index.html" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/browserify/index.js" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/browserify/package.json" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/layerswitcher.css" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/layerswitcher.html" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/layerswitcher.js" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/scroll.css" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/scroll.html" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/scroll.js" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/package.json" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/src/ol3-layerswitcher.css" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/src/ol3-layerswitcher.js" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/test/index.html" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/test/spec/ol3-layerswitcher.js" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/test/spec/twomaps.js" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/static/ol3-layerswitcher-master/util/README.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dashboard/static/dashboard/js/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/dashboard/static/dashboard/js/index.js" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房一层围墙.json" beforeDir="false" afterPath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房一层围墙.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房一层大型设备.json" beforeDir="false" afterPath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房一层大型设备.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房一层设备.json" beforeDir="false" afterPath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房一层设备.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房一层门.json" beforeDir="false" afterPath="$PROJECT_DIR$/dashboard/static/dashboard/json/主机房一层门.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dashboard/templates/dashboard/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/dashboard/templates/dashboard/index.html" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/fabfile.py" beforeDir="false" afterPath="$PROJECT_DIR$/fabfile.py" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/.gitignore" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/README.md" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/bower.json" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/addlayer.html" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/addlayer.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/browserify/README.md" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/browserify/index.html" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/browserify/index.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/browserify/package.json" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/layerswitcher.css" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/layerswitcher.html" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/layerswitcher.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/scroll.css" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/scroll.html" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/scroll.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/package.json" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/src/ol3-layerswitcher.css" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/src/ol3-layerswitcher.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/test/index.html" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/test/spec/ol3-layerswitcher.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/test/spec/twomaps.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/static/ol3-layerswitcher-master/util/README.md" beforeDir="false" />
|
||||
</list>
|
||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
|
|
@ -104,7 +92,7 @@
|
|||
</component>
|
||||
<component name="FileEditorManager">
|
||||
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||
<file pinned="false" current-in-tab="true">
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/dashboard/static/dashboard/js/index.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="483">
|
||||
|
|
@ -116,33 +104,6 @@
|
|||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/static/ol3-layerswitcher-master/src/ol3-layerswitcher.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="71">
|
||||
<caret line="17" column="4" selection-start-line="17" selection-start-column="4" selection-end-line="17" selection-end-column="4" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/layerswitcher.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="418">
|
||||
<caret line="64" column="34" lean-forward="true" selection-start-line="61" selection-start-column="4" selection-end-line="64" selection-end-column="34" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/static/ol3-layerswitcher-master/examples/layerswitcher.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="352">
|
||||
<caret line="16" column="4" lean-forward="true" selection-start-line="16" selection-start-column="4" selection-end-line="16" selection-end-column="44" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/dashboard/static/dashboard/js/vector.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
|
|
@ -169,11 +130,11 @@
|
|||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file pinned="false" current-in-tab="false">
|
||||
<file pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/dashboard/templates/dashboard/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="147">
|
||||
<caret line="23" column="9" lean-forward="true" selection-start-line="23" selection-start-column="9" selection-end-line="23" selection-end-column="9" />
|
||||
<state relative-caret-position="279">
|
||||
<caret line="29" column="25" lean-forward="true" selection-start-line="29" selection-start-column="25" selection-end-line="29" selection-end-column="25" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
|
|
@ -287,8 +248,8 @@
|
|||
<option value="$PROJECT_DIR$/dashboard/templates/dashboard/results_by_keywords.html" />
|
||||
<option value="$PROJECT_DIR$/../linbeitest/create_pyc.py" />
|
||||
<option value="$PROJECT_DIR$/fabfile.py" />
|
||||
<option value="$PROJECT_DIR$/dashboard/templates/dashboard/index.html" />
|
||||
<option value="$PROJECT_DIR$/dashboard/static/dashboard/js/index.js" />
|
||||
<option value="$PROJECT_DIR$/dashboard/templates/dashboard/index.html" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
|
|
@ -353,26 +314,6 @@
|
|||
<item name="linbei" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="static" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="linbei" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="linbei" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="static" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="ol3-layerswitcher-master" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="linbei" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="linbei" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="static" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="ol3-layerswitcher-master" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="examples" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="linbei" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="linbei" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="static" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="ol3-layerswitcher-master" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="src" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
</expand>
|
||||
<select />
|
||||
</subPane>
|
||||
|
|
@ -538,7 +479,7 @@
|
|||
<workItem from="1581676502593" duration="195000" />
|
||||
<workItem from="1581678313800" duration="1748000" />
|
||||
<workItem from="1582103020023" duration="1580000" />
|
||||
<workItem from="1583692865129" duration="5052000" />
|
||||
<workItem from="1583692865129" duration="5188000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="#creat">
|
||||
<created>1567674653918</created>
|
||||
|
|
@ -834,11 +775,18 @@
|
|||
<option name="project" value="LOCAL" />
|
||||
<updated>1582103777144</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="43" />
|
||||
<task id="LOCAL-00043" summary="#添加一层和二层">
|
||||
<created>1583736572473</created>
|
||||
<option name="number" value="00043" />
|
||||
<option name="presentableId" value="LOCAL-00043" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1583736572473</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="44" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TimeTrackingManager">
|
||||
<option name="totallyTimeSpent" value="288337000" />
|
||||
<option name="totallyTimeSpent" value="288473000" />
|
||||
</component>
|
||||
<component name="ToolWindowManager">
|
||||
<frame x="-8" y="-8" width="1936" height="1056" extended-state="6" />
|
||||
|
|
@ -876,7 +824,8 @@
|
|||
<MESSAGE value="#create" />
|
||||
<MESSAGE value="#index" />
|
||||
<MESSAGE value="#添加建筑物、设备、门等" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="#添加建筑物、设备、门等" />
|
||||
<MESSAGE value="#添加一层和二层" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="#添加一层和二层" />
|
||||
</component>
|
||||
<component name="com.intellij.coverage.CoverageDataManagerImpl">
|
||||
<SUITE FILE_PATH="coverage/linbei$import_points.coverage" NAME="import_points Coverage Results" MODIFIED="1573780425219" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="true" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$" />
|
||||
|
|
@ -1184,13 +1133,6 @@
|
|||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/dashboard/templates/dashboard/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="147">
|
||||
<caret line="23" column="9" lean-forward="true" selection-start-line="23" selection-start-column="9" selection-end-line="23" selection-end-column="9" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/dashboard/static/dashboard/js/index.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="483">
|
||||
|
|
@ -1201,5 +1143,12 @@
|
|||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/dashboard/templates/dashboard/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="279">
|
||||
<caret line="29" column="25" lean-forward="true" selection-start-line="29" selection-start-column="25" selection-end-line="29" selection-end-column="25" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
height: 100px;
|
||||
width: 100px;
|
||||
z-index: 9999;
|
||||
right: 20px;
|
||||
top:50px;
|
||||
right: 40px;
|
||||
top:60px;
|
||||
text-align: center;
|
||||
}
|
||||
.checkbox-inline{
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
node_modules
|
||||
.idea/
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
# DEPRECATED: ol3-layerswitcher is now [ol-layerswitcher](https://github.com/walkermatt/ol-layerswitcher)
|
||||
|
||||
If you require support for the ["old" `openlayers` NPM package](https://www.npmjs.com/package/openlayers) then you can use the code in the master branch of this repository via:
|
||||
|
||||
npm install git+https://github.com/walkermatt/ol3-layerswitcher.git#master
|
||||
|
||||
But you probably want to use the [`ol` package](https://www.npmjs.com/package/ol) for new projects in which case you want [ol-layerswitcher](https://github.com/walkermatt/ol-layerswitcher).
|
||||
|
||||
# OpenLayers LayerSwitcher
|
||||
|
||||
Grouped layer list control for an OpenLayer v3/v4 map.
|
||||
|
||||
All layers should have a `title` property and base layers should have a `type` property set to `base`. Group layers (`ol.layer.Group`) can be used to visually group layers together. See [examples/layerswitcher.js](examples/layerswitcher.js) for usage.
|
||||
|
||||
## Examples
|
||||
|
||||
The examples demonstrate usage and can be viewed online thanks to [RawGit](http://rawgit.com/):
|
||||
|
||||
* [Basic usage](http://rawgit.com/walkermatt/ol3-layerswitcher/master/examples/layerswitcher.html)
|
||||
* Create a layer switcher control. Each layer to be displayed in the layer switcher has a `title` property as does each Group; each base map layer has a `type: 'base'` property.
|
||||
* [Add layer](http://rawgit.com/walkermatt/ol3-layerswitcher/master/examples/addlayer.html)
|
||||
* Add a layer to an existing layer group after the layer switcher has been added to the map.
|
||||
* [Scrolling](http://rawgit.com/walkermatt/ol3-layerswitcher/master/examples/scroll.html)
|
||||
* Demonstrate the panel scrolling vertically, control the height of the layer switcher by setting the `max-height` (see [examples/scroll.css](examples/scroll.css)) and it's position relative to the bottom of the map (see the `.layer-switcher.shown` selector in [src/ol3-layerswitcher.css](src/ol3-layerswitcher.css)).
|
||||
* [Browserify](examples/browserify/)
|
||||
* Example of using ol3-layerswitcher with Browserify (see [examples/browserify/README.md](examples/browserify/README.md) for details of building.
|
||||
|
||||
The source for all examples can be found in [examples](examples).
|
||||
|
||||
## Tests
|
||||
|
||||
To run the tests you'll need to install the dependencies via `npm`. In the root of the repository run:
|
||||
|
||||
npm install
|
||||
|
||||
Then run the tests by opening [test/index.html](test/index.html) in a browser.
|
||||
|
||||
## API
|
||||
|
||||
### `new ol.control.LayerSwitcher(opt_options)`
|
||||
|
||||
OpenLayers v3/v4 Layer Switcher Control.
|
||||
See [the examples](./examples) for usage.
|
||||
|
||||
#### Parameters:
|
||||
|
||||
|Name|Type|Description|
|
||||
|:---|:---|:----------|
|
||||
|`opt_options`|`Object`| Control options, extends olx.control.ControlOptions adding: **`tipLabel`** `String` - the button tooltip. |
|
||||
|
||||
#### Extends
|
||||
|
||||
`ol.control.Control`
|
||||
|
||||
#### Methods
|
||||
|
||||
##### `showPanel()`
|
||||
|
||||
Show the layer panel.
|
||||
|
||||
##### `hidePanel()`
|
||||
|
||||
Hide the layer panel.
|
||||
|
||||
##### `renderPanel()`
|
||||
|
||||
Re-draw the layer panel to represent the current state of the layers.
|
||||
|
||||
##### `setMap(map)`
|
||||
|
||||
Set the map instance the control is associated with.
|
||||
|
||||
###### Parameters:
|
||||
|
||||
|Name|Type|Description|
|
||||
|:---|:---|:----------|
|
||||
|`map`|`ol.Map`| The map instance. |
|
||||
|
||||
|
||||
##### `(static) ol.control.LayerSwitcher.forEachRecursive(lyr,fn)`
|
||||
|
||||
**Static** Call the supplied function for each layer in the passed layer group
|
||||
recursing nested groups.
|
||||
|
||||
###### Parameters:
|
||||
|
||||
|Name|Type|Description|
|
||||
|:---|:---|:----------|
|
||||
|`lyr`|`ol.layer.Group`| The layer group to start iterating from. |
|
||||
|`fn`|`function`| Callback which will be called for each `ol.layer.Base` found under `lyr`. The signature for `fn` is the same as `ol.Collection#forEach` |
|
||||
|
||||
|
||||
##### `(static) ol.control.LayerSwitcher.uuid()`
|
||||
|
||||
Generate a UUID
|
||||
|
||||
## License
|
||||
|
||||
MIT (c) Matt Walker.
|
||||
|
||||
## Also see
|
||||
|
||||
If you find the layer switcher useful you might also like the
|
||||
[ol3-popup](https://github.com/walkermatt/ol3-popup).
|
||||
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
{
|
||||
"name": "ol3-layerswitcher",
|
||||
"version": "1.1.0",
|
||||
"homepage": "https://github.com/walkermatt/ol3-layerswitcher",
|
||||
"authors": [
|
||||
"Matt Walker (http://longwayaround.org.uk)"
|
||||
],
|
||||
"description": "Layer switcher control for OpenLayers v3/v4",
|
||||
"main": [
|
||||
"src/ol3-layerswitcher.js",
|
||||
"src/ol3-layerswitcher.css"
|
||||
],
|
||||
"keywords": [
|
||||
"openlayers",
|
||||
"ol",
|
||||
"layerswitcher"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>OpenLayers 3 - LayerSwitcher Add Layer</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" />
|
||||
<link rel="stylesheet" href="../src/ol3-layerswitcher.css" />
|
||||
<link rel="stylesheet" href="layerswitcher.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js"></script>
|
||||
<script src="../src/ol3-layerswitcher.js"></script>
|
||||
<script src="addlayer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
(function() {
|
||||
|
||||
// Create a group for overlays. Add the group to the map when it's created
|
||||
// but add the overlay layers later
|
||||
var overlayGroup = new ol.layer.Group({
|
||||
title: 'Overlays',
|
||||
layers: [
|
||||
]
|
||||
});
|
||||
|
||||
// Create a map containing two group layers
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Group({
|
||||
'title': 'Base maps',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
title: 'OSM',
|
||||
type: 'base',
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
]
|
||||
}),
|
||||
overlayGroup
|
||||
],
|
||||
view: new ol.View({
|
||||
center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 6
|
||||
})
|
||||
});
|
||||
|
||||
// Create a LayerSwitcher instance and add it to the map
|
||||
var layerSwitcher = new ol.control.LayerSwitcher();
|
||||
map.addControl(layerSwitcher);
|
||||
|
||||
// Add a layer to a pre-exiting ol.layer.Group after the LayerSwitcher has
|
||||
// been added to the map. The layer will appear in the list the next time
|
||||
// the LayerSwitcher is shown or LayerSwitcher#renderPanel is called.
|
||||
overlayGroup.getLayers().push(
|
||||
new ol.layer.Image({
|
||||
title: 'Countries',
|
||||
minResolution: 500,
|
||||
maxResolution: 5000,
|
||||
source: new ol.source.ImageArcGISRest({
|
||||
ratio: 1,
|
||||
params: {'LAYERS': 'show:0'},
|
||||
url: "https://ons-inspire.esriuk.com/arcgis/rest/services/Administrative_Boundaries/Countries_December_2016_Boundaries/MapServer"
|
||||
})
|
||||
})
|
||||
);
|
||||
|
||||
})();
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
# Using ol3-layerswitcher with Browserify
|
||||
|
||||
Based on [OpenLayers 3 Browserify Tutorial](https://openlayers.org/en/latest/doc/tutorials/browserify.html).
|
||||
|
||||
## Building
|
||||
|
||||
For a one-time build run:
|
||||
|
||||
npm run build
|
||||
|
||||
If you want to make changes and have the project auto build run:
|
||||
|
||||
npm run start
|
||||
|
||||
## Requiring ol3-layerswitcher
|
||||
|
||||
// Pass the path to `ol3-layerswitcher.js` minus the extension to `require`
|
||||
// which will return the constructor
|
||||
var LayerSwitcher = require('../../src/ol3-layerswitcher');
|
||||
|
||||
// Create an instance
|
||||
var layerSwitcher = new LayerSwitcher();
|
||||
|
||||
// Add to a `ol.Map` instance as normal
|
||||
map.addControl(layerSwitcher);
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Using Browserify with OpenLayers</title>
|
||||
<link rel="stylesheet" href="node_modules/openlayers/dist/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../src/ol3-layerswitcher.css" />
|
||||
<link rel="stylesheet" href="../layerswitcher.css" />
|
||||
<style>
|
||||
#map {
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
var ol = require('openlayers');
|
||||
var LayerSwitcher = require('../../src/ol3-layerswitcher');
|
||||
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Group({
|
||||
'title': 'Base maps',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
title: 'Water color',
|
||||
type: 'base',
|
||||
visible: false,
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'watercolor'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'OSM',
|
||||
type: 'base',
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
]
|
||||
})
|
||||
],
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 0
|
||||
})
|
||||
});
|
||||
|
||||
var layerSwitcher = new LayerSwitcher();
|
||||
map.addControl(layerSwitcher);
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
{
|
||||
"name": "ol3-layerswitcher-browserify",
|
||||
"version": "1.1.2",
|
||||
"description": "Example of using ol3-layerswitcher with Browserify",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "watchify index.js --outfile bundle.js",
|
||||
"build": "browserify index.js | uglifyjs --compress --output bundle.js"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"browserify": "^13.3.0",
|
||||
"openlayers": "^4.0.1",
|
||||
"uglify-js": "^2.7.5",
|
||||
"watchify": "^3.8.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>OpenLayers 3 - LayerSwitcher</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" />
|
||||
<link rel="stylesheet" href="../src/ol3-layerswitcher.css" />
|
||||
<link rel="stylesheet" href="layerswitcher.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js"></script>
|
||||
<script src="../src/ol3-layerswitcher.js"></script>
|
||||
<script src="layerswitcher.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
(function() {
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Group({
|
||||
'title': 'Base maps',
|
||||
layers: [
|
||||
new ol.layer.Group({
|
||||
title: 'Water color with labels',
|
||||
type: 'base',
|
||||
combine: true,
|
||||
visible: false,
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'watercolor'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'terrain-labels'
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Water color',
|
||||
type: 'base',
|
||||
visible: false,
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'watercolor'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'OSM',
|
||||
type: 'base',
|
||||
visible: true,
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
]
|
||||
}),
|
||||
new ol.layer.Group({
|
||||
title: 'Overlays',
|
||||
layers: [
|
||||
new ol.layer.Image({
|
||||
title: 'Countries',
|
||||
source: new ol.source.ImageArcGISRest({
|
||||
ratio: 1,
|
||||
params: {'LAYERS': 'show:0'},
|
||||
url: "https://ons-inspire.esriuk.com/arcgis/rest/services/Administrative_Boundaries/Countries_December_2016_Boundaries/MapServer"
|
||||
})
|
||||
})
|
||||
]
|
||||
})
|
||||
],
|
||||
view: new ol.View({
|
||||
center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 6
|
||||
})
|
||||
});
|
||||
|
||||
var layerSwitcher = new ol.control.LayerSwitcher({
|
||||
tipLabel: 'Légende' // Optional label for button
|
||||
});
|
||||
map.addControl(layerSwitcher);
|
||||
|
||||
})();
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
/* Set the maxmimum height of the layerswitcher when it's shown */
|
||||
.layer-switcher.shown {
|
||||
max-height: 170px;
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>OpenLayers 3 - LayerSwitcher Scrolling</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" />
|
||||
<link rel="stylesheet" href="../src/ol3-layerswitcher.css" />
|
||||
<link rel="stylesheet" href="layerswitcher.css" />
|
||||
<link rel="stylesheet" href="scroll.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js"></script>
|
||||
<script src="../src/ol3-layerswitcher.js"></script>
|
||||
<script src="scroll.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
(function() {
|
||||
|
||||
var thunderforestAttributions = [
|
||||
new ol.Attribution({
|
||||
html: 'Tiles © <a href="http://www.thunderforest.com/">Thunderforest</a>'
|
||||
}),
|
||||
ol.source.OSM.ATTRIBUTION
|
||||
];
|
||||
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Group({
|
||||
'title': 'Base maps',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
title: 'Stamen - Water color',
|
||||
type: 'base',
|
||||
visible: false,
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'watercolor'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Stamen - Toner',
|
||||
type: 'base',
|
||||
visible: false,
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'toner'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Thunderforest - OpenCycleMap',
|
||||
type: 'base',
|
||||
visible: false,
|
||||
source: new ol.source.OSM({
|
||||
url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
|
||||
attributions: thunderforestAttributions
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Thunderforest - Outdoors',
|
||||
type: 'base',
|
||||
visible: false,
|
||||
source: new ol.source.OSM({
|
||||
url: 'http://{a-c}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png',
|
||||
attributions: thunderforestAttributions
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Thunderforest - Landscape',
|
||||
type: 'base',
|
||||
visible: false,
|
||||
source: new ol.source.OSM({
|
||||
url: 'http://{a-c}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
|
||||
attributions: thunderforestAttributions
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Thunderforest - Transport',
|
||||
type: 'base',
|
||||
visible: false,
|
||||
source: new ol.source.OSM({
|
||||
url: 'http://{a-c}.tile.thunderforest.com/transport/{z}/{x}/{y}.png',
|
||||
attributions: thunderforestAttributions
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Thunderforest - Transport Dark',
|
||||
type: 'base',
|
||||
visible: false,
|
||||
source: new ol.source.OSM({
|
||||
url: 'http://{a-c}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png',
|
||||
attributions: thunderforestAttributions
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'OSM',
|
||||
type: 'base',
|
||||
visible: true,
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
]
|
||||
}),
|
||||
new ol.layer.Group({
|
||||
title: 'Overlays',
|
||||
layers: [
|
||||
new ol.layer.Image({
|
||||
title: 'Countries',
|
||||
source: new ol.source.ImageArcGISRest({
|
||||
ratio: 1,
|
||||
params: {'LAYERS': 'show:0'},
|
||||
url: "https://ons-inspire.esriuk.com/arcgis/rest/services/Administrative_Boundaries/Countries_December_2016_Boundaries/MapServer"
|
||||
})
|
||||
})
|
||||
]
|
||||
})
|
||||
],
|
||||
view: new ol.View({
|
||||
center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 6
|
||||
})
|
||||
});
|
||||
|
||||
map.addControl(new ol.control.LayerSwitcher());
|
||||
|
||||
})();
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
{
|
||||
"name": "ol3-layerswitcher",
|
||||
"version": "1.1.2",
|
||||
"description": "Layer switcher control for OpenLayers v3/v4",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/walkermatt/ol3-layerswitcher.git"
|
||||
},
|
||||
"author": "Matt Walker (http://longwayaround.org.uk)",
|
||||
"contributors": [
|
||||
"Thomas Gratier <thomas_gratier@yahoo.fr>",
|
||||
"Poul Kjeldager Sørensen <pks@s-innovations.net>",
|
||||
"Micho García <micho.garcia@geomati.co>",
|
||||
"olivierdalang <olivier.dalang@gmail.com>"
|
||||
],
|
||||
"keywords": [
|
||||
"openlayers",
|
||||
"layerswitcher",
|
||||
"ol"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/walkermatt/ol3-layerswitcher/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"doc": "node_modules/.bin/jsdoc --explain src/ol3-layerswitcher.js | node_modules/.bin/dirtydocs util/README.md > README.md"
|
||||
},
|
||||
"dependencies": {
|
||||
"openlayers": "~4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"expect.js": "~0.3.1",
|
||||
"jquery": "~1.11.1",
|
||||
"lodash": "~2.4.1",
|
||||
"mocha": "~1.20.1",
|
||||
"jsdoc": "~3.3.0-beta1",
|
||||
"dirtydocs": "0.0.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
.layer-switcher.shown.ol-control {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layer-switcher.shown.ol-control:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layer-switcher {
|
||||
position: absolute;
|
||||
top: 3.5em;
|
||||
right: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.layer-switcher.shown {
|
||||
bottom: 3em;
|
||||
}
|
||||
|
||||
.layer-switcher .panel {
|
||||
padding: 0 1em 0 0;
|
||||
margin: 0;
|
||||
border: 4px solid #eee;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.layer-switcher.shown .panel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layer-switcher button {
|
||||
float: right;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==') /*logo.png*/;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2px;
|
||||
background-color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layer-switcher.shown button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layer-switcher button:focus, .layer-switcher button:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.layer-switcher ul {
|
||||
padding-left: 1em;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.layer-switcher li.group {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.layer-switcher li.group > label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.layer-switcher li.layer {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.layer-switcher li.layer label, .layer-switcher li.layer input {
|
||||
display: table-cell;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.layer-switcher label.disabled {
|
||||
opacity:0.4;
|
||||
}
|
||||
|
||||
.layer-switcher input {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.layer-switcher.touch ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.layer-switcher.touch ::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.layer-switcher.touch ::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
|
@ -1,301 +0,0 @@
|
|||
(function (root, factory) {
|
||||
if(typeof define === "function" && define.amd) {
|
||||
define(["openlayers"], factory);
|
||||
} else if(typeof module === "object" && module.exports) {
|
||||
module.exports = factory(require("openlayers"));
|
||||
} else {
|
||||
root.LayerSwitcher = factory(root.ol);
|
||||
}
|
||||
}(this, function(ol) {
|
||||
/**
|
||||
* OpenLayers v3/v4 Layer Switcher Control.
|
||||
* See [the examples](./examples) for usage.
|
||||
* @constructor
|
||||
* @extends {ol.control.Control}
|
||||
* @param {Object} opt_options Control options, extends olx.control.ControlOptions adding:
|
||||
* **`tipLabel`** `String` - the button tooltip.
|
||||
*/
|
||||
ol.control.LayerSwitcher = function(opt_options) {
|
||||
|
||||
var options = opt_options || {};
|
||||
|
||||
var tipLabel = options.tipLabel ?
|
||||
options.tipLabel : 'Legend';
|
||||
|
||||
this.mapListeners = [];
|
||||
|
||||
this.hiddenClassName = 'ol-unselectable ol-control layer-switcher';
|
||||
if (ol.control.LayerSwitcher.isTouchDevice_()) {
|
||||
this.hiddenClassName += ' touch';
|
||||
}
|
||||
this.shownClassName = 'shown';
|
||||
|
||||
var element = document.createElement('div');
|
||||
element.className = this.hiddenClassName;
|
||||
|
||||
var button = document.createElement('button');
|
||||
button.setAttribute('title', tipLabel);
|
||||
element.appendChild(button);
|
||||
|
||||
this.panel = document.createElement('div');
|
||||
this.panel.className = 'panel';
|
||||
element.appendChild(this.panel);
|
||||
ol.control.LayerSwitcher.enableTouchScroll_(this.panel);
|
||||
|
||||
var this_ = this;
|
||||
|
||||
button.onmouseover = function(e) {
|
||||
this_.showPanel();
|
||||
};
|
||||
|
||||
button.onclick = function(e) {
|
||||
e = e || window.event;
|
||||
this_.showPanel();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
this_.panel.onmouseout = function(e) {
|
||||
e = e || window.event;
|
||||
if (!this_.panel.contains(e.toElement || e.relatedTarget)) {
|
||||
this_.hidePanel();
|
||||
}
|
||||
};
|
||||
|
||||
ol.control.Control.call(this, {
|
||||
element: element,
|
||||
target: options.target
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
ol.inherits(ol.control.LayerSwitcher, ol.control.Control);
|
||||
|
||||
/**
|
||||
* Show the layer panel.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.showPanel = function() {
|
||||
if (!this.element.classList.contains(this.shownClassName)) {
|
||||
this.element.classList.add(this.shownClassName);
|
||||
this.renderPanel();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide the layer panel.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.hidePanel = function() {
|
||||
if (this.element.classList.contains(this.shownClassName)) {
|
||||
this.element.classList.remove(this.shownClassName);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Re-draw the layer panel to represent the current state of the layers.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.renderPanel = function() {
|
||||
|
||||
this.ensureTopVisibleBaseLayerShown_();
|
||||
|
||||
while(this.panel.firstChild) {
|
||||
this.panel.removeChild(this.panel.firstChild);
|
||||
}
|
||||
|
||||
var ul = document.createElement('ul');
|
||||
this.panel.appendChild(ul);
|
||||
this.renderLayers_(this.getMap(), ul);
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the map instance the control is associated with.
|
||||
* @param {ol.Map} map The map instance.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.setMap = function(map) {
|
||||
// Clean up listeners associated with the previous map
|
||||
for (var i = 0, key; i < this.mapListeners.length; i++) {
|
||||
ol.Observable.unByKey(this.mapListeners[i]);
|
||||
}
|
||||
this.mapListeners.length = 0;
|
||||
// Wire up listeners etc. and store reference to new map
|
||||
ol.control.Control.prototype.setMap.call(this, map);
|
||||
if (map) {
|
||||
var this_ = this;
|
||||
this.mapListeners.push(map.on('pointerdown', function() {
|
||||
this_.hidePanel();
|
||||
}));
|
||||
this.renderPanel();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Ensure only the top-most base layer is visible if more than one is visible.
|
||||
* @private
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.ensureTopVisibleBaseLayerShown_ = function() {
|
||||
var lastVisibleBaseLyr;
|
||||
ol.control.LayerSwitcher.forEachRecursive(this.getMap(), function(l, idx, a) {
|
||||
if (l.get('type') === 'base' && l.getVisible()) {
|
||||
lastVisibleBaseLyr = l;
|
||||
}
|
||||
});
|
||||
if (lastVisibleBaseLyr) this.setVisible_(lastVisibleBaseLyr, true);
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggle the visible state of a layer.
|
||||
* Takes care of hiding other layers in the same exclusive group if the layer
|
||||
* is toggle to visible.
|
||||
* @private
|
||||
* @param {ol.layer.Base} The layer whos visibility will be toggled.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.setVisible_ = function(lyr, visible) {
|
||||
var map = this.getMap();
|
||||
lyr.setVisible(visible);
|
||||
if (visible && lyr.get('type') === 'base') {
|
||||
// Hide all other base layers regardless of grouping
|
||||
ol.control.LayerSwitcher.forEachRecursive(map, function(l, idx, a) {
|
||||
if (l != lyr && l.get('type') === 'base') {
|
||||
l.setVisible(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Render all layers that are children of a group.
|
||||
* @private
|
||||
* @param {ol.layer.Base} lyr Layer to be rendered (should have a title property).
|
||||
* @param {Number} idx Position in parent group list.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.renderLayer_ = function(lyr, idx) {
|
||||
|
||||
var this_ = this;
|
||||
|
||||
var li = document.createElement('li');
|
||||
|
||||
var lyrTitle = lyr.get('title');
|
||||
var lyrId = ol.control.LayerSwitcher.uuid();
|
||||
|
||||
var label = document.createElement('label');
|
||||
|
||||
if (lyr.getLayers && !lyr.get('combine')) {
|
||||
|
||||
li.className = 'group';
|
||||
label.innerHTML = lyrTitle;
|
||||
li.appendChild(label);
|
||||
var ul = document.createElement('ul');
|
||||
li.appendChild(ul);
|
||||
|
||||
this.renderLayers_(lyr, ul);
|
||||
|
||||
} else {
|
||||
|
||||
li.className = 'layer';
|
||||
var input = document.createElement('input');
|
||||
if (lyr.get('type') === 'base') {
|
||||
input.type = 'radio';
|
||||
input.name = 'base';
|
||||
} else {
|
||||
input.type = 'checkbox';
|
||||
}
|
||||
input.id = lyrId;
|
||||
input.checked = lyr.get('visible');
|
||||
input.onchange = function(e) {
|
||||
this_.setVisible_(lyr, e.target.checked);
|
||||
};
|
||||
li.appendChild(input);
|
||||
|
||||
label.htmlFor = lyrId;
|
||||
label.innerHTML = lyrTitle;
|
||||
|
||||
var rsl = this.getMap().getView().getResolution();
|
||||
if (rsl > lyr.getMaxResolution() || rsl < lyr.getMinResolution()){
|
||||
label.className += ' disabled';
|
||||
}
|
||||
|
||||
li.appendChild(label);
|
||||
|
||||
}
|
||||
|
||||
return li;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Render all layers that are children of a group.
|
||||
* @private
|
||||
* @param {ol.layer.Group} lyr Group layer whos children will be rendered.
|
||||
* @param {Element} elm DOM element that children will be appended to.
|
||||
*/
|
||||
ol.control.LayerSwitcher.prototype.renderLayers_ = function(lyr, elm) {
|
||||
var lyrs = lyr.getLayers().getArray().slice().reverse();
|
||||
for (var i = 0, l; i < lyrs.length; i++) {
|
||||
l = lyrs[i];
|
||||
if (l.get('title')) {
|
||||
elm.appendChild(this.renderLayer_(l, i));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* **Static** Call the supplied function for each layer in the passed layer group
|
||||
* recursing nested groups.
|
||||
* @param {ol.layer.Group} lyr The layer group to start iterating from.
|
||||
* @param {Function} fn Callback which will be called for each `ol.layer.Base`
|
||||
* found under `lyr`. The signature for `fn` is the same as `ol.Collection#forEach`
|
||||
*/
|
||||
ol.control.LayerSwitcher.forEachRecursive = function(lyr, fn) {
|
||||
lyr.getLayers().forEach(function(lyr, idx, a) {
|
||||
fn(lyr, idx, a);
|
||||
if (lyr.getLayers) {
|
||||
ol.control.LayerSwitcher.forEachRecursive(lyr, fn);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate a UUID
|
||||
* @returns {String} UUID
|
||||
*
|
||||
* Adapted from http://stackoverflow.com/a/2117523/526860
|
||||
*/
|
||||
ol.control.LayerSwitcher.uuid = function() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @desc Apply workaround to enable scrolling of overflowing content within an
|
||||
* element. Adapted from https://gist.github.com/chrismbarr/4107472
|
||||
*/
|
||||
ol.control.LayerSwitcher.enableTouchScroll_ = function(elm) {
|
||||
if(ol.control.LayerSwitcher.isTouchDevice_()){
|
||||
var scrollStartPos = 0;
|
||||
elm.addEventListener("touchstart", function(event) {
|
||||
scrollStartPos = this.scrollTop + event.touches[0].pageY;
|
||||
}, false);
|
||||
elm.addEventListener("touchmove", function(event) {
|
||||
this.scrollTop = scrollStartPos - event.touches[0].pageY;
|
||||
}, false);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @desc Determine if the current browser supports touch events. Adapted from
|
||||
* https://gist.github.com/chrismbarr/4107472
|
||||
*/
|
||||
ol.control.LayerSwitcher.isTouchDevice_ = function() {
|
||||
try {
|
||||
document.createEvent("TouchEvent");
|
||||
return true;
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
var LayerSwitcher = ol.control.LayerSwitcher;
|
||||
return LayerSwitcher;
|
||||
}));
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ol3-layerswitcher spec runner</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="../node_modules/mocha/mocha.css">
|
||||
<link rel="stylesheet" href="../node_modules/openlayers/css/ol.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/ol3-layerswitcher.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="mocha"></div>
|
||||
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
|
||||
<script type="text/javascript" src="../node_modules/expect.js/index.js"></script>
|
||||
<script type="text/javascript" src="../node_modules/mocha/mocha.js"></script>
|
||||
<script type="text/javascript" src="../node_modules/lodash/dist/lodash.js"></script>
|
||||
<script>
|
||||
mocha.setup({
|
||||
ui: 'bdd',
|
||||
bail: false
|
||||
});
|
||||
</script>
|
||||
<script src="../node_modules/openlayers/dist/ol.js"></script>
|
||||
<script type="text/javascript" src="../src/ol3-layerswitcher.js"></script>
|
||||
<script type="text/javascript" src="spec/ol3-layerswitcher.js"></script>
|
||||
<script type="text/javascript" src="spec/twomaps.js"></script>
|
||||
<script>
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,368 +0,0 @@
|
|||
describe('ol.control.LayerSwitcher', function() {
|
||||
var map, target, switcher;
|
||||
|
||||
beforeEach(function() {
|
||||
target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
switcher = new ol.control.LayerSwitcher();
|
||||
map = new ol.Map({
|
||||
target: target,
|
||||
layers: [
|
||||
new ol.layer.Group({
|
||||
title: 'Base',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
title: 'Foo',
|
||||
type: 'base',
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Too',
|
||||
type: 'base',
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
// Combined base group
|
||||
new ol.layer.Group({
|
||||
title: 'Combined-Base-Group',
|
||||
type: 'base',
|
||||
combine: true,
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
// Combined overlay group
|
||||
new ol.layer.Group({
|
||||
title: 'Combined-Overlay-Group',
|
||||
type: 'overlay',
|
||||
combine: true,
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
// Group with no title (group and it's children should be ignored)
|
||||
new ol.layer.Group({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
title: 'Never shown',
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Bar',
|
||||
minResolution: 1000,
|
||||
maxResolution: 5000,
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
}),
|
||||
// Layer with no title (should be ignored)
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
})
|
||||
],
|
||||
controls: [switcher]
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
document.body.removeChild(target);
|
||||
switcher = null;
|
||||
map = null;
|
||||
target = null;
|
||||
});
|
||||
|
||||
describe('DOM creation', function() {
|
||||
it('creates the expected DOM elements', function() {
|
||||
expect(jQuery('.layer-switcher').length).to.be(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Show and hide', function() {
|
||||
it('is initially hidden', function() {
|
||||
expect(jQuery('.layer-switcher').hasClass('.shown')).to.be(false);
|
||||
expect(jQuery('.layer-switcher .panel:visible').length).to.be(0);
|
||||
});
|
||||
it('is shown on button click', function() {
|
||||
jQuery('.layer-switcher button').click();
|
||||
expect(jQuery('.layer-switcher.shown').length).to.be(1);
|
||||
expect(jQuery('.layer-switcher .panel:visible').length).to.be(1);
|
||||
});
|
||||
it('is hidden on map click', function() {
|
||||
jQuery('#map').click();
|
||||
expect(jQuery('.layer-switcher').hasClass('.shown')).to.be(false);
|
||||
expect(jQuery('.layer-switcher .panel:visible').length).to.be(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Layer list', function() {
|
||||
it('displays all layers with a title in reverse order', function() {
|
||||
switcher.showPanel();
|
||||
var titles = jQuery('.layer-switcher label').map(function() {
|
||||
return jQuery(this).text();
|
||||
}).get();
|
||||
expect(titles).to.eql(['Bar', 'Combined-Overlay-Group', 'Combined-Base-Group', 'Base', 'Too', 'Foo']);
|
||||
});
|
||||
it('only displays layers with a title', function() {
|
||||
switcher.showPanel();
|
||||
var elmTitles = jQuery('.layer-switcher label').map(function() {
|
||||
return jQuery(this).text();
|
||||
}).get();
|
||||
var lyrsWithTitle = shownLyrs(map.getLayerGroup());
|
||||
expect(lyrsWithTitle.length).to.eql(elmTitles.length);
|
||||
});
|
||||
it('don\'t display layers without a title', function() {
|
||||
switcher.showPanel();
|
||||
// This is basically to ensure that our test layers include layers without a title
|
||||
var lyrsWithoutTitle = _.filter(allLyrs(map.getLayerGroup()), function(lyr) {return !lyr.get('title')});
|
||||
expect(lyrsWithoutTitle.length).not.to.equal(0);
|
||||
});
|
||||
it('displays normal layers as checkbox', function() {
|
||||
switcher.showPanel();
|
||||
var titles = jQuery('.layer-switcher input[type=checkbox]').siblings('label').map(function() {
|
||||
return jQuery(this).text();
|
||||
}).get();
|
||||
expect(titles).to.eql(['Bar', 'Combined-Overlay-Group']);
|
||||
});
|
||||
it('greys out normal layer title labels when outside of layer resolution', function() {
|
||||
map.getView().setResolution(6000);
|
||||
switcher.showPanel();
|
||||
var layerResTooHigh = jQuery('.layer-switcher label.disabled').map(function() {
|
||||
return jQuery(this).text();
|
||||
}).get();
|
||||
map.getView().setResolution(500);
|
||||
var layerResTooLow = jQuery('.layer-switcher label.disabled').map(function() {
|
||||
return jQuery(this).text();
|
||||
}).get();
|
||||
expect([layerResTooHigh, layerResTooLow]).to.eql([['Bar'], ['Bar']]);
|
||||
});
|
||||
it('displays base layers as radio buttons', function() {
|
||||
switcher.showPanel();
|
||||
var titles = jQuery('.layer-switcher input[type=radio]').siblings('label').map(function() {
|
||||
return jQuery(this).text();
|
||||
}).get();
|
||||
expect(titles).to.eql(['Combined-Base-Group', 'Too', 'Foo']);
|
||||
});
|
||||
it('should display uncombined groups without an input', function() {
|
||||
switcher.showPanel();
|
||||
var groups = jQuery('.layer-switcher label:not([for])')
|
||||
var titles = groups.map(function() {
|
||||
return jQuery(this).text();
|
||||
}).get();
|
||||
expect(titles).to.eql(['Base']);
|
||||
expect(groups.siblings('input').length).to.be(0);
|
||||
});
|
||||
it('should display combined groups with an input', function () {
|
||||
switcher.showPanel();
|
||||
var titles = jQuery('.layer-switcher label[for]').map(function() {
|
||||
return jQuery(this).text();
|
||||
}).get();
|
||||
expect(titles).to.contain('Combined-Base-Group');
|
||||
expect(titles).to.contain('Combined-Overlay-Group');
|
||||
});
|
||||
it('should display combined groups without sub layers', function () {
|
||||
switcher.showPanel();
|
||||
var groups = jQuery('.layer-switcher label[for]')
|
||||
expect(groups.siblings('ul').length).to.be(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Overlay layer visibility', function() {
|
||||
it('Toggles overlay layer visibility on click', function() {
|
||||
switcher.showPanel();
|
||||
var bar = getLayerByTitle('Bar');
|
||||
bar.setVisible(true);
|
||||
jQuery('.layer-switcher label:contains("Bar")').siblings('input').click();
|
||||
expect(bar.getVisible()).to.be(false);
|
||||
expect(jQuery('.layer-switcher label:contains("Bar")').siblings('input').get(0).checked).to.be(bar.getVisible());
|
||||
bar.setVisible(false)
|
||||
jQuery('.layer-switcher label:contains("Bar")').siblings('input').click();
|
||||
expect(bar.getVisible()).to.be(true);
|
||||
expect(jQuery('.layer-switcher label:contains("Bar")').siblings('input').get(0).checked).to.be(bar.getVisible());
|
||||
});
|
||||
});
|
||||
|
||||
describe('Base layer visibility', function() {
|
||||
it('Only one base layer is visible after renderPanel', function() {
|
||||
var foo = getLayerByTitle('Foo');
|
||||
var too = getLayerByTitle('Too');
|
||||
var cbg = getLayerByTitle('Combined-Base-Group');
|
||||
var baseLayers = [foo, too, cbg];
|
||||
// Enable all base layers
|
||||
_.forEach(baseLayers, function (l) {
|
||||
l.setVisible(true);
|
||||
});
|
||||
|
||||
switcher.renderPanel();
|
||||
var visibleBaseLayerCount = _.countBy(baseLayers, function (l){
|
||||
return l.getVisible();
|
||||
});
|
||||
expect(visibleBaseLayerCount.true).to.be(1);
|
||||
});
|
||||
it('Only top most base layer is visible after renderPanel if more than one is visible', function() {
|
||||
var foo = getLayerByTitle('Foo');
|
||||
var too = getLayerByTitle('Too');
|
||||
var cbg = getLayerByTitle('Combined-Base-Group');
|
||||
var baseLayers = [foo, too, cbg];
|
||||
// Enable all base layers
|
||||
_.forEach(baseLayers, function (l) {
|
||||
l.setVisible(true);
|
||||
});
|
||||
switcher.renderPanel();
|
||||
expect(cbg.getVisible()).to.be(true);
|
||||
});
|
||||
it('Clicking on unchecked base layer shows it', function() {
|
||||
var too = getLayerByTitle('Too');
|
||||
too.setVisible(false);
|
||||
switcher.renderPanel();
|
||||
jQuery('.layer-switcher label:contains("Too")').siblings('input').click();
|
||||
expect(too.getVisible()).to.be(true);
|
||||
expect(jQuery('.layer-switcher label:contains("Too")').siblings('input').get(0).checked).to.be(true);
|
||||
});
|
||||
it('Clicking on checked base layer does not change base layer', function() {
|
||||
var foo = getLayerByTitle('Foo');
|
||||
foo.setVisible(true);
|
||||
switcher.renderPanel();
|
||||
jQuery('.layer-switcher label:contains("Foo")').siblings('input').click();
|
||||
expect(foo.getVisible()).to.be(true);
|
||||
expect(jQuery('.layer-switcher label:contains("Foo")').siblings('input').get(0).checked).to.be(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Removes cleanly', function() {
|
||||
it('Removes cleanly when ol.Map#removeControl is called', function() {
|
||||
map.removeControl(switcher);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns the title of a given layer or null if lyr is falsey
|
||||
*/
|
||||
function lyrTitle(lyr) {
|
||||
return (lyr) ? lyr.get('title') : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the Layer instance that has the given title
|
||||
*/
|
||||
function getLayerByTitle(title) {
|
||||
var layer = null;
|
||||
ol.control.LayerSwitcher.forEachRecursive(map, function(lyr) {
|
||||
if (lyr.get('title') && lyr.get('title') === title) {
|
||||
layer = lyr;
|
||||
return;
|
||||
}
|
||||
});
|
||||
return layer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a flattened Array of all layers regardless including those not
|
||||
* shown by the LayerSwitcher
|
||||
*/
|
||||
function allLyrs(lyrs) {
|
||||
return flatten(lyrs, function (lyr) {
|
||||
return (lyr.getLayers) ? lyr.getLayers().getArray() : lyr;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a flattened Array of only those layers that the LayerSwitcher
|
||||
* should show
|
||||
*/
|
||||
function shownLyrs(lyrs) {
|
||||
// Pass in the Array from the root LayerGroup as it doesn't have a
|
||||
// title but we don't want to filter out all layers
|
||||
lyrs = lyrs.getLayers().getArray();
|
||||
var flat = flatten(lyrs, function (lyr) {
|
||||
// Return a Groups layer array only if the group has a title
|
||||
// otherwise just return the group so that it's children will be
|
||||
// skipped
|
||||
return (lyr.getLayers && lyr.get('title')) ? lyr.getLayers().getArray() : lyr;
|
||||
});
|
||||
// Only return layers with a title
|
||||
return _.filter(flat, lyrTitle);
|
||||
}
|
||||
|
||||
/**
|
||||
* Flattens a given nested collection using the provided function getArray
|
||||
* to get an Array of the collections children.
|
||||
*/
|
||||
function flatten(srcCollection, getArray) {
|
||||
getArray = getArray || function (item) {return item};
|
||||
var src = getArray(srcCollection),
|
||||
dest = [];
|
||||
for (var i = 0, item; i < src.length; i++) {
|
||||
item = src[i];
|
||||
dest = dest.concat(item);
|
||||
if (_.isArray(getArray(item))) {
|
||||
dest = dest.concat(flatten(item, getArray));
|
||||
}
|
||||
}
|
||||
return dest;
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
describe('ol.control.LayerSwitcher - Two maps', function() {
|
||||
var map1, map2, target1, target2, switcher1, switcher2;
|
||||
|
||||
beforeEach(function() {
|
||||
target1 = document.createElement('div');
|
||||
target1.id = 'map1';
|
||||
document.body.appendChild(target1);
|
||||
target2 = document.createElement('div');
|
||||
target2.id = 'map2';
|
||||
document.body.appendChild(target2);
|
||||
switcher1 = new ol.control.LayerSwitcher();
|
||||
switcher2 = new ol.control.LayerSwitcher();
|
||||
map1 = new ol.Map({
|
||||
target: target1,
|
||||
layers: [
|
||||
new ol.layer.Group({
|
||||
title: 'Base',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
title: 'Foo',
|
||||
type: 'base',
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Too',
|
||||
type: 'base',
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Bar',
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
}),
|
||||
],
|
||||
controls: [switcher1]
|
||||
});
|
||||
map2 = new ol.Map({
|
||||
target: target2,
|
||||
layers: [
|
||||
new ol.layer.Group({
|
||||
title: 'Base',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
title: 'Foo',
|
||||
type: 'base',
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Too',
|
||||
type: 'base',
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
})
|
||||
]
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: 'Bar',
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: ol.tilegrid.createXYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
}),
|
||||
],
|
||||
controls: [switcher2]
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
document.body.removeChild(target1);
|
||||
document.body.removeChild(target2);
|
||||
target1 = null;
|
||||
target2 = null;
|
||||
switcher1 = null;
|
||||
switcher2 = null;
|
||||
map1 = null;
|
||||
map2 = null;
|
||||
});
|
||||
|
||||
describe('Layer IDs are unique', function() {
|
||||
it('Inputs for layers with the same title in different maps will have different IDs', function() {
|
||||
switcher1.showPanel();
|
||||
switcher2.showPanel();
|
||||
var bar1Id = jQuery('#map1 .layer-switcher label:contains("Bar")').siblings('input').attr('id');
|
||||
var bar2Id = jQuery('#map2 .layer-switcher label:contains("Bar")').siblings('input').attr('id');
|
||||
expect(bar1Id).to.not.equal(bar2Id);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns the Layer instance that has the given title
|
||||
*/
|
||||
function getLayerByTitle(map, title) {
|
||||
var layer = null;
|
||||
ol.control.LayerSwitcher.forEachRecursive(map, function(lyr) {
|
||||
if (lyr.get('title') && lyr.get('title') === title) {
|
||||
layer = lyr;
|
||||
return;
|
||||
}
|
||||
});
|
||||
return layer;
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
# OpenLayers LayerSwitcher
|
||||
|
||||
Grouped layer list control for an OpenLayer v3/v4 map.
|
||||
|
||||
All layers should have a `title` property and base layers should have a `type` property set to `base`. Group layers (`ol.layer.Group`) can be used to visually group layers together. See [examples/layerswitcher.js](examples/layerswitcher.js) for usage.
|
||||
|
||||
## Examples
|
||||
|
||||
The examples demonstrate usage and can be viewed online thanks to [RawGit](http://rawgit.com/):
|
||||
|
||||
* [Basic usage](http://rawgit.com/walkermatt/ol3-layerswitcher/master/examples/layerswitcher.html)
|
||||
* Create a layer switcher control. Each layer to be displayed in the layer switcher has a `title` property as does each Group; each base map layer has a `type: 'base'` property.
|
||||
* [Add layer](http://rawgit.com/walkermatt/ol3-layerswitcher/master/examples/addlayer.html)
|
||||
* Add a layer to an existing layer group after the layer switcher has been added to the map.
|
||||
* [Scrolling](http://rawgit.com/walkermatt/ol3-layerswitcher/master/examples/scroll.html)
|
||||
* Demonstrate the panel scrolling vertically, control the height of the layer switcher by setting the `max-height` (see [examples/scroll.css](examples/scroll.css)) and it's position relative to the bottom of the map (see the `.layer-switcher.shown` selector in [src/ol3-layerswitcher.css](src/ol3-layerswitcher.css)).
|
||||
* [Browserify](examples/browserify/)
|
||||
* Example of using ol3-layerswitcher with Browserify (see [examples/browserify/README.md](examples/browserify/README.md) for details of building.
|
||||
|
||||
The source for all examples can be found in [examples](examples).
|
||||
|
||||
## Tests
|
||||
|
||||
To run the tests you'll need to install the dependencies via `npm`. In the root of the repository run:
|
||||
|
||||
npm install
|
||||
|
||||
Then run the tests by opening [test/index.html](test/index.html) in a browser.
|
||||
|
||||
## API
|
||||
|
||||
{% for class in classes -%}
|
||||
|
||||
### `new {{ class.longname }}({{ class.signature }})`
|
||||
|
||||
{{ class.description }}
|
||||
|
||||
#### Parameters:
|
||||
|
||||
|Name|Type|Description|
|
||||
|:---|:---|:----------|
|
||||
{% for param in class.params %}|`{{ param.name }}`|`{{ param.type.names[0] }}`| {{ param.description }} |{% endfor %}
|
||||
|
||||
#### Extends
|
||||
|
||||
`{{ class.augments }}`
|
||||
|
||||
#### Methods
|
||||
|
||||
{% for method in class.methods -%}
|
||||
##### `{% if method.scope == 'static' %}(static) {{ class.longname }}.{% endif %}{{ method.name }}({{ method.signature }})`
|
||||
|
||||
{{ method.description }}
|
||||
|
||||
{% if method.params -%}
|
||||
###### Parameters:
|
||||
|
||||
|Name|Type|Description|
|
||||
|:---|:---|:----------|
|
||||
{% for param in method.params -%}
|
||||
|`{{ param.name }}`|`{{ param.type.names[0] }}`| {{ param.description }} |
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
{%- endfor %}
|
||||
{%- endfor -%}
|
||||
|
||||
## License
|
||||
|
||||
MIT (c) Matt Walker.
|
||||
|
||||
## Also see
|
||||
|
||||
If you find the layer switcher useful you might also like the
|
||||
[ol3-popup](https://github.com/walkermatt/ol3-popup).
|
||||
Loading…
Reference in New Issue