43:["$","title",null,{"children":"OpenLayers v6 blend mode and filters | cieloazul310 | Observable"}] 4b:[] 47:{"id":"27817d848f037a82","slug":"openlayers-v6-blend-mode-and-filters","title":"OpenLayers v6 blend mode and filters","thumbnail":"bba5bd4e950116e9fa32869f5a27fe66d0819148960d8bd85daca8ac6ddfd7ef","access_level":"public","create_time":"$D2021-02-01T04:57:24.772Z","update_time":"$D2026-07-14T08:45:54.437Z","view_time":null,"first_public_time":"$D2021-02-01T10:37:43.603Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e82eed073d2fc192","login":"cieloazul310","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9ef77c389406bdc04a08e367d4ada8b0cada757449082e965889c87081e34c9e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":74,"publish_version":74,"role":null,"authored":false,"authors":[{"type":"individual","id":"d37d4d0c3d141a01","login":"cieloazul310","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9ef77c389406bdc04a08e367d4ada8b0cada757449082e965889c87081e34c9e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d37d4d0c3d141a01","login":"cieloazul310","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9ef77c389406bdc04a08e367d4ada8b0cada757449082e965889c87081e34c9e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"OpenLayers v6 blend mode and filters","cells":[{"id":0,"value":"md`# OpenLayers v6 blend mode and filters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`OpenLayers v6 で地図の合成とフィルタを設定する方法のデモ`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`mix-blend-mode: **${blend}**
filter: **${filter}**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof blend = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof filter = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof map = {\n const target = html`

`;\n yield target; // Give the container dimensions.\n \n //cjstd.setProperties('className', blend);\n \n const map = target.value = new ol.Map({\n layers: [relief, cjstd],\n target,\n view: new ol.View({\n center: ol.proj.fromLonLat([140.46, 36.4]),\n zoom: 10\n })\n });\n invalidation.then(() => map.dispose());\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"relief = new ol.layer.Tile({\n source: new ol.source.XYZ({\n url: 'https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png',\n attributions: '国土地理院',\n }),\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"cjstd = new ol.layer.Tile({\n className: `${blend} ${filter}`,\n source: new ol.source.XYZ({\n url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',\n attributions: '国土地理院',\n }),\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"ol = {\n // OpenLayers doesn’t publish a build to npm. :(\n const ol = await require(\"https://openlayers.org/en/v6.5.0/build/ol.js\").catch(() => window.ol);\n ol.css = document.head.appendChild(html``);\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 42:null